Style guides and component libraries are the new trend in front-end development.
Everyone is into "Atomic Design" and "Modular CSS" nowadays.
But how did we get to this “hype”, and why? What is a style guide, what is its value and where are the benefits of introducing one in a project? And are them useful only for the web, or can be employed by other platforms too?
I'll try to give an answer to all these questions in this presentation – directed to designers, web developers but also iOS/Android/Win developers – and I'll show how our Mobile Web team in Badoo has developed his first style guide and how is using it to catch bugs and create a shared pattern library.
2. Hello!
Cristiano Rastelli
Front End / CSS developer at Badoo
I like to work at the boundaries
between different disciplines
and competencies.
I like to share experiences,
knowledge and ideas.
didoo.net / @areaweb
11. Tons of resources…
Articles and blog posts
Talks
Slides / Presentations
Videos / Transcripts
Online courses
Styleguides
Learn from
other people’s
experiences
27. Pattern Library
This is a library of standardised UI patterns. They are the final designs, and
can be delivered in the form of a repository of design files, or a symbol
library/UI kit. It is the resource for designers to build from.
Style Guide
This is the documentation resource for the design system. Since the design
system is purely code and assets, the style guide is a site to demonstrate
the UI patterns with references to aid in implementation and usage.
Design System
The entirety of the standardised UI patterns, frameworks, assets, and
documentation, as well as the processes and people involved. It is the
ecosystem that drives and supports the unified evolution of the product(s).
Definitions
Clarifying our “Style Guide” Nomenclature - Nate Baldwin
30. Not only visual
↦ Content - Tone of voice - Vocabulary
↦ Accessibility - Usability
↦ Localisation - Internationalisation
↦ Motion - Animation
↦ Code guidelines/standards
↦ Technological stack
31. One name to rule them all
Brad Frost - Style Guide Best @ Beyond Tellerrand
Brand identity
design language
voice and tone
pattern library
coding
writing
styleguide
38. Scaling
Team A
Builds feature after feature
velocity
Team B
Builds components, then features
velocity
(features)dev
Time
N
dev=0
∑ (COMPONENTS)dev
Time
N
dev=0
∑ (features)dev
Time - TIMEre-use - TIMEno-test
+
53. Future
Component library
To share with designers as reference
To share with desktop web (as package)
Styleguide
To document Badoo visual language
To show how cool we are :)
‘Live’ documentation
83. Takeaway #1
A design system impacts a whole company,
not only its tech/dev teams.
84. Takeaway #2
Building a design system is a long process.
So don’t build a style guide because is cool.
Do it if is useful & solves business problems.
And while doing it, have clear in mind what
are your objectives and top-level goals.
85. Takeaway #3
A style guide improves the communication
between all the members of an organisation.
It has to create a more cohesive user
experience, encourage collaboration, and
create efficiencies.
A design system is made by artefacts, people,
and products. Don’t forget the people.
Brad Frost - Clarity Conference writeup