Andreas Gerlach bio photo

Andreas Gerlach

M. Sc. Web Science, Lead Architect Retail Software at Diebold Nixdorf, Promoter of Open Web platforms. All opinions are my own.

Email Twitter LinkedIn Github

All communication in human computer interaction is just possible due to designed interfaces. Design can decide over success or failure of such a system.

Basic Laws of Visual Design

The Point

Generally a point is in geometry a location without any dimensions (invisible). It gets visible only as starting, ending or intersection point of larger structures (e.g. lines, planes).

Still the point is the most basic shape and is the basis for forming lines and shapes. Though a point itself doesn’t say much, it can be justified by its position related to a frame.

Figure 1: left to right: feeling light, heavy; can move to right (excitement, dynamic); can’t move further right (blocked, energetic)

The Line

A line is defined by it’s starting and ending point, whose define also the length of the line. It has a one-dimensional shape. If it also has a remarkable width it gets recognized as a plane.

Figure 2: different lines with doubling their width in any iteration

A line is also recognizable as a plane if it forms a reasonable outline:

Figure 3: guess the shape - you have 3 tries left

A line hasn’t to be straight. Lines could be curved as well. Each line consists of parts. These parts can be interrupted, but are still recognizable as a single line.

Figure 4: a curve that goes together

Points and lines are already powerful tools to design some basic and easy recognizable shapes (e.g. see the logo of Deutsche Bank).

Geometric basic shapes

These are the well-known ones: circle, triangle and square. Their positioning can create a feeling of balance - or out of balance.

Figure 5: balanced shapes

Gestalt Laws

There are more than 100 fundamental laws describing how humans perceive and recognise things. They have been first introduced and described by Max Wertheimer in 1923.

Law of good shape (gestalt)

Our brain is always compressing information and tends to simplify and cleaning up shapes as they are far more easy to remember.

Law of proximity

Everything that is spatially or temporarily close together will be perceived as belonging together (whitespace is important to simplify interfaces).

Law of closure

Everything that belongs or is part of a closed shape belongs together. This is the basis for our window metaphor in graphical user interfaces. Though has to be handled carefully as its effect can be overdone, resulting in not understandable user interfaces (look for “GUI bloopers”).

Law of similarity

Everything of similar shape appears as belonging together. As a conclusion different objects have higher information content. So if something is special make it look different (e.g. highlight destructive actions in the UI).

Law of continuity

Continuous shapes are perceived as belonging together. Our brains tends to fill in gaps (see above: unfinished triangle).

Law of experience

We tend to file new things into categories we already know. This will save learning effort and memory by reusing existing knowledge. It could be problematic when we try to harmonise it for different cultures.

Law of common fate

Also called “common movement”; animated objects in a static environment appear as a group. This could give a strong cue in UI.

Law of contrast

Higher contrast elements are considered in the foreground against low contrast ones.

Law of size

Bigger sized elements are considered in the foreground against small sized ones.

Law of color

Elements with warm and saturated colors will be considered in the foreground against colder and unsaturated ones.

Color

Color is a special topic in Design as it has a strong relation to emotion and perception. We have therefore be sure to make the right selection of colors based on their meanings and our intention.

Color Meaning
Red The color of life. It is one of the most popular and most warm colors available. It resembles energy, strength, love, passion, romance, excitement, desire, enthusiasm, danger, speed, courage, prominence, intensity, …
Blue Blue stands out for a relaxed and cool environment. It is one of the coolest colors available. It resembles creativity, wisdom, gentleness, calmness, trust, loyalty, intelligence, devotion, confidence, comfort, ideas, harmony, friendship, patience, …
Green Green symbolizes the nature and healthiness. It stands for success, growth, endurance, freshness, nature, immortality, environment, good luck, youthfulness, safety, contemplation, joyfulness, hope, dependability, friendliness, …
Purple Purple is a mix of red and blue and therefore combines attributes from both. It stands for spiritual power, knowledge, dignity, influence, royalty, mystery, enlightenment, extravagance, sophistication, arrogance, empathy, imagination, deja vu, fame, sensuality, luxury, elegance, majesty, …
Orange Orange shows physical and mental comfort. As a mix of red and yellow it is a color of power and healing. It resembles enthusiasm, vibrancy, vitality, balance, justice, attention, attraction, fascination, heat, determination, creativity, encouragement, social structure, uninhibited, fun, kids, youth, …
Yellow Yellow represents brightness and purity. It is usually used to show creativeness and intellect. It represents light, intelligence, imagination, social energy, respect, happiness, optimism, purity, honour, perception, understanding, wisdom, curiosity, confidence, philosophy, glory, …
White White is a reflection of all colors. It enhances the presence of all the other colors. It stands for peace, purity, spirituality, virginity, goddess, innocence, simplicity, precision, cleanliness, fairness, safety, innovations, holiness, feminine, chastity, positivity, …
Black Is the opposite of white and works like a counterpart to it. It refers to power, formality, classy, protection, sophistication, wealth, elegance, fear, depth, sadness, bad luck, empowerment, authority, reliability, prestige, seriousness, binding, credibility, …

Typography

Macrotypography

How to present text in an aesthetically appealing way? It deals with format, print space, typeface, grids, colors, medium and composition of pages.

Microtypography

It considers the rules of readability and apply them to the texts by looking at single letters, spacing between them, words and lines.

Typefaces and Fonts

Typefaces are a family of fonts. On a basic level they can be divided into a more “emotional” and more “functional/technical” font families.

As a general rule you should not use more than three different types or typefaces in a publication. If you have to mix typefaces, use ones that differ noticeable from each other.