By 
You might sometimes hear designers and architects talk about a design language. It’s a way of saying that each shape, colour, texture or material in a design can be reused in a consistent and meaningful way.
A pattern library defines the design language. It helps make sure we know what building blocks we have, and where they can be used. We’ve been building our own pattern library over the past year which has helped us make our website easier to use, and more consistent with our brand.
Patterns improve usability
Consistency makes things easier for people to use.
A car brake pedal is always to the left of the accelerator, for good reason. (Historically this hasn’t always been the case!)
Websites have conventions too. Links look like links, buttons look like buttons, and a triangle over an image means a video will play when you press it. As designers we need to be wary about breaking the conventions used by hundreds of millions of other websites.
It’s important to keep consistency of usability within our own site too. If something looks like a link on the site, it should always act like a link on the site. Making it reveal a piece of hidden text in some unpredictable situations isn’t going to help anyone.
A pattern library helps us make sure we keep things consistent both with general conventions and our own micro-conventions.
Patterns improve brand consistency
Would you trust buying a product from a website if every page had a different style and used a random colour scheme? It would be confusing and might feel a bit dodgy.
A consistent brand design reflects quality, professionalism and builds trust in the brand. Even better if your web brand matches the patterns and brand you use in print. Our print styles used to define our brand, but the web styles diverged from that somewhat. Our new theme brings our website into the Kent brand.
Flatpack websites
Modern websites need to cope in a variety of different contexts. You might be reading this on a phone, a tablet, or perhaps a giant TV screen. This makes designing harder because we have to think about all the patterns in different contexts.
Designers now need to start thinking about mobile devices first, then other devices like laptops. Google will soon start placing primary emphasis on the mobile view of a site in its rankings. The mobile view of a website is rapidly becoming the default one.
Consistent atomic design pattern libraries help us with mobile-first design. This kind of pattern library defines different levels of elements: from the small-scale building blocks like a piece of text, a link, a colour or a button, up to larger-scale building blocks like a page header or a panel displaying news stories.
Can I have a new thingamajig on my website?
Coders are famous for spending an hour automating something that would take 30 minutes to do by hand. Sometimes it’s all too easy to fall down a rabbit-hole to find a solution to a problem. It’s worth taking a step back and looking at the bigger picture first.
Designing new patterns takes planning, time and money. A new pattern may take many hours of effort to design, test and develop. It’s a costly process. We want a great website but very often less is more, both for users and the business. We don’t want to waste time trying to design and build something we don’t need.
Here are some things to consider:
- What will it look like on a range of different devices? If you come to us with an idea of how it might work on desktop our first question will be how it might work on a mobile phone.
- How will it work if you don’t have a mouse? Many users don’t have access to a mouse, trackpad or touch screen.
- What if you don’t have javascript enabled? Yes, javascript is used by almost everyone these days. But there are in fact plenty of reasons why we should design for no javascript. On a slow connection a user may not have any of our fancy javascript for quite a few seconds. By then they may have given up.
- Will our design slow down the user experience, particularly on slower connections on a phone?
- Does it sit well with our brand?
- Is it consistent with our existing design language? Can we achieve the same result for users with existing patterns.
- Is it consistent with universal design patterns on other websites?
- Does it look and feel good? Will it just feel like a cheap gimmick?
- Who is the target audience?
- Have we tested it with the target audience? Does it make any sense to them? Can they work out how to use it? Are they surprised when they do use it because they were expecting something else? We often make assumptions about what people prefer, only to find out when we actually test something that they prefer something else, or don’t care either way.
- Is this a problem in need of a solution, or a solution in need of a problem? There are many ways to solve a problem. The first one that springs to mind isn’t always the best as far as users are concerned (usability), or as far as the business is concerned (brand, cost).
People love content. So does Google.
A general rule is lead with your content. New layouts, widgets and colours will never fix poor content. Think about your users’ intent.
Google approaches user intent by focusing on micro-moments. These are the many moments every day when people search for something online with a particular intent: I want to know this, I want to do that, etc. Thinking about these micro-moments and your users’ intent will help you think more about your content, and less about whether this thing slides over there, or what colour it is.
You might be surprised at how content is received. There’s good evidence that longer, well-written blog posts get more engagement than short posts. People who want information want information, and are prepared to read it. If they want something shorter, well there’s Twitter.
Many of our design patterns focus on visual content – large image panels, or groups of cards which link people to other content. The purpose of these patterns are there to catch the eye and get people to where they really want to be: useful information. We have a number of design patterns which help make the useful information clearer and more consistent.
We won’t be moving over our old websites snippets to the new system. The reason for this is that we don’t want to maintain legacy design patterns, many of which do not meet our required accessibility, usability or SEO standards.
Our pattern library
The central web team UX designers, under the guidance of the Brand Strategy Group, owns and decides what goes into the pattern library.
For now we are working hard to consolidate our new design elements. We have enough building blocks to create content in exciting and interesting ways.
Our pattern library is still a work-in-progress however. We’ve been slowly building our library for a while now as we’ve developed the new design.
Building blocks
Typography
Our typography is dictated by our brand and provides a texture and character to our design making it “feel” like Kent, and resonating with other offline marketing material.
We use Century Schoolbook for main headings, Arial Bold for secondary headings, and Arial Light for body copy.
We also have a kent font which contains our logos and icons.
Colours
Our colour palette is based on the brand colours. We use the primary corporate colour set in most instances, but switch to the postgraduate colour pages on the postgraduate course section. We have a selection of soft shaded colours to provide background highlights, and colours for specific actions on buttons or highlighted text.
Links, buttons and forms
Links, buttons and form elements are used consistently across our website. For example, links in the flow of text will be underlined. Links in other places like menus or the footer aren’t underlined.
Reusable elements
Reusable elements are things that can be used in different places on different pages. Each element has a consistent use, and is made up from smaller building blocks.
Feature panels
These are used to make a strong marketing statements. They highlight key features on a landing page and allowing users to navigate to further details.
Lists of links
These help users navigate to content quickly through groups of links or links presented with small images and some text (what we call cards). Cards are particularly useful for listing events, courses, news, or featured articles, and add a bit more visual interest to a page.
Sometimes you just need a list of categorised links. These are useful for functional content where people are more interested in getting to what they need quickly and with little fuss.
Page and editorial content
A range of page-level typographical and navigational elements include lead text, highlighted text, lists, quotes, tables, images.
View our page and editorial elements
Structural elements
Structural elements appear on all pages of a similar type: things like the global navigation, the page footer, or side menus. These are made up of the smaller (atomic) building blocks but do still have their own unique styling.
Page templates
Our new content management system has a number of pre-defined page layouts. These fix which of the reusable elements are on each page, and where. We have a selection of page templates to help showcase, navigate and present content different types of content for different audiences. These page templates are very much a work-in-progress so they’ll be changing somewhat over the coming months.
Summary
We need a consistent design language for our website, and across all our media. This helps us create a consistent brand, makes our users’ lives easier, and improves the efficiency of the web design process.
A large website like ours needs careful planning. A pattern library helps us define our design language across multiple devices. Designing new patterns can be a surprisingly lengthy process to get right. A pattern library tells us what patterns we already have, and whether we can reuse existing patterns or build completely new ones.