Design Pattern Library.

This short insight is from of our Methods series: A discussion of useful working practices and ideas for better ideation and execution. We discuss what each method is, why they are useful, and how to utilize them.

What.

A library of UI design components, and patterns, that appear throughout a product—such as a website or mobile application. This includes supporting information on how and when to use these patterns.

Why.

Having a library of preset assets allows designers to effortlessly maintain consistency and build new features at speed. This design library helps ensure a project does not go on a tangent, to protect users from becoming alienated, overwhelmed or confused by design inconsistencies.

When having a design pattern, you let your users understand and remember what a component stands for. If ever you change a component and do not stick with your pattern, they could mistakenly think that it stands for something else and avoid using the tool you present–or even lead them to make choices they didn't intend.  

It also allows for multiple team members to collaborate with ease, no matter how new to the project they may be.

How.

1. Determine which components, and patterns, will be common for your project. This can be done before the first design, or after your first batch (the latter giving clear examples of which functions and elements may repeat often).
2. Identify what these components stand for so that the UI remains consistent throughout all aspects of the project. Document this information for reference.
3. Create 'master copies' of each components and patterns within your library, ensuring that this information is easily accessible for all necessary project members.  
4. Add examples of how everything within your library should be used, to ensure clarity and enforce consistency within your project.
5. Alongside the designs, include any coding that front end developers may need to implement the pattern—if applicable.

Further Discussion.

When developing a design library it is worth remembering it may be used by multiple professionals from different departments, including clients that may not be familiar with any technical jargon used throughout the backend of designs. Therefore, it can be useful to split your design library logically into distinct sections, to group related assets together.

As general advice, keep it simple. Perform some user testing with people around you to see if they can understand your component means/does. You can be creative with your designs, but keep in mind that there are lots of intuitive biases built from years upon years of digital solutions. For example, when people see the '+' symbol as a button, they will assume that it will increase something. This could be to add another item, increase a numerical value, or combine elements.

At Mäd, we use Figma for most of our UI designs. Collaboration is made easy as updates are in real-time, with multiple users being able to work on the same documents at the same time. Figma allows us to create a separate library page to create style guides for websites and applications, and we are also able to save multiple items as repeatable assets within the 'components' section.

‍