Styleguides: designing for the modern web, process, technicques and implementations

1. Bring your designer to the
Drupal side of the force
Designing for the modern web
Tom Bamford @waako

2. Modularity
Stop Designing pages
Stop Designing pages
Stop Designing pages
Stop Designing pages
Stop Designing pages
Stop Designing pages
Stop Designing pages
Stop Designing pages

4. Tools/Methods available

5. Style Guides
Drupal Styleguide module
SPECCTR for Adobe Fireworks
Style Tiles
Styletil.es
Front-End Dev
SMACSS: Scalable & Modular Architecure for CSS
OOCSS: Object Orientated CSS
BEM: Block Element Modifyer

6. A Process

7. Wireframing
Design wireframe components
NOT wireframe pages

8. Style Guide
Think about reusable elements
before designing the specifics

9. Documentation
Code implementation should be structured
Ensures reusability over time & projects
Consider tools like KSS, SASS

10. Resources
.Net Magazine: Designing Styleguides
24 Ways: Front End Style Guides
KSS: Knyle Style Sheets - CSS Documentation Tool
Smashing Magazine
Maban’s Style Guide collection on Gimme Bar
Pea.rs
Pattern Primer
Kalei - Style Guide
BBC Global Experience Language
Paul Robert Lloyd: Style Guide & Barebones
Twitter Bootstrap

11. Drupal Resources
Drupal PSD Base Theme Styleguides (Yup self-promo)
Styleguide Module
Styleguide Extras Module
Themetest Module
Chapter Three: Design for Drupal: A Template Approach
Zivtech’s Drupal Style Guide
Drupal Style Guide v0.4

12. Who uses web Style Guides
Drupal.org
MailChimp
Github
Google
BBC
Starbucks
Gov.uk
Twitter
Yahoo!

13. Examples
Depending on internet access...
Tom Bamford @waako

14. I would love to change the world
but they won’t give me the source code...
Tom Bamford @waako