@ive77i
Build your design system from scratch @webcampzagreb #wczg
Build your
design system
from scratch
WebCamp Zagreb
October 9th 2019
Slide 2
Slide 2 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
Ivana Miličić
Digital Product Designer
Hi!
Slide 3
Slide 3 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
Houston, we have a problem!
Slide 4
Slide 4 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
physical vs digital
product
Slide 5
Slide 5 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
multiple designers and
stakeholders
Slide 6
Slide 6 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
multitude of platforms
and devices
Slide 7
Slide 7 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
Slide 8
Slide 8 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
why?
Slide 9
Slide 9 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
individual and not systematical
problem solving
fragmented visual
language
Slide 10
Slide 10 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
language is not understood
by everyone
misunderstandings
Slide 11
Slide 11 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
disjointed user
experiences
Slide 12
Slide 12 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
Slide 13
Slide 13 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
manage
the chaos
Slide 14
Slide 14 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
build better
and faster
Slide 15
Slide 15 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
make scale
possible
Slide 16
Slide 16 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
achieve
consistency
Slide 17
Slide 17 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
improve
accessibility
Slide 18
Slide 18 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
Slide 19
Slide 19 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
what?
Slide 20
Slide 20 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
a product
not project!
Slide 21
Slide 21 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
a collection of reusable
components, guided
by clear standards
assembled can build any number of applications
Slide 22
Slide 22 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
ongoing
it will require maintenance
and improvements
Slide 23
Slide 23 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
Slide 24
Slide 24 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
how?
Slide 25
Slide 25 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
1. an inventory
• visual attributes
• UI elements
https://cssstats.com
https://github.com/getflourish/Sketch-Style-Inventory
Slide 26
Slide 26 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
Slide 27
Slide 27 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
2. guidelines
defining design language
styles and properties
Slide 28
Slide 28 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
Slide 29
Slide 29 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
• colors
• typography
• spacing
• images
• visual form
• motion
• sound
(visual) design language
Slide 30
Slide 30 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
http://tiny.cc/9g36dz
design system
http://tiny.cc/8h46dz
demo screens
Slide 31
Slide 31 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
• brand
• information
• hierarchy
• interaction feedback
color
Slide 32
Slide 32 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
1-3 primaries
neutrals for general UI
colors for different states
Slide 33
Slide 33 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
• brand
• information
• hierarchy
• user experience
typography
Slide 34
Slide 34 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
up to two typefaces / weights
type scale
leading, spacing and sizing
https://www.modularscale.com
Slide 35
Slide 35 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
• brand
• visual communication
• icons, illustrations, photos
• define guidelines
images
Slide 36
Slide 36 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
• backgrounds
• gradients
• textures
• shadows/elevation (z-indexes)
• rounded corners
• borders
visual forms
Slide 37
Slide 37 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
• animations
• tansitions
• sound
motion and sound
Slide 38
Slide 38 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
3. UI library
designing components with global
rules and reusable style
Slide 39
Slide 39 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
elements (or basics, or atoms)
components (or molecules, or modules)
regions (or zones, or organisms)
layouts
Slide 40
Slide 40 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
• consistent
• self-contained
• reusable
• accessible
• robust
foundations
Slide 41
Slide 41 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
Slide 42
Slide 42 text
@ive77i
Build your design system from scratch @webcampzagreb #wczg
Thanks!
twitter.com/ive77i
linkedin.com/in/ivanamilicic/
instagram.com/just_ivana_things/
joind.in/talk/d2bc8