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