Design

Systems

Design Systems were introduced in 2010 by designers and developers. Back in the 90s, we were already creating style-guides for the design interface phase. They were design guidelines provided by the designers for the front-end developers and back-end engineers. Since then, design systems have evolved and are now used to enhance the workflow within the entire web development team.

Found out more

Purpose

Principles

How to?

Design systems will free up more time for creativity and focus on the user problems rather than design details. They will make the quality of any product better for its target audience.
‍

Why is it important?

If we don't innovate, our product will be beaten by competitors. If the target audience is met with inconsistent and confusing design, they will lose trust in the application. It is about keeping customer retention while building brand loyalty.
‍

What are the benefits?

Design Systems can reduce the interpretation problems. They are a single source of truth for developers & designers. They provide consistency, uniformity of design across different platforms or Apps. They are the building blocks of Product interface. The design system is available on demand for the internal development team.

How design systems help?

They provide up-to-date documentation, guidelines, rules and styles that are easy to understand. They capture the reasoning about why decisions were made. They are UI tool kits and processes that help the team implement the system on a daily basis. They resolve common, recurring situations with repeatable patterns so product teams can focus on new issues. They support UI and UX designers with shared tools, guidelines and principles.

What are Design Principles?

Design principles are set of guidelines the product team needs to follow throughout their design process in order to create more aligned experiences.

Why do we need Design Principles?

It is about the look, feel, tone of voice and how the brand behaves through the user interface. Good design principles can help the product team make better design decisions.

What are the elements of Design Systems?

Brand Guidelines: Non-aesthetic parts of a design. Includes principles, tone and voice,grammar, etc. This tells both the users and the company who you areand what your narrative is.

Style Guide: The documentation for the visuals. Includes all of the things that you think a designer would use: typography, icons, colour, illustrations, etc.

Visual Language: A guide to what the brand feels like (versus a style guide ishow to accomplish that).

CSS Framework: Front-end code that developers use to build a product. e.g. Bootstrap, Foundation

Component and Pattern Library: Includes forms, form elements, images,navigation, overlays, etc.

What are the differences between component and pattern libraries?

The difference between components and patterns is best explained using Brad Frost’s Atomic Design methodology:

Atoms: The foundational design elements that you cannot break down further. For example, buttons, icons, forms, etc.

Molecules: Created by combining atoms to create larger UI components or patterns, like pagination, breadcrumbs, etc.

Organisms: Complex UI patterns comprising of atoms and molecules. These patterns shape a user interface with cards, navigation bars, logos, search fields, etc.

Templates: Complete layouts and wireframes which include atoms, molecules, and organisms. A template starts to resemble parts of a webpage or mobile application.

Page: A page brings everything together on one screen.

Step 1

Principle Workshop (Maximum number of principles should not exceed 5)
‍
Gather all teams (developers, designers, content writers, managers).

Gather all materials, post-it notes, sharpies.

Brainstorm Goals (Write 5 goals per person.)

Converge and theme (Post them on white board and arrange them).

Rank and Vote.
‍

Step 2

Building Design System

Ask Developers their current problems

Ask Stakeholders about their problems

NB: Check all other surfaces like Blog Posts, Facebook Ads, email templates etc...

Start with what I currently have and list down all the problems I need to solve

1. Take inventory of what I have today
‍
2. Get the company onboard with my design system
‍
3. Establish the baseline components of my design system
‍
4. Define a color palette, typographic scale and every other pieces
‍
5. Standardize these across my products
‍
6. Integrate the design system with my process
‍
7. Maintain my design system

Step 3

Audit UI Inventory

Finding Inconsistencies

1. Look at each and every screens (every platform)

2. Take Screenshots

3. Group them into Categories like Navigation, Header, Dropdowns

4. Group them further into Sub-categories like Button States

5. Show these inconsistencies to CEO, Project Manager and my team

Step 4

Define Types of Components

1. Which components are used most frequently? (high frequency components)

2. Which high frequency components are specific high value for your product?

Purposeful
‍
All your components should solve a design problem. Define them by their purpose, not by how the way they look.

Re-usable

Your components should work for multiple use cases. Reduce the number of components that only used once or a single use case.

Flexible

They must not be rigid and be able to work in every context. Otherwise, people will create their own variations and the team will end up with a bloated system.

Grouping Components

Group components by their purpose rather than quality. Grouping components with purpose helps best with larger components like Cards.

Headings - Mega - h1, h2, h3, heading-blog

Cards - Landing-Card, Signup Card, footer-large

Buttons -Primary Action Buttons, Secondary Action Buttons
‍