style guides in the wild

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 12th April)

• Front End Developer on Brighton Fringe 2016 website (live)

• Other recent clients include Macmillan, Independent Age, Odeon

WHAT DO YOU KNOW?

• “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?

• 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?

• 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 ground up, evolving what already exists

• Build pages last and from designed modules

HOW?

TOOLS

http://styleguides.io/WEBSITE STYLE GUIDE RESOURCES

STYLE GUIDE BOILERPLATEhttps://github.com/mattbee/Style-Guide-BoilerplateForked from http://bjankord.github.io/Style-Guide-Boilerplate/

PATTERN LABhttp://patternlab.io/

• Brighton Fringe 2016

• Complex ticketing and performance based design and development

• Drupal integration

• Flexible for future theming

CASE STUDY

• Document all the content and required modules

• Design based on wireframes containing all modules

• Clear theme and style for throughout the site

DESIGN

• 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

• 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

— 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/

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