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/06-docs-05-typography@inprogress.html#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?