This presentation is on visual design principles. Click on the links to jump to Gestalt principles, the 3-30-300 rule, Composition, Whitespace or Consistency.
GESTALT
Image and text credits to Koos Service Design (UX Academy) and Milene Gonçalves (SPI)
What makes the design of the EU symbol/flag so good?
Figure – Ground
Closure
When presented with the right amount of information, our brain will jump to conclusions by filling in the gaps and creating a unified whole.
Use:
- Decrease the number of elements needed to communicate information
- Reduce complexity
- Making designs more engaging
Proximity
Elements arranged close to each other are perceived as more related.
This way different elements are viewed mainly as a group rather than as individual elements.
Use:
- Group similar information
- Organise content
- Declutter layouts
Similarity
Similarity occurs when objects look similar to one another. People often perceive them as a group or pattern. For example in color, size or shape.
Use:
- Emphasise an object by being different from the rest (i.e. ‘Anomaly’)
- Draw the user’s attention to a specific piece of content while assisting with scanability, discoverability and the overall flow
Continuity
Elements arranged in a line or a soft curve are perceived to be more related than those arranged randomly or in a harsh line.
Use:
- linear arrangement of rows and columns for menus and lists
Isomorphic correspondence
Common region
Elements placed within the same region are perceived as grouped.
Use:
- Grouping information
- Organise content
- Boosts hierarchy and scanability
Symmetry
Symmetrical elements tend to perceived as belonging together regardless of their distance, giving us a feeling of solidity and order.
USE
- in any content-heavy page
- to create order and stability
- communicate information quickly and efficiently
BUT DON’T GET DULL & STATIC
- create symmetry, along with a healthy amount of asymmetry
- add an asymmetrical element to an otherwise symmetrical design to draw attention
Common fate
Elements that move in the same direction are perceived as a whole.
USE
- “Hide” information
- Group information
- Link actions with results
(e.g. expandable menus, picture sliders)
3-30-300 RULE
3 seconds
glance – minimal interaction
to grab the attention of your audience
to give sense of what the poster is about
main title, large image
30 seconds
review – medium interaction
to keep the attention of your audience
to convey the key-message
subtitles, images, interactive elements
300 seconds
engage – full interaction
to go into details
to tell the full sotry
body text, image captions, hyperlinks
COMPOSITION
Rule of thirds
Symmetry
Diagonals
Whitespace
