#IXD103 Week 8 – Style Guides

What are style guides & pattern libraries?

Style guide

Style guides are the physical or digital document that represents the styles, patterns, practices, and principles of a design system and teaches how to use it. Style guides encompass a company’s branding guidelines, including logo usage, designated colour palette, typography, etc.

When creating an online presence, we also need to account for the HTML, CSS and Java Script to maintain consistency which includes colour RGB hex value, layout, structure and typography.

Looking at Lonely Planet’s guide, they provide adequate and clear structure to their website, with a variety of different colours in various circumstances just to name one.

Things to take into consideration:

  • Establish a table of contents.
  • Break information in to manageable chunks.
  • Use plain English and explain things clearly.


A self-contained and reusable pattern that represents a specific piece of a interface or functionality.

Pattern library

An organized set of relatable and reusable components, often containing code examples or design guidelines.

Essentially it is a collection of different design elements and patterns that occur throughout the website. Pattern libraries help contain these patterns and define how they behave, what they look like and how they are coded. A few examples of this would be:

  • Slideshows
  • Navigation
  • Social media features
  • News Listings
  • Related links
  • Carousels


Pattern libraries are used to ensure links between interfaces remain consistent. It is a common problem with many bigger sites as it’s made by a lot of different people with different ideas. Over a long period this can become an occurring problem creating a disconnected between the consistency of the site.

For example, BBC has prescribed guidelines for pattern libraries on their website to ensure and maintain consistency throughout their website for different and new developers.


What have I learned?

Today was an interesting class as it has shown me how websites both big and small set a series of patterns and guidelines to create and define a website. I found it interesting looking at various websites and how they compose themselves. It has ultimately made me more curious about how websites are designed, this is helpful in me designing my portfolio website as I can create a set of rules for my own to maintain consistency through typographical, navigational and colourful elements. It can also help me structure my digital wireframes for creating more of an accurate result.











Leave a Reply

Your email address will not be published. Required fields are marked *