IxD103 – Week 8 – Style Guides & 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.
Pattern library
An organised set off related, reusable components, often containing code examples, design guidelines, and use cases.
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, etc.
Style guides encompass a company’s branding guidelines, including logo usage, designated colour palette, typography, etc.
Component
A self-contained and reusable pattern that represents a specific piece of interface or functionality
Task 01 – Interface Inventory
An interface inventory is similar to a content inventory, only instead of sifting through and categorising content, you’re taking stock and categorising the components making up your website, etc. An interface inventory is a comprehensive collection of the things that make up your interface.
When choosing a website to create an inventory for I decided to continue with LUSH cosmetics. I was a little unsure at the beginning as to what I had to do, however the blog post by Brad Frost, where he explains and shares his opinions on Interface inventories was really useful. He gave tips and steps for creating them. I started by screenshotting anything and everything that I felt was relevant and of interest. I then decided to group them according to colour and style on keynote. I found this easy because their designs are so consistent. Frost stated that this is something you will find with good branding.
I found this exercise to be very useful. I really like how LUSH contain a lot of photographs of their products. The bright colours of their stock means that their monochromatic theme works so nicely. They have some lovely examples of simple icons and their website is so easy to use, due to their well though out button positioning and clear instructions.
Task 02 – Element Collage
