ADG: The Design Guidelines That Drive Atlassian

44

description

 

Transcript of ADG: The Design Guidelines That Drive Atlassian

Page 1: ADG: The Design Guidelines That Drive Atlassian
Page 2: ADG: The Design Guidelines That Drive Atlassian

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

Atlassian Design GuidelinesTHE GUIDELINES THAT DRIVE ATLASSIAN DESIGN

Page 3: ADG: The Design Guidelines That Drive Atlassian

OUR DESIGN JOURNEY

BENEFITS

LOOKING FORWARD

TOOLS TO UTILIZE

WHAT’S IN THE ADG?

5 things

Page 4: ADG: The Design Guidelines That Drive Atlassian

Our design journey

Page 5: ADG: The Design Guidelines That Drive Atlassian
Page 6: ADG: The Design Guidelines That Drive Atlassian

JIRA

Page 7: ADG: The Design Guidelines That Drive Atlassian

Confluence

Page 8: ADG: The Design Guidelines That Drive Atlassian

AUI Framework

Page 9: ADG: The Design Guidelines That Drive Atlassian

This is not consistent

Page 10: ADG: The Design Guidelines That Drive Atlassian

Create a consistent experience

THE PURPOSE

Page 11: ADG: The Design Guidelines That Drive Atlassian

Unify

WIDGET WIDGET WIDGET WIDGET

WIDGET

Page 12: ADG: The Design Guidelines That Drive Atlassian

Make them all designers

Page 13: ADG: The Design Guidelines That Drive Atlassian

ADG

Page 14: ADG: The Design Guidelines That Drive Atlassian

AUI

Page 15: ADG: The Design Guidelines That Drive Atlassian

What’s in the ADG?OUR DESIGN JOURNEY

WHAT’S IN THE ADG?

BENEFITS

LOOKING FORWARD

TOOLS TO UTILIZE

Page 16: ADG: The Design Guidelines That Drive Atlassian

ButtonsEASY

Page 17: ADG: The Design Guidelines That Drive Atlassian

Color paletteEASY

Page 18: ADG: The Design Guidelines That Drive Atlassian

Writing stylesHARDER

Page 19: ADG: The Design Guidelines That Drive Atlassian

Icon fontEASY

Page 20: ADG: The Design Guidelines That Drive Atlassian

PatternsSUPER HARD

Page 21: ADG: The Design Guidelines That Drive Atlassian

TOOLS TO UTILIZE

Benefits

TOOLS TO UTILIZE

WHAT’S IN THE ADG?

OUR DESIGN JOURNEY

BENEFITS

LOOKING FORWARD

Page 22: ADG: The Design Guidelines That Drive Atlassian

JIRA Crucible

Consistent experience

Page 23: ADG: The Design Guidelines That Drive Atlassian

Application header

Page 24: ADG: The Design Guidelines That Drive Atlassian

AW

ESO

ME

Maximize awesome

EFFORT

ADG / AUI FRAMEWORK

EFFORT

Page 25: ADG: The Design Guidelines That Drive Atlassian

Faster process

1 2 3 4

Sketch idea Wireframes Photoshop User test

5

Development

Page 26: ADG: The Design Guidelines That Drive Atlassian

Faster process

1 2 3 4

Sketch idea Wireframes Photoshop User test

Design Guidelines

5

Development

Page 27: ADG: The Design Guidelines That Drive Atlassian
Page 28: ADG: The Design Guidelines That Drive Atlassian
Page 29: ADG: The Design Guidelines That Drive Atlassian

Existing patterns

Page 30: ADG: The Design Guidelines That Drive Atlassian

BENEFITS

WHAT’S IN THE ADG?

Tools to utilizeOUR DESIGN JOURNEY

TOOLS TO UTILIZE

LOOKING FORWARD

Page 31: ADG: The Design Guidelines That Drive Atlassian

AUI Sandbox

Page 32: ADG: The Design Guidelines That Drive Atlassian

AUI Sandbox live editing

Page 33: ADG: The Design Guidelines That Drive Atlassian

AUI Sandbox live editing

Page 34: ADG: The Design Guidelines That Drive Atlassian

Documentation

Page 35: ADG: The Design Guidelines That Drive Atlassian

Product GUI

Page 36: ADG: The Design Guidelines That Drive Atlassian

Keynote

Page 37: ADG: The Design Guidelines That Drive Atlassian

LOOKING FORWARD

Looking forward

TOOLS TO UTILIZE

BENEFITS

WHAT’S IN THE ADG?

OUR DESIGN JOURNEY

LOOKING FORWARD

Page 38: ADG: The Design Guidelines That Drive Atlassian

Foundations

Functional

Reliable

Usable

Pleasurable

ADG

Page 39: ADG: The Design Guidelines That Drive Atlassian

Next challenge

Functional

Reliable

Usable

Pleasurable

You

Page 40: ADG: The Design Guidelines That Drive Atlassian

In the spirit of the ADG

Page 41: ADG: The Design Guidelines That Drive Atlassian

Let’s recap

Page 43: ADG: The Design Guidelines That Drive Atlassian

Thank you!

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

Page 44: ADG: The Design Guidelines That Drive Atlassian

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