The Design Process



Things that I usually use and do when I participate on a project



by Monica Messaggi Kaya (June 2013)

Steps


Meeting with people
project manager / other developer

Sketches 
paper, post-it, napkin, paperbrowser

Low-fidelity Mockup 


Steps


High-fidelity Mockup 
(html prototype)

Interactions and Iteractions
present > fix/suggest/interrupt > develop > test

"Lather, rinse, repeat"

Inspiration



Inspiration

 
websites, magazines, leaflets, posters, adverts
typography (1 - 2), known brands, nature
and all that "designer talk"

COLOURlovers, Kueler, subtlepatterns

sidebar.iosmashing magazine

books/articles/tweets/search

Techniques

sketch 
(whole, part, detail)

copy & paste
("creative steal")

"foundation first" approach

tweaks 
(on existing or previous project designs)

TestING

User testing / Usability / Accessibility

What? colour, font, labels, images, content, layout, steps, screen sizes or devices, OSs, browsers (BrowserstackZurb apps) - "quick wins"

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 


"Stairway to Heaven"


'Cause you know sometimes words have two meanings.

Tools


Paper, paperbrowser
Balsamiq
SublimeText / Notepad++
Photoshop, Illustrator, Pixlr
Bootstrap, Foundation, Gumby (other FFF)
SASS/LESS/CSS pre-processors
 (compass.app, codekit, codepen.io)
jQuery, javascript
Opera Dragonfly, Firebug, "inspect element"
Zurb apps
Browserstack

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!!!)


Credits


"Inspiration" image:  August Empress
"Everything will be OK in the end" image: Harolds Planet (HP5267)
"That's all folks" image
These slides were created using http://slid.es/



http://monicams.com
@monicams
Made with Slides.com