Post on 16-Jul-2015
transcript
Design is merely the set of decisions you either make or set aside when you create your product.
You cannot not design. …
“
Good design will contribute to your product being understandable, credible and valuable.
Bad design leads to the opposite…
Erika Hall, Mule Design
”
Toward a Modern Design Process
by Eric Browning
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
About Me
2015 2010 2005
Design and front-end development at several web agencies
Art director for a small game company
Current Process Initial Meetings & Questions
Current Process Design magic & ‘black box’ workflow
Too red?
Less caramel.
Make it pop!
Current Process
Feedback and changes
Current ProcessApproval! What next…
Current Process
Let’s look at what’s wrong
What’s Wrong
Cost (time and $$) of all those comps
What’s Wrong
Not the best tools to iterate quickly
What’s Wrong
Failure to address other devices and screen sizes
One Shot!
There’s got to be a better way!
A responsive design process
v
v
v
v v
v
v
v
Flexible & robust
More deliverables
Smaller & more focused
vv v
v
Determine which problem you need to solve.
1.Research & background information
2. Copy/content strategy/writing tone
Layout & Hierarchy
3.
Many tools
4. Aesthetics
Style tilesEstablishing look & feel with
context to web elements
Mood boardsBroad look & feel
Element collageDetailed explorations into style
Element collage approach, but focused on one element
Typography5.
Interaction User flow Device preview
6.
WYSIWYG to HTML tools for rapid prototyping
Breakpoint settings for responsiveness
Prototype on devices without knowing native code
So What’s the Final Deliverable?
Style Guides
Atomic design
What does this mean? Where do we go from here?
Bad News Into the unknown
Good News
Good News!
Process for an unknown future
Collaborative Victory
More value
You Your work
www.coffeeandcode.com @browningeric
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/