IXD103 Week 8

Style Guides

This week we looked at the continuation of identity exploration and style guidelines.

Style guide

The physical or digital document represents the styles, patterns, practices, and principles of a design system and teaches how to use it.

Pattern library

An organized set of related, reusable components, often containing code examples, design guidelines, and use cases.


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


Pattern Libraries

A Pattern Library ensures a consistent user interface. Big sites are developed by different people over a prolonged period and revised regularly. That almost always leads to a fragmented user interface unless there is something in place to ensure consistency.

Essentially a pattern library is a collection of design components that appear multiple times on a site:

  • Slideshows.
  • Navigation.
  • Social media features.
  • News Listings.
  • Related links.
  • Carousels.
  • +More


Style Guides

We started looking at these last week. Style guides encompass a company’s branding guidelines, including logo usage, designated color palette, typography, etc. You should update your brand guidelines to include digital outputs. Pattern libraries are a detailed subset of the overall style guide. We need to think about HTML, CSS & JS, building a guide we can use to ensure everything’s consistent. Some elements within your style guides will have definable CSS properties such as colors, type, and layout, etc.

We then had a look at some style guides by some companies, one that interested me was GitHub and so I decided to continue to look at them

Unfortunately, some of the links don’t work but it shows the guidelines for using ruby where it covers indentation, tabulation, and line spacing

What I Learnt:

This week I learned more about style guides and expanded upon my understanding of brand guidelines, style guides, and pattern library. I think the key thing I learned is all the small things that need to be included like the size of buttons and font sizes style and uses. I think it was also good to learn the different things guides are used for. For example, GitHub has style guides for writing code send emails, and displaying information.

Leave a Reply

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