The Design Process

This is a basic round-up of the design process that I usually carry out when a project arrives and I am involved on it. Not all elements are used all the time, but the majority of them are quite consistent. (2013)

Transcript

1. THE DESIGN PROCESS THE DESIGN PROCESS Things that I usually use and do when I participate on a project by Monica Messaggi Kaya (June 2013)
2. STEPS STEPS Meeting with people project manager / other developer Sketches paper, post-it, napkin, paperbrowser Low-fidelity Mockup ( ) balsamiq Blockbooks example
3. STEPS STEPS High-fidelity Mockup (html prototype) , , , Bootstrap Foundation Gumby others Interactions and Iteractions present > fix/suggest/interrupt > develop > test "Lather, rinse, repeat"
4. INSPIRATION INSPIRATION
5. INSPIRATION INSPIRATION , magazines, leaflets, , , typography ( - ), known , and all that "designer talk" , , , books/articles/tweets/search websites posters adverts 1 2 brands nature COLOURlovers Kueler subtlepatterns sidebar.io smashing magazine
6. TECHNIQUES TECHNIQUES sketch (whole, part, detail) copy & paste ("creative steal") "foundation first" approach tweaks (on existing or previous project designs)
7. TESTING TESTING User testing / Usability / Accessibility What? colour, font, labels, images, content, layout, steps, screen sizes or devices, OSs, browsers ( , ) - "quick wins" Browserstack Zurb apps When? ideally often and early Who? colleagues, project managers, users, ARACU Why? catch possible problems, discover use of feature, identify compatible devices/browsers, make it a good experience
8. "Stairway to Heaven" 'Cause you know sometimes words have two meanings.
9. TOOLS TOOLS Paper, / , , , (other ) / /CSS pre-processors ( , , ) , javascript Opera , , "inspect element" paperbrowser Balsamiq SublimeText Notepad++ Photoshop, Illustrator Pixlr Bootstrap Foundation Gumby FFF SASS LESS compass.app codekit codepen.io jQuery Dragonfly Firebug Zurb apps Browserstack
10. THOUGHTS THOUGHTS The design process has a flow but doesn't need to have all steps Get inspired! We all have blocks (designer or developer) Use the tool you are comfortable with, but try to use the "right tool for the task" Test, even with just 3-5 people (note to self!!!)
12. CREDITS CREDITS "Inspiration" image: August Empress "Everything will be OK in the end" image: (HP5267) Harolds Planet image "That's all folks" These slides were created using http://slid.es/ http://monicams.com @monicams