UX design for content management systems isn’t the same as designing for a static application
Design for a CMS requires specific design techniques that allow for reusability and flexibility without breaking the design.
It’s no secret that a large majority of web applications — including mobile apps — are powered by CMS. These include WordPress, Drupal, and others. CMS systems prioritize dynamic content. This means content changes continuously and frequently.
What does this mean for designers? Let’s take a step back to understand the basics.
What is a CMS?
CMS stands for Content Management System. It is a computer software application with the ability to create, modify and publish digital content.
Normally, web pages are written in HTML, Javascript, and CSS programming languages. Building web pages from scratch would require a site designer or developer to learn these languages and write code. There are benefits to building a website in this way. However, there are also downsides, including the challenge of maintaining consistency throughout the website.
CMS platforms solve these problems by introducing a templated page system. This maintains consistency while providing a way for users to update their content without touching the code itself. E-commerce websites, blogs, non-profits, and news-based websites prefer CMS platforms.
Content taxonomy
One of the most powerful features of a CMS is the ability to assign taxonomy to content. While content type could differ for each CMS platform, sorting and filtering content, and connecting related content to the user is a crucial functionality that goes across CMS platforms.
Content taxonomies not only help users by improving accuracy with their searches and filter search results by providing taxonomy, but they also help content managers categorize information, reuse content, and dynamically display content instead of building websites by hand.
Dynamic vs Static Websites
CMS driven websites are dynamic websites. What does this mean?
Simply put, dynamic websites are pages that are simply placeholders for various content, and that content is generated on the fly from databases.
Content holds the most significance. Pages have frequent changes, evolving and growing with time. Because it is easier to update, dynamic websites are content-heavy and are user-driven, allowing them to have good user experience.
On the other hand, content on static websites is directly coded into its pages, including all forms of media. These sites are not built to evolve, prioritizes design, and also requires programming knowledge.
What a designer should keep in mind
When designing for a CMS website, designers should couple points in mind.
Think in terms of template for re-usability
Layouts, components, media should be thought out for re-usability — not just pages. Because content is subject to change, the content areas should be flexible.
In the below example, we have a layout where half of the content is occupied by text, and the other half is occupied by a form of media. At default, we can have it so that the text overflows around the image. It could also be used as a call-to-action section — if you have less text — and a button to guide the user to a different page.
Design with real-content where possible
We have to remember that we design to communicate. You should work until your design communicates the intention and purpose of your website. Designers should input real content that would go inside the website as a best practice during the design phase. This limits any future surprises when filled in with actual content.
Keep the design simple, universal, and timeless
As designers, we don’t want to pigeonhole the content by reflecting only a single mood, genre, story, or subject, especially if a website’s content may evolve. This could limit prospects for growth and expansion to new verticals in the future.
In the image below, the example on the right would be overly specific — that is, creating a single mood — and would not be appropriate for any other mood or types of content.
In contrast, the example on the left is simple and appropriate for multiple moods because it is simple, universal, and timeless. If we consider re-usability and frequently changing content, the example on the left would be the obvious answer.
Do and Don’ts of designing for a CMS
DO: Establishing a clear set of rules and consistencies
Consistent design means having a clear set of style guide ready, preferably before you even start the actual process of designing. The best way to approach this is to understand your webpage content and break down the necessary components. Designers should keep in mind that the webpage content will evolve with time, so it is best to create simple and universal styles wherever content may change.
You should also determine what content or which items will be subject to change, and which ones should remain fixed.
DON’T: Design individualized components
When we say “don’t give individualized design treatment to posts,” this means we shouldn’t be creating different styles for a specific type of card. In fact, you should keep your cards and components as minimal as possible.
A consistent style will make your webpage much more organized both for you and your users.
DON’T: Assume that content will always fit in a designated area
CMS driven web pages are dynamic in nature – which means that the amount of text that appears in a given display area can vary in length. Character limits can be set in most cases; however, designers should not assume that the content would always fit in the amount of spacing they give in their design.
Where it is OK to set character limit? With fixed items
A great example of these would be blog post cards, where the description text would have a set character limit. In fact, setting character limits on these areas where we want the user to take an action
CMS Web Design – what next?
Designing for CMS driven websites means content is king and will always come first, rather than the style. It’s important to plan ahead and embrace the variability. Unpredictability should be avoided as much as possible.
As designers, we should be future-proofed and to accommodate countless potential outcomes for the future of CMS design, such as global-readiness and the transformation of the nature of content along with the emerging technologies like AR/VR.
