Visual Design Principles

Question 1

What is visual design?

Answer 1

Visual design focuses on the aesthetics of an app and how those aesthetics can be used to enhance the user experience. It deals with selecting colors, typography, and styles, and applying them to a user interface (UI).

Question 2

What is Gestalt Psychology?

Answer 2

Gestalt psychology is a school of thought focused on understanding the way our minds organize and process the world around us. The movement was founded in Germany around 1912 and has since been instrumental in explaining how our minds process information. The central principle of Gestalt psychology was beautifully summarized by Kurt Koffka:

“The whole is other than the sum of the parts.”
KURT KOFFKA

Question 3

What is the central principle of Gestalt Psychology?

Answer 3

This central principle maintains that when we see something, we form a percept, or “gestalt,” of the object where the whole has a reality that is independent of its parts. Sound confusing? Consider a tree. The tree is the whole, but its reality is different than that of its branches or leaves. Take a look at the image below and notice how the tree is shaped differently than the leaf. The individual leaf will have completely different characteristics and a different existence when you compare it to its “whole,” the tree.

Question 4

What are the Gestalt Properties?

Answer 4

There are four key properties from Gestalt psychology that we often use in design, referred to as the Gestalt Properties:

Emergence
Reification
Multi-Stability
Invariance

Question 5

What is emergence?

Answer 5

Emergence is what explains our recognition of objects by their whole rather than their parts. It’s typically illustrated by way of a dalmatian, but any breed of dog will do.

When we see a picture of a dog, we recognize it as a dog because of its overall shape. We don’t use its parts—for example, nose, ears, tail—to identify what we’re looking at. It’s important to remember that an object’s properties aren’t necessarily the same as those of its parts. For instance, a dog’s nose is wet, but its paws are not.

Question 6

What is reification?

Answer 6

Reification explains the way our minds attempt to fill information gaps when they don’t recognize an object’s outline.

According to the Merriam-Webster Dictionary, “to reify” means “to give definite content and form to (a concept or idea).”

The theories behind reification can be used to create great visuals, and they’re often used in logo design. For instance, check out the logo for the USA network. See how the S is formed from the space between the U and A?

Question 7

What is multi-stability?

Answer 7

Multi-stability is often illustrated by Rubin’s Vase. Take a look at the image below. Do you notice anything about it? Those who look at it fall into one of two groups—one that sees a vase and one that sees two faces. Though you may be able to switch back and forth between the two, you can’t see both simultaneously.

This is multi-stability at work. Your mind wants to avoid uncertainty. When an object can be interpreted in multiple ways, your mind will bounce back and forth between perceptions.

Question 8

What is invariance?

Answer 8

Invariance states that our minds can recognize an object regardless of its rotation, perspective, or scale. Let’s go back to our dog example. You’d be able to recognize the dog even if it rolled onto its back for a belly rub. Likewise, you’d recognize the dog whether it was two or five feet tall.

Question 9

What are the Gestalt Laws of Grouping?

Answer 9

Designers adhere to a number of key principles when putting together a design—among them are the Gestalt Laws of Grouping. These principles can work as a set of guidelines for crafting easily navigable layouts.

Question 10

What is the Law of Prägnanz?

Answer 10

The fundamental basis behind the Gestalt Laws of Grouping is the Law of Prägnanz. This law states that our minds naturally look for patterns in an attempt to organize information in predictable ways. In UX design and visual design, being aware of this phenomenon and how it can shape user perception is a must.

Question 11

What are the six Gestalt Laws of Grouping UX designers adhere to?

Answer 11

1. Law of Proximity
2. Law of Similarity
3. Law of Closure
4. Law of Good Continuation
5. Law of Common Fate
6. Law of Good Form

Question 12

What is the Law of Proximity?

Answer 12

The law of proximity is simple: our minds automatically group together nearby elements. Whether the elements are similar is beside the point—the sheer fact that they’re close to each other will force our minds to think of them as a unit.

Question 13

What is the Law of Similarity?

Answer 13

Just as our mind groups nearby elements, so, too, does our mind group visually similar elements. Similarities aren’t limited to color and shape; similarities in size, design, and style can also be effective, and there’s no requirement that the similar elements be near each other.

Think about the buttons on an app. Buttons that are similarly styled can alert users that they share a similar purpose. Our minds will automatically relate them with each other even when they aren’t sitting next to each other.

Question 14

What is the Law of Closure?

Answer 14

Remember reification? Closure is just the same. It explains how our minds will try to fill in information gaps wherever they exist. Consider the image below. Closure is what reveals the triangle even when it’s not there.

Question 15

What is the Law of Good Continuation?

Answer 15

In our minds, elements that are grouped together retain their individuality. Consider the image below. Do you see two rectangles and a circle? Despite the circle overlapping the second rectangle, we still recognize it as a rectangle. Likewise, we still recognize the circle as a circle despite part of it being hidden by the first rectangle.

Creating visual design that is consistent throughout a row or column of related content also contributes to the idea of creating patterns in intuitive design. It isn’t good to disrupt the continuation of a pattern with an unrelated element, as seen in the example below.

Question 16

What is the Law of Common Fate?

Answer 16

Elements can also be grouped via their apparent direction. Even if none of the elements are actually moving, the direction they appear to be moving in can influence how our mind perceives and groups them.

In the example above, the app’s navigation elements are animated so that elements belonging to the same category move in the same direction.

Another good example is the one below, where a navigation menu expands in one direction instead of confusing the user by going back and forth.

Question 17

What is the Law of Good Form?

Answer 17

Our minds love simplicity. As a result, they attempt to break down complex objects into their simplest form. When we see a complex shape, such as the one below, we naturally try to break it down into simple, familiar shapes.

Question 18

What are the Principles of Design?

Answer 18

These principles can be found in various design disciplines and should be familiar to you as a UX designer. Predominant ones:

Unity
Balance
Hierarchy
Proportion
Emphasis

Question 19

What is Unity?

Answer 19

It’s said that a composition, or in your case, a screen, is unified (or harmonious) when all the elements used in its design are in agreement with one another. This means that none of the elements clash visually.

Question 20

What is Balance?

Answer 20

Balance in visual design works the same as it does in the real world. You distribute the visual weight of objects on screen to ensure that no one side feels too heavy. There are two types of balance—symmetrical/formal and asymmetrical/informal.

Question 21

What is symmetrical/formal balance?

Answer 21

In symmetrical balance, both sides of a composition or layout look the same. If you sliced the example below horizontally or vertically, you’d have two identical pieces. If they sat on a scale, both sides would carry the same weight.

Question 22

What is asymmetrical/informal balance?

Answer 22

In asymmetrical design, the elements on either side of a composition or layout are different. But they still feel balanced. Take a look at the composition below. If it sat on a scale, would both sides carry the same weight?

Weight is important in visual design. Visual weight can be applied to those elements that are more important in a website or app. Asymmetrical balance is normally used when a design’s goal is to draw attention to an important element. In the example below, ask yourself what order you see each element in:

Question 23

What is Hierarchy?

Answer 23

As you design a screen, you want to style the elements in such a way that they guide users through the screen. Think of it as a visual order. Color, size, and placement can be used to place important elements (or the elements you want your users to notice first) at the top of your hierarchy.

Question 24

What is Proportion?

Answer 24

Proportion deals with the size of components in relation to one another, and how they work to create unity. Think of chocolate chip ice cream. If the proportion of chocolate chips to ice cream is too high or too low, you’ll likely feel dissatisfied. A great chocolate chip ice cream has a good balance of the two. You want to achieve that same feeling in design.

Question 25

What is Emphasis?

Answer 25

Emphasis is all about highlighting one element or section over another. When emphasizing an important element, such as a call to action (CTA), it’s important that the unity of the screen not be compromised.

Emphasis, like hierarchy, can be created using size, color, or placement. Use it to guide a user through a composition or direct their attention towards a specific element or section.

Consider the login screen below. Color is used to emphasize the “Sign In” button, an important component of the screen.