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.
