Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
Web design process
Mariana MorrisHead of Design at Oxford Computer Consultants
UX Oxford | Talking DesignIllustration:: http://www.profitablesites.co.uk/wp-content/uploads/2013/01/web-design-hull.png
Web design process
1. Sketching
Tools: Pen & paper; Whiteboard
3. Visual design
Tools: Photoshop, Illustrator, Sketch
4. Frontend development
Tools: Sublime (or Atom or Textmate)
The who’s who of web design
Photo by cxpartners.co.uk
Project manager
Account manager
User experience designer / Interaction designer
Visual designer
Illustrator
Frontend developers
Backend developers
Testers
Photo: http://mynameismartin.com/portfolio/
ToolsDesign:• Photoshop• Illustrator• Sketch
Wireframes:• Axure• Balsamic• Mockingbird
Front-end development:• Sublime• Atom• Textmate
Backeend developers:• Sublime• Vim• Eclipse
Learn more
Articles and books:
• Smashing magazine• A list apart• Don’t make me think, Steve Krug• 5 Simple Steps
Courses:• Tree house - online courses• General Assembly• CSS tricks
For inspiration:• dribbble.com• behance.net• Site Inspire• land-book.com
A few tips
• Good typography (Google fonts, Typecast)
• Twitter Bootstrap (CSS framework, responsive)
• The Noun Project for icons
• Inspect Element