Intro Design System for Visual Designers

Presented by Inyoung Choi. Tweet @WWW_inyoung
!1
Intro Design System
For Visual Designers

!2
Who Am I
Inyoung Choi
UX Designer @RMIT Online
Tweet @WWW_inyoung @theWebMeetup
I like
Burgundy wine, cooking, board games, gardening
Previous jobs
Web designer
Digital product manager
Visual designer
Instructor
Chef

at
BzIpatternubrary
gyegu.g
f IeIdent
!3
C. I. P. & branding guidelines

Presented by Inyoung Choi
!4
What is a design system
Style guides, Pattern library, Components

!5
Design system is a set of interconnected
patterns and shared practices coherently
organised to achieve repeating elements
that we combine to create an interface.
- Alla Kholmatova

!6
Pattern library
• UI elements
• Colour palette
• Typography
• Iconography
• Buttons
• Shapes
• Motions
• Interactions
• Imageries
• Layouts
• Navigations
• Video footages
• And more

!7
Component library
• UI Design + Code
https://material.io/design/components/cards.html#usage

!8
Style guides • Brand design guide
• UX design guide
• Content style guide
• Font, colours, trade marks
• Design directions - visual and interaction design standard
• Tone of voice, accessibility, usability
https://material.io/design/usability/accessibility.html#layout-typography

!9
Design Guidelines vs Living Style Guide vs Design System
https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/

!10
Design Guidelines vs Living Style Guide vs Design System

!11
Practices are how we choose to
create, capture, share
and use those patterns,
particularly when working in a team.

!12
How will a design system help the
business and the team members?

!13
Why are we doing this
Efﬁciency
Instead of repeatedly building similar components from
scratch, Design Systems enable designers & developers
to reuse components and thereby increasing efﬁciency.

!14
Consistency
Design Systems introduce a shared set of principles
and rules to build components. It becomes much
easier to create consistent experiences across different
platforms.

!15
Scale
Increased efﬁciency and consistency lead a company to
build faster products at scale.

!16
How are we doing this
A design system doesn’t start with choosing a
first colour. Instead, ground a system in a
strategy that discerns customer needs, sets
objectives, explores and converges on a design
direction, pitches a strategy, and obtain an
organisation’s commitment.
- Nathan Curtis, “Starting a Design System”

!17
Problems of design
Lack of consistency
Communication and collaboration
Time
= money
https://media.giphy.com/media/3peISTXJFTBZK/giphy.gif

!18
Start with understanding how your team currently works and what the
biggest struggles are by asking:
• What is your favourite part of your job?
• What is the most frustrating thing about your day-to-day work?
• If you could get rid of one aspect of your job, what would that be?
• What are the main inefficiencies in your design/development process?
• How can your company improve in terms of enabling people to get their
work done more effectively?
- Laura Elizabeth, “Making Design Systems Work In The Real World”

!19
Example in the wild
Airbnb case study

!20
Why? Problem statements
• Airbnb has experienced a lot of growth over the years.  
needed more systematic ways to guide and leverage our
collective efforts
• Multiple designers and stakeholders will demonstrate different
solutions and styles, causing the experience is diverge.
• Product on a multitude of platforms and devices. Keeping
features and designs synchronised takes signiﬁcant effort.
• Software as a continuumCode and designs created years ago
still exist in many places, even after the landscape of a
company and its product have shifted signiﬁcantly. This
requires constant maintenance and upgrading.

!21
Start
• assembled a small group of
designers and engineers.
• cleared their calendars
• reserved an external studio place
outside Airbnb HQ
• dedicated to designing and
building the Design Language
System

!22
The goal of Design Language System
The goal we set for the DLS was to create a more beautiful and
accessible design language.
“Our designs should be unified platforms that drive
greater efficiency through well-defined and reusable
components.”

!23
Airbnb Design Language System
• a basic style guide, the foundation 
• Audit
• Redesign
• Establish principles to guide with the designs

!24
Uniﬁed: Each piece is part of a greater whole and should contribute positively
to the system at scale. There should be no isolated features or outliers.
Universal: Airbnb is used around the world by a wide global community. Our
products and visual language should be welcoming and accessible.
Iconic: We’re focused when it comes to both design and functionality. Our
work should speak boldly and clearly to this focus.
Conversational: Our use of motion breathes life into our products, and allows
us to communicate with users in easily understood ways.

!25
Reviewing collective
work at the end of
each day (began to
see patterns emerge)
course-corrected
when necessary
defining standardised
components.

!27
Creating components
“A unified design language
shouldn’t be just a set of static
rules and individual atoms; it
should be an evolving ecosystem.”
components as elements of a living organism
They have a function and personality, are
defined by a set of properties, can co-exists with
others and can evolve independently.

!29
Collection of components in the library

!30
Design for different Screen sizes

!31
Releasing the new apps using the Design System

!32
Design system examples
Style guides, Pattern library, Components

!33
Material design
Design system examples palette

!34
Design system elements
Layout and grid system

!35
Layout and grid system
Olden Days: The grid
before “graphic design”
“While Renaissance painting may seem a far cry from something like a page layout, it was
this marriage of architecture and visual representation that first produced the grid (although
it was not called that at the time).”
99designs-history of the grid

!37
Grid system in web design
A grid system is a tool that you can use to help build a solid
base that your design can grow and evolve from, all while
keeping harmony and continuity between all of the elements on
your page.
It’s mostly based on mathematics and proper portions between
elements on the page, both horizontally and vertically.
Advantages of Grid Systems in web design

!38
Responsive design
Responsive Web design is
the approach that suggests
that design and
development should
respond to the user’s
behaviour and environment
based on screen size,
platform and orientation.
Material Design-Responsive layout grid

!39
Grid system in web design
1. Columns
2. Gutters
3. Margins

!41
Design system implementations
Owner, designers and users

!42
Owner
Designers/Developers
Users

!43
Design system implementations
What can we do

!44
References
Design system and responsive web design

!45
References
Airbnb case study
https://airbnb.design/building-a-visual-
language/
Grid system
https://www.interaction-design.org/
literature/article/the-grid-system-building-
a-solid-design-layout?
utm_source=twitter&utm_medium=sm
Material Design-Responsive layout grid
https://material.io/design/layout/
responsive-layout-grid.html
Benefits of Design System
- InVision’s handbook
UXPin
https://www.uxpin.com/studio/blog/design-
systems-vs-pattern-libraries-vs-style-guides-
whats-difference/
Australia Post living style guide
NNGroup-Design Systems and Their
Benefits
https://youtu.be/3TpiNrZlzt4
Design Systems
by Alla Kholmatova
- Smashing Magazine
Grid system
99designs-history of the grid
Advantages of Grid Systems in web design

Intro Design System for Visual Designers

Related slideshows

More Related Content

Intro Design System for Visual Designers