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
Tweet

More Decks by Michael Jovel

Other Decks in Design

Transcript

  1. The opinions expressed here are those of the Presenter and

    do not necessarily reflect the positions of the Food & Drug Administration.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. Focus: allow the designer to focus clearly on the project

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

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

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

    create a secure, familiar experience across the platform.
  10. 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
  11. Centralized Model Problems • Lack of context of day to

    day product building • Lack ability to foster active participation • Lack of visibility with product teams
  12. 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.