death of the design comp, down with the king

DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS

Nicole Mors@nicolemors

nicolemors.com

DEATH OF THE DESIGN COMP: DOWN WITH THE KING

eroi.com


DEATH OF THE DESIGN COMP:



Meet the King.The Comp

00

DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

We borrowedthe print proof, and called it a comprehensive


The comp is how we as web designers have been able to communicate design intention.

00


Let’s Pushsome Pixels.

00


PAPA MAMABABY

Let’s get mobile.


PAPA COMP

MAMACOMP

Let’s get mobile.

10 hours10 hours10 hours + +

BABYCOMP


An arms race.


1 Million HoursPushing Pixels!


A NICE PICTURE OF A DIGITAL THING.

00

A picture is worth 1,000 words,

but what about1,000 interactions?


We use these pictures to communicate in two main ways.

CLIENTS DEVELOPERS


CLIENTS

Comps help clients to visualize the final product.

Comps help us to get sign off on our designs.


DEVELOPERS

Provides documentation of specs for a design.

At the best, is meant to be a road map for development.


The comp gives the designer and the client a false sense of control where

there is none.

Because unlike print, the comp never will be an exact representation of

how the design will be rendered in the browser.


Comp = Comprehensive = Lie


The Emperor’s New Clothes

00


Emperor gets swindled into thinking he’s wearing a fresh new outfit, when

really he is naked.

No one has the guts to tell him he’s naked because they don’t want to

seem stupid.

00


Designers are the SwindlersComps are the Cloth

and...

00


the Client is the Emperor.

00


Client hires designer to make them the best website. To do that the

designer creates comps, lacking all interaction and function.

No one tells the client this because everyone has the best intentions and

are stuck in traditional processes.

00


We need to bethe voice of the child.

00

Sight becomes Insight,which, in turn, prompts action.


King + Screen

A match, not made in heaven.


NOW WHAT?

00


Change our vernacular

00

Instead of comprehensive visualization we use snapshots of time in a given viewport to

facilitate communication.


infinite canvas.

00

What we really are designing for is an

There are no fixed dimensions.

There are no breakpoints.


We are designing moments.

00

Let’s stop relying on picturesand start having design discussions.


Hey, but wait...

00

what are our deliverables then!?


Start with a design baseline.

00


Present clients with interface choices without making the investment in multiple

photoshop mockups.

Style Tiles


A Visual Web Design Process for Clients & the Responsive Web


Style Tile TemplateGet creative, make lots of them.


A collection of elements.Get feedback instead of sign off.

Element Collages


A document detailing elements and modules.

Style Guide


Style Guide


Move into the browser.

00


everything we design ends up in the browser.

Ultimately,

Let’s start there.


Designers, learn your medium.

00

Learn to code, at least the basics.

Tree HouseCode Academy


Prototypes

00

Functional WireframesAn “In-browser” Comp


LOGO NAVIGATION LINK NAVIGATION LINK

INTRODUCTION

EVENT1

EVENT2

EVENT3

EVENT4

EVENT5

EVENT6

EVENT DETAIL

Layer in your design baselines.


Iterate, Iterate, Iterate

NAVIGATION LINK NAVIGATION LINK

EVENT1

EVENT2

EVENT3

EVENT4

EVENT5

EVENT6

INTRODUCTION

EVENT DETAIL

NAVIGATION LINK NAVIGATION LINK

INTRODUCTION

EVENT1

EVENT2

EVENT3

EVENT4

EVENT5

EVENT6

EVENT DETAIL


LOGO NAVIGATION LINK NAVIGATION LINK

INTRODUCTION

EVENT1

EVENT2

EVENT3

EVENT4

EVENT5

EVENT6

EVENT DETAIL

Use flat wireframes or sketches to communicate.


2 Main Communication Goals

CLIENTS DEVELOPERS

Design DiscussionInteracting

ExperiencingUsing the actual product

Working CollaborativelyEliminating theneed for a “map”

Designing in the browser using HTML + CSS


Educate our Clients

00

The process, the benefits, the savings.


“It’s your job as a designer, and a communication professional, to find the right language to communicate with your client.”

Mike Monteiro

00


“When you say a client doesn’t “get it” you might as well be saying, “I couldn’t figure out

how to get my point across. I am a lazy designer. Please take all my clients from me.”

00


Trust is at the core of change.


Down with the King.Thank you.


Resources:Samantha Warren's Style Tiles

Dan Mall's Element Collages

Style Guides

Responsive Comping

Treehouse

Typecast

Mike Montiero's "Design is a Job"

00

http://styletil.es/

http://styletil.es/

http://danielmall.com/articles/rif-element-collages/

http://danielmall.com/articles/rif-element-collages/

http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups




http://teamtreehouse.com/

http://teamtreehouse.com/

http://typecast.com/

http://typecast.com/

http://www.abookapart.com/products/design-is-a-job

http://www.abookapart.com/products/design-is-a-job