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.
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:
- Button (including multiple states, priority and sizes)
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.