ixd103 week 08 reflection and tasks

Style Guides and Pattern Libraries

Style Guide – The physical or digital document that represents the styles, patterns, practices, and principles of a design system and teaches how to use it. Style guide includes your brand guidelines.

Pattern Library – An organised set of related, reusable components, often containing code examples, design guidelines, and use cases. Pattern library includes buttons and carousels.

Component – A self-contained and reusable pattern that represents a specific piece of interface or functionality. A component is one of those things: like a button.

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.

You are trying to create a set of documentation or rules on how things are going to be used.

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.


Style Guides

Style guides encompass a company’s branding guidelines, including logo usage, designated colour palette, typography etc. You should update these to include digital outputs.

Pattern Libraries are a detailed subset of the overall style guide.

Managing Code

HTML, CSS, JS – building a consistent guide.

Some elements within your style guide will have definable CSS properties such as colours: hex value, type: font families, and sizes, and layout.

Resources/References – Style Guides


Style Guides – Things to consider…

  • Establish a table of contents. This will direct people through and explain what is contained within and where to go looking for it.
  • Break information into manageable chunks.
  • Use plain English and explain things clearly. The simplest way to write something is the best way to write something.

Modern Tools – Style Tiles


(Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.)




Modern Tools- Element Collage


(Element Collages, an alternative tool by Dan Mall. Mall uses Element Collages as triggers for client conversations.)  It is like a mood board but slightly more sophisticated and with a collage-based output for use in your own style practice.

NOTE – Vertical element collages can look like a webpage, so horizontal is likely to be the best format.

Modern Tools- Interface Inventory


(Taking stock and categorizing the components making up a website.)

An interface inventory looks at all the interactive elements.

NOTE- The fewer there are, the better the design (a more consistent interface.)

Today’s Tasks

01 – Interface Inventory

Choose a website and complete an interface inventory, documenting all the interactive elements used throughout. This could be the website for the brand you completed a set of guidelines for last week, but it is not essential. The important thing is to observe the sorts of buttons and elements of the UI included. There is a link on BBL to give further info about this.

Below I did my interface inventory on the the brand website I looked at last week for my brand guidelines. I found this task useful as it has made me more aware of all the different interfaces a website uses, like scrollers, navigational buttons and arrows, audio within photo, imagery as a button etc.

02 – Element Collage

Create an element collage for your personal brand in anticipation of designing or styling your portfolio websites. There is a link on BBL to give further information about Element Collages.

In my element collage I included;

  • monogram
  • buttons
  • imagery
  • typography
  • colour palette
  • a basic layout

03 – Update your Research Blogs.

Make sure research blogs are up to date and organised. Daniel will review these and give feedback before Easter (NEXT MONDAY).


Guide for Research Blogs

Weekly Summaries

  • Lecture content
  • What you have learned
  • Reflection on tasks
  • Analysis of books and sources you have looked at (see list)


  • Writing and Values
  • Monograms
  • Typography
  • Wordmarks
  • Colour
  • Visual Marques
  • Brand Guidelines

Practical Work

  • All weekly tasks
  • Pizzeria brand
  • Business cards
  • Example brand guidelines
  • Interface inventory
  • Element collage
  • All development work, sketches, and iterations

Next week (week 09) – portfolio site design and mapping your style guides onto a site.

Leave a Reply

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