Modern Style Guides for a Better Tomorrow

F99870f7587bb733ec9ebe2f85eada26?s=47 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.

F99870f7587bb733ec9ebe2f85eada26?s=128

Shay Howe

April 01, 2013
Tweet

Transcript

  1. 3.
  2. 4.
  3. 5.
  4. 6.
  5. 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 “
  6. 9.

    Modern Style Guides @shayhowe Tools • HTML5 & CSS3 have

    opened doors • Preprocessors make writing code more efficient • Frameworks improve abstraction
  7. 10.

    Modern Style Guides @shayhowe Standards • Web standards are evolving

    • OOCSS & SMACSS promote modularization • Maintainability & performance are gaining traction
  8. 11.

    Modern Style Guides @shayhowe Browsers • Feature support is truly

    respectful • Rendering has tremendously improved • Updates are continuous
  9. 12.

    Modern Style Guides @shayhowe Processes • Static compositions are a

    house of cards • Responsive design is a must • Mobile first approach provides clarity
  10. 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
  11. 15.
  12. 16.
  13. 17.
  14. 18.
  15. 19.
  16. 21.

    Modern Style Guides @shayhowe Provide Consistency • Build a living

    reference library • Favor constraints • Encourage more cohesive design • Improve maintainability
  17. 22.
  18. 23.
  19. 24.

    Modern Style Guides @shayhowe Set Standards • Document design &

    development standards • Conform to standards • Socialize standards
  20. 25.
  21. 26.

    Modern Style Guides @shayhowe Improve Workflow • See the design

    in action • Cut out unnecessary steps • Provide better deliverables • Make life easier & save time
  22. 27.

    Modern Style Guides @shayhowe Raise Awareness • Give design &

    development a voice • Create a shared vocabulary • Advocate quality
  23. 28.
  24. 29.
  25. 31.
  26. 32.
  27. 33.
  28. 34.
  29. 35.
  30. 36.
  31. 37.
  32. 38.
  33. 40.

    Modern Style Guides @shayhowe Research • Gather the team •

    Ask thought provoking questions • Listen to what is needed • Organize feedback
  34. 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
  35. 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
  36. 43.
  37. 44.
  38. 45.
  39. 46.
  40. 47.
  41. 48.
  42. 49.
  43. 50.
  44. 51.

    Modern Style Guides @shayhowe Bring It to Life • Build

    in live, real code • Show behaviors & interactions • Use actual examples • Make it comprehensive
  45. 52.
  46. 53.
  47. 54.
  48. 55.

    Modern Style Guides @shayhowe Document Standards • Document set standards

    • Educate through standards • Include brand, development, design & editorial guidelines
  49. 56.
  50. 57.
  51. 58.
  52. 59.
  53. 60.

    Modern Style Guides @shayhowe Iterate • Do not neglect the

    style guide • Keep the audience in mind • Reduce friction • Have a review process
  54. 62.

    Modern Style Guides @shayhowe Drive Participation • Encourage contribution •

    Evolve through collaboration • Make it accessible
  55. 63.

    Modern Style Guides @shayhowe Watch the Unpredictable • Predict the

    unpredictable • Be rigorous, say no! • Again, conform to standard
  56. 64.

    Modern Style Guides @shayhowe Learn from Others • Look to

    others for advice • Study different style guides & frameworks • Don’t reinvent the wheel
  57. 65.

    Modern Style Guides @shayhowe Helpful Resources • Website Style Guide

    Resources styleguides.io • The Style Guide Guide vinspee.me/style-guide-guide • Style Guide Boilerplate brettjankord.com/projects/style-guide-boilerplate • Stylify Me stylifyme.com
  58. 67.

    Modern Style Guides @shayhowe 1 Provide consistency 2 Set standards

    3 Form relationships 4 Build incrementally 5 Iterate often
  59. 68.