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.
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:
- Social media features.
- News Listings.
- Related links.
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.
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.)
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;
- 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
- Lecture content
- What you have learned
- Reflection on tasks
- Analysis of books and sources you have looked at (see list)
- Writing and Values
- Visual Marques
- Brand Guidelines
- 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.