• Like
ADG: The Design Guidelines That Drive Atlassian
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

ADG: The Design Guidelines That Drive Atlassian

  • 185 views
Published

 

Published in Technology , Art & Photos
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
185
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
8
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Atlassian Design Guidelines THE GUIDELINES THAT DRIVE ATLASSIAN DESIGN MATT BOND • SENIOR DESIGNER • ATLASSIAN • @MATTBOND21
  • 2. 5 things O U R D ES IGN J O U R NEY WH A T’S IN TH E A DG? BENEFITS TOOLS TO UTILIZE LO O K ING F O RWA RD
  • 3. Our design journey
  • 4. JIRA
  • 5. Confluence
  • 6. AUI Framework
  • 7. This is not consistent
  • 8. THE PURPOSE Create a consistent experience
  • 9. Unify WIDGET WIDGET WIDGET WIDGET WIDGET
  • 10. Make them all designers
  • 11. ADG
  • 12. AUI
  • 13. What’s in the ADG? O U R D ES IGN J O U R NEY WH A T’S IN TH E A DG? BENEFITS TOOLS TO UTILIZE LO O K ING F O RWA RD
  • 14. EASY Buttons
  • 15. EASY Color palette
  • 16. HARDER Writing styles
  • 17. EASY Icon font
  • 18. SUPER HARD Patterns
  • 19. Benefits O U R D ES IGN J O U R NEY WH A T’S IN TH E A DG? BENEFITS TOOLS TO UTILIZE TOOLS TO UTILIZE LO O K ING F O RWA RD
  • 20. Consistent experience JIRA Crucible
  • 21. Application header
  • 22. Maximize awesome EFFORT ADG / AUI FRAMEWORK AWESOME EFFORT
  • 23. Faster process Sketch idea Wireframes Photoshop User test Development 1 2 3 4 5
  • 24. Faster process Sketch idea Wireframes Photoshop User test Development 1 2 3 4 5 Design Guidelines
  • 25. Existing patterns
  • 26. Tools to utilize O U R D ES IGN J O U R NEY WH A T’S IN TH E A DG? BENEFITS TOOLS TO UTILIZE LO O K ING F O RWA RD
  • 27. AUI Sandbox
  • 28. AUI Sandbox live editing
  • 29. AUI Sandbox live editing
  • 30. Documentation
  • 31. Product GUI
  • 32. Keynote
  • 33. Looking forward O U R D ES IGN J O U R NEY WH A T’S IN TH E A DG? BENEFITS TOOLS TO UTILIZE LO O K ING F O RWA RD
  • 34. Foundations Pleasurable Usable ADG Reliable Functional
  • 35. Next challenge You Pleasurable Usable Reliable Functional
  • 36. In the spirit of the ADG
  • 37. Let’s recap
  • 38. developer.atlassian.com/design mbond@atlassian.com
  • 39. Thank you! MATT BOND • SENIOR DESIGNER • ATLASSIAN • @MATTBOND21
  • 40. Rate this Talk ADG: The Design Guidelines that Drive Atlassian Text code below to 22333 or visit http://bit.ly/1azwB3L MEH = 5F NO T BA D = 5G P R ET T Y GO O D = 5H A WES O ME = 5I To join this session, send text 136888 to