Style Guides, Pattern Libraries, Design Systems and other amenities.

Style Guides, Pattern Libraries, Design Systems and other amenities. Cristiano
Rastelli Mobile Web Team

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

320 million users 190 countries 46 languages

Everyone has a style guide!

The Hype

Websites styleguides.io

Conferences clarityconf.com

Slack Channels design-systems.slack.com

Podcasts Style Guide Podcast by Anna Debenham & Brad Frost

Newsletters designsystems.curated.co

Tons of resources… Articles and blog posts Talks Slides /
Presentations Videos / Transcripts Online courses Styleguides Learn from other people’s experiences

Mainstream

Where does all come from?

Atomic Design Atomic Design - Brad Frost.com

Nothing new New York City Transit Authority Graphics Standards Manual
- 1970

Nothing new The Making of Medium - teehan+lax

Web Components <body> <h1>I am a title</h1> <my-component theme=“dark”/> <another-component/>
</body>

The advent of React

A common ground

A common language “card”

Anna Debenham 24ways.org/2011/front-end-style-guides/

Alla Kholmatova Responsive Day Out - 19th June 2015

Purpose

Nomenclature

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

Deﬁnitions Stu Robson / Always Twisted

Deﬁnitions

Not only visual ↦ Content - Tone of voice -
Vocabulary ↦ Accessibility - Usability ↦ Localisation - Internationalisation ↦ Motion - Animation ↦ Code guidelines/standards ↦ Technological stack

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

Beneﬁts

Multiple scopes ↦ Consistency ↦ Classiﬁcation ↦ Documentation ↦ Design
framework ↦ Marketing / Branding ↦ Testing ↦ Hiring

From chaos to order Brad Frost - Style Guide Best
@ Beyond Tellerrand

Patterns

Gestalt Principles of Design

Velocity

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 +

Not only web

Tokens

Examples

Keep in mind these! Consistency Classiﬁcation Documentation Design framework Marketing
/ Branding Testing Hiring Content - Tone of voice Accessibility - Usability Localisation - Internationalisation Motion - Animation Code guidelines/standards Technological stack Granularity Purpose

#mobileweb

Our style guide at Badoo

Today Collection of web components Increase reusability Reduce code duplication
Documentation (kind of) Playground for refactoring / development Visual Regression Testing

Interface inventory bradfrost.com/blog/post/interface-inventory/ Building the UI for the new The
Times website see also:

Interface inventory alistapart.com/article/from-pages-to-patterns-an-exercise-for-everyone

Interface inventory

Visual Regression Testing

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

#famous

Material Design material.google.com

Lightning Design System www.lightningdesignsystem.com

Atlassian design.atlassian.com/product

Rizzo - Lonely Planet rizzo.lonelyplanet.com/styleguide/

U.S. Web Design Standards standards.usa.gov

Financial Times origami.ft.com

Do Something forge.dosomething.org

Future Learn www.futurelearn.com/pattern-library

Marvel marvelapp.com/styleguide/

#institutional

GOV.UK govuk-elements.herokuapp.com

BBC.CO.UK www.bbc.co.uk/gel/

Sky skyglobal.github.io/web-toolkit/

#special

Mailchimp voiceandtone.com ux.mailchimp.com/patterns styleguide.mailchimp.com mailchimp.com/about/brand-assets

GEL gel.westpacgroup.com.au

FontShop www.fontshop.com/styleguide

#simple

Viljami Salminen viljamis.com/styleguide

Clearleft clearleft.com/styleguide

#tools

Dropbox Scooter dropbox.github.io/scooter

BuzzFeed Solid solid.buzzfeed.com www.buzzfeed.com/emmyf/buzzfeed-style-guide/

#branding

IBM www.ibm.com/design/language/

WhatsApp www.whatsappbrand.com

Uber brand.uber.com

Conclusions

Takeaway #1 A design system impacts a whole company,  not
only its tech/dev teams.

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.

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 efﬁciencies. A design system is made by artefacts, people, and products. Don’t forget the people. Brad Frost - Clarity Conference writeup

That’s it. Any questions? Cristiano Rastelli Mobile Web Team

Slides are available here: bit.ly/2cwaS3Y Blog: www.didoo.net Newsletter: rﬂ.didoo.net Twitter:
@areaweb

Style Guides, Pattern Libraries, Design Systems...

Style Guides, Pattern Libraries, Design Systems and other amenities.

More Decks by Cristiano Rastelli

Other Decks in Design

Featured

Transcript