Upgrade to Pro — share decks privately, control downloads, hide ads and more …

No More Static Comps: Toward a Modern Design Process

7e77c2384582ea88b2e08f5c4f3aa1e1?s=47 Eric Browning
January 02, 2015

No More Static Comps: Toward a Modern Design Process

The design landscape is much broader now than ever before: apps for devices of various sizes, platforms, and resolutions have led the industry to adopt responsive design. Still though, static pixel-perfect comps are used as the primary touchpoint between designers and decision makers. Learn what needs to be done to adapt each step of the design process to convey scaling, device context, motion, and interaction to give a more realistic idea of how the designs work in a more collaborative way.

7e77c2384582ea88b2e08f5c4f3aa1e1?s=128

Eric Browning

January 02, 2015
Tweet

Transcript

  1. No More Static Comps - Eric Browning

  2. Design is merely the set of decisions you either make

    or set aside when you create 
 your product. You cannot not design. … “
  3. Good design will contribute to your product being understandable, credible

    and valuable. Bad design leads to the opposite… Erika Hall, Mule Design ”
  4. Toward a Modern 
 Design Process by Eric Browning

  5. About Me 2015 2010 2005 Design and front-end development at

    several web agencies Art director for a small game company
  6. What’s our current process and why doesn’t it work? What

    can we do instead? What does this mean for designers moving forward? Overview
  7. Current Process Initial Meetings & Questions

  8. Current Process Design magic & ‘black box’ workflow

  9. None
  10. None
  11. None
  12. None
  13. None
  14. Too red? a Less caramel. a Make it pop! Current

    Process Feedback and changes
  15. Current Process Approval! What next…

  16. Current Process Let’s look at what’s wrong

  17. What’s Wrong Cost (time and $$) of all those comps

  18. What’s Wrong Not the best tools to iterate quickly

  19. What’s Wrong Failure to address other 
 devices and screen

    sizes
  20. What’s Wrong One Shot!

  21. There’s got to be a better way!

  22. A responsive design process v v v v v v

    v v
  23. Flexible & robust More deliverables Smaller & more focused v

    v v v
  24. Determine which problem you need to solve.

  25. 1.Research & background information

  26. None
  27. None
  28. 2. Copy/content strategy/writing tone

  29. Layout & Hierarchy 3.

  30. Many tools: Use what you know

  31. Mini-wireframes; focused on one element

  32. 4. Aesthetics Style tiles Establishing look & feel with context

    to web elements
  33. None
  34. None
  35. Mood boards Broad look & feel

  36. Element collage Detailed explorations into style

  37. None
  38. Typography 5.

  39. None
  40. Interaction User flow Device preview 6.

  41. WYSIWYG to HTML tools 
 for rapid prototyping

  42. Breakpoint settings for responsiveness

  43. None
  44. So What’s the Final Deliverable?

  45. Style Guides

  46. None
  47. None
  48. What does this mean? Where do we go from here?

  49. Bad News Into the unknown

  50. Good News Good News! Pays off in many ways

  51. Process for an unknown future

  52. Collaborative Victory

  53. More value You Your work

  54. @browningeric

  55. https://www.fontshop.com/styleguide/globals http://www.google.com/design/spec/material-design/introduction.html http://webdesign.tutsplus.com/articles/a-beginners-guide-to- wireframing--webdesign-7399 http://styletil.es/ http://brent-larue.com/wp-content/uploads/2014/08/style-tile-v1.jpg http://www.sharepointdan.com/wp-content/uploads/2009/03/ balsamiq-piratenosh.jpg http://basecraft.com/blog/ http://rif.superfriend.ly/

    http://styleguides.io/ https://unsplash.com/ http://nos.twnsnd.co/ http://startupstockphotos.com/ http://www.gratisography.com/ http://magdeleine.co/ http://sophieshepherd.com/2012/12/evolving-designer.html ttp://unmatchedstyle.com/podcast/prototyping-style-by-ben- callahan-beyond-the-desktop-conference.php http://daverupert.com/2013/04/responsive-deliverables/ References Stock Images Further Reading https://www.omnigroup.com/omnigraffle http://www.axure.com/ http://bohemiancoding.com/sketch/ http://macaw.co/ https://creative.adobe.com/products/reflow http://www.invisionapp.com/ http://patternlab.io/ http://framerjs.com/