Style guides and design systems

Presentation objective:

• Explain how style guides and design systems can help you develop meaningful products from the beginning

What does it solves?

Style guides and design systems are two ways of communicating the standards that you set for visual treatment, written content and the user experience behaviour of your products, your website and your printed literature.

The aim is to have a single point of reference for how things should look, behave and sound.

Style Guide

Design System

• Content, branding
• How to comunicate

• Architecture, layout
• How apps should behave

Style Guide

It describes the tone of voice and visual treatment you'll use when communicating in different media.

Essential part of the design system because they are used to document each part of the system

Style Guide Elements

• Brand identity
• Audience (writing)
• Design principles
• Content strategy
• Coding

Design System

Aimed at people who creates code.

Include everything that makes up your product.

Design System Principles

• Component-based approach to create reusable patterns
• Standardize the workflows
• Create a common toolkit and documentation

All of this promotes consistency, improves UX and helps with design and development