Successfully reported this slideshow.

Style Guides in the Wild

1

Share

1 of 17
1 of 17

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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

×