Theory of Design Principles

To create unity and harmony, visual elements should naturally complement or complete each other’s shape, proportion, color, and alignment.

Unity makes content easier to understand. It gives structure and improves perceived quality. Many websites from the 90s lacked unity as they often used clashing colors, inconsistent fonts, and uneven layouts. This was a result of early web limitations. Without a unified structure, users had to make sense of each element on its own, which made it harder to focus on the main message.

Elements of design should be placed along a common axis according to the alignment principle. There are two main kinds of alignment: edge (top/bottom or left/right) and center. Alignment creates a balanced, structured, professional-looking product design and minimizes visual chaos.

While strict alignment creates an ordered look, breaking free of alignment can be used to create a dynamic, organic, or purposefully-chaotic design. Just keep in mind that these effects can harm usability if not done carefully or without keeping users' interests in mind.

The proximity principle is a part of the Gestalt theory — a school of psychology based on the idea that the human mind perceives individual elements as a whole and always tries to make order out of chaos.^[1]

The proximity principle refers to the closeness between elements. The general idea of this principle is that the human brain perceives items that sit close to each other as related and similar. Thus, designers should place related items closer to each other. Unrelated items, on the other hand, should be visually separated.

Proximity brings organization to designs and helps indicate relationships between content groups. The principle supports balance and visual hierarchy and is closely related to repetition.

In the design world, balance is the distribution of design elements. Think of it as a visual interpretation of gravity — larger and darker elements appear heavier, while smaller, paler elements appear lighter.

Balance is achieved by combining elements, such as images, shapes, fonts, and colors, in just the right way. There are 2 main ways to balance elements in the design:

• Symmetrical layouts distribute items with equal weight on both sides of an imaginary central axis.
• Asymmetrical designs do the opposite and are often perceived as more dynamic.

Contrast refers to the distinct difference between two elements that are put together or closely associated. Contrast makes elements stand out on the page. It can be achieved through the use of color, alignment, size, fonts, shapes, and other design choices. Contrast goes beyond just aesthetics and is a vital aspect of accessibility.

Always aim for more than one point of contrast between elements. Experiment with size, shape, color, typography, and other visual aspects to guide users to the most important information on the page.

Emphasis is the special importance, value, or prominence given to an element. It can be achieved with size, weight, position, color, shape, and style. Emphasis is often confused with contrast. Contrast creates the difference between two items, while emphasis enhances the perception of one item and makes it a focal point of users' attention.

Why is emphasis important? According to the Von Restorff effect, or Isolation effect, people most likely remember an object that differs from the rest when multiple similar objects are present.^[2]

Designers use emphasis to create a visual hierarchy within a product by making sure the most important element, like CTA, on a page is emphasized more than the others.

Repetition is the practice of using the same or similar elements multiple times to reinforce ideas and organize content. Our brains are made to recognize patterns. Repeating elements within a design creates consistency and familiarity — key components of a pleasant user experience.

The Gestalt principle of similarity supports the principle of repetition — elements that have visual similarities, like color, shape, or iconography, can visually be grouped together. Designers can use both principles to help users identify items that belong to similar or different categories.

Repetition can also provide harmony and unity in designs and is vital for typographic styles and color palettes that are used in many instances throughout a design.

Movement refers to the way the human eye travels over a design. It’s possible to influence this movement through hierarchy and specific visual elements.

Designers can guide users' journey through the product by using:

• Particular colors: brighter colors are noticed first.
• Shapes: bolder or larger shapes stand out.
• Alignment: when the rest of the text is left-flushed, a right-flushed or centered headline catches the eye.
• Fonts: bigger, bolder fonts will draw the eye first, regardless of their placement on the page.

Take advantage of the movement principle to guide users’ attention through a design. When combined with other design principles, movement helps users complete tasks faster and improves overall usability.

The empty area around design elements is referred to as negative space. It's also called white space, though that’s a bit of a misnomer because it could be any color or even a subtle texture or pattern. Negative space is like breathing room around design elements.

Negative space makes text elements more readable, improves scannability, and makes it easier to find vital elements within a page. If you need an element to stand out in your design, putting negative space around it is the quickest and easiest way to do so.

Hierarchy is used to guide users through a design, making content stand out in the order of importance. Achieving visual hierarchy can be done through scale, color, spacing, and placement of elements, and signals to users which part of a layout they should pay attention to first.

Hierarchy can be achieved through a number of other design principles, including movement and contrast.

The relationship between the sizes or quantity of various elements is referred to as proportion. Larger elements are given more visual importance than smaller elements. In this case, size matters.

Proportion needs to remain balanced to create a harmonious design. Equally sized elements may create monotony, while the too obvious difference lacks harmony.

When designing interfaces, it's important to consider the context in which they will be used. Different devices and screen sizes may require different proportions to ensure the interface is clear and easy to use.

The Gestalt principle of continuation states that the human brain tends to perceive elements aligned in straight lines or curves as related. Rather than trying to connect elements placed at different distances, our minds prefer to follow elements placed along a line.

In design, we use continuation to guide users' eye, direct their attention to the most important content, and establish relationships between elements.

Continuation is often aided by similarity and proximity to form a relationship between a group of objects.^[3]

The Gestalt figure-ground design principle states that people tend to intuitively separate objects as either being in the foreground or the background. Objects either appear prominently in the front (the figure) or recede into the back (the ground).

Things get interesting when the relationship between the background and foreground becomes ambiguous and leads to various interpretations of an image. This principle works through the use of positive and negative space, color, contrast, size, and position.

The figure-ground principle helps users understand information hierarchy and guide users' attention to the specific content.^[4]