1.
!
Design Process
the
EXPLORING
Energetic
Adventurous

2.
Stacy
Kvernmo
!
@funstacy
!
WebDevStudios

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

4.
Adobe Edge Reflow CC

5.
http://macaw.co/

6.
+ many more

7.
!
Communication

8.
invisionapp.com

9.
?
design
in the
browser

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

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

12.
Workflow

13.
Sketch?

14.
Prototype
in HTML
with real
content
LIES!

15.
Design

16.
Iterate

17.
Style
Guides
Salesforce
FontShop
Mailchimp
Vox Media
Lonely Planet

18.
demo.patternlab.com

19.
Pears

20.
stylifyme.com
Style Guide
Creators

21.
Stacy +
Photoshop
Friends
Forever

22.
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

23.
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