exploring the design process #wcchi

Stacy Kvernmo

!@funstacy !

WebDevStudios

!

Looks good but…“ ”

!

Looks good but lets make the logo bigger“

”

it needs to pop

“”

Clients don't know how

to be good clients

Clients will always ask you to make their logo bigger, prescribe solutions, and ask you to do things that will make you smack your forehead. You can roll your eyes at how much they don’t

understand about design or you can roll up your sleeves and begin practicing your craft by

helping them clarify what they need. !

- Mike Monteiro, Design is a Job

“

”

Web Design is

95% Typography

Contrast is pretty cool

being subtle is also cool

betterbad

design in the

browser

?design in the

browser

Items in these PSD files may appear different in real life

!

+ many more

Let’s change the phrase “designing in the browser” to “deciding in the browser”

- Dan Moll

clients need

visuals

mood boards!

styletil.es !

webstyl.es!

interactivestyletiles.comelement collages danielmall.com/articles/rif-element-collages/

atomic design (and pattern lab) http://bradfrostweb.com/blog/post/atomic-web-design/ http://demo.patternlab.io/

Smashing Magazine has a great comparison http://bit.ly/RidLcM

A Few Responsive Web Design Tools

Adobe Edge Reflow CC

http://macaw.co/

What does this mean for our design process?

QA Checklist !Run theme through Theme Check plugin Site wide design elements (including formatting defaults: h1-h6, blockquotes, captions, image alignments, galleries) Design Review - check against PSD Test all forms 404 page Search result page Archives page (author, categories, tags, other) Favicon Open Graph Info Login Page? customized? Bug testing

Cross browser compatibility test in: IE8 IE9 IE10 IE11 Firefox - Mac Firefox - PC Safari Chrome - Mac Chrome - PC !Device Testing: Tablet: landscape & portrait (Nexus 7, iPad(s), Kindle, others?) Android (portrait and landscape) iPhone (portrait and landscape) Windows Phone (portrait and landscape)