Beginning a Pattern Library

I’m currently working in a team on a large scale refactoring of an enterprise-level website, and I’ll be recording my thoughts and findings during a series of posts. I’ll mostly be covering the design and front-end development of our UI Pattern Library. Stay tuned and feel free to leave a comment if you have any questions!

Problems with working on a legacy web project

Have you ever inherited a website that’s been worked on by a bunch of other front end developers? It can be a complete nightmare.

First of all, legacy code can cause issues. Whether it’s outdated JavaScript that doesn’t follow the latest coding standards or CSS that doesn’t take advantage of Flexbox, developers will always have a tendency to pay more attention to the code they wrote, because they understand it better. This can cause elements of your website to become ignored, less likely to be refactored (who wants to fix someone else’s mess?) and more likely to have an inconsistent UI, as it will be easier to create something from scratch than refactor existing components.

Inconsistent UI leads to duplication, as the functionality of UI elements becomes more difficult to recognise. Keeping a consistent UI toolkit encourages designers and developers alike to think before creating new elements and reuse as much as possible. It actually becomes easier to reuse UI and functionality rather than create something new and bespoke every time.

A lack of documentation can lead to a wider lack of product knowledge. That form that behaves differently depending on the user’s personal settings? If the functionality isn’t documented, a newly onboarded team member will have no idea what the form does.

Documentation, coding standards and pattern libraries can help to fix these issues. Documentation doesn’t have to be boring – a living style guide can be engaging and can closely reflect a user’s experience.

Why use a Pattern Library

Is there an advantage to storing all of your UI patterns in one place?

A UI pattern is an element that is reused many times throughout an application. A Pattern Library is a documented repository of all UI patterns within an application’s interface.

Examples of items in a Pattern Library might include:

  • Breadcrumb
  • Button (including multiple states, priority and sizes)
  • Carousel
  • Modal
  • Pagination

For an initial time overhead (creating a pattern library, documentation, following a style convention), you can create a repository of all UI controls in your project – this will save you time in the long term when you need to create new functionality – you’ll often find that you already have a lot of the required UI patterns in your library.

Storing visual guidelines for UI patterns in one place will result in less duplication of functionality and will encourage reuse of UI patterns. Pattern libraries are great for new staff onboarding, as all functionality is easily accessible and there is no room for ambiguity.

A good pattern library will facilitate nested UI patterns, so that larger templates can be built from a combination of UI patterns.

As your application matures, the Pattern Library will aid your incremental design and maintenance processes as small changes to one instance of a pattern will be felt throughout your entire application, this keeps your UI consistent and reduces the need to make many changes across your application.

Photo by Alfons Morales on Unsplash


Not a new year’s resolution

It’s just coincidentally a new year.

So 2018 is the year that I’m going to start putting more thoughts out here. I wanted to be more reflective, so this feels like a good outlet.

I toyed with getting a Jekyll site together, but I wanted to start putting out content *now*, so I resurrected this decade old WordPress account and found the cleanest and most minimal theme I could find in about 2 minutes. I might do something a little more technically interesting and more performant in the future, but for now will do. As I work in web development you’d think I’d want to build my own website every time, but sometimes the content is more important than the medium, and this is one of those instances. It’s why I don’t take issue with the Squarespaces of the World – they have their place.

I’m sort of nervous about putting my comments out here for judgment and chastisement, but whatever. I’ve never written anything publically before, so I’ll be learning as I go along. I’m not going to meticulously proof-read and stress over every detail, as I think insecurity has lead to me avoiding the “Publish” button in the past. Fortunately I’ll probably be the only person reading these for a long time, so by the time I’ve (maybe) built an audience I might have some semblance of a writing style. What’s the worst that can happen? Someone laughs at me? I can handle that.

Photo by Danielle MacInnes on Unsplash