An Event Apart: Designing for Content Management Systems

by Luke Wroblewski November 12, 2012

At An Event Apart in San Francisco CA 2012, Jared Ponchot walked through what you need to consider in order to effectively deliver content on the Web in his presentation Designing for Content Management Systems. Here's my notes from his talk:

  • Design school teaches you to: think creatively, critique effectively, and create systems. Creating university: unity within diversity.
  • Responsive design is ushering in a new era of design systems on the Web. We can’t design pages anymore.
  • Designing on purpose: understand why you are doing something, what are you trying to accomplish. Plans are of little importance but planning is essential. Know where you are trying to go.
  • A good discovery process will help you find things that you don’t know to look for. Ask: why does this site exist; who would miss it if it goes away; and what problems can only be solved by this site?
  • Ask these questions as a team: take notes, work together to understand the problem. Get together at the beginning of a project. Don’t segment teams by discipline. This results in disconnected messaging.
  • Develop a statement of purpose and set goals. Consider both organizational and customer goals. Determine how to measure if you are reaching those goals.
  • Design for user types: identify all the audiences you are trying to reach. Identify the values, motivations, tasks, and privileges for each user type. Prioritize the list of user types. Again, do this as team.
  • One of the most important roles of the designer is to prioritize things. That includes user types, content types, and more.
  • Content creators are users too: admins, editors, authors, and moderators.

Creating Content Models

  • Design with a content model: a content model is a detailed map of all the types of content your project needs.
  • Content modeling isn’t just for content strategists and information architects. Everyone on the team (developers, designers) can benefit from understanding it.
  • Start with a content audit. This could be as simple as a spreadsheet that captures existing content on a site.
  • Capture discrete content types and the attributes that make up that type of content.
  • Identify content types by looking for patterns. Make sure you separate content types from placement/display considerations (not a sidebar).
  • Set content type goals. Which user types is this content for, what are their goals when interacting with this type of content, what are the business goals for this content, and are there any conflicts in goals?
  • Find relationships between content by looking at parent/child and sibling pairings.
  • Context: provides conditions and reactions based upon a defined criteria. These could be sections, devices, displays, or more.
  • Components are the things displayed on the screen based on the context. Walk through different contexts, and list out all the components that need to be displayed in each context. Use key questions and user types to prioritize things.

Apply Hierarchy

  • Start with the most important bits of content and design out from there. Don’t start by designing the home page.
  • Hierarchy needs to be preserved when visual design is considered. Use the principles of design (esp. gestalt) to create the right balance of content in your designs.
  • Consider how to use: position, proportion, proximity, symmetry, similarity, alignment, contrast, color, isomorphism, unity, and pause.
  • Proportion: we notice big things quickly. Position: we make inferences based on location of elements. Proximity: has the ability to create visual relationships between elements, it can overpower other signals. Symmetry: the human brain wants wholeness. Similarity: things that are similar are perceived to be. Contrast: create visual importance without destroying relationships. Isomorphism: a reaction to visual elements based on pervious experiences. Pause: when you have a lot going on in a design, the places where you don’t attract attention.
  • Especially visually the sum is usually greater than the parts.
  • Design is the conscious effort to impose a meaningful order. We take confusion and create order and meaning. That’s a power we shouldn’t take lightly.