Documenting design patterns

dani@tzk-design.com :: @danigrrl

Documenting Design Patterns

for cross-functional product teams

dani@tzk-design.com :: @danigrrl

About Me

Senior UX Designer, Harvard Business Review Group

UXD Bootcamp, General Assembly

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

dani@tzk-design.com :: @danigrrl

Design Patterns at HBR

dani@tzk-design.com :: @danigrrl

The Great

• Based in site CSS

• Mobile first

• Creates repeatable, reusable design patterns

• Speeds up front-end production

dani@tzk-design.com :: @danigrrl

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…

dani@tzk-design.com :: @danigrrl

Legibility/inconsistency issues

dani@tzk-design.com :: @danigrrl

Contrast issues

dani@tzk-design.com :: @danigrrl

What to do?

dani@tzk-design.com :: @danigrrl

Step 1: Inspiration

dani@tzk-design.com :: @danigrrl

dani@tzk-design.com :: @danigrrl

dani@tzk-design.com :: @danigrrl

Step 2: Start Organizing

dani@tzk-design.com :: @danigrrl

dani@tzk-design.com :: @danigrrl

dani@tzk-design.com :: @danigrrl

Step 3: Document principles & guidelines

dani@tzk-design.com :: @danigrrl

Principles & Guidelines

• Guiding principles

• Colors

• Typography

• Iconography

• Responsive grid

• Visibility helper classes

dani@tzk-design.com :: @danigrrl

Other considerations

• System messaging

• Interface copy

• Design/user testing protocols and process

• Interaction standards

dani@tzk-design.com :: @danigrrl

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

dani@tzk-design.com :: @danigrrl

The process is still evolving

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

dani@tzk-design.com :: @danigrrl

Thank you!