CMS building blocks for experience designers

Your first reaction to this article may be, "Wait, why do I need to understand it to design for it? That’s why I review my wireframes and designs with my technology team!” (You do, right?) But understanding how your CMS works will help you design something that can actually be built, as designed – so the final site will be closer to your vision!
Written by 
Jackie Greenfield
Experience Design Director

Whether you’re designing for multiple brands across a single platform, or working on a smaller site, it’s useful to understand what existing options are available, versus things which require incremental work. Unless you have an unlimited budget and unlimited time to complete the project. And if you do, A) I am jealous, and B) I am curious where you work. For the rest of us, though, understanding the flexibility of your CMS is important. Also, even if the technology team delivers something that could be used to build your vision, unless the content authors have appropriate guidance, it probably won’t look the way you want.
Similarly, if you’re looking to provide guidance on content, SEO, or accessibility, it’s useful to understand some basics of CMS.

The basics… one piece at a time

In part one, I’m explaining CMS in terms of LEGO® bricks. A solution architect that I worked with literally brought building blocks to a client to explain CMS conceptually, and I’ve been stealing that metaphor ever since.

Templates

A template is a base that you build on. It can be basic, or complex; it can allow you total freedom to put on anything you want or restrict what and where you can add things. Your standard content page template might allow for pretty much anything, but your product detail page template is likely to be more restricted.

Basic, unconstrained base
Complex, constrained base 

Standard components

Imagine a CMS comes with only a few standard sizes of LEGOs, and they’re all blue.These are your “out-of-the-box” components. You can build a lot with these, but they may not meet all your needs.

These are all made from the same basic blue blocks

There’s a lot you can build with the basics! But there are also a lot of limitations.

Configuration options

Let’s say you need some building blocks of the same size, but in other colors. Changing the color of the Lego is akin to configuration options in CMS.

You may start with the basic components that come with CMS but need to be able to make them do different things than they can by default. Images come “out of the box” with a lot of configuration options, but not every possible option. Maybe you need images to allow for overrides at different break points, either with different images or hiding images.

Same blocks as above, but with different “configuration options”

 

Complex components

You may also need some more complex pieces, like wheels and windows.

These are a metaphor for more complex components, from carousels to dynamic product lists to specialized content blocks and beyond.

These pieces are custom-built for specific uses

Custom components

There are times you need a one-off – something unusual and specialized. It probably isn't worth the time or effort to create a component. Instead, build that one-off by putting HTML into a specific HTML component.

Like, Ballerina Batman. You’re probably not going to need that more than once. No need to build configuration options for changing the color of his tutu!

Similarly, a special interaction just for your homepage may not warrant its own component.

Ballerina Batman doesn’t need to change. And we only need one Ballerina Batman.

To make this a little more concrete, here’s an example of how components relate to templates.

Each of those components would have its own configuration options. Maybe the content block could have an image with it, on either the left or right of the content. Perhaps profile cards can show or hide personal contact information, depending on where it’s being used, etc.

Now that I have covered the basics of CMS, we can talk more about the details and how to design with CMS in mind. Future topics will include templates, components and configuration options, and content authoring.

Bonus Content

Download PDF