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

Presented at GiantConf 2016 in Charlotte, NC.

Transcript

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.
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
26. Enter the Design System
27. “We’re not designing pages, we’re designing systems of components” –Stephen Haye
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.
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
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
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!