Documenting design patterns

[email protected] :: @danigrrl

Documenting Design Patterns

for cross-functional product teams


About Me

Senior UX Designer, Harvard Business Review Group

UXD Bootcamp, General Assembly

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


Design Patterns at HBR


The Great

• Based in site CSS

• Mobile first

• Creates repeatable, reusable design patterns

• Speeds up front-end production


The Not So Great

• Documentation lacking

• Disorganized

• Design team still working in PSD comps

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

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


Legibility/inconsistency issues


Contrast issues


What to do?


Step 1: Inspiration




Step 2: Start Organizing




Step 3: Document principles & guidelines


Principles & Guidelines

• Guiding principles

• Colors

• Typography

• Iconography

• Responsive grid

• Visibility helper classes


Other considerations

• System messaging

• Interface copy

• Design/user testing protocols and process

• Interaction standards


WAIT.

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

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

*that nobody ever reads


The process is still evolving

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


Thank you!