Documenting Design Patterns

For cross-functional teams

Dani Nordin @danigrrl

Senior UX Designer, Harvard Business Review Group

UXD Bootcamp, General Assembly

Author, Drupal for Designers (O’Reilly, 2012)

About the presenter

@srijan #SrijanWW

Design Patterns at HBR

•  Based in site CSS •  Mobile first •  Creates repeatable, reusable

design patterns •  Speeds up front-end production

The great

@srijan #SrijanWW

•  Documentation lacking •  Disorganized •  Design team still working in

Illustrator and PSD comps

The not-so-great

@srijan #SrijanWW

Legibility/inconsistency issues

@srijan #SrijanWW

Contrast issues

“Why don’t you just use this helper class?”

@srijan #SrijanWW

<div class=“credit text-very-tight line-height-loose push-1 medium-3 columns…

What to do?

Step 1: Inspiration

Step 1: Inspiration

Step 1: Inspiration

Step 2: Start organizing

Step 2: Start organizing

Step 2: Start organizing

Step 3: Document Principles & Guidelines

•  Guiding principles •  Colors •  Typography •  Icons •  Responsive grid •  CSS helper classes

Documenting Guidelines

@srijan #SrijanWW

•  System messaging •  Interface copy •  Design/user testing protocols

and process •  Interaction standards

Other considerations?

@srijan #SrijanWW

HOLD UP.

Why is User Research in here? That’s not really “design.”

@srijan #SrijanWW

We’ve been trying to make the wiki* a central location for all this stuff.

@srijan #SrijanWW

*that nobody ever reads

•  Who creates things on the website?

•  What do they need to know?

Revisit the purpose

@srijan #SrijanWW

UX

Design

Tech

Editorial Marketing

Product

•  Internal or external? •  Developers? •  Designers? •  Writers? •  Marketers?

Specific use cases: •  Visiting designers and

contractors •  Third-party partners •  Seasonal Interns

Define the audience

@srijan #SrijanWW

Align on purpose/goals

•  Establish common principles and guidelines

•  Create repository of interface elements

•  Increase efficiency of iteration & design

@srijan #SrijanWW

Redefine “style guide”

CSS classes? <h1> vs. <h5>? What system messages look like?

Interface elements Typographic hierarchy What system messages SAY?

@srijan #SrijanWW

Start with the basics

•  Colors •  Type Styles •  Form Elements •  Grid •  Image sizes •  Icons

@srijan #SrijanWW

Add in building blocks

•  Content “teasers” •  Sidebar widgets •  Search results •  Menus •  Callouts •  Utilities

@srijan #SrijanWW

Build up to templates

•  Blog post/article •  Product page •  Search page •  Paywall •  Registration and Signin

screens

@srijan #SrijanWW

Establish copy guidelines

•  Feedback messages •  System emails •  Voice and Tone •  Words and phrases •  Marketing emails

@srijan #SrijanWW

Socialize and iterate

•  Reference in design reviews •  Send to third-party vendors •  Use during design phase •  Adapt as new features are created and old ones refined

@srijan #SrijanWW

Let the process evolve

http://commons.wikimedia.org/wiki/File:Evolution-des-wissens.jpg

Dani Nordin @danigrrl

Thank You!

Take this conversation online by tweeting using the hashtag #SrijanWW