5.1 Visual Design Principles

Question 1

What is visual design?

Answer 1

It 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

A school of thought focuses on understanding the way our minds organize and process the world around us. It has been instrumental in explaining how our minds process information.

Question 3

When was the Gestalt psychology movement founded?

Answer 3

1912 in Germany

Question 4

“The whole is other than the sum of the _____.” - Kurt Koffka

Answer 4

parts

Question 5

What is the central principle of Gestalt psychology?

Answer 5

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.

e.g) 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 6

What are the four key properties from Gestalt psychology called Gestalt properties?

Answer 6

1. Emergence
2. Reification
3. Multi-Stability
4. Invariance

Question 7

What is Emergence?

Answer 7

is what explains our recognition of objects by their whole rather than their parts.

Question 8

What is Reification?

Answer 8

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

Question 9

What is Multi-Stability?

Answer 9

is often illustrated by Rubin’s Vase. 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 10

What is Invariance?

Answer 10

states that our minds can recognize an object regardless of its rotation, perspective, or scale.

Question 11

What is the Law of Pragnaz?

Answer 11

This law states that our minds naturally look for patterns in an attempt to organize information in predicatble ways.

Question 12

What are the six Gestalt Laws of Grouping?

Answer 12

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 13

What is Law of Proximity?

Answer 13

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 14

What is the Law of Similarity?

Answer 14

Our minds 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

Creating patterns in your app using the law of similarity is important. Users will expect elements that achieve a similar goal to have a similar appearance. When you create a similar appearance for related elements, you allow users to complete flows more intuitively. No matter who your target users are, patterns will allow them to use your app without second guessing themselves.

Question 15

What is the Law of Closure?

Answer 15

Remember reification? Closure is just the same. It explains how our minds will try to fill in information gaps wherever they exist.

Question 16

What is the Law of Good Continuation

Answer 16

In our minds, elements that are grouped together retain their individuality.

Question 17

What is the Law of Common fate?

Answer 17

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.

Question 18

What is the Law of Good Form?

Answer 18

When we see a complex shape, such as the one below, we naturally try to break it down into simple, familiar shapes.

Our minds love simplicity. As a result, they attempt to break down complex objects into their simplest form.

Question 19

What is Unity?

Answer 19

When all the elements used in its design are in agreement with one another

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 a screen to ensure that no one side feels too heavy.

Question 21

What is asymmetrical/informal?

Answer 21

In asymmetrical design, the elements on either side of a composition or layout are different. But they still feel balanced.

Question 22

What is symmetrical/formal?

Answer 22

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.

Question 23

What is hierarchy?

Answer 23

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

Highlighting one element or section over another.

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.

Question 26

In the middle of designing your new site, “Fernilicious: A Digital Monument to the Beauty of the Fern,” you notice that on the right side, where you’ve included all your meticulously photographed images of ferns, the space feels very cluttered. In fact, it almost feels heavy compared to the left side, which is devoid of images. This problem could be fixed by better adhering to which Principle of Design?

a. Invariance
b. Balance
c. Closure
d. Emphasis

Answer 26

b. Balance

Question 27

As you’re cramming for the test in your Dead Sea Scrolls class, you happen to notice that the text in your textbook is divided into different groups, each with different font size. The unit title, for instance, is the largest size, the chapter titles are a bit smaller, then the section titles, and, finally, the actual content. Instantly, your mind is taken to the design principles you learned about in your UX course. The principle that pops into your mind is?

a. Balance
b. Proportion
c. Hierarchy
d. Emphasis

Answer 27

c. Hierarchy

Question 28

When faced with a complex, unidentifiable object, our brain will naturally break it down into simple, recognizable parts such as circles, squares, and triangles. This tendency is explained in which Gestalt Law of Grouping?

a. Similarity
b. Common Fate
c. Good Continuation
d. Good Form

Answer 28

d. Good Form

Question 29

Which of the following design elements would be good to highlight according to the principle of emphasis?

a. Image
b. Logo
c. Call to Action
d. Navigation Bar

Answer 29

c. Call to Action

Question 30

You’re on your morning commute to work when a frisky Dalmatian saunters past. You can’t help but notice how cute he is! This is because you’ve formed a(n) ___ of the dog that has a different reality than that of its legs, spots, fur, ears, and other parts.

Answer 30

Gestalt

Question 31

“The whole is other than the sum of the parts.” This quote from Kurt Koffka perfectly describes what?

Answer 31

Gestalt Psychology

Question 32

The Law of Prägnanz forms the basis behind the Gestalt Laws of Grouping. According to this law, our minds…

Answer 32

Look for patterns in an attempt to organize information