Upload
stacy-kvernmo
View
109
Download
2
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
!
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
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