D. KEITH ROBINSON • PRODUCT DESIGNER • ATLASSIAN • @DKR

Leveling Up Your Enterprise with Style Guides and Standards

A little bit about me.

A little bit about Atlassian.

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown buttonButtons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown buttonButtons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Forms

Tables

Tabs

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown buttonButtons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown buttonButtons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Buttons

Forms

Tables

Tabs

Dropdown button Dropdown button

Ali Baba & the forty dropdowns.

Bad UX.

Bad for buisness.

Atlassian’s Design Guidelineshttps://design.atlassian.com/latest/

Atlassian’s AUI Libraryhttps://docs.atlassian.com/aui/latest/

Salesforce1 Style Guidehttps://http://sfdc-styleguide.herokuapp.com//latest/

So, what is a style guide, exactly?

And more…

BrandUser interface

CodeCopy

Design principles.

Living design documentation.

What is a style guide good for?

Increasing quality and consistency

Increasing speed and efficiency

Providing autonomy

Improving focus

How can I get started?

Declare a design czar.

Research, align and document.

Promote!

Iterate and plan for change.

And now for a few quick tips!

Start small

Show examples

Provide resources (assets & code)

Be explicit yet flexible

Respect your users and go slow

Make it public

Can I see some more examples?

MailChimp UX patterns. Voice & Tone.http://ux.mailchimp.com/patterns & http://voiceandtone.com/

eBay’s Design Playbookhttps://designplaybook.ebay.com/

Sláinte!

D. KEITH ROBINSON • PRODUCT DESIGNER • ATLASSIAN • @DKR