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.
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
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.
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.
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.
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