no more static comps - toward a modern design process
TRANSCRIPT
![Page 1: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/1.jpg)
Design is merely the set of decisions you either make or set aside when you create your product.
You cannot not design. …
“
![Page 2: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/2.jpg)
Good design will contribute to your product being understandable, credible and valuable.
Bad design leads to the opposite…
Erika Hall, Mule Design
”
![Page 3: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/3.jpg)
Toward a Modern Design Process
by Eric Browning
![Page 4: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/4.jpg)
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
![Page 5: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/5.jpg)
About Me
2015 2010 2005
Design and front-end development at several web agencies
Art director for a small game company
![Page 6: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/6.jpg)
Current Process Initial Meetings & Questions
![Page 7: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/7.jpg)
Current Process Design magic & ‘black box’ workflow
![Page 8: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/8.jpg)
![Page 9: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/9.jpg)
![Page 10: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/10.jpg)
![Page 11: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/11.jpg)
![Page 12: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/12.jpg)
![Page 13: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/13.jpg)
Too red?
Less caramel.
Make it pop!
Current Process
Feedback and changes
![Page 14: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/14.jpg)
Current ProcessApproval! What next…
![Page 15: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/15.jpg)
Current Process
Let’s look at what’s wrong
![Page 16: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/16.jpg)
What’s Wrong
Cost (time and $$) of all those comps
![Page 17: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/17.jpg)
What’s Wrong
Not the best tools to iterate quickly
![Page 18: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/18.jpg)
What’s Wrong
Failure to address other devices and screen sizes
![Page 19: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/19.jpg)
One Shot!
![Page 20: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/20.jpg)
There’s got to be a better way!
![Page 21: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/21.jpg)
A responsive design process
v
v
v
v v
v
v
v
![Page 22: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/22.jpg)
Flexible & robust
More deliverables
Smaller & more focused
vv v
v
![Page 23: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/23.jpg)
Determine which problem you need to solve.
![Page 24: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/24.jpg)
1.Research & background information
![Page 25: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/25.jpg)
![Page 26: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/26.jpg)
![Page 27: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/27.jpg)
2. Copy/content strategy/writing tone
![Page 28: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/28.jpg)
Layout & Hierarchy
3.
![Page 29: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/29.jpg)
Many tools
![Page 30: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/30.jpg)
![Page 31: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/31.jpg)
4. Aesthetics
Style tilesEstablishing look & feel with
context to web elements
![Page 32: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/32.jpg)
![Page 33: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/33.jpg)
Mood boardsBroad look & feel
![Page 34: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/34.jpg)
Element collageDetailed explorations into style
![Page 35: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/35.jpg)
![Page 36: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/36.jpg)
Element collage approach, but focused on one element
![Page 37: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/37.jpg)
Typography5.
![Page 38: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/38.jpg)
Interaction User flow Device preview
6.
![Page 39: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/39.jpg)
WYSIWYG to HTML tools for rapid prototyping
![Page 40: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/40.jpg)
Breakpoint settings for responsiveness
![Page 41: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/41.jpg)
![Page 42: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/42.jpg)
Prototype on devices without knowing native code
![Page 43: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/43.jpg)
So What’s the Final Deliverable?
![Page 44: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/44.jpg)
Style Guides
![Page 45: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/45.jpg)
![Page 46: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/46.jpg)
![Page 47: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/47.jpg)
Atomic design
![Page 48: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/48.jpg)
What does this mean? Where do we go from here?
![Page 49: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/49.jpg)
Bad News Into the unknown
![Page 50: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/50.jpg)
Good News
Good News!
![Page 51: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/51.jpg)
Process for an unknown future
![Page 52: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/52.jpg)
Collaborative Victory
![Page 53: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/53.jpg)
More value
You Your work
![Page 54: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/54.jpg)
www.coffeeandcode.com @browningeric
![Page 55: No More Static Comps - Toward a Modern Design Process](https://reader030.vdocuments.net/reader030/viewer/2022032616/55a6c8311a28ab531d8b45d9/html5/thumbnails/55.jpg)
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/