Style Guides in the Wild
•
1 like•1,295 views
Introduction to style guides and short case study of Brighton Fringe Style Guide.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (9)
Similar to Style Guides in the Wild
Similar to Style Guides in the Wild (20)
Recently uploaded
Recently uploaded (20)
Style Guides in the Wild
- 1. STYLE GUIDES IN THE WILD
- 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. • “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. • 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?
- 7. • Focused design • Content independent • Documented • Quicker build • Quicker integration LIVING STYLE GUIDES
- 8. • 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?
- 9. TOOLS http://styleguides.io/ WEBSITE STYLE GUIDE RESOURCES
- 10. STYLE GUIDE BOILERPLATE https://github.com/mattbee/Style-Guide-Boilerplate Forked from http://bjankord.github.io/Style-Guide-Boilerplate/
- 12. • Brighton Fringe 2016 • Complex ticketing and performance based design and development • Drupal integration • Flexible for future theming CASE STUDY
- 13. • Document all the content and required modules • Design based on wireframes containing all modules • Clear theme and style for throughout the site DESIGN
- 14. • 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
- 15. • 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
- 16. — 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/
- 17. 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