A Must for All Complex User-facing Digital Products — UI Style Guide
How to make the user interface of your product highly consistent and cohesive…
by Brett Mazoch, published in A Designer’s Thoughts | read in Czech
In my previous post, 5 essential elements of an UI Designer, I have mentioned that consistency in a user interface is one of the key elements of extremely usable digital products. That consistency improves the overall user experience and makes design & development quicker and more effective in the long run. The main tool for keeping consistency across the user interface of your software product is so called UI Style Guide. You could hear different names for it — Pattern Library, Design Framework, Visual Guidelines… however, the point is the same: design a system in your designs.
The point is to DESIGN A SYSTEM in your designs…
THE CONTENT
A quick summary of what you can find in this article:
01. BENEFITS
What are the benefits of creating and using the style guide in your project?
02. BUILDING BLOCKS [checklist]
What are the building blocks of good UI Style Guides?
03. WHERE TO CONTINUE
Eager to learn more about style guides? Check out the links I recommend
01. BENEFITS
What are the benefits of creating the style guide?
As an UI designer of digital products, I experienced several benefits which the style guide brings on the table. The great thing about them is that they can be found in design and equally in development stage:
- Consistency — once again the word “consistency”. You will keep your solutions consistent more easily by having rules, patterns and elements of the UI defined in one place. As we already know, it has the power to increase user experience which can lead to more costumers, clients, and revenue.
- Maintainability — when the product is complex, the requirement for good maintenance is high. By creating a style guide you will logically make the maintenance of your product way better because you tend to define the UI of your product in smaller and better maintainable building blocks.
- Reusability — once you have your UI defined by small blocks, you can build your product like a building kit. Have your ever played with Lego? Lego is the matter of my childhood and the style guide works the similar way. And if the style guide is done right, the change in one place will occur everywhere.
- Reference place — the style guide should become a zero point of your design & development Universe. The place where your designers and developers can look at to clarify things and communicate with each other better. Designers also look there to keep UI consistent and to reuse design patterns in new designs. Developers look there to find out how are UI elements used and build while implementing the desired designs.
02. BUILDING BLOCKS [checklist]
What are the building blocks of good UI Style Guides?
In Bluewire Technologies, where I am an in-house UI Designer, we managed to define the style guide for our web-based information system called Epro. We are already experiencing the mentioned benefits even though I can still see areas for improvements in our style guide. Improving the style guide is a gradual and worth of doing process.
Below, you can find my personal checklist of fundamental building blocks for UI Style Guides which I started to use in my personal and work projects. I am also attaching screenshots (and my additional notes) from some great examples of living style guides of companies and organisations BBC.co.uk, MailChimp.com, MarvelApp.com, USA.gov and HealthCare.gov.
I. Typography
- primary typeface,
- eventually secondary typeface (no need for a third one — two typefaces are usually enough, really),
- chosen font families (regular, italic, bold, semibold, light, …),
- text styles examples (headings, paragraphs, info texts, …).
The example below: On the screenshot from USA.gov you can see very good example of typography guidelines. I personally like how is defined and explained the choice of specific typefaces. It is obvious that they were really thinking how to make the typography of derived projects nice and functional at the same time. The authors go even further and define particular font style examples and also their pairings.
II. Colour Palette
- primary colours,
- secondary colours,
- complementary colours,
- alerts colours (warnings, errors, information, validations, …),
- additional colour elements (for example gradients or semi-transparent overlays).
The example below: The screenshot from MarvelApp.com colour palette is showing us a nicely designed colour scheme which is based on Marvel’s brand colours. The authors define there also darker and lighter shades, which gives them a space for variety while still ensuring that the colours are consistent in tints. They also define complementary neutral grey colours and colours for alerts messages which are often very important part of graphical user interfaces.
III. Spacing and Positioning
- grid system (sizes, gutters, nesting, …),
- spacing rules and spacing patterns,
- spacing helpers (reusable constants for vertical and horizontal gutters between UI elements which can be used in the code).
The example below: A grid system is in my opinion another fundamental building block of good UI Style Guides and it is the main tool for keeping all UI elements and set of elementes properly aligned. In MailChimp.com they apparently know it very well, because they include the grid system in their style guide. They also specify grid gutters, mixed grids and nested grids and on top of that also a list of breakpoints for responsive layout.
IV. Iconography
- all icons shown together (that will help you with visual consistency),
- icons versions for light and dark backgrounds,
- unified range of sizes,
- predefined slicing areas for easier SVG exports.
The example below: One of the three main foundations in guidelines prepared by BBC is the iconography (another two are grid and typography). So they care a lot about their icons and they are showing them in the style guide altogether, dived by specific groups of use. The visual style of the icons is very consistent and I also really like the section called “Rules for using icons”, in which they describe the usage of the icons.
V. UI Elements
At first it needs to be said that every product requires its individual elements. So, below there is a list of elements which are important specifically for our application. However, they might be an inspiration for you. The key is that all elements should be built upon on previously defined typography, colours, spacing and iconography:
- navigation (main nav, secondary nav, breadcrumbs, pagination, …),
- buttons (primary/secondary action buttons, tools buttons, …),
- alert messages (warnings, errors, information, validations, …),
- forms (fields, radio buttons, checkboxes, poplists, infield validation, …),
- markers (person types markers, patient states markers, document types, …),
- additional elements (calendar, patient timeline, patients lists, documents lists, cards, modal panels, …).
The example below: On the screenshot again from MailChimp.com are listed UI elements which are necessary for their specific project. In their style guide, they are displaying live examples and next to them even source codes which can be easily copied by developers. They go also a step further when they write down explanatory notes for each UI element.
VI. Templates
Sets of defined UI elements assembled together and used with text and image placeholders or sample data (good practice also is to include empty/initial states):
- views,
- sections,
- pages.
The example below: Here is another example from USA.gov style guide which demonstrates how the page templates can be nicely defined and described based on style guide components and sub-components. I personally also really like an extra step taken in writing down useful explanatory sections “When to use”, “When to avoid” and “Guidance”.
VII. Additional parts
- naming conventions (for files, folders, graphic assets, exports),
- structure rules (again in files, folders, assets, exports etc.),
- code guidelines,
- interaction patterns,
- micro animations,
- texts and microcopies,
- language/writing style,
- photographies and videos,
- corporate identity guidelines,
- and others…
Examples below: Additional parts of the style guide can be very individual depending on the project. Below are examples which can be served as inspiration. For example, in HealthCare.gov they include in their style guide also brand identity assets or special guidelines for photographies. In MarvelApp.com they place a great attention to micro animations, so they put into their style guide a section about animations. And on the last example from USA.gov, you can see that also design principles can find a place in the style guide.
03. WHERE TO CONTINUE
Eager to learn more about style guides? Check out these links
Since the whole topic about style guides is really broad, it might be overwhelming to go through all published articles about this topic. So I put together a list of articles which I have found extremely useful in my beginning because I learnt from them a lot. They might be useful for you as well. Definitely, great articles if you want to learn more about style guides and its best practices:
- Creating Style Guides published at Alistapart.com
- How to create a FRONT END FRAMEWORK with Sketch
published at Medium.com/sketch-app-sources - Designing Style Guidelines For Brands And Websites
published at Smashingmagazine.com - Starting a new app design project
published at Medium.com/ux-power-tools - Style Guide Best Practices published at Bradfrost.com
- Design Systems published at Blog.marvelapp.com
- Color in Design Systems published at Medium.com/eightshapes-llc
- Space in Design Systems published at Medium.com/eightshapes-llc
- and way more at Website Style Guides Resources…
And here is once again the list of great living style guides which I have used for demonstration of UI Style Guide building blocks:
- BBC.co.uk
- MailChimp.com
- MarvelApp.com
- USA.gov
- HealthCare.gov
- for even more examples see Website Style Guides Resources…
Final thoughts
Every project is usually different but I believe all of them can benefit from the style guide if it is defined with care and with a design system in mind. If your project doesn’t have a style guide yet, I hope that patterns and good practices mentioned in this article were useful for you.
In next articles, we will look at one of the another topic briefly mentioned in my previous post 5 essential elements of an UI Designer.
For more stories see ► A Designer’s Thoughts.
Thank you for reading!
Worth reading? 💚
If you enjoyed the article, please clap below to help others find it.
Do you have any question or just an idea for sharing? Feel free to leave a comment below or share it on Twitter.
The article was written by Břetislav “Brett” Mazoch while working as a designer in England. He moved there from the Czech Republic to follow his traveller’s dreams and work passion — UI/UX Design and Front-end Development.
