Style Guides, Pattern Libraries, Design Systems and other amenities.
•
4 likes•1,136 views
Style guides and component libraries are the new trend in front-end development. Everyone is into "Atomic Design" and "Modular CSS" nowadays. But how did we get to this “hype”, and why? What is a style guide, what is its value and where are the benefits of introducing one in a project? And are them useful only for the web, or can be employed by other platforms too? I'll try to give an answer to all these questions in this presentation – directed to designers, web developers but also iOS/Android/Win developers – and I'll show how our Mobile Web team in Badoo has developed his first style guide and how is using it to catch bugs and create a shared pattern library.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Style Guides, Pattern Libraries, Design Systems and other amenities.
Similar to Style Guides, Pattern Libraries, Design Systems and other amenities. (20)
More from Cristiano Rastelli
More from Cristiano Rastelli (15)
Recently uploaded
Recently uploaded (20)
Style Guides, Pattern Libraries, Design Systems and other amenities.
- 1. Style Guides,Pattern Libraries, Design Systems and other amenities. Cristiano Rastelli Mobile Web Team
- 2. 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
- 3. 320 million users 190 countries 46 languages
- 4. Everyone has a style guide!
- 5. The Hype
- 9. Podcasts Style Guide Podcast by Anna Debenham & Brad Frost
- 11. Tons of resources… Articles and blog posts Talks Slides / Presentations Videos / Transcripts Online courses Styleguides Learn from other people’s experiences
- 12. Mainstream
- 13. Where does all come from?
- 14. Atomic Design Atomic Design - Brad Frost.com
- 15. Nothing new New York City Transit Authority Graphics Standards Manual - 1970
- 16. Nothing new The Making of Medium - teehan+lax
- 18. Web Components <body> <h1>I am a title</h1> <my-component theme=“dark”/> <another-component/> </body>
- 19. The advent of React
- 20. A common ground
- 23. Alla Kholmatova Responsive Day Out - 19th June 2015
- 24. Purpose
- 25. Why?
- 26. Nomenclature
- 27. 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
- 28. Definitions Stu Robson / Always Twisted
- 29. Definitions
- 30. Not only visual ↦ Content - Tone of voice - Vocabulary ↦ Accessibility - Usability ↦ Localisation - Internationalisation ↦ Motion - Animation ↦ Code guidelines/standards ↦ Technological stack
- 31. 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
- 32. Benefits
- 33. Multiple scopes ↦ Consistency ↦ Classification ↦ Documentation ↦ Design framework ↦ Marketing / Branding ↦ Testing ↦ Hiring
- 34. From chaos to order Brad Frost - Style Guide Best @ Beyond Tellerrand
- 35. Patterns
- 36. Gestalt Principles of Design
- 37. Velocity
- 38. 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 +
- 39. Notonlyweb
- 40. Tokens
- 41. Tokens
- 42. Examples
- 43. 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
- 44. #mobileweb
- 45. Our style guide at Badoo
- 46. Today Collection of web components Increase reusability Reduce code duplication Documentation (kind of) Playground for refactoring / development Visual Regression Testing
- 47. Interface inventory bradfrost.com/blog/post/interface-inventory/ Building the UI for the new The Times website see also:
- 53. 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
- 54. #famous
- 58. Rizzo - Lonely Planet rizzo.lonelyplanet.com/styleguide/
- 59. U.S. Web Design Standards standards.usa.gov
- 64. #institutional
- 68. #special
- 72. #simple
- 75. #tools
- 78. #branding
- 82. Conclusions
- 83. Takeaway #1 A design system impacts a whole company, not only its tech/dev teams.
- 84. 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.
- 85. 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
- 86. That’s it. Any questions? Cristiano Rastelli Mobile Web Team
- 87. Slides are available here: bit.ly/2cwaS3Y Blog: www.didoo.net Newsletter: rfl.didoo.net Twitter: @areaweb