DESIGN
SYSTEMS
& BREAKING DOWN DESIGN FOR ENGINEERS
Sets of design rules, components and styles that can be adopted by other products within an organization or other companies within the industries.
DESIGN DECISIONS TURN INTO UI
ARTIFACTS THAT TURN INTO LIVING REUSABLE DESIGN COMPONENTS.
FROM THERE, AN ITERATIVE DESIGN LANGUAGE WILL DEVELOP & WILL
BE USED TO BRIDGE THE GAP FROM
DESIGN TO ENGINEERING.
START DESIGNING SCREENS AND WHEN
YOU HAVE A COUPLE SCREENS DONE, THE
YOU SHOULD STOP AND CREATE A GLOBAL
COMPONENT LIBRARY THAT YOU CAN PULL
FROM AS YOU DESIGN NEW SCREENS.
MATERIAL.IO
PIVOTAL EXAMPLE
THIS IS HOW ENGINEERS WILL BUILD
SOFTWARE AND YOU SHOULD MIRROR THEIR PROCESS WITH IN YOUR DESIGN TOOL.
IT’S GOOD TO RE-USE AND NOT
CREATE 1-OFFS UI ELEMENTS.
THE
STYLE
GUIDE
COLORS
PRIMARY COLORS
ACTION
COLOR
SECONDARY
ACTION
COLOR
PRIMARY
TYPE
COLOR
COOL BLUE
00b3E3
JAZZY TEAL
6790A2
TYPE GREY
65666A
BKG GREY
EAEDEE
DOLPHIN GREY
C5CACC
SLICK BLUE
16303E
SECONDARY COLORS
ERROR
COLOR
SUCCESS
COLOR
HOVER BLUE
0094C2
HOVER TEAL
587B8A
CLEAR GREY
F9FAFA
SKY GREY
F3F5F5
STROKE GREY
E0E8E8
CORAL RED
FF5A34
GEO GREEN
00C4B3
HOT ORANGE
FFA409
PURPLE RAIN
CD25B0
BAR BLUE
0023A0
TYPOGRAPHY • OPEN SANS
ROBOTO (only used for numbers)
LIGHT
PIXEL HEIGHT: 60 pixels
OPEN SANS
REGULAR
PIXEL HEIGHT: 34 pixels
ROBOTO (only used for numbers)
LIGHT
PIXEL HEIGHT: 34 pixels
OPEN SANS
REGULAR
PIXEL HEIGHT: 24 pixels
OPEN SANS
REGULAR
PIXEL HEIGHT: 20 pixels
OPEN SANS
REGULAR
PIXEL HEIGHT: 18 pixels
OPEN SANS
REGULAR
PIXEL HEIGHT: 16 pixels
OPEN SANS
REGULAR
PIXEL HEIGHT: 13 pixels
OPEN SANS
REGULAR
PIXEL HEIGHT: 13 pixels
EXAMPLE:
EXAMPLE:
EXAMPLE:
EXAMPLE:
EXAMPLE:
EXAMPLE:
EXAMPLE:
EXAMPLE:
EXAMPLE:
Next
H1
H2
H2a
H3
H4
A1
A2
A2
H5
LOGOUT
LOGOUT
RECIPIENTS LIST
500,000
500,000
RECIPIENTS TARGETED
RECIPIENTS TARGETED
1,300
SUBSCRIBERS TARGETED
BUTTONS
NAME:
PRIMARY BUTTON
COOL BLUE: 30B6E1
HOVER:
PRIMARY BUTTON
HOVER BLUE:
0094C2
NAME:
SECONDARY BUTTON
JAZZY TEAL:
6790A2
HOVER:
SECONDARY BUTTON
HOVER TEAL:
587B8A
Next
Next
Save Draft
Save Draft
NAME:
CANCEL BUTTON
CLEAR GREY:
F9FAFA
STROKE: 1PX
DOLPHIN GREY:
C5CACC
Cancel
HOVER:
CANCEL BUTTON
SKY GREY:
F3F5F5
STROKE: 1PX
DOLPHIN GREY:
C5CACC
Cancel
HOVER:
CORNER BUTTON
COOL BLUE:
30B6E1
TYPE:
WHITE:
FFFFFF
Add Recipients
NAME:
CORNER BUTTON
DOLPHIN GREY:
F3F5F5
TYPE:
COOL BLUE:
30B6E1
Add Recipients
NAME:
ICON BUTTON
COOL BLUE: 30B6E1
HOVER:
ICON BUTTON
HOVER BLUE:
0094C2
NAME:
DISABLED BUTTON
OPACITY: 30%
Next
FORMS
NORMAL STATE:
HOVER STATE:
ACTIVE STATE:
* Title
* Title
* Title
30 characters max
30 characters max
A1 Regular 080028
FORM::
FILL:
WHITE
STROKE: 1PX
DOLPHIN GREY:
C5CACC
FORM:
FILL:
F9FAFA
STROKE: 1PX
COOL BLUE:
30B6E1
FORM:
FILL:
F9FAFA
STROKE: 1PX
COOL BLUE:
30B6E1
FORM GHOST TYPE:
A1: light italic
DOLPHIN GREY:
C5CACC
FORM TITLE:
A1: light
TYPE GREY
65666A
FORM TYPE:
A1: Regular
SLICK BLUE
16303E
ERROR STATE:
ERROR HOVER STATE:
* Title
* Title
A1 Regular 080028
A1 Regular 080028
FORM TYPE:
A1: Regular
SLICK BLUE
16303E
FORM:
FILL:
WHITE
STROKE: 1PX
CORAL RED
FF5A34
FORM:
FILL:
F9FAFA
STROKE: 1PX
CORAL RED
FF5A34
FORM TYPE:
A1: Regular
SLICK BLUE
16303E
CHECK BOXES 23pixel x 23pixel
NORMAL
FILL:
WHITE
STROKE 1px:
E0E8E8
HOVER
FILL:
WHITE
STROKE 1px:
30B6E1
ACTIVE
FILL:
30B6E1
STROKE 1px:
30B6E1
THE
COMPONENT
DRIVEN DESIGN
SPACING • INCREMENTS OF 15 PIXELS
30 Pixels
30
90
60
60 Pixels
90 Pixels
120
120 Pixels
150
150 Pixels
BLANK CARD & ICON COMBO
WHITE with 2px STROKE:
STROKE GREY
E0E8E8
BLANK CARD
60
0
RECIPIENTS TARGETED
120
BLANK CARD
WITH ICON COMBO
CARD HEADER & CORNER BUTTON
RECIPIENTS LIST
60
TYPE GREY
65666A
H5
Add Recipients
CARD HEADER
CORNER BUTTON
RECIPIENTS LIST
Add Recipients
SKY GREY
F3F5F5
HOVER BLUE
0094C2
CARD HEADER WITH CORNER BUTTON
CARD WITH HEADER & CARD WITH HEADER WITH CORNER BUTTON
CARD WITH HEADER
RECIPIENTS LIST
DOLPHIN GREY
C5CACC
OPACITY 10%
BLANK CARD
WITH CARD HEADER
CARD WITH HEADER & CORNER BUTTON
RECIPIENTS LIST
Add Recipients
BLANK CARD WITH CARD HEADER AND CORNER BUTTON
SEARCH COMPONENT WITH LEFT ICON COMBO & ICON BUTTON
ICON BUTTON
ICON LEFT COMBO
www.food.com/crappyfoodthatatstegreat
TYPE GREY
65666A
www.food.com/crappyfoodthatatstegreat
SEARCH COMPONENT
TAB PANEL
TAB PANEL IS MADE WITH TAP BUTTONS AND BLANK CARD
Find a Customer & Domain
Tab buttons
BLANK CARD
TAB PANEL
TAB PANEL: with search component, Blank list view with icon combo
No Domain Search Results
Enter Customer ID
No Customer Search Results
SEARCH COMPONENT
Find a Customer & Domain
BLANK CARD
BLANK LIST WILL ALWAYS HAVE A
WITH ICON COMBO
TAB PANEL: with search component, populated list view with icon combo
A2
TWO COLUMN
LABEL
SKY GREY
F3F5F5
CLEAR GREY
F9FAFA
A1
POPULATED LIST VIEW
MODAL TOP CARD • FIXED TO THE TOP OF THE MODAL
135
SELECT OR ADD A NEW RECIPIENT LIST
H4
Upload file
TYPE GREY
65666A
Food.com
Food.com/crappyfoodthattastegreat
Food.com/crappyfood
Food.com/thisisanexampleofalong
urlthatwouldtaketwolines
Violence and Gambling
Violence and Gambling
Parental Controls
Parental Controls
www.food.com/crappyfoodthatatstegreat
WEBSITE URL
LISTED AS
4 search results
Find a Domain
A1
H1
H4
A1
BLANC CARD
WITH FORM
AND SECONDARY
BUTTON
WITH SHADOW
MODAL BOTTOM CARD• FIXED TO THE BOTTOM OF THE MODAL
105
Cancel
Add recipient list
BLANC CARD
WITH PRIMARY
AND CANCEL BUTTON
LIST VIEW DETAIL 1 & 2 WITH CHECK BOX
NORMAL STATE
Recipient List
LIST VIEW DETAIL 1
A1
SKY GREY
F3F5F5
Recipient List
LIST VIEW DETAIL 2
CLEAR GREY
F9FAFA
HOVER STATE FOR BOTH 1 & 2
50
Recipient List
DOLPHIN GREY
C5CACC
ACTIVE STATE FOR BOTH 1 & 2
Tuesday's List
Remove
HOVER TEAL
587B8A
with bottom stroke: 1px
white: ffffff
COMPLETE LIST VIEW
Recipient List
Recipient List
Recipient List
Recipient List
Recipient List
Recipient List
Recipient List
Recipient List
Tuesday's List
Remove
THE
interaction
model
?
The interaction model is the best set of interactions,
patterns, rules and ui real-state to house and serve the ui
components that contain the information and content.
THE
VISUAL
LANGUAGE
1st
Create an strong action color that
will be used for most of the click-able
elements and used for the color of
the primary buttons.
Also, create a secondary color for
secondary buttons, text and other
ui elements.
examples
2nd
Use the action color for things that
are clickable. Good examples are, "X" and back buttons, text links and forms.
Use these rules within your
design as you make more screens
and ui components.
After you have a couple screens
designed and you're starting to re-use
elements, then stop and create re-usable symbols.
Use this symbol library as you continue
designing and if you create something new, then create a symbol. This makes changing ui elements super fast!
Name everything including colors.
Eg: Primary button, Slide left drawer,
sunny yellow. No need to name type,
just h1– h4 for headline size type and
p1–4 for paragraph size type
2nd
3rd
Select a set of grays and don't use just
a gray, add some color to it.
Create a type system. Reuse them
through your designs.
36 POINT - BOLD - H1
28 POINT - BOLD - H2
16 POINT - BOLD - H3
24 point - light -P1
16 point - light - P2
4th
8 x 8 pixel
16 x 16 pixel
32 x 32 pixel
64 x 64 pixel
Use a spacing system.
I like 8 Pixel sequence
5th
32 pixel
tall
Make sure your icons
are consistent. Don't mix styles,
fills or outline icons.
Pick either outline only or filled icons
Pick multi color or solid color
Pick consistent style, should like a family
Make sure it can scale for the system before you style 1 icon
PRIMARY
SECONDARY