!
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
+ many more
!Communication
?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
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
Recommended
![SwimTrain: Exploring Exergame Design for Group Fitness … · the “peephole” design concept [14]. Further, we iteratively prototype SwimTrain through a user-centered design process](https://img.pdfslide.us/doc/110x75/5ecb131bc78cbc769f45942f/swimtrain-exploring-exergame-design-for-group-fitness-the-aoepeepholea-design.jpg)
