Style Guides and Pattern Libraries

This weeks lecture kicked off with a brief definition for style guides, pattern libraries and components. I found this to be a great way to break into the topic as I feel quite often the terms style guides and pattern libraries are often used interchangeably so it’s great to get a clearer understanding of how they differ. The definitions provided where as follows:

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 organized set of related, reusable components, often containing code examples, design guidelines, and use cases

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

My understanding now is components make up pattern libraries and pattern libraries are included in style guides along with brand guidelines, design principles and how to implement them.

Pattern Library

I have briefly looked at pattern libraries in my blog Creating a Pattern Library in which I have attempted to follow the steps presented by Paul Boag to create my own pattern library with a primary focus on coded elements. I found this to be a difficult task at the time as I am new to coding and was placing my emphasis on logging how to code a number of elements. Therefore, I would now like to primarily focus on how components look and behave, with a secondary focus on how they are coded as I still need to improve the coding I am creating and develop my skills in this area.

We were directed to a number of resources in this weeks lecture that I think will be very helpful and therefore I have quickly outlined what can be found in a number of them below. While I have found googles material design to be an excellent resource for this I have covered it in some detail in previous blogs and there will focus on some of the other resources provided.

BBC Design Patterns

What I love about the BBC Design Patterns is the way it’s structured with each component being broken down into Overview, How it works, Rules, Accessibility and Variations. However, I do find the primarily grey colour palette to make the information a little more difficult to engage with.

When looking at the information provided on cards I found it particularly helpful that information around how the individual components of a card is broken down and explained e.g. the image in the card above is displayed within the preview area which can also display a piece of video, audio, a gallery, fact or quote.

While I struggled to find the exact measurements used to create the above component I did find them readily available in the Adobe Illustrator file by following the download link at the top of the page.

I think the above is a great asset with detailed measurements and I also love that it’s an Illustrator file as it is my preferred software however I also appreciate the benefits of material design assets being accessible on Figma as it can be used for free.

Mail Chimp Pattern Library

In contrast to the BBC’s Design Patterns, Mailchimp’s pattern library is a lot more code-focused. I also find the pattern library easier to navigate than material design due to the fact that the resource doesn’t go into as much detail covering only the foundational design aspect of the brand including Colour, Data Visualization, Grid System and Typography and a relatively concise list of components.

As seen in the buttons example above each components page is divided into sections with each section presented as a toggle button at the top of the page. I think this is a great way to access the information you’re after quickly and without having to scroll through the page searching for the information. I also think this resource will be incredibly helpful as I developed my coding knowledge, in guiding me through how to log my own code.

Apple Human Interface Guideline

I found Apples Human Interface Guidelines to be nearly as comprehensive as Google’s Material Design however not as easy to digest as there aren’t as many visual references. However, I do like that some coding references are interspersed throughout and also feel that taking the time to work through this resource could be very beneficial. I think looking particularly at components related to navigation could be very helpful as areas such as these can improve the usability of design as suggested by Jakobs Law.

Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

I also have a personal preference for apple products and therefore naturally lean towards what apple produce as I feel they set a very high standard for design.

Style Guide

A style guide is a more comprehensive document and not only include brand guidelines but also pattern libraries and digital outputs.

In cssguidelin.es talk briefly about the importance of coding style guides as a way for developers to standardise their code. This is particularly valuable for teams with products that will be developed and maintained for a reasonable length of time. A good style guide is considered to include:

• set the standard for code quality across a codebase;

• promote consistency across codebases;

• give developers a feeling of familiarity across codebases;

• increase productivity.

While I will be working on my portfolio site alone and it is unlikely to require complex coding as I will have to produce something I am capable of coding myself I do think it would be helpful to familiarise myself with writing CSS guidelines and would like to at minimum outline my approach to basic syntax and formatting. By building a guide like this not only including CSS but also HTML and JavaScript I should be able to ensure a level of consistency throughout my site.

Githubs style guide provides a great overview of CSS, JavaScript and Ruby. I took a little time going through the information provided in the primer section which covers CSS and found the detail on how items are classed to be particularly helpful as I feel this is a problem I could run into i.e. having multiple classes that do the same thing rather than one.

 

Anna Debenham – Front-End Style Guides

Anna Debenham discusses the importance of style guides in her talk on Front-End Style Guides. It is highlighted by Debenham that when passing on a site you have designed it is really important to include a style guide so that the new design team know why you have made decisions. This also sets a helpful boundary around what changes shouldn’t be made to the site e.g., not including additional fonts.

It is also helpful as explaining where and when different pieces of content should be used encourages you to think about your site as a system rather than a series of pages. It also forces you to consider why you are marking the decisions you are making.

There are various types of design guidelines including branding guidelines, print guidelines and coding standards. Front end style guides often contain elements of the previous guides mentioned and are interactive so you can hover over them and it will highlight, change state, fill out form fields etc.

Front-end style guides are not something I am overly familiar with so I found a great example, IBM’s  Carbon Design System. This comprehensive guide covers case studies, designing, developing and include a brand/ system guide, components and patterns use on IBM’s website. It also provides foundational and usage guidance in its design section. This is a really comprehensive guide and I would love to learn how to produce or work on something of this scale in future.

It was also interesting to note that there are different techniques that can be used to create style guides. Debenham covers a couple of approaches that designers can use to help produce their designs these included interface inventories and style tiles. 

A great technique that can be used by designers coming in midway through a live project is completing an interface inventory. This allows the designer to see how much of the site can be consolidated. Consolidating styles will help make code leaner and the site more visually coherent and easy to maintain.

 

Style Tyles

Samantha Warren’s Style Tiles are a time-saving technique to avoid time spent creating mockups that turn out to be not what the client wants. Style styles are described by Debenham in between mockups and mood boards and act as a tool for conversation.

On the site, styletil.es Style tiles are described as:

“deliverable consisting of fonts, colours and interface elements that communicate the essence of a visual brand for the web”

They are described as helping designers and clients form a common visual language. I imagine this to be a really helpful technique as it helps to avoid the frustration of making a complete website mock-up only to find out that it’s not what the client is looking for.

It is also advised that style be used in instances when a mood board doesn’t provide enough detail and are too vague and are great for use in instances when clients have an established band that needs to transition onto a website.

Style tyles can be created in 3 steps

Step 1. Listen

It’s important not to get too caught up in the direction you think the site should go, the client holds invaluable information about their brand so make sure to listen. This can be helped by holding design meetings and even marking a survey if there are multiple people involved.

Step 2. Interpret

Process feedback from clients by identifying themes and sorting similarities. Consider elements of design (form, line, colour etc.) and design principles (unity, emphasis, balance etc.)

Step 3. Define a Visual Language

Choose themes based on client feedback and match them with a style.

What have I learnt?

• Style guides are made of pattern libraries, brand guidelines
• I have a greater understanding of how different components makeup and element and ways these can be standardised.
• I have a better understanding of what a coding style guide is and how to make one.
• I have learnt what a font-end style guide is and have a great resource to reference if ever working on these in future.

How can I apply this to my work in future?

• I have a number of resources to refer to when creating style guides and pattern libraries in future.
• Mailchimp’s pattern library provides a great structure for logging code and I would like to refer to this as I developed my coding skills and want to log my code.
• When working on navigational elements of a UI I can refer to Apples Human Interface guidelines.
• When working with clients with an established brand I now have multiple approaches I can take when designing their website and will be able to produce style tiles when required.