The document advocates moving away from static design comps and towards more interactive prototypes. It argues that design comps provide an unrealistic representation of how a design will look and function. It suggests using techniques like style tiles, element collages, and functional prototypes in the browser to better communicate design intentions and engage clients in an iterative process. The goal is to design directly in the client's medium of the browser in order to align expectations and reduce wasted hours of work.

1. Nicole Mors
@nicolemors
nicolemors.com
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
DEATH OF THE DESIGN COMP: DOWN WITH THE KING
eroi.com

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

3. Meet the King.
The Comp
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00

4. We borrowed
the print proof,
and called it a
comprehensive
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

5. The comp is how we as web designers have
been able to communicate design intention.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00

6. Let’s Push
some Pixels.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00

7. Let’s get mobile.
BABY PAPA MAMA
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

8. Let’s get mobile.
10 hours + 10 hours + 10 hours
PAPA
COMP
MAMA
COMP
BABY
COMP
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

9. An arms race.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

10. 1 Million Hours
Pushing Pixels!
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

11. A NICE PICTURE OF A DIGITAL THING.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00
A picture is worth
1,000 words,
but what about
1,000 interactions?

12. We use these pictures to
communicate in two main ways.
CLIENTS DEVELOPERS
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

13. 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

14. 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

15. 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

16. Comp = Comprehensive = Lie
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

17. The Emperor’s New Clothes
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00

18. 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.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00

19. Designers are the Swindlers
Comps are the Cloth
and...
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00

20. the Client is the Emperor.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00

21. 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.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00

22. We need to be
the voice of the child.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00
Sight becomes Insight,
which, in turn, prompts action.

23. King + Screen
A match, not made in heaven.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

24. NOW WHAT?
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00

25. Change our vernacular
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00
Instead of comprehensive visualization we use
snapshots of time in a given viewport to
facilitate communication.

26. infinite canvas.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00
What we really are designing for is an
There are no fixed dimensions.
There are no breakpoints.

27. We are designing moments.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00
Let’s stop relying on pictures
and start having design discussions.

28. Hey, but wait...
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00
what are our deliverables then!?

29. Start with a design baseline.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00

30. Style Tiles
Present clients with interface choices
without making the investment in multiple
photoshop mockups.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

31. A Visual Web Design
Process for Clients &
the Responsive Web
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

32. Style Tile Template
Get creative, make lots of
them.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

33. Element Collages
A collection of elements.
Get feedback instead of sign off.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

34. Style Guide
A document detailing elements and modules.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

35. Style Guide
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

36. Move into the browser.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00

37. Ultimately,
everything we design
ends up in the browser.
Let’s start there.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

38. Designers, learn your medium.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00
Learn to code, at least the basics.
Tree House
Code Academy

39. Prototypes
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00
Functional Wireframes
An “In-browser” Comp

40. Layer in your design baselines.
LOGO NAVIGATION LINK NAVIGATION LINK
INTRODUCTION
EVENT
1
EVENT
2
EVENT
3
EVENT
4
EVENT
5
EVENT
6
EVENT DETAIL
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

41. Iterate, Iterate, Iterate
NAVIGATION LINK NAVIGATION LINK
EVENT
1
EVENT
2
INTRODUCTION
EVENT
3
EVENT
4
EVENT
5
EVENT
6
EVENT DETAIL
NAVIGATION LINK NAVIGATION LINK
INTRODUCTION
EVENT
1
EVENT
2
EVENT
3
EVENT
4
EVENT
5
EVENT
6
EVENT DETAIL
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

42. Use flat wireframes or sketches to communicate.
LOGO NAVIGATION LINK NAVIGATION LINK
INTRODUCTION
EVENT
1
EVENT
2
EVENT
3
EVENT
4
EVENT
5
EVENT
6
EVENT DETAIL
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

43. 2 Main Communication Goals
CLIENTS DEVELOPERS
Design Discussion
Interacting
Experiencing
Using the actual product
Working Collaboratively
Eliminating the
need for a “map”
Designing in the browser
using HTML + CSS
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

44. Educate our Clients
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00
The process, the benefits, the savings.

45. “It’s your job as a designer, and a
communication professional, to find the right
language to communicate with your client.”
Mike Monteiro
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00

46. “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.”
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00

47. Trust is at the core of change.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

48. Down with the King.
Thank you.
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS 00

49. Resources:
Samantha Warren's Style Tiles
Dan Mall's Element Collages
Style Guides
Responsive Comping
Treehouse
Typecast
Mike Montiero's "Design is a Job"
DEATH OF THE DESIGN COMP: DOWN WITH THE KING @NICOLEMORS
00