mortality of design: death of the design comp

eROI PRESENTS:

Friday, OCT 8 3–5PM

NICOLE MORS, eROI DESIGN LEADDESIGN WEEK PORTLANDMORTALITYOFDESIGN.COM

HOSTED BY eROIMORTALITYOFDESIGN.COM

FOLLOW ALONG WITH THE

DEATH OF THE DESIGN COMP: DOWN WITH THE KING 00

@NICOLEMORS


Design Week Drinking Game

Take a drink every time you hear a Design buzzword FOR EXAMPLE:

INNOVATIONCOLLABORATIONAUTHENTICITYRESPONSIVE

THE INTERNET OF THINGSACCOUNTABILITY

VIEWPORTCONTENT STRATEGY

REVOLUTIONIZEENGAGEMENT

FLUIDDEATH OF THE DESIGN COMP: DOWN WITH THE KING 00


DEATH OF THE DESIGN COMP:


NICOLE MORS, DESIGN LEAD


Meet the King.The Comp

00DEATH OF THE DESIGN COMP: DOWN WITH THE KING


Let’s Pushsome Pixels.



00

PAPA MAMA BABY

Let’s get mobile.

DEATH OF THE DESIGN COMP: DOWN WITH THE KING


00

PAPA COMPMAMACOMP

BABYCOMP

Let’s get mobile.10 hours10 hours10 hours + +



00

An arms race.

+100 hours? +10 hours



00

1 Million HoursPushing Pixels!



A NICE PICTURE OF A DIGITAL THING.


A picture is worth 1,000 words,

but what about1,000 interactions?


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

intention.



00

We use these pictures to communicate in two main ways.

CLIENTS DEVELOPERS



00

CLIENTSComps help clients to visualize the final product.

Comps help us to get sign off on our designs.



00

DEVELOPERSProvides documentation of specs for a design.

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



00

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.



The Emperor’s New Clothes



Designers are the SwindlersComps are the Cloth

and...



the Client is the Emperor.



We need to bethe voice of the child.

00

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



00

King + Screen

A match, not made in heaven.



NOW WHAT?



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 making picturesand start having design discussions.



Hey, but wait...

00

what are our deliverables then!?



Style Tiles




A Visual Web Design Process for Clients & the Responsive Web


Prototypes

00

Functional WireframesAn “In-browser” Comp



00

LOGO NAVIGATION LINK NAVIGATION LINK

INTRODUCTION

EVENT1

EVENT2

EVENT3

EVENT4

EVENT5

EVENT6

EVENT DETAIL



00

Iterate, Iterate, IterateNAVIGATION 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



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 HouseTypecast



00

2 Main Communication Goals

CLIENTS DEVELOPERS


Design DiscussionInteracting

ExperiencingUsing the actual product

Working CollaborativelyEliminating the

need 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



“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

Down with the King.



Thank you.

DEATH OF THE DESIGN COMP: DOWN WITH THE KING 00


THANK YOU TO OUR SPONSORS

24