The Importance of Style Guides & Pattern Libraries

Maggiemccausland
Maggie McCausland
Published in
4 min readMar 10, 2022

--

Style guides and pattern libraries are the key to retaining consistency when designing. Especially when dealing with larger projects and websites. Consistency is important to have and maintain because it’s what will help end users navigate and use websites more efficiently. On top of end users being able to use a site with more efficiency, the site itself will be “cleaner” through the use of consistent styling and components. Each part of a website will feel connected as a whole with proper implementation of style guides and pattern libraries.

Image Source

By implementing the use of style guides and pattern libraries companies have a main source of reference that will contain important information in regards to company branding and the usage of colors, typography, buttons, icons, forms, etc. This will help ensure everyone in the team or everyone at the company is on the same page and following the same branding rules. As mentioned before, they can act as a form of reference for ideas, rules, and designs. They are not just for the designers, but for everyone who is a part of the website/project creation process and the end users. It’s important to keep in mind that if you are using style guides and pattern libraries then they should be kept up to date. If any modifications are made everyone involved should have access to the updated versions to help in maintaining consistency. Not only do style guides and pattern libraries benefit companies, but they are also beneficial for personal projects.

I worked with a style guide and pattern library when creating a website redesign of a nonprofit organization. Through the use of a style guide and pattern library I was able to have a clear representation of how I would have my forms, buttons, icons, and navigation designed. It was also a way for me to represent how I would incorporate and use color to draw attention to or highlight important elements, group related elements together, and can bring out different emotions. You want to use colors that will work together to create a better user experience.

Pattern Library: Identity, Buttons, Icons, and Forms
Pattern Library: Typography & Colors

My style guide and pattern library helped in the creation of my high fidelity surface compositions. It may have taken time and effort to put the style guide and pattern library together, but in the long run in helped me save time and effort when I began working on my wireframes and high fidelity surface compositions. As mentioned earlier, those documents act as a main source of reference and help save time when making sure each wireframe and surface composition maintains consistency.

Desktop High Fidelity Surface Comps

Maggie McCausland is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to Print and Augmented Reality Design in the DGM 1230 Course and representative of the skills learned.

--

--