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)

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


Consistency