Style Guides, Pattern Libraries, Design Systems and other amenities.
-
Upload
cristiano-rastelli -
Category
Design
-
view
133 -
download
4
Transcript of Style Guides, Pattern Libraries, Design Systems and other amenities.
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
Podcasts
Style Guide Podcast by Anna Debenham & Brad Frost
Tons of resources…
Articles and blog posts
Talks
Slides / Presentations
Videos / Transcripts
Online courses
Styleguides
Learn from other people’s experiences
Nothing new
New York City Transit Authority Graphics Standards Manual - 1970
Web Components
<body> <h1>I am a title</h1> <my-component theme=“dark”/> <another-component/> </body>
Anna Debenham
24ways.org/2011/front-end-style-guides/
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
Stu Robson / Always Twisted
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
Multiple scopes
↦ Consistency
↦ Classification
↦ Documentation
↦ Design framework
↦ Marketing / Branding
↦ Testing
↦ Hiring
From chaos to order
Brad Frost - Style Guide Best @ Beyond Tellerrand
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+
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
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
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
Rizzo - Lonely Planet
rizzo.lonelyplanet.com/styleguide/
Mailchimp
voiceandtone.com
ux.mailchimp.com/patterns styleguide.mailchimp.com
mailchimp.com/about/brand-assets
BuzzFeed Solid
solid.buzzfeed.com www.buzzfeed.com/emmyf/buzzfeed-style-guide/
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