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.
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.
|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|