Designing for Content Management Systems

Saturday, March 10 12:30PM – 1:30PM
Jared Ponchot Creative Dir Lullabot

Design is the conscious effort to impose a meaningful order. (Victor Papanek)

CMS create ways to impose a meaningful order.

How a CMS Thinks

  • 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 chunks from this type of content in the sidebar.
  • User Types

    • Who is using the site?
    • What are they using it for?
    • Anonymous or Authenticated
    • What can they access or not access, create or not create, edit or not edit?
    • Authors, Editors, Administrators, Moderators
    • Baby Got Backend
    • 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 Types

    • What are the types of content?
    • How can we break down these types of content into discreet chunks?
    • Finding out what these types are helps you to model this content first and then style at the end.
    • A List Apart: Future-Ready Content
    • Content types provide a sensible target for creating goals for your website. Set goals for each type of content in your design process.

Why should we think this way?

  • We need to know our tool.
  • It simplifies the complexity.
  • We can’t design for each PIECE of content on a dynamic site! (this is also helpful for responsive design)


  • Create 3 groups with everything, and begin to put things into groups. Prioritize them with the chunks of each content type.

Gestalt & Other Fundamentals

  • Position

    • eye moves top to bottom, left to right
  • Proportion

    • we notice big things, it can override position
  • Proximity

    • creates visual relationships – too much similarity visually make it hard to tell what something relates to
  • Symmetry

    • we perceive objects and tend to perceive them as symmetrical shapes that form around their center – our brain wants to make patterns
  • Similarity

    • thins that are similar are perceived to be more related than things that are dissimilar
  • Alignment

    • this creates relationships and beauty (grid systems)
  • Contrast

    • create visual importance
  • Color

    • warm colors stand out, cool colors recede
  • Isomorphism

    • similarity that can be behavioral – the brain wants to make things right and create story out of pattern
  • Unity

    • things look like they belong together
  • Pause

    • awkward silence in our design – a way to really draw something out

Tips & Tricks

  • When you blur your eyes you begin to see where the visual weight lies between two similar objects.
  • Create a style guide page that shows every single style in the CMS and how they work together. (be sure to include system messages and pagers and form elements etc.) Drupal Style Guide Module
  • Style Tiles help to create a visual language.

Ask yourself regularly how can I have fun?

Leave a Reply

Your email address will not be published. Required fields are marked *