Web design process - CyberChimp€¦ · Web design process. 1. Sketching Tools: Pen & paper;...
16
Web design process Mariana Morris Head of Design at Oxford Computer Consultants UX Oxford | Talking Design Illustration:: http://www.profitablesites.co.uk/wp-content/uploads/2013/01/web-design-hull.png
Transcript of Web design process - CyberChimp€¦ · Web design process. 1. Sketching Tools: Pen & paper;...
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
