Visual Design Principles Flashcards
What is Visual Design?
Focus on the aesthetics of an app and how they are used to enhance a user experience.
Gestalt Psychology is…
a school of thought focused on understanding the war our minds organize & process the world around us
What are the four Gestalt Properties?
Emergence, Reification, Multi-Stability, & Invariance
Emergence…
is what explains our recognition of objects by their whole rather than their parts. (Example; a dalmatian, it is recognized by the shape rather than its parts such as tail, ears, nose, etc)
Reification…
Explains the way our minds attempt to fill information gaps when they don’t recognize an object’s outline.
Multi-Stability…
Your mind is avoiding uncertainty - in turn, it is seeing what it wants to see in an image that may have multiple views. When creating something such as a home icon, you want to make sure that the user only sees the home icon and does not see another image.
Invariance..
our minds can recognize an object regardless of its rotation, perspective, or scale.
Law of Pragnanz
Our minds naturally look for patterns in an attempt to organize information in predictable ways.
The six Gestalt Laws of Grouping a UX designer should adhere to are..
Law of Proximity, Law of Similarity, Law of Closure, Law of Good Continuation, Low of Common Fate, and Law of Good Form
Law of Proximity
Our minds automatically group together nearby elements.
Law of Similarity
Our minds group visually similar elements
Law of Closure
Same as reification, our minds will try to fill in information gaps wherever they exist.
Law of Good Continuation
Elements that are grouped together retain their individuality. (Example - a circle with 2 rectangles, 1 over and 1 under, we recognize both rectangles even though we do not see all of one of them and recognize the circle even though it is partially covered.
Law of Common Fate
Elements can be grouped via their apparent direction.
Law of Good Form
Our minds attempt to break down complex objects into their simplest form because our minds love simplicity
Principles of Design
Unity
Balance
Hierarchy
Proportion
Emphasis
Unity
A screen is unified when all of the elements used in its design are in agreement with one another, which means that none of the elements clash visually.
Every element, color, shape, and piece of text you place in your app will convey meaning.
Balance
You distribute the visual weight of objects on screen to ensure that no one side feels too heavy.
The two types of balance:
Symmetrical/Formal
Asymmetrical/Informal
Symmetrical/Formal
Both sides of a composition or layout look the same. The other side would be identical if sliced down the middle horizontally or vertically.
Asymmetrical/Informal
The elements on either side of a composition or layout are different.
Example of when Asymmetrical balance is used:
Normally used when a design’s goal is to draw attention to an important element.
Hierarchy
As you design a screen, you want to style the elements in such a way that they guide users through the screen. It is a visual order. Color, size, and placement can be used to place important elements at the top of your hierarchy.
Proportion
Deals with the size of components in relation to one another, and how they work to create unity.
You don’t want to create a button so big that it eclipses the other elements. The size must suit its function.
Emphasis
Importance of highlighting one element or section over another. When emphasizing an important element, such as a CTA (call to action), it is important that the unity of the screen not be compromised.
Emphasis, like hierarchy, can be created using size, color, or placement.
