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

Tab buttons

BLANK CARD

TAB PANEL

TAB PANEL: with search component, Blank list view with icon combo

No Domain Search Results

 

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

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