With the popularity of responsive design, it seems like the process and tools that have been used in the past are certainly not ideal for the present. So what is the best solution? Lets explore the available options and discuss how we communicate with our client as well as our developers in this ever changing world of web design.

1. !
Design Process
the
EXPLORING
Energetic
Adventurous

2. Stacy
Kvernmo
!
@funstacy
!
WebDevStudios

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

6. Adobe Edge Reflow CC

7. http://macaw.co/

10. + many more

11. !
Communication

12. invisionapp.com

13. ?
design
in the
browser

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

16. clients
need
visuals
mood boards!
styletil.es!
style prototypes!
interactivestyletiles.com
element collages
atomic design

40. Workflow

41. Sketch?

42. Prototype
in HTML
with real
content
LIES!

43. Design

44. Iterate

48. Style
Guides
Salesforce
FontShop
Mailchimp
Vox Media
Lonely Planet

49. demo.patternlab.com

50. Pears

51. stylifyme.com
Style Guide
Creators

52. Stacy +
Photoshop
Friends
Forever

53. Resources
Design Deliverable Process Methods
styletil.es
github.com/sparkbox/style-prototype
republicofquality.com/style-tiles
danielmall.com/articles/rif-element-collages
bradfrostweb.com/blog/post/atomic-web-design
!
Creating or maintaining style guides
patternlab.io
stylifyme.com
pea.rs
alistapart.com/article/creating-style-guides
Responsive Mock Up Tools
creative.adobe.com/products/reflow
macaw.co
froont.com
!
Photoshop Documentation
basecamp.com
invisionapp.com

54. Want to learn more?
stuffandnonsense.co.uk/blog/about/
time_to_stop_showing_clients_static_design_visuals
typecast.com/seminars/post-comp
danielmall.com/articles/visual-inventory
rif.superfriend.ly/designs/round2
product.voxmedia.com/2013/1/24/5426808/an-inside-peek-into-the-polygon-
design-process