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
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)
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
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 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.
|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, …|
How to present text in an aesthetically appealing way? It deals with format, print space, typeface, grids, colors, medium and composition of pages.
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.