DATA-DRIVEN DESIGN SYSTEMS: HOW TO CREATE A LIVING STYLEGUIDE THAT DOESN’T LIEDani Nordin & Salem Ghoweri | Pegasystems | December 2016
@danigrrl, @sghoweri | #DesignSystems
Shameless self-promotion
@danigrrl, @sghoweri | #DesignSystems
There’s a few more in here
HI, I’M DANI▸ Director of Digital
Experience
▸ Focused on helping the team create exceptional experiences at speed and scale
▸ Geeks out on process @danigrrl
HI, I’M SALEM▸ Senior Front-end
Architect
▸ Focused on scalable Design Systems + Web Performance
▸ Really hates documentation @salem_ghoweri
THE WAY WE USED TO DO THINGS
WE NEED TO REDUCE COSTS AND MAKE ALL THESE WEBSITES FEEL LIKE THEY’RE FROM THE SAME COMPANY. WHY CAN’T YOU JUST USE TEMPLATES?
OUR CEO
OUR DIRECTIVE
OUR DIRECTIVE
THE OLD APPROACH
▸ Design components on pega.com are constantly evolving as marketing and brand evolves
▸ Other sites (PDN, SalesHub) “borrow” components from pega.com, often without accounting for content and audience needs
▸ Changing elements in one site leads to rework in others; look and feel across sites becomes inconsistent and out of date.
THE TURNING POINT
THE TURNING POINT
WHEN THINGS CAME TO A HEAD
▸ Stakeholders across the PDN felt their voices weren’t being heard
▸ Marketing-driven designs didn’t reflect the focus of the content or audience: technical documentation, support and training
▸ One single project (landing pages) took almost a year and a half to launch
What to do?
Atomic design, baby!
WHAT WE DID NEXT
BENEFITS OF A COMPONENT-DRIVEN DESIGN SYSTEM
▸ Consolidate front-end code, improving site performance
▸ Make design more efficient and consistent, while maintaining flexibility
▸ Make the transition from wireframe or sketch to HTML prototype faster
▸ Impress our coworkers and executives
▸ Win fabulous prizes
WHAT WE DID NEXT
START WITH THE BASICS
▸ Who creates things across the websites?
▸ What information do they need to do their job well?
▸ What tools do they use?
UX FRONT END
MARKETERS TECH WRITERS
VISUAL DESIGNERS
WHAT WE DID NEXT
ARE THERE ANY OTHER USE CASES TO CONSIDER?
▸ Visiting designers and contractors
▸ 3rd-party implementation partners
▸ Seasonal interns
▸ Remote team members
▸ Executives and external audiences
WHAT WE DID NEXT
ESTABLISH CLEAR PRINCIPLES AND STANDARDS
Establish clear design principles
Document design standards
EVERYONE NEEDS SOMETHING DIFFERENT
▸ Rules: dos and don'ts. Best practices. Coding standards.
▸ Facts: use this snippet of code. These color hexes are available. Here's our modular scale.
WHAT KIND OF DOCUMENTATION?
WHAT KIND OF DOCUMENTATION?
STYLEGUIDES. DESIGN SPECS. CONTENT SPECS.
47 PAGES.
47 PAGES. LAST-UPDATED: MARCH 2015
Gray, Lightest
Blue, Base (Aka, “Blue”)
some
, sometimes.
some
OH, DOCUMENTATION. I KNOW THAT.
STATIC DOCUMENTATION:▸ Needs to be maintained, updated to keep up with the
evolution of your design system or pattern library
▸ Lacks contextual awareness
▸ Can’t accurately represent the “thing” being shipped—different medium means small details don’t always translate easily
TECHNIQUES FOR MANAGING THE CHAOS
SINGLE SOURCE OF TRUTH
…is the practice of structuring information models and associated schemata such that every data element is stored exactly once
- wikipedia.org/wiki/single_source_of_truth
TEXT
USE REAL DATA WHEN DOCUMENTING SPECIFICS▸ Use namespaced Sass Maps to store similar types of
design details in a single place (ex. colors, spacing, fonts)
▸ Export that data in a format that other systems can be wired up to consume, like JSON
▸ Work to find ways of incorporating that actual data into the artifacts that we regularly produce: pattern libraries, living styleguides, markdown documentation, Twig templates, Sketch comps, etc.
TYPOGRAPHIC MODULAR SCALE
https://github.com/modularscale/modularscale-sass
MODULARIZE YOUR TYPOGRAPHY
https://patterns-dev.pega.com/patterns/06-docs-05-typography@inprogress/[email protected]#size-standards
$ms-base: 1rem;$ms-ratio: 1.2;@import 'modularscale-sass/stylesheets/modular-scale';
$modular-scale: ( 'font_sizes': ( xxxxlarge: ms(8) 4, // ~68.797px xxxlarge: ms(7) 4, // ~57.331px xxlarge: ms(6) 3, // ~47.776px xlarge: ms(4) 2.5, // ~33.178px large: ms(2) 1.8, // ~23.04px medium: ms(1) 1.6, // ~19.2px base: ms(0) 1.5, // ~16px small: ms(-1) 1.3, // ~14.222px xsmall: ms(-2) 1 // ~12.642px ));
USE A MIXIN TO SIMPLIFY USING SASS MAP VALUES
@mixin font-size($font-size, $line-height: '') { @if ($line-height == '') { $line-height: nth(
map-get-deep($modular-scale, 'font_sizes', $size), 2);
} font-size: nth( map-get-deep($modular-scale, 'font_sizes', $size), 1); line-height: #{$line-height}rem;}
USE A MIXIN TO SIMPLIFY USING SASS MAP VALUES
h1 { @include font-size(xlarge);}
AUTO-GENERATE UTILITY CLASSES
h1 { @include font-size(xlarge);}
MOBILE-FIRST, RESPONSIVE BREAKPOINTS
MODULARIZE YOUR TYPOGRAPHY@import 'breakpoint-sass/stylesheets/_breakpoint';
$breakpoints: ( 'xsmall' '480px', 'small' '720px', 'medium' '1024px', 'large' '1200px') !default;
@each $breakpoint in $breakpoints { $alias: nth($breakpoint, 1); $condition: nth($breakpoint, 2); @include add-breakpoint(quote($alias), unquote($condition));}
COLOR SWATCHES
SPACING SCALE$spacing-scale: ( spacing: ( 'default': ( xlarge: 64px large: 32px, medium: 16px, small: 8px, xsmall: 4px, ), 'squished': ( large: 16px 32px,
medium: 9px 16px, …
PROVIDE TOOLS TO MAKE REFERENCING YOUR DOCUMENTATION EASIER
MAKE IT EASY TO FIND, DOWNLOAD ASSETS
AUTOMATICALLY SHOW PATTERN VARIATIONS
Johnny Appleseed
DISPLAY PATTERN-SPECIFIC DOCUMENTATION IN-CONTEXT
PATTERN USAGE, LINEAGE
INCLUDE ACTUAL EXAMPLES OF THE DEFAULT PATTERNS, INCLUDING VARIATIONS
THE HOLY GRAIL:
TWIG.
WHAT’S NEXT?