Upload
nicole-mors
View
106
Download
1
Embed Size (px)
Citation preview
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: DOWN WITH THE KING @NICOLEMORS
DEATH OF THE DESIGN COMP:
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
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
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
The comp is how we as web designers have been able to communicate design intention.
00
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
Let’s Pushsome Pixels.
00
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
PAPA MAMABABY
Let’s get mobile.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
PAPA COMP
MAMACOMP
Let’s get mobile.
10 hours10 hours10 hours + +
BABYCOMP
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
An arms race.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
1 Million HoursPushing Pixels!
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
A NICE PICTURE OF A DIGITAL THING.
00
A picture is worth 1,000 words,
but what about1,000 interactions?
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
We use these pictures to communicate in two main ways.
CLIENTS DEVELOPERS
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
CLIENTS
Comps help clients to visualize the final product.
Comps help us to get sign off on our designs.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
DEVELOPERS
Provides documentation of specs for a design.
At the best, is meant to be a road map for development.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 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.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
Comp = Comprehensive = Lie
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
The Emperor’s New Clothes
00
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
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
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
Designers are the SwindlersComps are the Cloth
and...
00
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
the Client is the Emperor.
00
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
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
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
We need to bethe voice of the child.
00
Sight becomes Insight,which, in turn, prompts action.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
King + Screen
A match, not made in heaven.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
NOW WHAT?
00
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
Change our vernacular
00
Instead of comprehensive visualization we use snapshots of time in a given viewport to
facilitate communication.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
infinite canvas.
00
What we really are designing for is an
There are no fixed dimensions.
There are no breakpoints.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
We are designing moments.
00
Let’s stop relying on picturesand start having design discussions.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
Hey, but wait...
00
what are our deliverables then!?
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
Start with a design baseline.
00
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
Present clients with interface choices without making the investment in multiple
photoshop mockups.
Style Tiles
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
A Visual Web Design Process for Clients & the Responsive Web
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
Style Tile TemplateGet creative, make lots of them.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
A collection of elements.Get feedback instead of sign off.
Element Collages
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
A document detailing elements and modules.
Style Guide
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
Style Guide
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
Move into the browser.
00
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
everything we design ends up in the browser.
Ultimately,
Let’s start there.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
Designers, learn your medium.
00
Learn to code, at least the basics.
Tree HouseCode Academy
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
Prototypes
00
Functional WireframesAn “In-browser” Comp
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
LOGO NAVIGATION LINK NAVIGATION LINK
INTRODUCTION
EVENT1
EVENT2
EVENT3
EVENT4
EVENT5
EVENT6
EVENT DETAIL
Layer in your design baselines.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
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
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
LOGO NAVIGATION LINK NAVIGATION LINK
INTRODUCTION
EVENT1
EVENT2
EVENT3
EVENT4
EVENT5
EVENT6
EVENT DETAIL
Use flat wireframes or sketches to communicate.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
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
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
Educate our Clients
00
The process, the benefits, the savings.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
“It’s your job as a designer, and a communication professional, to find the right language to communicate with your client.”
Mike Monteiro
00
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
“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
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
Trust is at the core of change.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00
Down with the King.Thank you.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
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