Learn You a Designing for Great Good!, AtlasCamp US 2012
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Learn You a Designing for Great Good!, AtlasCamp US 2012

on

  • 911 views

Samantha Thebridge, User Interaction Designer ...

Samantha Thebridge, User Interaction Designer

You want to build a sexy plugin (or polish an existing one) but you don't have access to a designer. What can you do to stop your plugin turning Atlassian apps into "franken-apps"? Design follows some very fundamental principles and guidelines. Once you know what these principles are you'll be able to dissect an existing interface, understand why it does or does not work, and apply those principles to your own plugin so it fits seamlessly into your Atlassian product.

Statistics

Views

Total Views
911
Views on SlideShare
910
Embed Views
1

Actions

Likes
2
Downloads
2
Comments
0

1 Embed 1

http://lanyrd.com 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Hierarchy\nDominance\nRatios\nDynamics\n
  • Hierarchy\nDominance\nRatios\nDynamics\n
  • Hierarchy\nDominance\nRatios\nDynamics\n
  • Hierarchy\nDominance\nRatios\nDynamics\n
  • \n
  • Hierarchy\nDominance\nRatios\nDynamics\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Learn You a Designing for Great Good!, AtlasCamp US 2012 Presentation Transcript

  • 1. a beginner’s guide
  • 2. Learn You aDesigning for Great Good! a beginner’s guide
  • 3. Samantha Thebridgesamantha@atlassian.com@samthebridge
  • 4. Some context• Why does bad design happen to good code?
  • 5. The dropdowns!
  • 6. The dropdowns!
  • 7. The dropdowns!
  • 8. Learning to see
  • 9. Learning to notice
  • 10. Learning to seek
  • 11. Learning to remember
  • 12. Four key layout principlesContrastRepetitionAlignmentProximity
  • 13. Other important onesHierarchyDominanceRatiosPattern RecognitionClosure
  • 14. Contrast• Contrast creates hierarchy, balance, dynamics and rhythm• Contrast helps the user break information into smaller chunks• Contrast guides the eye
  • 15. Contrast• If things are meant to be grouped, don’t just make them similar—make them identical.• If things aren’t meant to be grouped but look similar—make them very different.
  • 16. Contrast Example - Before
  • 17. Contrast Example - After
  • 18. Contrast Example - After
  • 19. Contrast Example - After
  • 20. Contrast Example - After
  • 21. Contrast• If things are meant to be grouped, don’t just make them similar—make them identical.• If things aren’t meant to be grouped but look similar—make them very different.
  • 22. Contrast• If things are meant to be grouped, don’t just make them similar—make them identical.• If things aren’t meant to be grouped but look similar—make them very different.
  • 23. Contrast• If things are meant to be grouped, don’t just make them similar—make them identical.• If things aren’t meant to be grouped but look similar—make them very different.
  • 24. Contrast• If things are meant to be grouped, don’t just make them similar—make them identical.• If things aren’t meant to be grouped but look similar—make them very different.
  • 25. Contrast• If things are meant to be grouped, don’t just make them similar—make them identical.• If things aren’t meant to be grouped but look similar—make them very different.
  • 26. Contrast• If things are meant to be grouped, don’t just make them similar—make them identical.• If things aren’t meant to be grouped but look similar—make them very different.
  • 27. Repetition• When the brain is presented with new and complicated information, it instinctively searches for patterns.• The brain can overlook information that does not fit the pattern it is looking for.• An interruption in a pattern can cause confusion, panic and prevent the user completing a task
  • 28. Breaking repetition
  • 29. Achieving Visual• Colours• Spacing• Shapes• Line thicknesses• Fonts (and font sizes)• Icon styles
  • 30. Achieving Visual• Colours - call to action buttons• Spacing - break up information in forms• Shapes - create patterns• Line thicknesses - choose one• Fonts (and font sizes) - less is more• Icon styles - no icon salad
  • 31. Spacing - Before
  • 32. Spacing - After
  • 33. Repetition Example -
  • 34. Alignment• Alignment reduces cognitive load caused by broken visual patterns.• Alignment creates hard “lines” for the eye to follow.• The brain perceives disconnected parts as a whole object by creating “closure” by visually completing objects formed by gaps in shapes - you can take advantage of this.
  • 35. Pattern completion
  • 36. Achieving Alignment• Connect every element with another element on the screen with another.• Draw invisible guides to make sure nothing is placed arbitrarily.• Reduce the number of points of alignment to the bare minimum.
  • 37. Alignment Example - WTF
  • 38. Alignment Example - After
  • 39. Alignment Example - After
  • 40. Alignment - Before
  • 41. Alignment - Before
  • 42. Alignment - Before
  • 43. Alignment - Before
  • 44. Alignment - Before
  • 45. Alignment - Before
  • 46. Alignment - Before
  • 47. Alignment - Before
  • 48. Alignment - Before
  • 49. Alignment - Before
  • 50. Alignment - Before
  • 51. Alignment - Before
  • 52. Alignment - Before
  • 53. Alignment - Before
  • 54. Alignment - Before
  • 55. Alignment - Before
  • 56. Alignment - Before
  • 57. Alignment - Before
  • 58. Alignment - Before
  • 59. Alignment - Before
  • 60. Alignment - Before
  • 61. Alignment - Before
  • 62. Alignment - Before
  • 63. Alignment - Before
  • 64. Alignment - Before
  • 65. Alignment - Before
  • 66. Alignment - Before
  • 67. Alignment - Before
  • 68. Alignment - Before
  • 69. Alignment - Before
  • 70. Proximity• Proximity helps users by grouping and ungrouping related content and helps create context.• Allows users to complete smaller tasks more quickly than deal with a wall o’text.
  • 71. Proximity• Group items that relate to each other as closely as is comfortable.• Create smaller visual units.• Separate elements that are unrelated to avoid confusion.• Don’t force users to hunt for related elements, like form labels.
  • 72. Proximity Example - WTF
  • 73. Proximity Example - WTF
  • 74. Proximity Example –
  • 75. Proximity Example –
  • 76. Proximity• Group items that relate to each other as closely as is comfortable.• Create smaller visual units.• Separate elements that are unrelated to avoid confusion.• Don’t force users to hunt for related elements, like form labels.
  • 77. Proximity• Group items that relate to each other as closely as is comfortable.• Create smaller visual units.• Separate elements that are unrelated to avoid confusion.• Don’t force users to hunt for related elements, like form labels.
  • 78. Proximity
  • 79. Proximity
  • 80. Some other WTFSometimes things are JUST wrong.Let’s talk about those for a second.
  • 81. Multiple levels of tabs
  • 82. Centre Alignment
  • 83. Don’t scare people!
  • 84. The other tricks
  • 85. Before
  • 86. After
  • 87. Resourceshttp://bit.ly/19oxQH
  • 88. Patterns
  • 89. My bible
  • 90. The ADGDesign rationaleHow it affects youWhat you’ll get for free from AUIWhat you can do with the flatpackWhere you can get help
  • 91. Design Rationale• Steal this from Ross and Henry’s talk
  • 92. Design Rationale• Steal this from Ross and Henry’s talk
  • 93. How it affects you• Get this from Sean / Ben
  • 94. In beta at: developer.atlassian.com/design
  • 95. I need to make somerules, though...
  • 96. Some rules• Just enough is more• Please don’t do font or icon salad, no one will love you more just because you discovered Google web fonts• Choose a primary palette of less than 3 colours, and a tertiary palette of less than 3 colours
  • 97. Come see me!• Come and talk to me about your plugin, or feel free to email me at samantha@atlassian.com
  • 98. Now go forthand design mesome stuff!