ADG: The Design Guidelines That Drive Atlassian

MATT BOND • SENIOR DES IGNER • ATLASS IAN • @MATTBOND21

Atlassian Design GuidelinesTHE GUIDELINES THAT DRIVE ATLASSIAN DESIGN

OUR DESIGN JOURNEY

BENEFITS

LOOKING FORWARD

TOOLS TO UTILIZE

WHAT’S IN THE ADG?

5 things

Our design journey

JIRA

Confluence

AUI Framework

This is not consistent

Create a consistent experience

THE PURPOSE

Unify

WIDGET WIDGET WIDGET WIDGET

WIDGET

Make them all designers

ADG

AUI

What’s in the ADG?OUR DESIGN JOURNEY

WHAT’S IN THE ADG?

BENEFITS

LOOKING FORWARD

TOOLS TO UTILIZE

ButtonsEASY

Color paletteEASY

Writing stylesHARDER

Icon fontEASY

PatternsSUPER HARD

TOOLS TO UTILIZE

Benefits

TOOLS TO UTILIZE

WHAT’S IN THE ADG?

OUR DESIGN JOURNEY

BENEFITS

LOOKING FORWARD

JIRA Crucible

Consistent experience

Application header

AW

ESO

ME

Maximize awesome

EFFORT

ADG / AUI FRAMEWORK

EFFORT

Faster process

1 2 3 4

Sketch idea Wireframes Photoshop User test

5

Development

Faster process

1 2 3 4

Sketch idea Wireframes Photoshop User test

Design Guidelines

5

Development

Existing patterns

BENEFITS

WHAT’S IN THE ADG?

Tools to utilizeOUR DESIGN JOURNEY

TOOLS TO UTILIZE

LOOKING FORWARD

AUI Sandbox

AUI Sandbox live editing

AUI Sandbox live editing

Documentation

Product GUI

Keynote

LOOKING FORWARD

Looking forward

TOOLS TO UTILIZE

BENEFITS

WHAT’S IN THE ADG?

OUR DESIGN JOURNEY

LOOKING FORWARD

Foundations

Functional

Reliable

Usable

Pleasurable

ADG

Next challenge

Functional

Reliable

Usable

Pleasurable

You

In the spirit of the ADG

Let’s recap

developer.atlassian.com/design

mbond@atlassian.com

Thank you!

MATT BOND • SENIOR DES IGNER • ATLASS IAN • @MATTBOND21

Text code below to 22333or visit http://bit.ly/1azwB3L

ADG: The Design Guidelines that Drive Atlassian

To join this session, send text 136888 to

AWESOME = 5I

PRETTY GOOD = 5H

NOT BAD = 5G

MEH = 5F

Rate this Talk