5.1 Visual Design Principles Flashcards
What is visual design?
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)
What is Gestalt psychology?
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.
When was the Gestalt psychology movement founded?
1912 in Germany
“The whole is other than the sum of the _____.” - Kurt Koffka
parts
What is the central principle of Gestalt psychology?
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.
What are the four key properties from Gestalt psychology called Gestalt properties?
- Emergence
- Reification
- Multi-Stability
- Invariance
What is Emergence?
is what explains our recognition of objects by their whole rather than their parts.
What is Reification?
Explains the way our minds attempt to fill information gaps when they don’t recognize an object’s outline.
What is Multi-Stability?
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.
What is Invariance?
states that our minds can recognize an object regardless of its rotation, perspective, or scale.
What is the Law of Pragnaz?
This law states that our minds naturally look for patterns in an attempt to organize information in predicatble ways.
What are the six Gestalt Laws of Grouping?
- Law of Proximity
- Law of Similarity
- Law of Closure
- Law of Good Continuation
- Law of Common Fate
- Law of Good Form
What is Law of Proximity?
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.
What is the Law of Similarity?
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.
What is the Law of Closure?
Remember reification? Closure is just the same. It explains how our minds will try to fill in information gaps wherever they exist.
What is the Law of Good Continuation
In our minds, elements that are grouped together retain their individuality.
What is the Law of Common fate?
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.
What is the Law of Good Form?
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.
What is Unity?
When all the elements used in its design are in agreement with one another
What is Balance?
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.
What is asymmetrical/informal?
In asymmetrical design, the elements on either side of a composition or layout are different. But they still feel balanced.
What is symmetrical/formal?
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.
What is hierarchy?
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.
What is proportion?
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.
What is emphasis?
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.
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
b. Balance
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
c. Hierarchy
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
d. Good Form
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
c. Call to Action
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.
Gestalt
“The whole is other than the sum of the parts.” This quote from Kurt Koffka perfectly describes what?
Gestalt Psychology
The Law of Prägnanz forms the basis behind the Gestalt Laws of Grouping. According to this law, our minds…
Look for patterns in an attempt to organize information
