a Living Style GuideBuilding & Maintaining

for a Post-Apocalyptic Web

@mjovel

The opinions expressed here are those of the Presenter and do not necessarily reflect the positions of the Food & Drug Administration.

Department Department Department DepartmentDepartment DepartmentDepartment

Development UX/Design

Sub-DepartmentSub-Department

Delivering the Org Chart

Web Staff IT Partner OrganizationsContractors

Department

SME

Delivering the Org Chart

Enter the Design System

“We’re not designing pages, we’re designing

systems of components” –Stephen Haye

http://styletil.es/

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

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

http://patternlab.io

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.

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.

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.

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.

Pages are specific instances of templates.

http://style.codeforamerica.org/

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

A Successful Design System Will…

Focus: allow the designer to focus clearly on the project at hand rather

then to be diverted by other distractions.

Clarity: allow the designer to think clearly about our design beliefs as well

as the design constraints in place across the platform.

Confidence: allow the designer to have complete confidence in what they are

designing and that it is inline with others in the team.

Consistency: create consistency across the product which in turn will create a secure, familiar experience across the

platform.

Efficiency: create understanding across teams, meaning less time wasted

concentrating on the less important details.

What is in a Design System?

TTypography IconsColor

MotionImageryTone Accessibility

508

Code

Design System

Styleguide Creators

Style Parsers

http://warpspire.com/kss/

http://styleguide.sc5.io/

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

Style Parsers

• Parses comments from css to generate documentation

• Liters your css with comments

Static Generators

http://patternlab.io

Dynamic Style Guide Platforms

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

Solidarity Model

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

Hyde

Solidarity Model Problems

• Focused on creators product

• Doesn’t Scale

• Limited Time & Resource Commitment

Centralized Model

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

Labcoat

UI Inventory

Prioritize

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

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

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

Centralized Model Problems

• Lack of context of day to day product building

• Lack ability to foster active participation

• Lack of visibility with product teams

Federated Model

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

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.

THANK YOU!