Slide 1
Slide 1 text
Style Guides, Pattern Libraries,
Design Systems and other
amenities.
Cristiano Rastelli
Mobile Web Team
Slide 2
Slide 2 text
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
Slide 3
Slide 3 text
320 million users
190 countries
46 languages
Slide 4
Slide 4 text
Everyone has a style guide!
Slide 5
Slide 5 text
The Hype
Slide 6
Slide 6 text
Websites
styleguides.io
Slide 7
Slide 7 text
Conferences
clarityconf.com
Slide 8
Slide 8 text
Slack Channels
design-systems.slack.com
Slide 9
Slide 9 text
Podcasts
Style Guide Podcast by Anna Debenham & Brad Frost
Slide 10
Slide 10 text
Newsletters
designsystems.curated.co
Slide 11
Slide 11 text
Tons of resources…
Articles and blog posts
Talks
Slides / Presentations
Videos / Transcripts
Online courses
Styleguides
Learn from
other people’s
experiences
Slide 12
Slide 12 text
Mainstream
Slide 13
Slide 13 text
Where does all come from?
Slide 14
Slide 14 text
Atomic Design
Atomic Design - Brad Frost.com
Slide 15
Slide 15 text
Nothing new
New York City Transit Authority Graphics Standards Manual - 1970
Slide 16
Slide 16 text
Nothing new
The Making of Medium - teehan+lax
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Web Components
I am a title
Slide 19
Slide 19 text
The advent of React
Slide 20
Slide 20 text
A common ground
Slide 21
Slide 21 text
A common language
“card”
Slide 22
Slide 22 text
Anna Debenham
24ways.org/2011/front-end-style-guides/
Slide 23
Slide 23 text
Alla Kholmatova
Responsive Day Out - 19th June 2015
Slide 24
Slide 24 text
Purpose
Slide 25
Slide 25 text
Why?
Slide 26
Slide 26 text
Nomenclature
Slide 27
Slide 27 text
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
Slide 28
Slide 28 text
Definitions
Stu Robson / Always Twisted
Slide 29
Slide 29 text
Definitions
Slide 30
Slide 30 text
Not only visual
↦ Content - Tone of voice - Vocabulary
↦ Accessibility - Usability
↦ Localisation - Internationalisation
↦ Motion - Animation
↦ Code guidelines/standards
↦ Technological stack
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
Benefits
Slide 33
Slide 33 text
Multiple scopes
↦ Consistency
↦ Classification
↦ Documentation
↦ Design framework
↦ Marketing / Branding
↦ Testing
↦ Hiring
Slide 34
Slide 34 text
From chaos to order
Brad Frost - Style Guide Best @ Beyond Tellerrand
Slide 35
Slide 35 text
Patterns
Slide 36
Slide 36 text
Gestalt Principles of Design
Slide 37
Slide 37 text
Velocity
Slide 38
Slide 38 text
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
+
Slide 39
Slide 39 text
Not only web
Slide 40
Slide 40 text
Tokens
Slide 41
Slide 41 text
Tokens
Slide 42
Slide 42 text
Examples
Slide 43
Slide 43 text
Keep in mind these!
Consistency
Classification
Documentation
Design framework
Marketing / Branding
Testing
Hiring
Content - Tone of voice
Accessibility - Usability
Localisation -
Internationalisation
Motion - Animation
Code guidelines/standards
Technological stack
Granularity
Purpose
Slide 44
Slide 44 text
#mobileweb
Slide 45
Slide 45 text
Our style guide at Badoo
Slide 46
Slide 46 text
Today
Collection of web components
Increase reusability
Reduce code duplication
Documentation (kind of)
Playground for refactoring / development
Visual Regression Testing
Slide 47
Slide 47 text
Interface inventory
bradfrost.com/blog/post/interface-inventory/
Building the UI for the new The Times website
see also:
Slide 48
Slide 48 text
Interface inventory
alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone
Slide 49
Slide 49 text
Interface inventory
Slide 50
Slide 50 text
Visual Regression Testing
Slide 51
Slide 51 text
Visual Regression Testing
Slide 52
Slide 52 text
Visual Regression Testing
Slide 53
Slide 53 text
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
Slide 54
Slide 54 text
#famous
Slide 55
Slide 55 text
Material Design
material.google.com
Slide 56
Slide 56 text
Lightning Design System
www.lightningdesignsystem.com
Slide 57
Slide 57 text
Atlassian
design.atlassian.com/product
Slide 58
Slide 58 text
Rizzo - Lonely Planet
rizzo.lonelyplanet.com/styleguide/
Slide 59
Slide 59 text
U.S. Web Design Standards
standards.usa.gov
Slide 60
Slide 60 text
Financial Times
origami.ft.com
Slide 61
Slide 61 text
Do Something
forge.dosomething.org
Slide 62
Slide 62 text
Future Learn
www.futurelearn.com/pattern-library
Slide 63
Slide 63 text
Marvel
marvelapp.com/styleguide/
Slide 64
Slide 64 text
#institutional
Slide 65
Slide 65 text
GOV.UK
govuk-elements.herokuapp.com
Slide 66
Slide 66 text
BBC.CO.UK
www.bbc.co.uk/gel/
Slide 67
Slide 67 text
Sky
skyglobal.github.io/web-toolkit/
Slide 68
Slide 68 text
#special
Slide 69
Slide 69 text
Mailchimp
voiceandtone.com
ux.mailchimp.com/patterns styleguide.mailchimp.com
mailchimp.com/about/brand-assets
Slide 70
Slide 70 text
GEL
gel.westpacgroup.com.au
Slide 71
Slide 71 text
FontShop
www.fontshop.com/styleguide
Slide 72
Slide 72 text
#simple
Slide 73
Slide 73 text
Viljami Salminen
viljamis.com/styleguide
Slide 74
Slide 74 text
Clearleft
clearleft.com/styleguide
Slide 75
Slide 75 text
#tools
Slide 76
Slide 76 text
Dropbox Scooter
dropbox.github.io/scooter
Slide 77
Slide 77 text
BuzzFeed Solid
solid.buzzfeed.com www.buzzfeed.com/emmyf/buzzfeed-style-guide/
Slide 78
Slide 78 text
#branding
Slide 79
Slide 79 text
IBM
www.ibm.com/design/language/
Slide 80
Slide 80 text
WhatsApp
www.whatsappbrand.com
Slide 81
Slide 81 text
Uber
brand.uber.com
Slide 82
Slide 82 text
Conclusions
Slide 83
Slide 83 text
Takeaway #1
A design system impacts a whole company,
not only its tech/dev teams.
Slide 84
Slide 84 text
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.
Slide 85
Slide 85 text
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
Slide 86
Slide 86 text
That’s it.
Any questions?
Cristiano Rastelli
Mobile Web Team
Slide 87
Slide 87 text
Slides are available here:
bit.ly/2cwaS3Y
Blog:
www.didoo.net
Newsletter:
rfl.didoo.net
Twitter:
@areaweb