Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Style Guides for a Better Tomorrow

Shay Howe
April 01, 2013

Modern Style Guides for a Better Tomorrow

Times are changing and so must the process in which we design and build websites. The days of designing static compositions in Photoshop are a thing of the past, instead, responsive design within the browser is the future. This new world is not without its own risks, but if we focus on maintainability, organization, and modularity we can achieve a better tomorrow.

In this talk Shay will outline styleguides, living documentation on the design and development of a website, and their role within web design and development process. Looking at a few modern practices and standards, this talk will cover the benefits of stylesguides, the strategy behind creating one, and how to best utilize one within your project.

Shay Howe

April 01, 2013

More Decks by Shay Howe

Other Decks in Design


  1. Modern
    Style Guides
    for a Better Tomorrow
    Shay Howe

    View Slide

  2. Modern Style Guides @shayhowe
    CSS is

    View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. Modern Style Guides @shayhowe
    Consistency is one of the
    most powerful usability
    principles: when things
    always behave the same,
    users don’t have to worry
    about what will happen.
    – Jakob Nielson

    View Slide

  8. Modern Style Guides @shayhowe
    Times are

    View Slide

  9. Modern Style Guides @shayhowe
    • HTML5 & CSS3 have opened doors
    • Preprocessors make writing code more efficient
    • Frameworks improve abstraction

    View Slide

  10. Modern Style Guides @shayhowe
    • Web standards are evolving
    • OOCSS & SMACSS promote modularization
    • Maintainability & performance are gaining traction

    View Slide

  11. Modern Style Guides @shayhowe
    • Feature support is truly respectful
    • Rendering has tremendously improved
    • Updates are continuous

    View Slide

  12. Modern Style Guides @shayhowe
    • Static compositions are a house of cards
    • Responsive design is a must
    • Mobile first approach provides clarity

    View Slide

  13. Modern Style Guides @shayhowe
    We Need to…
    • Design, or decide, in the browser
    • Provide a realistic presentation of a website
    • Quickly change & iterate
    • Stay consistent
    • Think in systems, not pages
    • Build a style guide

    View Slide

  14. Modern Style Guides @shayhowe
    What is a
    Style Guide

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. Modern Style Guides @shayhowe
    Style Guide

    View Slide

  21. Modern Style Guides @shayhowe
    Provide Consistency
    • Build a living reference library
    • Favor constraints
    • Encourage more cohesive design
    • Improve maintainability

    View Slide

  22. View Slide

  23. View Slide

  24. Modern Style Guides @shayhowe
    Set Standards
    • Document design & development standards
    • Conform to standards
    • Socialize standards

    View Slide

  25. View Slide

  26. Modern Style Guides @shayhowe
    Improve Workflow
    • See the design in action
    • Cut out unnecessary steps
    • Provide better deliverables
    • Make life easier & save time

    View Slide

  27. Modern Style Guides @shayhowe
    Raise Awareness
    • Give design & development a voice
    • Create a shared vocabulary
    • Advocate quality

    View Slide

  28. View Slide

  29. View Slide

  30. Modern Style Guides @shayhowe

    View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. Modern Style Guides @shayhowe

    View Slide

  40. Modern Style Guides @shayhowe
    • Gather the team
    • Ask thought provoking questions
    • Listen to what is needed
    • Organize feedback

    View Slide

  41. Modern Style Guides @shayhowe
    Take Inventory
    • Take visual inventory
    • Recognize patterns
    • Identify what to include...
    • Branding
    • Buttons
    • Colors
    • Forms
    • Icons
    • Layout
    • Media
    • Navigation
    • Typography

    View Slide

  42. Modern Style Guides @shayhowe
    Build Incrementally
    • Set a foundation for content
    Colors, Layout, Lists, Normalize, Typography
    • Add in theme & components
    Alerts, Buttons, Labels, Navigation, Tooltips
    • Round out specifics
    Carousels, Hero, Sidebar

    View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. Modern Style Guides @shayhowe
    Bring It to Life
    • Build in live, real code
    • Show behaviors & interactions
    • Use actual examples
    • Make it comprehensive

    View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. Modern Style Guides @shayhowe
    Document Standards
    • Document set standards
    • Educate through standards
    • Include brand, development, design & editorial guidelines

    View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. View Slide

  60. Modern Style Guides @shayhowe
    • Do not neglect the style guide
    • Keep the audience in mind
    • Reduce friction
    • Have a review process

    View Slide

  61. Modern Style Guides @shayhowe

    View Slide

  62. Modern Style Guides @shayhowe
    Drive Participation
    • Encourage contribution
    • Evolve through collaboration
    • Make it accessible

    View Slide

  63. Modern Style Guides @shayhowe
    Watch the Unpredictable
    • Predict the unpredictable
    • Be rigorous, say no!
    • Again, conform to standard

    View Slide

  64. Modern Style Guides @shayhowe
    Learn from Others
    • Look to others for advice
    • Study different style guides & frameworks
    • Don’t reinvent the wheel

    View Slide

  65. Modern Style Guides @shayhowe
    Helpful Resources
    • Website Style Guide Resources
    • The Style Guide Guide
    • Style Guide Boilerplate
    • Stylify Me

    View Slide

  66. Modern Style Guides @shayhowe

    View Slide

  67. Modern Style Guides @shayhowe
    1 Provide consistency
    2 Set standards
    3 Form relationships
    4 Build incrementally
    5 Iterate often

    View Slide

  68. View Slide

  69. Modern Style Guides @shayhowe
    Thank You!
    Save 35%

    View Slide