Transcript

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

Cristiano RastelliMobile Web Team

Hello!

Cristiano RastelliFront 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

Why?

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

Definitions

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 identitydesign language

voice and tone

pattern librarycodingwriting

styleguide

Benefits

Multiple scopes

↦ Consistency

↦ Classification

↦ 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 ABuilds feature after feature

velocity

Team BBuilds 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

Tokens

Examples

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

#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

Visual Regression Testing

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

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 efficiencies.

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 RastelliMobile Web Team

Slides are available here: bit.ly/2cwaS3Y

Blog: www.didoo.net

Newsletter: rfl.didoo.net

Twitter: @areaweb


Top Related