Design principles

Gestalt principles (source: TopTal.com)

Gestalt principles (source: TopTal.com)

 

Gestalt Principles are laws of human perception that describe how humans group similar elements, recognize patterns and simplify complex images when we perceive objects. Designers use the principles to organize content on websites and other interfaces, so it is aesthetically pleasing and easy to understand. (Source: interaction-design.org)

Our course emphasizes the following principles:

Figure / Ground

What is in the foreground and what is in the background? How the eye is able to separate shapes in a design from the background of that design.

– a property of perception in which there is a tendency to see parts of a visual field as solid, well-defined objects standing out against a less distinct background.
(dictionary.com)

For two contiguous regions in the visual field, the common perceptual outcome is that the edge between them appears to be a boundary for only one of them, and that region—the figure—appears to have a definite shape. The contiguous region—the ground—appears shapeless near the edge it shares with the figure, and is perceived to continue behind it. Thus, in addition to being shaped, the figure appears nearer than the ground part, involving depth perception, and the ground appears to be occluded by the figure.

Figure/Ground is also referred to as multi-stability: We dislike uncertainty, so we look for solid, stable items. Unless an image is ambiguous—like Rubin’s Vase—we see its foreground first. Apply figure/ground chiefly to contrast elements: for example, light text (i.e., figure) from a dark background (i.e., ground). A design with well applied use of figure/ground will help guide users in their tasks and lessen their cognitive load.

Image samples:

 

Continuation

Asserts that the human eye follows lines, curves, or a sequence of shapes in order to determine a relationship between design elements.

– the act or state of continuing; the state of being continued. Something that continues some preceding thing by being of the same kind or having a similar content.
(dictionary.com)

The human eye is accustomed to marking out pathways and following them. […] our eyes and brains tend to like following lines and routes. That frees people to “go with the flow”, and frees up designers to make use of this nature. That’s also good for keeping our users on track, because we don’t want them straying from what we’d like them to see in our designs. The principle of continuity states that elements that are arranged on a line or curve are perceived to be more related than elements not on the line or curve.

Continuation (Source: Smashing Magazine)

Continuation (Source: Smashing Magazine)

In the image above, for example, the red dots in the curved line seem to be more related to the black dots on the curved line than to the red dots on the straight horizontal line – because the eye naturally follows a line or a curve, making continuation a stronger signal of relatedness than the similarity of color.

Continuation is often aided by similarity and proximity. While continuation can be used to guide users through a composition, we can also disrupt it to focus attention or delineate the beginning or end of a section.

  • Avoid disruption, or use it to your advantage.
  • Ensure good alignment and consistency between elements.
  • Use cues to suggest direction.
Closure

Closure (reification): Prefering complete shapes, we automatically fill in gaps between elements to perceive a complete image – we see the whole first. People enjoy recognize pleasing “wholes” in cleverly placed elements, be they lines, dots or shapes.

Proximity

Design elements near each other are perceived as related, while elements spaced apart are perceived as belonging to separate groups. Placing related elements in close proximity and using whitespace to create meaningful groups is a foundational principle in visual design. Users are task-focused and may scan pages quite quickly, so making these groupings visually obvious increases usability by helping users quickly find and focus only on those UI elements that are most related to their current task.

Proximity (Emergence): We group closer-together elements, separating them from those farther apart. So, when you cluster individual elements into one area or group on your design, users will recognize it as one entity standing distinct from anything else on-screen. An example of proximity in design is the Girl Scouts logo, with its three faces clustered in profile (two green, one white).

Image samples, click to view full:

Similarity

Along with proximity and closure, the similarity / invariance principle makes up a set of visual grouping principles.

We link similar elements together. Design elements that appear similar — sharing the same color, shape, or size — are perceived as related. Color, shape, and size are not the only way to show similarity; several visual traits can communicate the relationship of elements. Font treatment (bold, italic, case), orientation, movement can signal that elements belong to the same group and likely share a common meaning or functionality. The principle of similarity is pervasive in visual design, and its effect can be seen in almost every interface design in existence.

Symmetry

Elements are arranged equally on both sides of an axis. It conveys a sense of balance, order, and harmony. In graphic design, symmetrical visuals are created with purpose and precision, and they can convey simplicity and formality that is removed from chaos.

The simple explanation for our attraction to symmetry is that it’s familiar. Symmetrical objects and images play by the rules that our brains are programmed to recognize easily.
– Dave Roos, “How stuff works” author

  • Bilateral symmetry is when a visual element is reflected or mirrored across an axis (butterfly wings, Rorschach test images).
  • Rotational/ radial symmetry occurs when a visual element is rotated around a central point (mandalas, sunflowers, dartboards). Use rotational symmetry to convey movement and action.
  • Translational symmetry refers to repeating visual elements, like patterns that maintain the same orientation. Translational symmetry is good for layout structure.
  • Asymmetry occurs when the visual weight of elements across an axis are unequal or imbalanced. Asymmetry in graphic design can be used to convey variety, complexity, and unpredictability. Use asymmetry to draw attention.

An asymmetrical object is visually heavier than symmetrical objects. Therefore, symmetry is great for patterns, backgrounds, the general layout, content, and anything else that is meant to be visually passive. Asymmetry is effective in drawing attention and breaking monotony.

Common Fate

Elements that point in the same direction – like a flock of birds – are seen to be related. This can be used both to group elements and also to create a sense of movement.

Prägnanz

The law of prägnanz can also be defined as the law of simplicity – or, a combination of several or all of the principles mentioned above. The law of Prägnanz says that we tend to experience things as regular, orderly, symmetrical, and simple.

Prägnanz is a German word for “good figure” or “pithiness” (literally defined as, “brief, forceful and meaningful in expression”). 

The human eye likes to find simplicity and order in complex shapes, protecting us from information overload. The brain perceives ambiguous shapes in the simplest way possible – convoluted shapes in a design are simplified by removing extraneous details and transforming them into a single, unified shape. Fewer cognitive resources may be needed if images are simpler at the outset – we are better able to visually process and remember simple figures than complex figures. Therefore:

  • minimize the number of elements in a design
  • symmetrical compositions are perceived as simpler and more stable than asymmetrical compositions
  • symmetrical compositions are also perceived to be less interesting – favor symmetry for efficiency and asymmetry for interestingness
  • consider all of the Gestalt principles of perception

 

Dieter Rams’ principles of good design

Dieter Rams’ 10 principles of good design can be applied to any design. Bear in mind that design is design, whether it is graphic, industrial, or interface design. These principles are good to keep in mind for the user’s experience.

  1. Good design is innovative.
  2. Good design must be useful.
  3. Good design is aesthetic design.
  4. Good design makes a product understandable.
  5. Good design is honest.
  6. Good design is unobtrusive.
  7. Good design is long-lasting.
  8. Good design is consistent in every detail.
  9. Good design is environmentally friendly.
  10. Good design is as little design as possible.

Sources:

Interaction-Design.org, Nielsen Norman Group, Scholarpedia, WebFX.com, TopTal.com
Book: Universal Principles of Design (Lidwell, Holden, Butler)

Images:
ArtDocents.wordpress.com, DigitalSynopsis.com, InspirationFeed.com