STYLE GUIDES IN
THE WILD
MATT BEE
@MATTBEE
HTTP://TODAYISHOULD.COM
WHO?
• Freelance Developer based in Sevenoaks
• Front End & Technical Consultant on National Theatre
2016 website (launches 12t...
• “A set of standards for the
design of documents, signage,
and any other form of other
brand identifier”
• Broad coverage...
• The same design elements would change
page by page
• CSS and HTML becomes messy and not
semantic
• Bloated code and hard...
• Focused design
• Content independent
• Documented
• Quicker build
• Quicker integration
LIVING STYLE GUIDES
• Style the base elements
• Build up modules to handle possible
content
• Document each module
• Build everything from the...
TOOLS
http://styleguides.io/
WEBSITE STYLE GUIDE RESOURCES
STYLE GUIDE BOILERPLATE
https://github.com/mattbee/Style-Guide-Boilerplate
Forked from http://bjankord.github.io/Style-Gui...
PATTERN LAB
http://patternlab.io/
• Brighton Fringe 2016
• Complex ticketing and
performance based design and
development
• Drupal integration
• Flexible fo...
• Document all the content
and required modules
• Design based on
wireframes containing all
modules
• Clear theme and styl...
• Build atoms and base
styles/elements first
• Build each module from
constituent parts, building
on existing styles
• Bui...
• Tight timelines met
• Really easy implementation in Drupal
• Easier bug fixing due to modules structure
• Easy to use mo...
— Nobody at Starbucks
WE DO SOME THINGS RIGHT -
WE MIGHT NOT PAY OUR TAXES, BUT
WE HAVE AN AWESOME STYLE GUIDE
”
“
http://...
THANKS
Next Up:
Calum Ryan - Taking Part in the IndieWeb
Matt Bee
http://www.todayishould.com
http://www.twitter.com
http:...
Style Guides in the Wild
Upcoming SlideShare
Loading in …5
×

Style Guides in the Wild

526 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
526
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×