UI design when using a CMS-How does it differ from styling static content

Designing a user interface using CMS is an entirely different discipline to static content, as you have to embrace the visual or big-picture systems-thinking approach to design. The underlying architecture for CMS is different because you must think about it as a system that, unlike print, will adapt in the future. There are some unique challenges you must overcome and guidelines you must follow to design for content management using systems such as Wordpress, Drupal and Joomla.

A managed Joomla or Wordpress hosting setup can help designers to get used to the mindset of working with CMS. GoDaddy, which was founded by Bob Parsons nearly two decades ago, offers “simple and blazing” fast hosting solutions for Wordpress which include access to the thousands of plugins, scores of walkthroughs, training videos and 24/7 support. GoDaddy provides Basic, Deluxe, Ultimate and Developer packages depending on requirements. Its extensive backup system also ensures files and databases can be retrieved with just one click.

Designs output by a CMS need to adapt to a dynamic content environment and thus are not judged entirely on their aesthetic merits. Content output is often edited by non-technical users who don’t know or aren’t interested in how to maintain the consistency of design, something that can impact the experience of the end user. Effective CMS design exemplifies consistency from page to page for factors such as colors, type, elemental place and imagery, and it defines standards sufficient to cover both current and future content needs and enforce this consistency regardless of how it is scaled and the text it contains. It should also be developed in an accessible and web-friendly manner.

Considering the CMS as you design is the best strategy because they will give you a far greater control over the final output rather than leaving important decisions to people who will be updating the site later. Your design strategy should be defined as clearly as possible so a template can be replicated on page after page. It may be a good idea to communicate with the developer as to limitations of the particular CMS you are working with, as the software you use could dictate your design. Pitfalls to avoid with CMS are layouts designed for print that make assumptions about the size of copy, don’t consider text-wrapping and provide ambiguous navigation.

Once you are familiar with the CMS you are designing for, you must find out exactly what you need to do and the control you will have over it. For example, you should adopt a more “defensive” approach to design if the user has more freedom. Control can vary from users only editing existing templates to shaping the entire CMS around a design. You should also speak with developers about navigation and ask them whether it will be configurable and how many levels can be displayed. It is also important to assume that any HTML elements will be randomly stacked so carry out thorough tests and ask questions, such as do stacked headings work will the design and what will happen to text if a user can insert and align an image?

Once your Photoshop Document (PSD) has been converted into HTML and CSS, you should now populate it with real content and ensure the navigation is functional. Designing with real content helps to build empathy for end users, improves your knowledge of the workflows and tools that the content creators use and is a great way to identify problems and edge cases with the work you have designed. 

UI design with CMS is a satisfying but uniquely challenging prospect for designers that, unlike print, continues to evolve after it has published. Building an architecture, including effective elements for CMS design and working around the control of the end user is the key to success.