UNIVERSITY WEBSITE PROJECT

Brick by brick: a pattern library for the new University website

Posted by Andrew Twist, Digital Content Producer, Corporate Communications


A new set of in-page design elements will help CMS editors create effective content and also maintain a consistent visual style across the new University website.

One of our key aims for the University Website Project is to provide a better experience for CMS editors when it comes to building web pages and creating content.

A drawback of the current CMS is that the majority of content pages are built within a single what-you-see-is-what-you-get (WYSIWYG) editor. This approach means that editors have to make many decisions about the structure, layout and overall user interface within a page.

This can also lead to a lack of design consistency across the website as individual editors and departments make different decisions when faced with the single WYSIWYG editor.

Our approach for the new University website is to create a library of patterns that will:

  • Make it easier and quicker for editors to create content
  • Provide more tools and functionality for building creative and effective pages
  • Ensure the entire website retains a consistent visual style
  • Allow us to make future design updates that will work seamlessly across the entire site

So what is a pattern library?

A pattern library is 'a collection of user interface design elements.'

Clear? Probably not.

We like to think of a pattern library as the building blocks that people will use to create their pages on our new website.

Our pattern library will include simple design elements such as text boxes, image/video boxes and buttons - but also more advanced patterns such as our feature banners, quote banners and statistics boxes.

Examples

Media box:

Media box example

Quote banner:

Quote banner example

The benefits of a pattern library

From a CMS editor perspective, the pattern library will significantly simplify the process of creating engaging and visually effective pages.

Patterns will be configurable by CMS editors. The process of building pages will be more like putting together Lego bricks instead of staring at a blank canvas.

The full pattern library documentation will be made available online so editors can see all the patterns available to them, as well as information on how they work and guidance for how best to use them. We'll also be developing a number of key page templates that willl reflect the best practice for using patterns in logical and effective combinations.

The pattern library will ensure a much more consistent design style across the entire University website - and because the styling and functionality is managed centrally, it will also allow us to make improvements and stylistic updates to patterns without breaking any existing content on the site.

Your input on the pattern library

In this initial phase of work on the University Website Project we've already started to create the first core patterns that we intend to roll out to editors within the new CMS.

As we develop the project further we want to work with CMS editors to make sure we are developing additional patterns that provide all the desired functionality for creating attractive and effective website pages.

In time this will include a structured pattern request and development procedure that allows us to expand the options available to CMS editors and continue to improve the process of creating content on our website.

We'd love to get your feedback on the proposed patterns that we are creating as part of the first phase of our project - and also hear your views on the types of functionality and tools that you would find useful for us to develop in future.

Proposed patterns

Name Description
Table To display data in simple and clear format
Quote banner To feature a testimonial/quote in a standout visual design
Quote box To present testimonials/quotes in a simple design
Statistics box To communicate key stats and achievements
Text box To present text in a clear and consistent format
Image gallery To feature multiple images within a single layout
Social links box To signpost key social media accounts
Links box To signpost links to additional information
Accordion To break chunks of information into toggleable accordion items
Media box For embedding images and videos within layouts
Feature banner To feature key information in a standout visual design
Carousel To present images within a simple slider
Intro box To present page headers and intro paragraphs in a clearly defined style
Signposting box To allow for clear signposting and navigation within pages
Contact box To present contact information in a consistent format across the site

Give us your feedback