Learn You a Designing for Great Good!, AtlasCamp US 2012
Download as KEY, PDF1 like824 views
This document serves as a beginner's guide to effective design principles, emphasizing contrast, repetition, alignment, and proximity. It provides practical examples and guidelines to aid in creating designs that enhance user experience by reducing cognitive load and improving information organization. The author encourages simplicity in design choices and invites readers to seek assistance if needed.
Learn You a Designing for Great Good!, AtlasCamp US 2012
- 2. Learn You a Designing for Great Good! a beginner’s guide
- 4. Some context • Why does bad design happen to good code?
- 10. Learning to seek
- 12. Four key layout principles Contrast Repetition Alignment Proximity
- 13. Other important ones Hierarchy Dominance Ratios Pattern Recognition Closure
- 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
- 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
- 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.
- 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
- 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
- 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 WTF Sometimes things are JUST wrong. Let’s talk about those for a second.
- 81. Multiple levels of tabs
- 82. Centre Alignment
- 84. The other tricks
- 85. Before
- 86. After
- 88. Patterns
- 91. My bible
- 92. The ADG Design rationale How it affects you What you’ll get for free from AUI What you can do with the flatpack Where you can get help
- 93. Design Rationale • Steal this from Ross and Henry’s talk
- 94. Design Rationale • Steal this from Ross and Henry’s talk
- 95. How it affects you • Get this from Sean / Ben
- 96. In beta at: developer.atlassian.com/design
- 97. I need to make some rules, though...
- 98. 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
- 99. Come see me! • Come and talk to me about your plugin, or feel free to email me at samantha@atlassian.com
- 100. Now go forth and design me some stuff!
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n
- #46: \n
- #47: \n
- #48: \n
- #49: \n
- #50: \n
- #51: \n
- #52: \n
- #53: \n
- #54: \n
- #55: \n
- #56: \n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: \n
- #64: \n
- #65: \n
- #66: \n
- #67: \n
- #68: \n
- #69: Hierarchy\nDominance\nRatios\nDynamics\n
- #70: Hierarchy\nDominance\nRatios\nDynamics\n
- #71: Hierarchy\nDominance\nRatios\nDynamics\n
- #72: Hierarchy\nDominance\nRatios\nDynamics\n
- #73: \n
- #74: Hierarchy\nDominance\nRatios\nDynamics\n
- #75: \n
- #76: \n
- #77: \n
- #78: \n
- #79: \n
- #80: \n
- #81: \n
- #82: \n
- #83: \n
- #84: \n
- #85: \n
- #86: \n
- #87: \n