no more static comps - toward a modern design process

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/