As UX becomes increasingly Agile, a need arises to quickly create and iterate new interface elements. Many popular frameworks exist to document front-end design patterns. Most of them connect directly to the website's CSS, and help developers easily create new interface elements and templates. But what happens when the design and UX team aren't working in the site’s CSS? How can we create truly cross-functional design documentation that works both for developers and designers? In this webinar, Harvard Business Review’s Senior UX Designer, Dani Nordin, describes the process they have been working on to document existing design patterns and create a working set of elements that allow both for rapid iteration of design prototypes and implementation of templates in code. You can watch the complete webinar recording here: https://youtu.be/5uXVo9HwvFI

1. Documenting
Design Patterns
For cross-functional teams
Dani Nordin
@danigrrl

2. Senior UX Designer, Harvard
Business Review Group
UXD Bootcamp, General
Assembly
Author, Drupal for Designers
(O’Reilly, 2012)
About the presenter
@srijan #SrijanWW

3. Design Patterns at HBR

4. • Based in site CSS
• Mobile first
• Creates repeatable, reusable
design patterns
• Speeds up front-end production
The great
@srijan #SrijanWW

5. • Documentation lacking
• Disorganized
• Design team still working in
Illustrator and PSD comps
The not-so-great
@srijan #SrijanWW

6. Legibility/inconsistency issues
@srijan #SrijanWW

7. Contrast issues

8. “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…

9. What to do?

10. Step 1: Inspiration

11. Step 1: Inspiration

12. Step 1: Inspiration

13. Step 2: Start organizing

14. Step 2: Start organizing

15. Step 2: Start organizing

16. Step 3: Document Principles & Guidelines

17. • Guiding principles
• Colors
• Typography
• Icons
• Responsive grid
• CSS helper classes
Documenting Guidelines
@srijan #SrijanWW

18. • System messaging
• Interface copy
• Design/user testing protocols
and process
• Interaction standards
Other considerations?
@srijan #SrijanWW

19. HOLD UP.

20. Why is User Research in here? That’s
not really “design.”
@srijan #SrijanWW

21. We’ve been trying to make the wiki* a
central location for all this stuff.
@srijan #SrijanWW
*that nobody ever reads

22. • Who creates things on the
website?
• What do they need to know?
Revisit the purpose
@srijan #SrijanWW
UX
Design
Tech
EditorialMarketing
Product

23. • Internal or external?
• Developers?
• Designers?
• Writers?
• Marketers?
Specific use cases:
• Visiting designers and
contractors
• Third-party partners
• Seasonal Interns
Define the audience
@srijan #SrijanWW

24. Align on purpose/goals
• Establish common principles
and guidelines
• Create repository of interface
elements
• Increase efficiency of
iteration & design
@srijan #SrijanWW

25. Redefine “style guide”
CSS classes?
<h1> vs. <h5>?
What system messages look
like?
Interface elements
Typographic hierarchy
What system messages SAY?
@srijan #SrijanWW

26. Start with the basics
• Colors
• Type Styles
• Form Elements
• Grid
• Image sizes
• Icons
@srijan #SrijanWW

27. Add in building blocks
• Content “teasers”
• Sidebar widgets
• Search results
• Menus
• Callouts
• Utilities
@srijan #SrijanWW

28. Build up to templates
• Blog post/article
• Product page
• Search page
• Paywall
• Registration and Signin
screens
@srijan #SrijanWW

29. Establish copy guidelines
• Feedback messages
• System emails
• Voice and Tone
• Words and phrases
• Marketing emails
@srijan #SrijanWW

30. 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

31. Let the process evolve
http://commons.wikimedia.org/wiki/File:Evolution-des-wissens.jpg

32. Dani Nordin
@danigrrl
Thank You!
Take this conversation online by tweeting using the hashtag #SrijanWW