Exploring the design process #wcchi

48
Stacy Kvernmo @funstacy WebDevStudios

description

What is the best way to handle the design process? Photoshop, design in the browser, handling responsive design all while handling client expectations.

Transcript of Exploring the design process #wcchi

Page 1: Exploring the design process #wcchi

Stacy Kvernmo

!@funstacy !

WebDevStudios

Page 2: Exploring the design process #wcchi

!

Looks good but…“ ”

Page 3: Exploring the design process #wcchi

!

Looks good but lets make the logo bigger“

Page 4: Exploring the design process #wcchi
Page 5: Exploring the design process #wcchi
Page 6: Exploring the design process #wcchi
Page 7: Exploring the design process #wcchi
Page 8: Exploring the design process #wcchi

it needs to pop

“”

Page 9: Exploring the design process #wcchi
Page 10: Exploring the design process #wcchi
Page 11: Exploring the design process #wcchi

Clients don't know how

to be good clients

Page 12: Exploring the design process #wcchi

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

Page 13: Exploring the design process #wcchi

Web Design is

95% Typography

Page 14: Exploring the design process #wcchi
Page 15: Exploring the design process #wcchi
Page 16: Exploring the design process #wcchi

Contrast is pretty cool

Page 17: Exploring the design process #wcchi
Page 18: Exploring the design process #wcchi
Page 19: Exploring the design process #wcchi

being subtle is also cool

Page 20: Exploring the design process #wcchi

betterbad

Page 21: Exploring the design process #wcchi

design in the

browser

Page 22: Exploring the design process #wcchi

?design in the

browser

Page 23: Exploring the design process #wcchi
Page 24: Exploring the design process #wcchi
Page 25: Exploring the design process #wcchi

Items in these PSD files may appear different in real life

!

Page 26: Exploring the design process #wcchi
Page 27: Exploring the design process #wcchi
Page 28: Exploring the design process #wcchi

+ many more

Page 29: Exploring the design process #wcchi

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

- Dan Moll

Page 30: Exploring the design process #wcchi

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/

Page 31: Exploring the design process #wcchi
Page 32: Exploring the design process #wcchi
Page 33: Exploring the design process #wcchi
Page 34: Exploring the design process #wcchi
Page 35: Exploring the design process #wcchi
Page 36: Exploring the design process #wcchi
Page 37: Exploring the design process #wcchi
Page 38: Exploring the design process #wcchi
Page 39: Exploring the design process #wcchi
Page 40: Exploring the design process #wcchi
Page 41: Exploring the design process #wcchi
Page 42: Exploring the design process #wcchi
Page 43: Exploring the design process #wcchi
Page 44: Exploring the design process #wcchi

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

A Few Responsive Web Design Tools

Page 45: Exploring the design process #wcchi

Adobe Edge Reflow CC

Page 46: Exploring the design process #wcchi

http://macaw.co/

Page 47: Exploring the design process #wcchi

What does this mean for our design process?

Page 48: Exploring the design process #wcchi

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)