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.
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
When presented with the right amount of information, our brain will jump to conclusions by filling in the gaps and creating a unified whole.
- Decrease the number of elements needed to communicate information
- Reduce complexity
- Making designs more engaging
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.
- Group similar information
- Organise content
- Declutter layouts
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.
- 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
Elements arranged in a line or a soft curve are perceived to be more related than those arranged randomly or in a harsh line.
- linear arrangement of rows and columns for menus and lists
Elements placed within the same region are perceived as grouped.
- Grouping information
- Organise content
- Boosts hierarchy and scanability
Symmetrical elements tend to perceived as belonging together regardless of their distance, giving us a feeling of solidity and order.
- 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
Elements that move in the same direction are perceived as a whole.
- “Hide” information
- Group information
- Link actions with results
(e.g. expandable menus, picture sliders)
glance – minimal interaction
to grab the attention of your audience
to give sense of what the poster is about
main title, large image
review – medium interaction
to keep the attention of your audience
to convey the key-message
subtitles, images, interactive elements
engage – full interaction
to go into details
to tell the full sotry
body text, image captions, hyperlinks