Please enable JavaScript.
Coggle requires JavaScript to display documents.
Design Systems - Coggle Diagram
Design Systems
Auditing the UI inventory
Step 1: Looking for inconsistencies
Color
Typefaces
Font sizes
Gradients
Step 3: Group them in
different categories
Navigation
Cards
Drop down
Header
Step 4: Group them in
further subcategories
Button states
Step 2: take screenshots
and document
Step 5: show these inconsistencies
to the rest of the team
Components
Step 1: Identify which components are the most frequently used
Buttons
Headers
Text
Headings
Step 2: Identify which element is going to show the essence of your brand
Properties of good components
Purposeful
It should solve a design problem
Reusable
It can be used again and again. We can easily change its color and shape
Flexible
We can change its style
Step 3: group components by their purpose
It helps best with larger components
Headings
Mega
h1-h2-h3
Heading blog
Cards
Landing card
Sign-up card
footer large
Buttons
Primary action buttons
Secondary buttons
Hierarchy of components
Basic components
Stationary / standalone
Buttons
Forms
Input fields
Icons
Composite components
Combine basic 2-3 components to make larger components
Containers
Area or page that contains a collection of components
Layout
Show how all components come together in a page
Design tokens, roles and values
Token
A
code
that identifies each
role
$text
Design tokens have
a static name
a variable value
Role
We might give $text the role
"primary-text"
Value
The actual value of that style
Color assignerd to
"#333333"
Pattern to name tokens
[category]-[type]-[Item]-[state]
$button-cta-background-color=$blue-400
Typography
Step 1: Define base size
Step 2: Create typography scale
Step 3: Set line-height according to theme (Dense vs Airy)
Step 4: Naming the type styles
Size
Mega
h1-h2-h3
paragraph (base)
caption
small
button text
Purpose
Story titles and headings
Body copy
Page section headings
Metadata, captions, button-text
Color systems
Step 1: Experiment
Step 2: Define colors
Primary colors (Accents)
Secondary colors (backgrounds)
Success
Warning
Step 3: Define background colors
Light, dark, neutral
Step 4: Name your colors
Action colors (links)
Text colors
Headings
Subtitles
Titles
Input placeholder text
Action backgrounds
Emphasis category
Disable text
Normal text paragraph
Text for headings
Suggestive caption
Color roles
Define primary-secondary colors
depending on the background
Grid system and layout
Grid system
Different weight and spacing
between columns
Layout
How your molecules (design ideas)
are going to come together
Will tell how components form a cohesive design
Step 1: select framework like Bootstrap
{talk to dev)
Step 2: defice the No of columns
on Large
12 columns
on medium
12 or 8 columns
on Small
4 or 2 columns
The start
Purpose
Why is it important?
How will it help us?
Who is it for?
What's the goal of the DS?
Design Principles
Step 3: Brainstorm goals
(What the design has to convey)
Step 1: gather all teams
Step 2: gather all materials (Miro)
Step 4: Converge
and theme
Post them on a white board and arrange them (Affinity map)
Step 5: Rank and vote
Requirements
Step 1: gather different
stakeholders
CEO
Project managers
Marketing manager
Developer team
Design team
Step 2: take inventory
of what you have today
What are our problems?
What do we already have?
UI inventory
What do we need?
Blog post templates
Post design
for marketing
Email templates
Step 3: Get everyone
on board with the DS
Inventory
Summary of elements needed
Goals (what we
will achieve)
Step 4: stablish the baseline
of components of the DS
Define the major building blocks
Major base components
Step 5: define color palette, typographic scale and any other piece
Step 6: standarize accross your products
Step 7: integrate the DS
with your process
Create the delivery process and language
Step 8: mantain your DS
Defining the spacing system vertical and horizontal
Step 1: select base number 4px or 8px
Step 2: define a spacing scale (name them)
Step 3: naming spacing
Vary depending on device
Mobile
Smaller scaling space for phone devices
Desktop
Tablet
Example
Space-type-size
Space-vertical-20
Space-horizontal-44
Theming
1st level - Dark vs light
Just theme change of colors
2nd level - Brand
Different OS or working conditions might change or alter the original one
3rd level - Content + Structure + Style
Process
01.- Define pages in Figma
Design principles / Branding
Frame 1: Purpose statement
Frame 2: Design principles + Logo
Design System
Other relevant pages for the design