Bring your designer to the drupal side of the force

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

Transcript

1. Bring your designer to the Drupal side of the force Designing for the modern web Tom Bamford @waako 1 Monday, 25 June 2012
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 2 Monday, 25 June 2012
3. 3 Monday, 25 June 2012
4. Tools/Methods available 4 Monday, 25 June 2012
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 5 Monday, 25 June 2012
6. A Process 6 Monday, 25 June 2012
7. Wireframing Design wireframe components NOT wireframe pages 7 Monday, 25 June 2012
8. Style Guide Think about reusable elements before designing the specifics 8 Monday, 25 June 2012
9. Documentation Code implementation should be structured Ensures reusability over time & projects Consider tools like KSS, SASS 9 Monday, 25 June 2012
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 10 Monday, 25 June 2012
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 11 Monday, 25 June 2012
12. Who uses web Style Guides Drupal.org MailChimp Github Google BBC Starbucks Gov.uk Twitter Yahoo! 12 Monday, 25 June 2012
13. Examples Depending on internet access... Tom Bamford @waako 13 Monday, 25 June 2012
14. I would love to change the world but they won’t give me the source code... Tom Bamford @waako 14 Monday, 25 June 2012