Your SlideShare is downloading. ×
0
a beginner’s guide
Learn You aDesigning for Great Good!  a beginner’s guide
Samantha Thebridgesamantha@atlassian.com@samthebridge
Some context• Why does bad design happen  to good code?
The dropdowns!
The dropdowns!
The dropdowns!
Learning to see
Learning to notice
Learning to seek
Learning to remember
Four key layout principlesContrastRepetitionAlignmentProximity
Other important onesHierarchyDominanceRatiosPattern RecognitionClosure
Contrast• Contrast creates hierarchy, balance,  dynamics and rhythm• Contrast helps the user break information  into small...
Contrast• If things are meant to be grouped, don’t just  make them similar—make them identical.• If things aren’t meant to...
Contrast Example - Before
Contrast Example - After
Contrast Example - After
Contrast Example - After
Contrast Example - After
Contrast• If things are meant to be grouped, don’t just  make them similar—make them identical.• If things aren’t meant to...
Contrast• If things are meant to be grouped, don’t just  make them similar—make them identical.• If things aren’t meant to...
Contrast• If things are meant to be grouped, don’t just  make them similar—make them identical.• If things aren’t meant to...
Contrast• If things are meant to be grouped, don’t just  make them similar—make them identical.• If things aren’t meant to...
Contrast• If things are meant to be grouped, don’t just  make them similar—make them identical.• If things aren’t meant to...
Contrast• If things are meant to be grouped, don’t just  make them similar—make them identical.• If things aren’t meant to...
Repetition• When the brain is presented with new  and complicated information, it instinctively  searches for patterns.• T...
Breaking repetition
Achieving Visual•   Colours•   Spacing•   Shapes•   Line thicknesses•   Fonts (and font sizes)•   Icon styles
Achieving Visual•   Colours - call to action buttons•   Spacing - break up information in forms•   Shapes - create pattern...
Spacing - Before
Spacing - After
Repetition Example -
Alignment• Alignment reduces cognitive load caused  by broken visual patterns.• Alignment creates hard “lines” for the eye...
Pattern completion
Achieving Alignment• Connect every element with another  element on the screen with another.• Draw invisible guides to mak...
Alignment Example - WTF
Alignment Example - After
Alignment Example - After
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Alignment - Before
Proximity• Proximity helps users by grouping and  ungrouping related content and helps  create context.• Allows users to c...
Proximity• Group items that relate to each other as  closely as is comfortable.• Create smaller visual units.• Separate el...
Proximity Example - WTF
Proximity Example - WTF
Proximity Example –
Proximity Example –
Proximity• Group items that relate to each other as  closely as is comfortable.• Create smaller visual units.• Separate el...
Proximity• Group items that relate to each other as  closely as is comfortable.• Create smaller visual units.• Separate el...
Proximity
Proximity
Some other WTFSometimes things are JUST wrong.Let’s talk about those for a second.
Multiple levels of tabs
Centre Alignment
Don’t scare people!
The other tricks
Before
After
Resourceshttp://bit.ly/19oxQH
Patterns
My bible
The ADGDesign rationaleHow it affects youWhat you’ll get for free from AUIWhat you can do with the flatpackWhere you can ge...
Design Rationale• Steal this from Ross and Henry’s talk
Design Rationale• Steal this from Ross and Henry’s talk
How it affects you• Get this from Sean / Ben
In beta at: developer.atlassian.com/design
I need to make somerules, though...
Some rules• Just enough is more• Please don’t do font or icon salad, no one  will love you more just because you  discover...
Come see me!• Come and talk to me about your plugin, or  feel free to email me at  samantha@atlassian.com
Now go forthand design mesome stuff!
Learn You a Designing for Great Good!, AtlasCamp US 2012
Learn You a Designing for Great Good!, AtlasCamp US 2012
Upcoming SlideShare
Loading in...5
×

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

537

Published on

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.

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
537
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \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
  • Transcript of "Learn You a Designing for Great Good!, AtlasCamp US 2012"

    1. 1. a beginner’s guide
    2. 2. Learn You aDesigning for Great Good! a beginner’s guide
    3. 3. Samantha Thebridgesamantha@atlassian.com@samthebridge
    4. 4. Some context• Why does bad design happen to good code?
    5. 5. The dropdowns!
    6. 6. The dropdowns!
    7. 7. The dropdowns!
    8. 8. Learning to see
    9. 9. Learning to notice
    10. 10. Learning to seek
    11. 11. Learning to remember
    12. 12. Four key layout principlesContrastRepetitionAlignmentProximity
    13. 13. Other important onesHierarchyDominanceRatiosPattern RecognitionClosure
    14. 14. Contrast• Contrast creates hierarchy, balance, dynamics and rhythm• Contrast helps the user break information into smaller chunks• Contrast guides the eye
    15. 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. 16. Contrast Example - Before
    17. 17. Contrast Example - After
    18. 18. Contrast Example - After
    19. 19. Contrast Example - After
    20. 20. Contrast Example - After
    21. 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. 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. 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. 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. 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. 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. 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. 28. Breaking repetition
    29. 29. Achieving Visual• Colours• Spacing• Shapes• Line thicknesses• Fonts (and font sizes)• Icon styles
    30. 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. 31. Spacing - Before
    32. 32. Spacing - After
    33. 33. Repetition Example -
    34. 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. 35. Pattern completion
    36. 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. 37. Alignment Example - WTF
    38. 38. Alignment Example - After
    39. 39. Alignment Example - After
    40. 40. Alignment - Before
    41. 41. Alignment - Before
    42. 42. Alignment - Before
    43. 43. Alignment - Before
    44. 44. Alignment - Before
    45. 45. Alignment - Before
    46. 46. Alignment - Before
    47. 47. Alignment - Before
    48. 48. Alignment - Before
    49. 49. Alignment - Before
    50. 50. Alignment - Before
    51. 51. Alignment - Before
    52. 52. Alignment - Before
    53. 53. Alignment - Before
    54. 54. Alignment - Before
    55. 55. Alignment - Before
    56. 56. Alignment - Before
    57. 57. Alignment - Before
    58. 58. Alignment - Before
    59. 59. Alignment - Before
    60. 60. Alignment - Before
    61. 61. Alignment - Before
    62. 62. Alignment - Before
    63. 63. Alignment - Before
    64. 64. Alignment - Before
    65. 65. Alignment - Before
    66. 66. Alignment - Before
    67. 67. Alignment - Before
    68. 68. Alignment - Before
    69. 69. Alignment - Before
    70. 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. 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. 72. Proximity Example - WTF
    73. 73. Proximity Example - WTF
    74. 74. Proximity Example –
    75. 75. Proximity Example –
    76. 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. 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. 78. Proximity
    79. 79. Proximity
    80. 80. Some other WTFSometimes things are JUST wrong.Let’s talk about those for a second.
    81. 81. Multiple levels of tabs
    82. 82. Centre Alignment
    83. 83. Don’t scare people!
    84. 84. The other tricks
    85. 85. Before
    86. 86. After
    87. 87. Resourceshttp://bit.ly/19oxQH
    88. 88. Patterns
    89. 89. My bible
    90. 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. 91. Design Rationale• Steal this from Ross and Henry’s talk
    92. 92. Design Rationale• Steal this from Ross and Henry’s talk
    93. 93. How it affects you• Get this from Sean / Ben
    94. 94. In beta at: developer.atlassian.com/design
    95. 95. I need to make somerules, though...
    96. 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. 97. Come see me!• Come and talk to me about your plugin, or feel free to email me at samantha@atlassian.com
    98. 98. Now go forthand design mesome stuff!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×