IXD103 – Style guides – Week 8

Now the style guides have to be more extensive as they have to not only cover print but also digital products/aesthetics.

Style guide

Physical or digital document that represents the styles, patterns, practices, and principles of a design system and teaches how to use it. They encompass a company’s branding guidelines, including logo usage, designated colour palette, typography, etc. You should update your brand guidelines to include digital outputs. Pattern libraries are a detailed subset of the overall style guide.

Good examples

Things to consider

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

Modern Tools that help

  • Style Tiles are a design deliverable consisting of fonts, colours and interface elements that communicate the essence of a visual brand for the web. It offers a template to work and design around.

  • Element Collage, an alternative tool by Dan Mall. Mall uses it as triggers for client conversations; it starts a free form conversation to gauge a better direction to go in for the client. It can help clear up the brand direction. The only problem with a vertical element collage is that it can look like a webpage you’ve built, so horizontal is a better format for us.
  •  Interface inventory; taking stock and categorizing the components making up a website. The fewer buttons you have in a website the better the design as it ensures better consistency for the interface.

Managing code

HTML, CSS and 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 colours, type and layout, etc.

Pattern library

An organised set of related, reusable components, often containing code examples, design guidelines and use cases. It 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 it’s a collection of design components that appear multiple times on a site, such as: navigation, slideshows, social media features, news listings, related links, carousels and more. It documents all these ‘patterns’ (also known as components) and defines how they behave, what they look like and how they are coded.

Good examples


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


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. For more information follow this link.

02 Element Collage

Create an element collage for your personal brand in anticipation of designing or styling your portfolio website. For more information follow this link.

03 Update your research blogs

Make sure your research blogs are up to date and organised. Daniel will be reviewing these and providing feedback prior to the Easter break.

What should be included

Weekly summaries 

  • Lecture content
  • What you’ve learned
  • Reflection on tasks
  • Analysis of books and sources you’ve looked at


  • 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

04 Portfolio site

Portfolio site design and mapping your style guides on to a site. You MUST at least have a skeleton of a site to work on next week.

Leave a Reply

Your email address will not be published.