Jared Ponchot's talk at DrupalCamp ATL 2012

1. Designing for
CONTENT
MANAGEMENT
SYSTEMS
DrupalCamp Atlanta 2012
Jared Ponchot // @jponch // Lullabot

2. Hello, my name is
JARED PONCHOT
... and I’m a web designer
@jponch on twitter & dribbble

3. Strategy | Design | Development

7. LIKE FATHER
LIKE SON

8. BEAUTIFUL
ALIGNMENT
PROPORTIONAL
GRID SYSTEM

9. DESIGN SCHOOL
‣ Taught me to think creatively
‣ Taught me to critique
‣ Taught me to create “design systems”

10. University
UNITY WITHIN DIVERSITY

13. “
Websites are systems rather
than pages and the sooner we
stop perceiving them as that,
the better.
— ANNA DEBENHAM

14. BOEING 777 COCKPIT

15. NOTICE THE CUP HOLDER!

16. DESIGNING SYSTEMS
FUNDAMENTALS
‣ Design on purpose
‣ Design for user types
‣ Design with a content model
‣ Hierarchy, Hierarchy, Hierarchy!

17. Plans are of little importance, but
planning is essential. — WINSTON CHURCHILL
Photo by Cecil Beaton, at 10 Downing Street, London, in 1940

18. Photo by R. D. Ward
As we know, There are known knowns. There are
things we know we know. We also know there are
known unknowns. That is to say, we know there
are some things we do not know.
— DONALD RUMSFELD

19. Photo by R. D. Ward
But there are also unknown unknowns,
the ones we don’t know we don’t know.
— DONALD RUMSFELD

20. DESIGNING ON PURPOSE
‣ Why does this site exist?
‣ Who would miss it if it goes away? Why?
‣ What opportunities does this website
present or create?
‣ What problems can ONLY be solved via
this website?

21. TEAM WORK!
Get at least the designer, developer,
project manager and product owner in a
room together, ask questions, take notes!

22. http://goo.gl/Zd5ZO

23. STATEMENT OF
DESIGN INTENT
‣ Keeps things on track when they’re going
off the rails
‣ Generates big ideas
‣ Helps simplify complexity
‣ Helps communicate and facilitate
organizational change

24. SETTING GOALS
‣ Be sure to identify both user goals and
organizational goals!
‣ Find ways to make them measurable

25. DESIGNING ON PURPOSE
‣ Knowing the unknowns
‣ Asking why
‣ Understanding & establishing goals
‣ Having a star to sail your ship by

26. http://crappyarchitecture.blogspot.com/2009/07/90-degrees-of-urinal.html

27. USER TYPES
‣ Identify each type of user who will use
the site.
‣ Document the kinds of tasks each type of
user will likely want to do on the site.
‣ Ask if those tasks remain the same for
each type on mobile, tablets and desktop.
What changes?

28. CONTENT CREATORS ARE
USERS TOO!
‣ Authors
‣ Editors
‣ Administrators
‣ Moderators

29. http://goo.gl/47ueE

30. THINK LIKE A CREATOR!
Put yourself in the shoes of the content
creators early and often and you will
better understand the correct structure
of the content, produce better designs,
and increase your likelihood for a
successful project and a happy client!

31. CONTENT FIRST!
right after user types & purpose

32. THE CONTENT MODEL
A detailed map of all the types of content
your project needs, the discrete attributes
that make up each content type, the
relationships between them, and the
contexts through which they’re displayed.

33. “
A content model helps clarify requirements
and encourages collaboration between the
designers, the developers creating the CMS,
and the content creators.
— RACHEL LOVINGER

34. CREATING A CONTENT
MODEL FOR DESIGN
‣ Audit Current Content
‣ Identify Content Types & Attributes
‣ Identify Relationships
‣ Identify Contexts

35. CONTENT AUDIT
‣ What’s there now?
‣ What’s going to get tossed?
‣ What’s going to be new?

36. CONTENT TYPES
‣ A discreet type of content (e.g. blog
post, event, recipe, etc.)
‣ The attributes that make up that type
of content (e.g. a recipe might have a
title, ingredients, lead description, full
description, preparation, etc.)

37. CONTENT TYPES
‣ Divorced from placement
‣ Watch for patterns

38. CONTENT TYPE GOALS!
‣ What types of users is this content for?
‣ What are the key questions for each user
type this content answers?

39. RELATIONSHIPS
‣ Identify parent/child relationships
‣ Identify sibling relationships

40. CONTEXTS
A context provides conditions and reactions
based upon a defined criteria. Conditions
might be things like sections, content types
or user types. Reactions might be things like
display a list of these attributes from a
particular type of content in a particular
section of the markup.

41. CONTEXTS
The original “responsive web design”

42. CONTEXTS
A context is a display that includes
discreet parts from various pieces and/or
types of content, displayed conditionally
based on things like relationships.

43. COMPONENTS
The actual bits that get displayed
depending upon the context.

44. COMPONENT HIERARCHY
‣ List out all the components displayed
within a given type or context.
‣ Assign a 1, 2 or 3 to each component.
‣ Evaluate your 1’s, 2’s and 3’s against
your key questions for each type or
context.

45. Responsive Bootcamp PVD 2012 #RBCPVD

46. COMPONENT HIERARCHY
‣ The more components you have, the
harder to keep the client from assigning
a 1 or 2 to LOTS of things.
‣ Iterate on the fly with the client. In
round one, don’t worry even if they give
everything a 1. Keep iterating until 10%
or less are a 1 for any screen.

54. “
redditpics.com

55. DON’T FORGET
VISUAL HIERARCHY!
Design is the conscious effort to
impose a meaningful order.
- VICTOR PAPANEK

57. GESTALT & OTHER
FUNDAMENTALS
‣ position ‣ contrast
‣ proportion ‣ color
‣ proximity ‣ isomorphism
‣ symmetry ‣ unity
‣ similarity ‣ pause
‣ alignment

58. THE PSYCHOLOGY OF VISUAL
HIERARCHY
Gestalt psychology was founded by Max
Wertheimer in 1912 and expanded upon by
others like Kurt Koffka.
Gestalt psychology is based on the observation
that we often experience things that are not a
part of our simple sensations.

59. Especially visually, the whole is often
more than the sum of its parts.

60. POSITION
1
2 3

61. POSITION
E U H Y D A
S R I O T N
A C

62. POSITION
C A N Y O U
R E A D T H
I S

63. PROPORTION

64. PROPORTION
2
1
3

66. PROXIMITY
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

67. PROXIMITY
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

68. PROXIMITY
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

69. PROXIMITY
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

70. PROXIMITY

71. PROXIMITY

72. PROXIMITY

76. funnysigns.net

77. SYMMETRY
When we perceive objects, we tend to perceive
them as symmetrical shapes that form around
their center.
{ }{ }{ }

78. SYMMETRY
When we perceive objects, we tend to perceive
them as symmetrical shapes that form around
their center.
{ } { } { }

79. SYMMETRY
When we perceive objects, we tend to perceive
them as symmetrical shapes that form around
their center.
{ } { } { }

80. SIMILARITY
Things that are similar are perceived to be more
related than things that are dissimilar.

81. SIMILARITY
Things that are similar are perceived to be more
related than things that are dissimilar.

82. SIMILARITY
Things that are similar are perceived to be more
related than things that are dissimilar.

83. ALIGNMENT

84. ALIGNMENT

85. CONTRAST

86. COLOR & VISUAL IMPORTANCE
‣ Warm colors stand out
‣ Cool colors recede

87. ISOMORPHISM

88. Aoccdrnig to rscheearch at Cmabrigde
uinervtisy, it deosn't mttaer waht oredr the
ltteers in a wrod are, the olny iprmoetnt tihng
is taht the frist and lsat ltteres are at the rghit
pclae. The rset can be a tatol mses and you can
sitll raed it wouthit a porbelm. Tihs is bcuseae
we do not raed ervey lteter by it slef but the
wrod as a wlohe.

89. According to a research at Cambridge
University, it doesn't matter in what order the
letters in a word are, the only important thing
is that the first and last letter be at the right
place. The rest can be a total mess and you can
still read it without problem. This is because
the human mind does not read every letter by
itself but the word as a whole.

90. Surprise amplifies our
“
emotional response.
When we anticipate a moment, the
emotional response is diluted across time.
A moment of surprise compresses emotion
into a split second, making our reaction
more intense, and creating a strong
imprint on our memory.
- AARRON WALTER // DESIGNING FOR EMOTION

91. PATTERNS ARE
IMPORTANT!

92. http://www.jwz.org/blog/2006/04/soviet-playground-sculptures-apparently

93. UNITY

94. UNITY

95. PAUSE

96. ADDING BY LEAVING OUT:
THE POWER OF PAUSE
http://lb.cm/pause

97. TIPS &
TRICKS

98. A NIFTY TRICK

99. A NIFTY TRICK

100. A NIFTY TRICK

103. IMPOSE A
MEANINGFUL ORDER
‣ Design on purpose
‣ Design for user types
‣ Design with a content model
‣ Hierarchy, Hierarchy, Hierarchy!

104. LETS HAVE FUN
WITH THIS THING!
JARED PONCHOT
@jponch on twitter & dribbble