Using Modular Design For CMS Websites

By Chelsea Shaw

CMS websites are an ever increasing request from our clients and we are often asked for the ability to add graphics and other visuals within the pages of their sites. You’ve probably come across the plugin visual composer for wordpress where content editors can place images, text, columns etc where ever they want and, in a nut shell, it can get messy. There can be limited consideration for design or user experience with no consistency between pages and structure. Wagtail, our CMS of choice (you can see why here), utilises a handy little tool called a streamfield - wagtail’s answer to visual composer. Unlike VC, streamfields are a built in tool and designers and developers can chose what they want to include or exclude from the editor interface giving the user an editor tailored to their needs and the ability to create 'freeform' content.

Modular design for CMS Websites

"Much like a modular ikea product, designs within CMS need to be able to be chopped up and put back together in any order."

- Chelsea Shaw

Wagtail allows us to create page templates and when we are working with a site with 100 plus pages we will design to suit certain types of content. This allows content editors to chose from a selection of pre made layouts/pages to suit their content, these templates might include the ability to define page title, header image and main content. More specific elements might include a blog structure e.g. date and author. 
Within each page template the designers need to think about the elements editors can add the page. The key to this is modular design and creating a design style sheet on which we can break down each section of a website into individual elements. By defining elements within the CSS we are able to limit design changes and create consistency between each element, meaning they can work as individuals or together.
Within the style sheet we will define assets such as headers, sub headers and quotes and their colour, size and position. But the editors can still chose which assets they feel are more appropriate within their content and where they should sit. 

By creating freeform content

  • Ensure a consistent application of styles
  • Maximise user flow and experience through sitewide consistency 
  • Maximise CSS and HTML by reusing elements throughout the site 
Whilst enabling
  • The author/content editor to dictate a structured designed to meet their content requirements
  • Allow the editor to focus on the content rather than aesthetics - doing the hard work to make it simple for them

Users Are The Focus

Ultimately structured design is focussed around the user and their needs, both users and content editors. As a large portion of our work is for the public sector, such as health organisations, this is key to us. They need their information to be as accessible as possible for users and give their content editors all the control they need to do this. This means pages need to have similar structure and follow the same patterns so users know how to navigate around the page. From designers working to create an accessible site and content editors working to create accessible content we have the ability to make the user experience seamless and reach as many users as possible, which should always be the main goal.

<< Back to Insights