Embed Size (px)
Citation preview
STYLE GUIDES IN THE WILD
• 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
