/razvan-rosu
/razvan-rosu
@rzvn_rosu
Răzvan Roșu
Design
Systems
Slide 2
Slide 2 text
I am a Front End developer
at ING Tech Romania
meetups &
conferences
a short intro about myself...
Slide 3
Slide 3 text
I hike
I draw
I travel
I read comics
Slide 4
Slide 4 text
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.
Slide 5
Slide 5 text
What are Design Systems?
An ecosystem of tools, guidelines, shared values and principles
which help teams ship more efficiently consistent design.
Slide 6
Slide 6 text
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 refinements
Developer
Experience
User
Experience
Design
Systems
Maintainer
Experience
Slide 7
Slide 7 text
“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?
Slide 8
Slide 8 text
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
Slide 9
Slide 9 text
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
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
thanks to @uxgoodies
Slide 13
Slide 13 text
Style Guides
A Style Guide is a collection of predefined rules,
designers and developers should follow
to ensure consistency across apps, websites and print.
Slide 14
Slide 14 text
Style Guides
A Style Guide covers the following topics:
● Color Palette
● Typography
● Grid System
● Spacing
● Iconography
● Imagery
● Tone of Voice
Slide 15
Slide 15 text
Color Palette
Primary colors: the main colors that are specific 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 define 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/
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/
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
Grid System
A Grid System is a layout structure which aids
in implementing flexible 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
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
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
Slide 22
Slide 22 text
Imagery
The Imagery defines 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/
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
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
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
UX tools
etc...
Slide 30
Slide 30 text
reminds me of ...
etc...
Slide 31
Slide 31 text
So why pick one over the other?
etc...
Slide 32
Slide 32 text
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)
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
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)
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
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.
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
UX laws
We defined 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
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
2. Hick’s Law
The time it takes to make a decision
increases with the complexity
and number of choices.
Slide 41
Slide 41 text
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.
Slide 42
Slide 42 text
4. Zeigarnik Effect
People remember uncompleted
or interrupted tasks
better then completed tasks.
TIP: use progress bars
Slide 43
Slide 43 text
5. Serial Position Effect
People tend to remember best
the first and the last items in a serie
TIP: emphasize key info in the beginning and the end
Slide 44
Slide 44 text
6. Law of Common Region
Elements tend to be perceived into groups
if they are sharing an area with a defined boundary
TIP: add a background around a group of elements
Slide 45
Slide 45 text
7. Law of Proximity
Elements that are near each other
tend to be grouped together.
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
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
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
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/
Slide 53
Slide 53 text
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 fields, buttons etc
Slide 54
Slide 54 text
Molecules
Groups of atoms bonded together
to serve specific 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)
Slide 55
Slide 55 text
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.
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
Pitfalls when building a DS
Slide 59
Slide 59 text
The first 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
Slide 60
Slide 60 text
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.
Slide 61
Slide 61 text
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.
Slide 62
Slide 62 text
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.
Slide 63
Slide 63 text
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 first 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)
Slide 64
Slide 64 text
Formula of success for building a DS
Slide 65
Slide 65 text
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.
Slide 66
Slide 66 text
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 (HINT: Web Components):
The component library must work with any framework and technology.
Slide 67
Slide 67 text
No content
Slide 68
Slide 68 text
Design Systems with
Web Components
The larger the organization is, the more difficult 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.
Slide 69
Slide 69 text
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 efficient)
● existing frameworks are increasing their support for
Web Components
Slide 70
Slide 70 text
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-specific properties
Slide 71
Slide 71 text
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.
Slide 72
Slide 72 text
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.
Slide 73
Slide 73 text
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.
Slide 74
Slide 74 text
“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 flexibility 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)
Slide 75
Slide 75 text
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
Slide 76
Slide 76 text
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
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
Before closing...
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
Thank you!
Questions
?
Slide 81
Slide 81 text
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