Exploring the Design Process

1,837 views

Published on

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.

Published in: Design
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,837
On SlideShare
0
From Embeds
0
Number of Embeds
60
Actions
Shares
0
Downloads
26
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

Exploring the Design Process

  1. 1. ! Design Process the EXPLORING Energetic Adventurous
  2. 2. Stacy Kvernmo ! @funstacy ! WebDevStudios
  3. 3. Smashing Magazine has a great comparison http://bit.ly/RidLcM A Few Responsive Web Design Tools
  4. 4. Adobe Edge Reflow CC
  5. 5. http://macaw.co/
  6. 6. + many more
  7. 7. ! Communication
  8. 8. invisionapp.com
  9. 9. ? design in the browser
  10. 10. Let’s change the phrase “designing in the browser” to “deciding in the browser” - Dan Moll
  11. 11. clients need visuals mood boards! styletil.es! style prototypes! interactivestyletiles.com element collages atomic design
  12. 12. Workflow
  13. 13. Sketch?
  14. 14. Prototype in HTML with real content LIES!
  15. 15. Design
  16. 16. Iterate
  17. 17. Style Guides Salesforce FontShop Mailchimp Vox Media Lonely Planet
  18. 18. demo.patternlab.com
  19. 19. Pears
  20. 20. stylifyme.com Style Guide Creators
  21. 21. Stacy + Photoshop Friends Forever
  22. 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. 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

×