{"id":1760,"date":"2015-01-31T16:40:18","date_gmt":"2015-01-31T16:40:18","guid":{"rendered":"http:\/\/blogs.kent.ac.uk\/webdev\/?p=1760"},"modified":"2016-06-07T16:35:58","modified_gmt":"2016-06-07T15:35:58","slug":"building-a-pattern-library-for-a-large-website","status":"publish","type":"post","link":"https:\/\/blogs.kent.ac.uk\/webdev\/2015\/01\/31\/building-a-pattern-library-for-a-large-website\/","title":{"rendered":"Building a pattern library for a large website"},"content":{"rendered":"

My flat has a slightly weird mix of design styles. 19th century, 1930s, 1950s, 1970s, modern. It\u2019s homely and interesting and I like it. I\u2019m afforded the luxury of idiosyncrasy because not many people need to use it.<\/strong><\/p>\n

Unlike my flat, big websites are showcases. They provide or sell services to lots of visitors. Maybe many millions a year.<\/p>\n

People visiting a website tend to be\u00a0impatient and task-driven. They might only be peripherally interested in what you have to say before they get bored. Quite likely you’re skimming past this paragraph already…<\/p>\n

Websites need to be clear, consistent and easy to use.<\/p>\n

Consistency<\/h2>\n

Consistency is a very powerful design principle.<\/p>\n

At an emotional level consistency creates a strong sense of visual identity. At a practical level it makes things easier for people to use. People respond to this positively.<\/p>\n

A pattern library is a great tool to help with design consistency because it presents and defines all the building blocks that go to make up a website.<\/p>\n

It answers questions like: What fonts and colours are acceptable? What should lists look like? How should forms look? What are the buttons\u00a0like?<\/p>\n

A\u00a0pattern library is a guide to how an organisation\u2019s website should realise its brand DNA<\/a> in a consistent way.<\/p>\n

Flexibility<\/h2>\n

There will always be exceptions. We only know what an exception is once we\u2019ve got a set of definitions of how things should be.<\/p>\n

A pattern library is that set of definitions, so it\u00a0allows a website to grow and evolve consistently without it looking shambolic or confusing to its users.<\/p>\n

Development<\/h2>\n

Pattern libraries can also be a tool for web developers. Many libraries will include some explanatory notes and HTML snippet examples.<\/p>\n

A good example of this kind of library is Bootstrap\u2019s documentation<\/a>. The developer knows exactly what things should look like, and how to use all the various building blocks.<\/p>\n

Other great examples of comprehensive pattern libraries are Mailchimp\u2019s Pattern Library<\/a> and the BBC\u2019s GEL<\/a>.<\/p>\n

Atomic design<\/h2>\n
\"patternlab.io\"<\/a>
an atom. patternlab.io<\/figcaption><\/figure>\n

A solid way to build a pattern library is with atomic design patterns<\/a>.<\/p>\n

The basic concept is that any good website will be made up of a few base components which can then be recombined and reused in clusters to form larger components. Atomic design breaks a website down into atoms, molecules, organisms and templates.<\/p>\n

Atoms are things like fonts, colours, buttons and links.<\/p>\n

These can combine into molecules such as a search box with a button.<\/p>\n

Molecules can combine to form an organism such as a navigation bar with a search box and some links.<\/p>\n

Finally groups of organisms combine to make a template: a blueprint for a final page layout.<\/p>\n

Brad Frost and Dave Olsen have made a pattern lab<\/a> which turns the idea of atomic design into a practical framework.<\/p>\n

Kent SDS Replacement Project pattern library<\/h2>\n

Work is currently under way for the SDS Replacement Project<\/a>. To help make the user experience clear – and to help developers – there is now a pattern library<\/a> for the project.<\/p>\n

The pattern library uses Bootstrap as a base with Kent University styles added. It’s still very much evolving as the project progresses, but it already has quite a few design elements added.<\/p>\n

\"SDS<\/a><\/p>\n

Summary<\/h2>\n

Consistency<\/strong> is a particularly important design principle. It lends\u00a0emotional weight, and makes things easier to use.<\/p>\n

Pattern libraries are essential<\/strong> for large websites because they help make websites consistent\u00a0by defining its\u00a0building blocks.<\/p>\n

Atomic design<\/strong> is a way of describing the building blocks and the ways they can be combined.<\/p>\n

Pattern libraries should also be practical guides for developers<\/strong>.<\/p>\n

Once we have a definition of the patterns we have a consistent way of extending<\/strong> them to deal with new requirements.<\/p>\n

Bootstrap\u2019s documentation<\/a><\/p>\n

Mailchimp\u2019s Pattern Library<\/a><\/p>\n

BBC GEL<\/a>.<\/p>\n

And feel free to take a look at the\u00a0SDS Replacement Project pattern library<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

My flat has a slightly weird mix of design styles. 19th century, 1930s, 1950s, 1970s, modern. It\u2019s homely and interesting and I like it. I\u2019m … Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":1764,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[690,79443,79395,79421],"tags":[79440,79441,521,79463,23153],"_links":{"self":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1760"}],"collection":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/comments?post=1760"}],"version-history":[{"count":13,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1760\/revisions"}],"predecessor-version":[{"id":2092,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/posts\/1760\/revisions\/2092"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media\/1764"}],"wp:attachment":[{"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/media?parent=1760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/categories?post=1760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.kent.ac.uk\/webdev\/wp-json\/wp\/v2\/tags?post=1760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}