PE-BBA-IDC-101(T)
Unit 2
Relational Interaction of Elements and Principles in Design
Implementation:
Gestalt psychology in design:
Studying how the mind perceives and organizes visual information, and
how designers can leverage Gestalt principles in their work.
Creating visual hierarchy:
Understanding how to establish a clear visual hierarchy to guide viewers
through the design.
Whole is Other Than the Sum: Introduction to Gestalt
I. Introduction: Why Should Designers Care About
Psychology
The Problem: You can know all the tools in Photoshop, but if you don't
understand how people see, your designs may be confusing, ineffective,
or ignored.
The Solution: Gestalt psychology. A school of
thought founded in the 1920s in Germany that explores how humans
naturally perceive and organize visual information.
The Core Idea: "The whole is other than the sum of its parts" (Kurt
Koffka – Applied in child psychology).
Our brains don't just see individual elements; they automatically group
them into larger, organized wholes or patterns. We are inherently
hardwired to seek order in chaos.
Whole is Other Than the Sum: Introduction to Gestalt
II. The Foundational Principle: Figure/Ground Relationship
Definition: The brain's tendency to separate visual elements into a
foreground (the figure, the focal point) and a background (the ground,
the environment).
Why it's crucial: It's the most basic way we make sense of what we
see. Without it, everything would be a confusing mosaic.
Key Aspects:
• Stable: The distinction is clear and unambiguous (e.g., a word on a page).
• Reversible: The relationship is ambiguous; the figure and ground can
flip-flop. This creates optical illusions and visual interest.
Iconic Example: The Rubin Vase (faces vs. vase).
Whole is Other Than the Sum: Introduction to Gestalt
Application in Design:
• Creating clear focal points (emphasis).
• Designing clever logos that use negative space (e.g., the FedEx
arrow, the WWF panda).
• Ensuring text is legible against its background (contrast).
Whole is Other Than the Sum: Introduction to Gestalt
III. The Principle of Proximity
•Definition: Elements that are close to each other are perceived to be
more related than elements that are farther apart.
•The Brain's Rule: "Things that are near each other belong together.“
•Application in Design:
Grouping Information: The primary tool for organizing data.
Spacing is everything.
UI/UX Design: Putting a label close to its input field. Grouping
navigation links together.
Layout: Managing the space between paragraphs, images, and
columns to create logical groups.
Whole is Other Than the Sum: Introduction to Gestalt
Whole is Other Than the Sum: Introduction to Gestalt
IV. The Principle of Similarity
Definition: Elements that share similar visual characteristics (like color,
shape, size, or texture) are perceived to be related or belonging to the
same group.
The Brain's Rule: "Things that look the same belong together.“
Application in Design:
Creating Consistency: Using the same color for all clickable links.
Navigation: Using a consistent style for all top-level menu items.
Data Visualization: Using the same shape or color to represent a
single data series in a chart.
Overpowering Proximity: Similarity can be a stronger grouping
force than proximity. A red circle in a field of black squares will be
seen as separate, even if it's close to them.
Whole is Other Than the Sum: Introduction to Gestalt
Whole is Other Than the Sum: Introduction to Gestalt
V. The Principle of Closure
Definition: The mind's tendency to fill in the gaps and perceive
complete shapes or figures, even when the picture is incomplete.
The Brain's Rule: "I see enough to recognize a pattern. I'll close the rest
myself to save energy."
Why it works: We are pattern-recognition machines. We recognize a
circle from a few arcs, a triangle from three dots.
Application in Design:
Logo Design: Using negative space and implied shapes to create clever,
memorable marks (e.g., the IBM stripes, the NBC peacock, the World Wildlife
Fund panda). This makes the viewer an active participant.
Iconography: Using simple, incomplete shapes that are instantly
recognizable.
Data Visualization: Using a dashed line to imply a trend or connection.
Interface Design: Using a "card" UI where only shadows or corners are
shown, but the brain sees a complete, clickable object.
Whole is Other Than the Sum: Introduction to Gestalt
Whole is Other Than the Sum: Introduction to Gestalt
III. The Principle of Continuation
Definition: The eye naturally follows a path, line, or curve, preferring to
see a continuous flow rather than abrupt changes or sharp angles.
The Brain's Rule: "I will follow the smoothest path and assume it
continues.“
Application in Design:
Guiding the Eye: This is one of the most powerful tools for controlling the
viewer's gaze through a composition. A curved line, a row of pointing
elements, or a gaze from a model in a photo can lead the eye directly to the
most important information (the call to action, the headline).
Creating Movement: Implied lines create a sense of flow and movement
within a static layout.
Connecting Elements: Aligning elements along an invisible axis creates a
sense of connection and order (related to the Grid system).
Whole is Other Than the Sum: Introduction to Gestalt
Whole is Other Than the Sum: Introduction to Gestalt
IV. The Principle of Common Fate
Definition: Elements that move together (or appear to move together)
are perceived to be part of the same group or related to each other.
The Brain's Rule: "Things that move in the same direction, at the same
time, are a team.“
Application in Design:
Static Design: Elements that point in the same direction are
grouped by common fate (e.g., a series of arrows all pointing right).
Dynamic/Digital Design (UI/UX): This principle is crucial.
A dropdown menu: all items that appear together are grouped.
A carousel of images: the moving slides are perceived as a
group.
Animated elements that expand/collapse together.
Infographics: Using arrows or lines to show a shared direction or
flow of a process.
Whole is Other Than the Sum: Introduction to Gestalt
Whole is Other Than the Sum: Introduction to Gestalt
Synthesis & Mastery: Applying Gestalt to Real-World Design
Objective: To synthesize all Gestalt principles to critically analyze and
deconstruct professional design work. They will understand how
principles are combined and leveraged to solve specific communication
problems.
I. Recap of All Principles
Review: Figure/Ground, Proximity, Similarity, Closure, Continuation,
Common Fate.
The Big Idea: Principles are rarely used in isolation. Masterful design
uses multiple principles simultaneously to create a clear, cohesive, and
compelling whole.
Whole is Other Than the Sum: Introduction to Gestalt
Whole is Other Than the Sum: Introduction to Gestalt
Whole is Other Than the Sum: Introduction to Gestalt
II. Comprehensive Case Study Analysis
Method: Deconstruct ion of 2-3 iconic designs. To use a structured
questioning method for each:
Logo Deconstruction (e.g., NBC):
Figure/Ground: Is it stable or reversible?
Closure: Is an implied shape created by the negative space between the feathers?
Similarity: Are the feathers similar in style?
Common Fate: Do the feathers appear to be fanning out (implying movement)?
Website Header/UI Analysis:
Proximity: How is information grouped? (Navigation bar, search bar, logo).
Similarity: How are interactive elements styled similarly? (Buttons, links).
Continuation: How is your eye guided through the layout? (Maybe along a hero
image slider -> headline -> call-to-action button).
Common Fate: What elements might animate together on a hover state?
Poster or Editorial Spread:
Figure/Ground: Is the text clearly legible from the background?
Proximity/Similarity: How are text blocks, captions, and images organized?
Closure: Are any graphic elements implied rather than fully drawn?
Continuation: How do the lines of the composition lead your eye on a journey?
Whole is Other Than the Sum: Introduction to Gestalt
Logo Deconstruction (e.g. NBC):
Figure/Ground: Is it stable or
reversible?
Closure: Is an implied shape created
by the negative space between the
feathers?
Similarity: Are the feathers similar in
style?
Common Fate: Do the feathers
appear to be fanning out (implying
movement)?
Whole is Other Than the Sum: Introduction to Gestalt
Website Header / UI Analysis:
Proximity: How is information grouped? (Navigation bar, search bar, logo).
Similarity: How are interactive elements styled similarly? (Buttons, links).
Continuation: How is your eye guided through the layout? (Maybe along a hero
image slider -> headline -> call-to-action button).
Common Fate: What elements might animate together on a hover state?
Whole is Other Than the Sum: Introduction to Gestalt
Poster or Editorial Spread:
Figure/Ground: Is the text clearly legible from the background?
Proximity/Similarity: How are text blocks, captions, and images
organized?
Closure: Are any graphic elements implied rather than fully drawn?
Continuation: How do the lines of the composition lead your eye on a
journey?
Whole is Other Than the Sum: Introduction to Gestalt
Poster or Editorial Spread:
Figure/Ground: Is the text clearly legible from the background?
Proximity/Similarity: How are text blocks, captions, and images
organized?
Closure: Are any graphic elements implied rather than fully drawn?
Continuation: How do the lines of the composition lead your eye on a
journey?