[srijan wednesday webinars] documenting design patterns for cross functional product teams
Post on 31-Jul-2015
172 Views
Preview:
TRANSCRIPT
Senior UX Designer, Harvard Business Review Group
UXD Bootcamp, General Assembly
Author, Drupal for Designers (O’Reilly, 2012)
About the presenter
@srijan #SrijanWW
• 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
“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…
• 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
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
top related