Designing for Content Management Systems

Designing for

CONTENT
MANAGEMENT
SYSTEMS

DrupalCamp Atlanta 2012
Jared Ponchot // @jponch // Lullabot

Hello, my name is

JARED PONCHOT
... and I’m a web designer

@jponch on twitter & dribbble

Strategy | Design | Development

BEAUTIFUL
ALIGNMENT

PROPORTIONAL
GRID SYSTEM

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

University
UNITY WITHIN DIVERSITY

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

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

Plans are of little importance, but
planning is essential. — WINSTON CHURCHILL

Photo by Cecil Beaton, at 10 Downing Street, London, in 1940

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

Photo by R. D. Ward

But there are also unknown unknowns,
the ones we don’t know we don’t know.
— DONALD RUMSFELD

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?

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

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

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

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

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

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?

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

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!

CONTENT FIRST!
right after user types & purpose

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.

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

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

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

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

CONTENT TYPES
‣ Divorced from placement
‣ Watch for patterns

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

RELATIONSHIPS
‣ Identify parent/child relationships
‣ Identify sibling relationships

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.

CONTEXTS
The original “responsive web design”

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.

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

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.

Responsive Bootcamp PVD 2012 #RBCPVD

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.

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

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

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.

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

POSITION
E U H Y D A

S R I O T N

A C

POSITION
C A N Y O U

R E A D T H

I S

PROXIMITY

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


PROXIMITY


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

{ }{ }{ }

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

{ } { } { }

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

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

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.

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.

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

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

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

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

LETS HAVE FUN
WITH THIS THING!

JARED PONCHOT
@jponch on twitter & dribbble

Designing for Content Management Systems

Recommended

Recommended

More Related Content

Similar to Designing for Content Management Systems

Similar to Designing for Content Management Systems (20)

Recently uploaded

Recently uploaded (20)

Designing for Content Management Systems