This week we looked at style guides and pattern libraries and how we should go about creating our own.
Style guides
“The physical or digital document that represents the styles, patterns, practices and principles of a design system and teaches how to use it.”
I should update my brand guidelines to include digital outputs. This includes HTML, CSS and JS to ensure colours, type, sizes etc. are consistent. It should all be easy to read and understand.
Pattern Library
“An organised set of related, reusable components, often containing code examples, design guidelines, and use cases.”
It includes design components that appear multiple times on a site including, navigation, social media features, related links etc. The pattern library defines how these should look and how they are coded.
Why do you need a pattern library?
Websites can become very complex and often, more than one person is responsible for working on digital interfaces. Therefore, these rules help keep everything consistent. Otherwise, different pages could look and work differently which makes it harder to navigate and can be very confusing for users.
Having a set pattern library means it can be reused which costs less. For example, if a new element is designed, this can be shared with the rest of the team and be reused in the future. Its also much easier for developers to work on each other’s code if it is readily available in the pattern library.
Tips for creating a pattern library
These tips are from boagworld.com and will refer to them when creating my own pattern library:
- Think about the pattern library from the start
- Make sure patterns are responsive
- Define the elements of a pattern
- Describe how the pattern will function
- Ensure they are accessible
- Think about where you keep the code
- Consider level of customisation
Component
This is a “self-contained and reusable pattern that represents a specific piece of interface or functionality.”
A design system is a collection of everything.
I found looking into these very beneficial as it has given me an idea of what I need to consider and include in my own pattern library and style guide. My next step is to look at some real life examples to see how they went about it.