info@themewerk.com

Styleguide

People use more and more digital devices to connect with companies. That’s why it’s important for your customers to experience consistency in all their digital touchpoints. A key to achieving this consistency is a style guide.

Also commonly used is: Design Systems, Design Patterns, Design Framework, UI Style Guide. The principle is the same: you need a system in your designs.

The Advantages

What are the advantages of creating and using a style guide?

Consistency – Keeping your digital solutions consistent is much easier with rules, patterns and elements that are kept up to date in one place. It gives the opportunity to increase the user experience, which in turn leads to more consumers, more customers and thus more sales.

Updates – By creating a style guide, you’ll logically improve the ability to update by splitting the interface of your digital product into smaller, more maintainable components.

Recycling – Once you’ve split your interface into small blocks, you can build your product together in a modular way.

The Components

Define an initial style guide at the beginning of a project. There is not a general recipe, each project is different, but it helps us maintain consistency. An important part is to continuously improve and update the style guide.


Typography

Primary font, maybe a secondary font, selected font families, font settings, Text examples (headlines, paragraphs, content)

The Link below shows a very good example of typography guidelines.

https://designsystem.digital.gov/components/typography/

Color Palette

primary colors, secondary colors, complementary colors, highlight colors (warnings, errors, information, validations, …), additional color elements (e.g., gradients or semi-transparent overlays)

Here, the author also defines darker and lighter nuances. This leaves room for interpretation while ensuring consistent colors. It also defines neutral gray color areas and alerts, which are often important components of graphical user interfaces.

https://marvelapp.com/styleguide/design/color-scheme

https://marvelapp.com/styleguide/overview/introduction

Distances and Position

Grid System (Size, Gutters, Nesting, …), Rules and patterns of distances, Helper for pitches (reusable components for vertical and horizontal spacing between UI elements)

A grid system is an important part of a digital style guide and it is the most important tool to align all the UI elements in the grid and to determine the position correctly. At MailChimp.com, the authors have integrated the grid system into their style guides. They also define interspaces, mixed grids or nested grids, and moreover, the grid also works for responsive design.

http://ux.mailchimp.com/patterns

Icons

 All icons in the overview (preserves the consistency), Icon versions for light and dark backgrounds, Uniform sizes, predefined slices for the SVG export

One of the basic principles of the BBC Guidelines is they place great value on icons and show them in the style guide, all listed in an overview, grouped by application examples. The style of the icons is very consistent and I like the “Rules for using icons” section, which describes how to use the icons.

http://www.bbc.co.uk/gel/guidelines/iconography

UI Elements

Each product needs its own individual element. See a list of elements, e.g. may be needed for an application. They serve as inspiration for your own application, website or shop. The key is that all elements are created based on the previously defined typography, colors, spacing and iconography:

Navigation (main navigation, secondary navigation, breadcrumbs, pagination, …), Buttons (primary / secondary, more buttons, …), Warning messages (warnings, errors, information, validations, …), Forms (fields, radio buttons, checkboxes, selection boxes, …), Additional elements (product presentation, shopping cart, list view, layer, …)

MailChimp lists all the UI elements needed for your project. In the style guide, there are live examples with corresponding code snippets and source code that developers can easily use. They even go a step further and explain each item with a note.

http://ux.mailchimp.com/patterns/feedback

Templates

Within the templates, the defined UI elements serve as a template. As content, placeholders are used for pictures or texts. Dynamic components can be implemented with sample data.

Views, Sections, Pages

Here is the style guide of USA.gov, which shows how the templates can be well defined and described based on style guide components and subcomponents. An additional help may be the supplementary sections “When to use”, “When to avoid” and “Guidance”.

https://designsystem.digital.gov/components/typography/

Miscellaneous

Naming conventions (for files, folders, graphics, exports), Structure rules (also for files, folders, assets, exports etc., Code Guidelines, Interaction, Patterns, Animations, Texts, Language / writing style, Imagery and videos, Corporate Identity Guidelines

Other parts of the style guide can be very individual depending on the project. Below are examples that may serve as inspiration. The HealthCare.gov style guide includes brand values or special guidelines for photos. At MarvelApp.com, they put a lot of emphasis on animation, so their style guide defines a section for it. In the last example, USA.gov, you can see that even general design principles can get a place in the style guide.

https://styleguide.healthcare.gov/design/identity

https://styleguide.healthcare.gov/design/photography

https://marvelapp.com/styleguide/design/animation

https://designsystem.digital.gov/

Conclusion

As a rule, every project is different but all projects can benefit from the advantages of a style guide if it is created with great care and a sophisticated design system.

Top