Styleguide

1,376 views

Published on

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

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

No Downloads
Views
Total views
1,376
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Styleguide

    1. 1. Bring your designer to the Drupal side of the force Designing for the modern webTom Bamford @waako
    2. 2. ModularityStop Designing pagesStop Designing pages Stop Designing pages Stop Designing pages Stop Designing pages Stop Designing pages Stop Designing pages Stop Designing pages
    3. 3. Tools/Methods available
    4. 4. Style Guides Drupal Styleguide module SPECCTR for Adobe FireworksStyle Tiles Styletil.esFront-End Dev SMACSS: Scalable & Modular Architecure for CSS OOCSS: Object Orientated CSS BEM: Block Element Modifyer
    5. 5. A Process
    6. 6. WireframingDesign wireframe componentsNOT wireframe pages
    7. 7. Style GuideThink about reusable elementsbefore designing the specifics
    8. 8. DocumentationCode implementation should be structuredEnsures reusability over time & projectsConsider tools like KSS, SASS
    9. 9. Resources.Net Magazine: Designing Styleguides24 Ways: Front End Style GuidesKSS: Knyle Style Sheets - CSS Documentation ToolSmashing MagazineMaban’s Style Guide collection on Gimme BarPea.rsPattern PrimerKalei - Style GuideBBC Global Experience LanguagePaul Robert Lloyd: Style Guide & BarebonesTwitter Bootstrap
    10. 10. Drupal ResourcesDrupal PSD Base Theme Styleguides (Yup self-promo)Styleguide ModuleStyleguide Extras ModuleThemetest ModuleChapter Three: Design for Drupal: A Template ApproachZivtech’s Drupal Style GuideDrupal Style Guide v0.4
    11. 11. Who uses web Style GuidesDrupal.orgMailChimpGithubGoogleBBCStarbucksGov.ukTwitterYahoo!
    12. 12. Examples Depending on internet access...Tom Bamford @waako
    13. 13. I would love to change the world but they won’t give me the source code...Tom Bamford @waako

    ×