Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Style Guides in the Wild

760 views

Published on

Introduction to style guides and short case study of Brighton Fringe Style Guide.

Published in: Technology
  • Be the first to comment

Style Guides in the Wild

  1. 1. STYLE GUIDES IN THE WILD
  2. 2. MATT BEE @MATTBEE HTTP://TODAYISHOULD.COM WHO?
  3. 3. • Freelance Developer based in Sevenoaks • Front End & Technical Consultant on National Theatre 2016 website (launches 12th April) • Front End Developer on Brighton Fringe 2016 website (live) • Other recent clients include Macmillan, Independent Age, Odeon WHAT DO YOU KNOW?
  4. 4. • “A set of standards for the design of documents, signage, and any other form of other brand identifier” • Broad coverage for print • Very limited online reference WHAT IS A STYLE GUIDE?
  5. 5. • The same design elements would change page by page • CSS and HTML becomes messy and not semantic • Bloated code and hard to implement WHAT WAS WRONG?
  6. 6. • Focused design • Content independent • Documented • Quicker build • Quicker integration LIVING STYLE GUIDES
  7. 7. • Style the base elements • Build up modules to handle possible content • Document each module • Build everything from the ground up, evolving what already exists • Build pages last and from designed modules HOW?
  8. 8. TOOLS http://styleguides.io/ WEBSITE STYLE GUIDE RESOURCES
  9. 9. STYLE GUIDE BOILERPLATE https://github.com/mattbee/Style-Guide-Boilerplate Forked from http://bjankord.github.io/Style-Guide-Boilerplate/
  10. 10. PATTERN LAB http://patternlab.io/
  11. 11. • Brighton Fringe 2016 • Complex ticketing and performance based design and development • Drupal integration • Flexible for future theming CASE STUDY
  12. 12. • Document all the content and required modules • Design based on wireframes containing all modules • Clear theme and style for throughout the site DESIGN
  13. 13. • Build atoms and base styles/elements first • Build each module from constituent parts, building on existing styles • Build out pages last • http://brightonfringe.review-now.net/ BUILD
  14. 14. • Tight timelines met • Really easy implementation in Drupal • Easier bug fixing due to modules structure • Easy to use modules to integrate for new types of content in Drupal • Easy to update style guide for 2017 festival theme SUCCESS
  15. 15. — Nobody at Starbucks WE DO SOME THINGS RIGHT - WE MIGHT NOT PAY OUR TAXES, BUT WE HAVE AN AWESOME STYLE GUIDE ” “ http://www.starbucks.com/static/reference/styleguide/
  16. 16. THANKS Next Up: Calum Ryan - Taking Part in the IndieWeb Matt Bee http://www.todayishould.com http://www.twitter.com http://www.mattbee.co.uk

×