Week 8- Style Guides

Week 8 included a lecture all about style guides, within the lecture we discussed:

• Style guides
• Pattern libraries
• Style tiles
• Element collages
• Interface inventory

Beginning my research

To begin my research into this topic I have looked at some of the bullet points above in more detail within this post to get a better understanding.

What is a style guide

Pinterest

I created a mood board with various brand guidelines styles, they include different layouts and compositions with some very fun elegant designs while others had a minimal simple approach, find the link below.

Link- Brand guideline inspiration mood board 

What are the benefits of a style guide?

Style guides are important and every brand should have them as these guides help form a unified and cohesive brand, they have many other benefits and I have created a mind map on Miro which I have added below.

Pattern  library

What is a pattern library?

A pattern library is a digital  library of user interface patterns that designers use to build digital products and they are referred to as ‘patterns’ because they are recurring solutions. Pattern libraries contain all of the components required to build a wide range of potential solutions quickly and with ease.

What do they contain?

Pattern libraries contain a wide range of different patterns that are organised into groups – beginning with the smaller components such as buttons and icons, through to components which are larger and more complex.

This allows designers to dip into this library whenever they need to and select the pieces they need to build their product easily, having a pattern library ensures that designers don’t waste time designing components that they have already designed.

Benefits of a pattern library

I made a quick diagram demonstrating the three fold benefits to a pattern library, see below:

Examples of Pattern Libraries

The above images are examples of how a pattern library should look. They should:

• be responsive
• have defined elements, e.g. buttons, titles
• explain how pattern will function, e.g. what happens when you click a link?
• have had code considered- think about code and where you will keep it
• ensure that patterns are accessible

Style Tiles

I decided to read the article titled Style Tiles by Samantha Warren access here, to give me a better understanding and more knowledge about the subject, why I should make one and when to use one.

What are Style tiles?

Style Tiles are a design deliverable consisting of interface elements fonts, colours and fonts that communicate the essence of a visual brand for the web, they help form a common visual language for your brand.

When should I use one?

Style tiles are for when a mood board is too vague and a comp is too literal, I have discovered through research that they work well for clients who already have established brands and they need them to translate smoothly to the web.

Style tile process

Examples

Below are some examples of style tiles that I wanted to include, I like their simple, easily understandable layout and composition. It is clear to me (a user) who has not seen any of the brands components before, and I can easily understand the colour palette and the choice of type faces that that brand has chosen to use.

What did I learn?

Week 8 had a lot of new information included in it that I am completely new to, including style guides, element collages and interface inventory. I am now aware of what each of these design components are and why they are important and when I should use them, I am excited to start more research into them. We have been given tasks to do based on this new information and topics and I hope that by completing them I become more knowledgable on those said topics and develop an even stronger personal brand. I will update my blog with the results of my tasks and their results.