!

Design Processthe

EXPLORING

EnergeticAdventurous

Stacy Kvernmo

!@funstacy !

WebDevStudios

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

A Few Responsive Web Design Tools

Adobe Edge Reflow CC

http://macaw.co/

+ many more

!Communication

invisionapp.com

?design in the

browser

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

- Dan Moll

clients need

visuals

mood boards!

styletil.es !

style prototypes!

interactivestyletiles.comelement collagesatomic design

Workflow

Sketch?

Prototypein HTMLwith real content

LIES!

Design

Iterate

Style GuidesSalesforce FontShop Mailchimp Vox Media Lonely Planet

demo.patternlab.com

Pears

stylifyme.com

Style Guide Creators

Stacy + Photoshop

Friends Forever

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

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