Design systems - Razvan Rosu

/razvan-rosu
/razvan-rosu
@rzvn_rosuRăzvan Roșu
Design
Systems

I am a Front End developer
at ING Tech Romania
meetups &
conferences
a short intro about myself...

I hike
I draw
I travel
I read comics

a short intro to this presentation...
There is certain topic discussed in every company: communication between
departments.
As FE developers, we sit in between UX designers and BE developers.
Our apps must follow the guidelines from the UX, be compatible with the BE APIs
while meeting the business requirements from our POs.
In this presentation I am addressing the relationship between UX and FE devs.
One way to collaborate better with our UX colleagues is to… learn a bit of UX and
maybe share some Front End knowledge with them too.

What are Design Systems?
An ecosystem of tools, guidelines, shared values and principles
which help teams ship more efﬁciently consistent design.

Why Design Systems?
DS enable product teams to get to consistent results faster by:
● synchronizing all designers and product teams
● build a shared vocabulary
to reduce communication issues
● have one solution* for one component
● easier testing at component level
● faster iterations with established design patterns
● future-proof base for extensions and reﬁnements
Developer
Experience
User
Experience
Design
Systems
Maintainer
Experience

“69% of enterprise companies
either actively use a design system
or are currently working on one”
By UXPin
https://www.uxpin.com/enterprise-ux-design-2017-2018-industry-report
Who uses Design Systems?

Who uses Design Systems?
Material Design
by Google
Carbon DS
by IBM
Lightning
by Salesforce
Polaris
by Shopify
Atlassian Design
by Atlassian
Fluent
by Microsoft
AirBnb Design
by AirBnb
Human Interface
by Apple

Testimonial
“... one day, while putting together a last-minute prototype,
our team was able to create nearly 50 screens
within just a few hours using the framework our library provided.”
by Karri Saarinen (Airbnb.com)
http://airbnb.design/co-creating-experiences-with-our-community

Testimonial
“That’s the beauty of building a design system.
By deciding on a detail once,
you free up your entire product development team
to focus on solving actual customer problems.”
by Hubspot team
http://product.hubspot.com/blog/how-building-a-design-system-empowers-your-team-to-focus-on-people-not-pixels

Style Guides
A Style Guide is a collection of predeﬁned rules,
designers and developers should follow
to ensure consistency across apps, websites and print.

Style Guides
A Style Guide covers the following topics:
● Color Palette
● Typography
● Grid System
● Spacing
● Iconography
● Imagery
● Tone of Voice

Color Palette
Primary colors: the main colors that are speciﬁc for the company
Secondary colors: additional colors that are used for highlighting
Neutral colors: shades of grey used for increasing readability
Throughout the history, color schemes have been used to deﬁne different feelings,
seasons and ceremonies based on culture and origin. There are numerous study
cases on colors that can help us choose (e.g.: Psychology of colors )
https://graf1x.com/color-psychology-emotion-meaning-poster/

https://www.carbondesignsystem.com/guidelines/color/overview

Typography
Typography is the art of arranging
letters and text in a way that makes the copy
legible, clear and visually appealing to the reader.
It involves font style, appearance and structure.
Typography was specialized initially for
books and magazines.
Eventually it found it’s way into
the digital world.
https://material.io/design/typography/the-type-system.html#type-scale
https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/

Vertical Rhythm
Vertical Rhythm is a typographic practice
that aims to provide a better reading experience
by establishing a vertical harmony between text elements.
https://iamsteve.me/blog/entry/a-guide-to-vertical-rhythm
basic vertical rhythm with css variables: https://24ways.org/2018/managing-flow-and-rhythm-with-css-custom-properties

Grid System
A Grid System is a layout structure which aids
in implementing ﬂexible and device-agnostic user interfaces.
https://material.io/design/layout/responsive-layout-grid.html
advanced grid with css variables: https://www.smashingmagazine.com/2019/03/robust-layouts-container-units-css

Spacing
Spacing is used everywhere, therefore it is mentioned in
the Style Guide. It is encountered in the grid, between headlines,
buttons, images, forms, etc
https://material.io/design/layout/spacing-methods.html#spacing

Iconography
Icons give users an instant idea of what will happen next.
They should be chosen while taking into consideration the target audience religion
and history in order to avoid misunderstandings and misconceptions.
Icon matrixes - https://atlassian.design/guidelines/product/foundations/iconography

Imagery
The Imagery deﬁnes the style
and direction of pictures
the application should use
based on the brand and it’s mission.
http://styleguide.daimler.com/en/style/imagery/

Tone of Voice
Tone of Voice refers to the actual copy.
The tone of voice can be professional, welcoming, funny, a mix of feelings, etc.
https://github.com/404-error-page

Component Libraries
A Component Library is a repository which contains all components.
It provides a view of the source code, a rough documentation
and component renders.
PatternLab.io Fractal.build Storybook.js.org

City of Ghent DS: https://stijlgids.stad.gent/v3
Bolt DS: https://boltdesignsystem.com/pattern-lab
IBM Carbon DS: https://carbon-custom-elements.netlify.com

Testimonial
“No thorough conversation about Front End today
can end without the mention of Pattern Libraries.
Sometimes a Pattern Library appears in the form of
a Living Style Guide or as a Design System or as an all-knowing UI framework.
In all of these cases, designers and developers seek the right strategy
to approach the complexity of the web with a modular, component based approach.”
by SmashingMagazine

So why pick one over the other?
etc...

aaa Photoshop
Although intended for photo editing,
Photoshop had enough tooling for building layouts:
- Layer concept
- Text tooling (Typography)
- Line guides (Grid System and Vertical Rhythm)
- Drawing tooling (Iconography)
- Smart Object concept (sort of a “component”:
it groups multiple layers into a single entity)

Sketch
Sketch is intended for prototyping.
1. Interactive Flows
- flows can be previewed on an actual device with Mirror app
2. Symbol concept (component-like implementation):
- grouping elements into a single entity
- control over the way elements resize
(fluid responsive components)
- can define a symbol library and
use it for building products (component library)
- updating a symbol in the library
will reflect in every product (npm update)

Figma is a web based solution.
eXperience Design is Adobe’s implementation
of a dedicated prototyping software (lesser features).
Framer X allows the user to import actual React components.
Users can add microinteractions and animations on top of them.

UX laws
We deﬁned our Style Guide.
We’ve chosen a Component Library.
It’s time to design and develop components!
Here is a top 7 of UX laws to have in mind when doing so.
thanks to @aleausejo #DesignTipsAleausejo

1. Von Restorff Effect
When multiple similar objects are present
the one that differs from the rest
is most likely to be remembered.
TIP: make important information or key actions visually distinctive

2. Hick’s Law
The time it takes to make a decision
increases with the complexity
and number of choices.

TIP: keep main CTA’s big and closer to the thumb.
3. Fitt’s Law
The time to acquire a target
is a function of the distance to
and size of the target.

4. Zeigarnik Effect
People remember uncompleted
or interrupted tasks
better then completed tasks.
TIP: use progress bars

5. Serial Position Effect
People tend to remember best
the ﬁrst and the last items in a serie
TIP: emphasize key info in the beginning and the end

6. Law of Common Region
Elements tend to be perceived into groups
if they are sharing an area with a deﬁned boundary
TIP: add a background around a group of elements

7. Law of Proximity
Elements that are near each other
tend to be grouped together.

Component cutout workshop
The scope of this exercise is to practise to think in components
by reverse engineering an already built interface.
Print the UI of an app or web page of your choice.
Cut it into paper components from big to small.
Classify each component.
https://medium.com/eightshapes-llc/the-component-cut-up-workshop-1378ae110517

Atomic design
“A model for thinking about UIs
as hierarchical, interconnected sets of components
that build real screens.”
by Brad Frost
http://atomicdesign.bradfrost.com/
https://www.invisionapp.com/inside-design/design-systems-brad-frost/

Design Tokens
Design Tokens are an agnostic way to store variables such as
typography, color and spacing. They are not actual components.
https://bradfrost.com/blog/post/extending-atomic-design
Atoms
Atoms are the smallest
building blocks of UI
e.g.: icons, labels, input ﬁelds, buttons etc

Molecules
Groups of atoms bonded together
to serve speciﬁc purpose.
e.g.: a Search Form (label + input + button)
Organisms
Groups of molecules joined to form
a complex section of an interface.
e.g.: Header (logo + menu + search form)

Templates
Groups of organisms combined
to form generic page layouts.
e.g.: News article template (header + body + footer)
Pages
Pages are templates
populated with real content.

The ﬁrst bad practice is to stop at design stage.
Without a working a component library
available to development teams,
design consistency is never fully achieved.
Common scenario:
Developers aren’t aware of design requirements,
aren’t good at implementing design standard or simply ignore them.
1. Stopping at design

2. Building a HTML and CSS only library
The 2nd bad practice is building a DS using pure HTML and CSS components.
Common scenario:
Each team will copy+paste the markup/styles,
write the functionality and maintain it.
The copied code needs to be tracked and maintained.

3. Limited component building expertise
Lacking in-house component building expertise can slow down DS development
and limit adoption if the custom component doesn’t deliver
on the required functionality, accessibility, platform compatibility and performance.

4. Betting on a single technology
The last misstep is building a DS on top of a single technology.
Common scenario:
A team builds a component library based on their framework of choice.
Once rolled out in the organization (which uses another framework or multiple
others), the library meets friction.

Testimonial
“In a working design system,
the time savings at the second use of an existing pattern are much larger
than the effort to introduce the pattern in the ﬁrst place.
The design system won’t work
if the effort is much bigger
or the pattern library is getting out-of-date very quickly.”
by Wolf Brüning (Otto.de)

Formula of success for building a DS

1. Fully working components:
Dynamic working components properly versioned.
2. Access to component-building expertise:
Borrow expertise from existing component libraries or access expertise in
order to build from scratch.
3. Technology-agnostic
The component library must work with any framework and technology.

1. Fully working components:
Dynamic working components properly versioned.
2. Access to component-building expertise:
Borrow expertise from existing component libraries or access expertise in
order to build from scratch.
3. Technology-agnostic (HINT: Web Components):
The component library must work with any framework and technology.

Design Systems with
Web Components
The larger the organization is, the more difﬁcult is
to deliver consistent user experiences across teams and projects.
In large organizations one can encounter:
distributed teams, concurrent projects and a diversity of frameworks.
One way to solve this problem is by implementing a Design System
using custom, framework-agnostic Web Components.

We don’t know yet:
● if Web Components will replace third-party app frameworks
● if Web Components are more suited towards
leaf/style/design nodes
We know that:
● existing frameworks which are already good,
are getting better (smaller, faster and more efﬁcient)
● existing frameworks are increasing their support for
Web Components

Angular and Web Components
Angular provides decent support
for Web Components.
However:
● it lacks two-way data binding
● it has limited type support
● it is unable to access Angular-speciﬁc properties

React and Web Components
React has very limited support
for Web Components.
React cannot listen to custom events.
It can only pass in strings and numbers.

Vue and Web Components
Vue provides good support
for Web Components.
It has one painful limitation:
developers aren’t able to use v-model on inputs.

Stencil
Stencil is a compiler that
generates Web Components.
Web Components can be paired with any JS framework.
Stencil has built-in special-purpose bindings
(available as part of StencilDS).
The StencilDS bindings allow developers
to use Web Components at full potential.

“At Porche, we have a heterogenous ecosystem of products
built with Angular, React or without any framework.
As a design system team with a small number of developers,
to give us the ﬂexibility we needed and keep pace
with our development roadmap, we wanted to standardize
on one set of UI components that would work across any product.
Building a custom design system based on Web Components
has enabled us to do that.”
by Marcel Bertam, Design System Lead (Porsche)

Quick Tips on starting a DS
1. Kick off the Design System with a pilot project
2. Ideal project: a page redesign or a new small app
3. View the pilot project as an opportunity to establish
the DS’ components through the lens of a project
by Dan Mall (Design Lead @ SuperFriendly & SuperBooked)
Digital Design: Creating Design Systems for easier, better & faster design

by Dan Mall (Design Lead @ SuperFriendly & SuperBooked)
Digital Design: Creating Design Systems for easier, better & faster design
Quick Tips on starting a DS
Refining steps:
● Determine your daily workflow
● Determine the most frustrating part
● What would you like to see?
● How does success/failure look like?
Research steps:
● Screenshots
● Categorizing
● Present findings
● Establish next steps

References
● inVision Design System video series:
https://invisionapp.com/design-system-manager/expert-advice/
● SmashingConf - Brad Frost: Let’s build a design system:
https://vimeo.com/331529230
● SmashingMagazine Pattern Libraries study case:
https://smashingmagazine.com/taking-pattern-libraries-next-level
● UX laws - additional to those from the presentation:
https://uxplanet.org/the-psychology-principles-every-ui-ux-designer-needs-
to-know-24116fd65778
● Apple ships Web Components in production:
https://dev.to/ionic/apple-just-shipped-web-components-to-production-an
d-you-probably-missed-it-57pf

Design systems - Razvan Rosu

More Related Content

Similar to Design systems - Razvan Rosu

More from Razvan Rosu

Recently uploaded

Design systems - Razvan Rosu