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

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

Post on 18-Feb-2017

114 views

Category:

Design

4 download

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

    http://styleguides.io

  • Conferences

    clarityconf.com

    http://clarityconf.com

  • Slack Channels

    design-systems.slack.com

    http://design-systems.slack.com

  • Podcasts

    Style Guide Podcast by Anna Debenham & Brad Frost

    https://itunes.apple.com/gb/podcast/the-style-guide-podcast/id960374773

  • Newsletters

    designsystems.curated.co

    https://designsystems.curated.co/

  • Tons of resources

    Articles and blog posts

    Talks

    Slides / Presentations

    Videos / Transcripts

    Online courses

    Styleguides

    Learn from other peoples experiences

  • Mainstream

  • Where does all come from?

  • Atomic Design

    Atomic Design - Brad Frost.com

    http://bradfrost.com/blog/post/atomic-web-design/

  • Nothing new

    New York City Transit Authority Graphics Standards Manual - 1970

    https://standardsmanual.com/products/nyctacompactedition

  • Nothing new

    The Making of Medium - teehan+lax

    http://www.teehanlax.com/story/medium/

  • Web Components

    I am a title

  • The advent of React

  • A common ground

  • A common language

    card

  • Anna Debenham

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

    https://24ways.org/2011/front-end-style-guides/

  • Alla Kholmatova

    Responsive Day Out - 19th June 2015

    https://vimeo.com/134838817

  • 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

    https://medium.com/@NateBaldwin/clarifying-our-style-guide-nomenclature-ab72358ee111#.tsnvjxl2p

  • Definitions

    Stu Robson / Always Twisted

    http://www.alwaystwisted.com/articles/styleguides-pattern-libraries-and-design-languages

  • 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

    http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-beyond-tellerrand

  • Benefits

  • Multiple scopes

    Consistency

    Classification

    Documentation

    Design framework

    Marketing / Branding

    Testing

    Hiring

  • From chaos to order

    Brad Frost - Style Guide Best @ Beyond Tellerrand

    http://www.slideshare.net/bradfrostweb/style-guide-best-practices-at-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)devTime

    N

    dev=0

    (features)devTime - 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:

    http://bradfrost.com/blog/post/interface-inventory/https://medium.com/swlh/building-the-ui-for-the-new-the-times-website-26dc4e6569e#.nwilkkrc8

  • Interface inventory

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

    http://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

    https://material.google.com/

  • Lightning Design System

    www.lightningdesignsystem.com

    https://www.lightningdesignsystem.com

  • Atlassian

    design.atlassian.com/product

    https://design.atlassian.com/product/

  • Rizzo - Lonely Planet

    rizzo.lonelyplanet.com/styleguide/

    http://rizzo.lonelyplanet.com/styleguide/design-elements/colours

  • U.S. Web Design Standards

    standards.usa.gov

    https://standards.usa.gov

  • Financial Times

    origami.ft.com

    http://origami.ft.com

  • Do Something

    forge.dosomething.org

    http://forge.dosomething.org/

  • Future Learn

    www.futurelearn.com/pattern-library

    https://www.futurelearn.com/pattern-library

  • Marvel

    marvelapp.com/styleguide/

    https://marvelapp.com/styleguide/overview/introduction

  • #institutional

  • GOV.UK

    govuk-elements.herokuapp.com

    http://govuk-elements.herokuapp.com

  • BBC.CO.UK

    www.bbc.co.uk/gel/

    http://www.bbc.co.uk/gel/guidelines/category/design-patterns

  • Sky

    skyglobal.github.io/web-toolkit/

    http://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

    https://gel.westpacgroup.com.au

  • FontShop

    www.fontshop.com/styleguide

    https://www.fontshop.com/styleguide/globals

  • #simple

  • Viljami Salminen

    viljamis.com/styleguide

    https://viljamis.com/styleguide/

  • Clearleft

    clearleft.com/styleguide

    http://clearleft.com/styleguide/

  • #tools

  • Dropbox Scooter

    dropbox.github.io/scooter

    http://dropbox.github.io/scooter/

  • BuzzFeed Solid

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

    http://solid.buzzfeed.com/https://www.buzzfeed.com/emmyf/buzzfeed-style-guide/

  • #branding

  • IBM

    www.ibm.com/design/language/

    http://www.ibm.com/design/language/

  • WhatsApp

    www.whatsappbrand.com

    https://www.whatsappbrand.com/

  • Uber

    brand.uber.com

    https://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 dont 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. Dont forget the people.

    Brad Frost - Clarity Conference writeup

    http://bradfrost.com/blog/post/clarity-conferencebeyond-the-toolkit-spreading-a-system-across-people-products/

  • Thats it. Any questions?

    Cristiano RastelliMobile Web Team

  • Slides are available here: bit.ly/2cwaS3Y

    Blog: www.didoo.net

    Newsletter: rfl.didoo.net

    Twitter: @areaweb