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

Empowering designers to code (2)

Diana
June 16, 2016

Empowering designers to code (2)

Learning to code is a journey, and the first milestone for designers is often learning HTML and CSS. A great style guide can really propel a designer on their journey to becoming a key contributor. The same attributes that make a style guides great for designing in the browser also help with CSS maintainability, scalability, performance, and can even make it enjoyable to work with CSS again. This talk delves into what makes a great style guide for designers and everyone else, with some tips on the process of building style guides.

Diana

June 16, 2016
Tweet

More Decks by Diana

Other Decks in Design

Transcript

  1. Design Systems Goal: to build a robust, composable, and flexible

    system, that works across platforms and context, providing guidance on visual language, voice and tone, and implementation.
  2. www

  3. Setup dev environment? Git commit what?! How to push O_o

    Where is all the code? How to run tests? www
  4. HTML & CSS prototypes Contributes to production Contributes to style

    guide Builds tools for others Fixes CSS bugs Refactors front-end code Improves performance
  5. HTML & CSS prototypes Contributes to production Contributes to style

    guide Builds tools for others Fixes CSS bugs Refactors front-end code Improves performance
  6. What makes a style guide good for designers? 1. Highly

    reusable and flexible styles 2. A clear and consistent naming convention
  7. What makes a style guide good for designers? 1. Highly

    reusable and flexible styles 2. A clear and consistent naming convention 3. Up-to-date and well written documentation
  8. 1.Highly reusable and flexible styles Styles that can be mixed

    and matched to achieve many different layouts, independent of their location.
  9. Utilities Single-purpose classes that do one thing well. .h1 .h2

    .h3 .h4 .CAPS .strong .regular .underline .no-underline .p-1 .p-2 .p-3 .p-4 .text-gray .text-blue-light .text-blue-dark .text-blue .text-turquoise .text-green .text-yellow .text-orange .text-pink .text-red .mt-1 .mt-2 .mt-3 .mt-4 .mr-1 .mr-2 .mr-3 .mr-4 .py-4 .px-4
  10. 2.A clear and consistent 
 naming convention • Make it

    easy to understand what styles are being applied
  11. "If I’m reading html, I want to know what the

    css is going to do.” - Adam Morse, CSS and Scalability
  12. 2.A clear and consistent 
 naming convention • Make it

    easy to understand what styles are being applied • Follow a consistent pattern
  13. 2.A clear and consistent 
 naming convention • Make it

    easy to understand what styles are being applied • Follow a consistent pattern • Promote reuse of styles
  14. // Do .btn-orange {…} .alert-error {…} // Don’t .homepage-cta-button {…}

    .registration-form-error {…} Use presentational or functional names rather than location-specific
  15. // Do .btn-orange {…} // Presentational .alert-error {…} Use presentational

    or functional names rather than location-specific
  16. // Do .btn-orange {…} .alert-error {…} // Functional Use presentational

    or functional names rather than location-specific
  17. // Do .btn-primary {…} // Functional .alert-red {…} // Presentational

    Use presentational or functional names rather than location-specific
  18. “The most reusable components are those with class names that

    are independent of the content.” - Nicolas Gallagher, About HTML semantics and 
 front-end architecture
  19. 3.Up-to-date & well-written documentation • Explain how to use styles

    with production code examples • Keep documentation regularly updated
  20. Show the status of styles, such as: experimental, stable, or

    deprecated Examples from: Salesforce Lightning Design System
  21. • Use routine events as a reminder to make updates

    • Make it part of your code review checklist
  22. • Use routine events as a reminder to make updates

    • Make it part of your code review checklist • Make it easy for everyone to contribute
  23. 3.Up-to-date & well-written documentation • Explain how to use styles

    with production code examples • Keep documentation regularly updated • Include principles and coding guidelines that explain the CSS behind the styles
  24. Teach people the what, the how and the why, so

    they’ll become champions of your style guide.
  25. Prototyping tools ✓ pulls in the style guide ✓ can

    share a URL to the prototype ✓ is tracked in Git
  26. Prototyping tools ✓ pulls in the style guide ✓ can

    share a URL to the prototype ✓ is tracked in Git ✓ allows you to write custom JavaScript or CSS
  27. Prototyping tools ✓ pulls in the style guide ✓ can

    share a URL to the prototype ✓ is tracked in Git ✓ allows you to write custom JavaScript or CSS ✓ includes a simple templating language
  28. Contributes to production Contributes to style guide Builds tools for

    others Fixes CSS bugs Refactors front-end code Improves performance HTML & CSS prototypes
  29. What makes a style guide good for designers everyone? 1.

    Highly reusable and flexible styles 2. A clear and consistent naming convention 3. Up-to-date and well written documentation
  30. 16 breaks down, and adds up to whole numbers more

    easily. 32 32 32 32 32 32 32 32 64 64 64 64 128 128 64
  31. Type scales Type scales based on powers of two often

    end up in more sensible numbers.
  32. - Brent Jackson, Mathematical Web Typography Type scales based on

    powers of two often end up in more sensible numbers.
  33. • Reduce barriers • Improve workflows • Build a better

    user experience • Empower designers to code