# Styleguide

Styleguides contain concrete specifications for the design of an application.

Example for a section of a styleguide

# Summary

Styleguides are concrete design rules that describe the appearance of an application in detail, mostly at pixel level. They can describe all levels of the application: from layout to aesthetics. Styleguides are usually company- or product-specific and usually part of a design system (curated list of design systems (opens new window)).

# Result

The use of a style guide results in a uniform look&feel of the application(s).

# Approach

The procedure distinguishes between application and creation of a style guide: The relevant style guide must first be selected and then the design specifications for the individual UI elements must be considered and applied. UI elements may include colors, fonts, icons, page layout, menu placement, spacing, buttons, etc.

If a style guide is to be created, the effort depends on the available material. If no visual drafts exist yet, they must be created. Specifically, the entire look and feel of an application or product must be designed in a graphics program. Possible topics are, for example:

  • The application framework: Header, Footer, Navigation, Message Concept
  • Layout of the entire application and for different page/dialog types
  • Navigation concept: Main navigation, menus, and submenus, if necessary navigation aids such as sitemap or breadcrumbs
  • Definition of patterns of UI elements or behavior patterns of the application
  • Guidelines for the use of individual components such as buttons or text fields

If these drafts exist, the style guide can be created automatically using an application, e.g. Zeplin (opens new window).

# Utilities and templates

Examples of style guides:

# Advantages

Style guides are used to develop consistent user interfaces and design decisions follow predefined guidelines. This is also ensured when other people develop the application further. With a style guide, the design effort of an application is reduced.

# Disadvantages

Style guides must be regularly updated and maintained. In addition, the individual design freedom can be restricted by very detailed style guides.

# References