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

1. Stacy
Kvernmo
!
@funstacy
!
WebDevStudios

2. !
Looks good but…“ ”

3. !
Looks good but lets
make the logo bigger
“
”

8. it needs to
pop
“
”

11. Clients
don't know how
to be good clients

12. 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
“
”

13. Web Design is
95%
Typography

16. Contrastis pretty cool

19. being subtle is also cool

20. betterbad

21. design
in the
browser

22. ?
design
in the
browser

25. Items in these
PSD files may
appear different
in real life
!

28. + many more

29. Let’s change the phrase
“designing in the browser”
to “deciding in the browser”
- Dan Moll

30. clients
need
visuals
mood boards!
styletil.es!
webstyl.es!
interactivestyletiles.com
element collagesdanielmall.com/articles/rif-element-collages/
atomic design (and pattern lab)
http://bradfrostweb.com/blog/post/atomic-web-design/
http://demo.patternlab.io/

44. Smashing Magazine has a great comparison
http://bit.ly/RidLcM
A Few Responsive Web Design Tools

45. Adobe Edge Reflow CC

46. http://macaw.co/

47. What does this mean for our
design process?

48. 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)