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

Building & Maintaining A Living Style Guide for a Post Apocalyptic Web

Michael Jovel
October 18, 2016

Building & Maintaining A Living Style Guide for a Post Apocalyptic Web

Presented at GiantConf 2016 in Charlotte, NC.

Michael Jovel

October 18, 2016

More Decks by Michael Jovel

Other Decks in Design


  1. a Living Style Guide Building & Maintaining for a Post-Apocalyptic

    Web @mjovel
  2. The opinions expressed here are those of the Presenter and

    do not necessarily reflect the positions of the Food & Drug Administration.
  3. None
  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. Department Department Department Department Department Department Department Development UX/Design Sub-Department

    Sub-Department Delivering the Org Chart
  23. Web Staff IT Partner Organizations Contractors Department SME Delivering the

    Org Chart
  24. None
  25. None
  26. Enter the Design System

  27. “We’re not designing pages, we’re designing systems of components” –Stephen

  28. http://styletil.es/

  29. http://danielmall.com/articles/rif-element-collages/

  30. http://bradfrost.com/blog/post/atomic-web-design/

  31. http://patternlab.io

  32. Atoms are the basic building blocks of matter. Applied to

    web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
  33. Molecules are groups of atoms bonded together and are the

    smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems. For example, a form label, input or button aren’t too useful by themselves, but combine them together as a form and now they can actually do something together.
  34. Organisms are groups of molecules joined together to form a

    relatively complex, distinct section of an interface. For example, a masthead organism might consist of diverse components like a logo, primary navigation, search form, and list of social media channels.
  35. Templates consist mostly of groups of organisms stitched together to

    form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.
  36. Pages are specific instances of templates.

  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. http://style.codeforamerica.org/

  44. http://cfpb.github.io/design-manual/

  45. A Successful Design System Will…

  46. Focus: allow the designer to focus clearly on the project

    at hand rather then to be diverted by other distractions.
  47. Clarity: allow the designer to think clearly about our design

    beliefs as well as the design constraints in place across the platform.
  48. Confidence: allow the designer to have complete confidence in what

    they are designing and that it is inline with others in the team.
  49. Consistency: create consistency across the product which in turn will

    create a secure, familiar experience across the platform.
  50. Efficiency: create understanding across teams, meaning less time wasted concentrating

    on the less important details.
  51. What is in a Design System?

  52. T Typography Icons Color Motion Imagery Tone Accessibility 508 Code

    Design System
  53. Styleguide Creators

  54. Style Parsers

  55. http://warpspire.com/kss/

  56. http://styleguide.sc5.io/

  57. http://trulia.github.io/hologram/

  58. Style Parsers • Parses comments from css to generate documentation

    • Liters your css with comments
  59. Static Generators

  60. http://patternlab.io

  61. Dynamic Style Guide Platforms

  62. http://rizzo.lonelyplanet.com/styleguide/design-elements/colours

  63. Solidarity Model https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.gyrjkbffb

  64. Hyde

  65. None
  66. None
  67. Solidarity Model Problems • Focused on creators product • Doesn’t

    Scale • Limited Time & Resource Commitment
  68. Centralized Model https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.gyrjkbffb

  69. Labcoat

  70. UI Inventory

  71. None
  72. Prioritize

  73. https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742#.6se46kibr

  74. https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742#.6se46kibr

  75. Centralized Model Benefits • Dedicated team avoids single product bias

    • Spread design system to many product lines • Coordinate prioritization of patterns across many products and manage backlog
  76. Centralized Model Problems • Lack of context of day to

    day product building • Lack ability to foster active participation • Lack of visibility with product teams
  77. Federated Model https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.gyrjkbffb

  78. Federated Model Benefits • Teams composed of various products reduces

    single product bias • Creates evangelists within product teams • Design system will more accurately reflect product needs.
  79. THANK YOU!