The Gestalt Principles | Basics for Beginners

Summary

This video script delves into the fundamental principles of Gestalt psychology as applied to design, explaining how people perceive relationships between elements rather than individual components. It covers six main principles: continuation, closure, similarity, proximity, symmetry, and figure and ground, using examples like the Olympic rings and various logos to illustrate how these principles guide the viewer's eye and create a unified whole, emphasizing the Gestalt concept that the whole is different from the sum of its parts.

Takeaways

• 📚 Gestalt principles are based on the psychology theory that people organize visual elements into groups and perceive relationships between them rather than seeing individual elements in isolation.
• 🔍 The term 'Gestalt' translates to 'unified whole' and originated from German psychology in the 1920s, emphasizing that the whole is different from the sum of its parts, not just greater.
• 👀 Gestalt principles suggest that humans perceive objects in their simplest form, such as seeing five interlocking Olympic rings rather than the individual lines that make them up.
• 🛣️ Humans naturally follow lines or curves, perceiving them as single elements even when they are technically separate shapes.
• 🧩 The mind will attempt to fill in details that aren't actually present, a concept known as closure, where the brain completes the shape based on the information given.
• 🔄 Continuation is a principle where the eye is compelled to move through one object or element into another, often used in typography and logos to guide the viewer's gaze.
• 🔍 Closure is observed when the mind fills in incomplete elements to perceive a whole shape, as seen in logos like WWF where the panda's head is implied but not fully drawn.
• 👫 Similarity in design elements, such as color, shape, or texture, leads the viewer to perceive objects as a group or pattern, even without direct relationships.
• 📍 Proximity is key in Gestalt theory; elements that are close to each other are perceived as related, influencing how we understand the composition of a design.
• 🪞 Symmetry in design elements can imply a relationship, as seen in logos like Starbucks, where the mirror image of elements creates a sense of balance and unity.
• 🎨 Figure and ground is the principle where the human eye differentiates between objects (figure) and their backgrounds (ground), a powerful tool in design for creating focus and depth.

Q & A

What is the Gestalt psychology term and what does it hypothesize?

Gestalt is a term from psychology that hypothesizes people tend to organize visual elements into groups, perceiving relationships between elements rather than seeing them as separate entities.

What does the term 'Gestalt' literally translate to and when was the theory developed?

The term 'Gestalt' literally translates to 'unified whole.' The theory was developed by German psychologists in the 1920s.

According to the script, why do we perceive two circles of the same color and size placed next to each other as having a relationship?

We perceive two circles of the same color and size as having a relationship due to the Gestalt principle, which suggests that we organize elements into groups and see the relationships between them.

What is the first rule of Gestalt theory mentioned in the script?

The first rule of Gestalt theory mentioned is that we perceive objects in their simplest form, not as individual shapes but as a whole.

Can you explain the concept of 'continuation' in Gestalt theory using the script's example?

Continuation in Gestalt theory refers to the perception of the eye being compelled to move through one object or element and into another. For example, the ProQuest logo uses continuation as the serif on the 'Q' sweeps out, guiding the viewer's eye downwards.

What is 'closure' in Gestalt theory and how is it exemplified in the script?

Closure in Gestalt theory is when the mind fills in the missing parts of an incomplete shape, perceiving it as a finished shape. The script exemplifies this with the WWF logo, where the mind perceives the rest of the panda's head despite it not being physically present.

How does the script describe the principle of 'similarity' in Gestalt theory?

The script describes similarity as a principle where objects that look the same are perceived as a group or pattern, regardless of other relationships. This can be in color, shape, texture, or any design element.

What is 'anomaly' in the context of Gestalt theory and how does it create emphasis?

Anomaly in Gestalt theory refers to an object that is made different from a pattern of similar objects, creating emphasis and drawing the eye. The script shows this with a grid of green squares and a rotated blue one, which stands out.

How does the script define 'proximity' in Gestalt theory and give an example?

Proximity in Gestalt theory is defined as the perception of a relationship between elements based on their closeness to each other. An example given in the script is the grouping of dots, where proximity makes them appear as separate elements or as a single element.

What is 'symmetry' in Gestalt theory and how does it imply relationships between elements?

Symmetry in Gestalt theory is when elements are identical to each other over a mirrored line, implying a relationship. The script mentions the Starbucks logo as an example of vertical symmetry.

Can you explain the concept of 'figure and ground' in Gestalt theory as described in the script?

Figure and ground in Gestalt theory is the concept where the human eye differentiates objects (figure) from backgrounds (ground). The script describes this with examples such as a Batman silhouette against a background, which can be reversed to show the penguin as the figure.

Outlines

00:00

🔍 Introduction to Gestalt Principles

The video introduces the topic of Gestalt principles, a psychology term hypothesizing that people tend to organize elements into groups. The concept, developed by German psychologists in the 1920s, suggests that we perceive relationships between elements rather than seeing them individually. The Olympic rings are used as an example to explain how we perceive complex shapes in their simplest form. The narrator mentions that humans naturally follow lines or curves and the mind fills in details that aren't explicitly there. This sets the stage for understanding Gestalt principles in design.

05:00

🌱 Understanding Continuation in Gestalt Theory

This section explains the principle of continuation, where the eye is compelled to move through one object to another. Examples like the ProQuest and Amazon logos illustrate how design elements guide the viewer's eye. The principle is often used in typography and logos, creating a visual relationship between different parts of a design. Continuation emphasizes smooth transitions and implied connections between elements.

10:02

🕵️ Exploring Closure in Design

Closure is described as the mind's ability to fill in missing information in incomplete elements. Examples include the WWF logo and the EA logo, where parts of the design are missing but the viewer perceives them as complete. This principle leverages the viewer's familiarity with shapes and patterns to imply relationships and complete the design in their mind.

15:04

🔍 Delving into Similarity and Anomaly

Similarity occurs when objects look the same, creating a perceived group or pattern. Examples like the NBC logo and foliage patterns demonstrate this principle. The concept of anomaly is also introduced, where a distinct element within a pattern draws attention by breaking the similarity. This creates emphasis and highlights the unique element in the design.

📍 Proximity in Gestalt Design

Proximity is about the spatial relationship between elements. When objects are close to each other, they are perceived as related. Examples include grouped dots and the Unilever logo, where proximity creates a sense of unity. This principle is fundamental in establishing visual connections between elements based solely on their placement.

🔄 Symmetry and Its Impact

Symmetry involves elements that are identical across a mirror axis, creating a balanced and harmonious design. Examples include the Starbucks and Nintendo Switch logos, where symmetry suggests a strong relationship between parts. The video also touches on the lack of symmetry and how it implies a lack of relationship, highlighting the importance of visual balance in design.

🔲 Figure and Ground: Differentiating Objects and Backgrounds

Figure and ground refer to the differentiation between an object (figure) and its background (ground). Examples like the Batman and Penguin silhouettes illustrate how the mind separates and focuses on elements. This principle plays a crucial role in creating clear and compelling designs by establishing a visual hierarchy between the main subject and its background.

📚 Summary and Further Learning

The video concludes by summarizing the key Gestalt principles: continuation, similarity, closure, proximity, symmetry, and figure-ground. It encourages viewers to explore these principles further, as they form the foundation of effective design. The narrator invites viewers to share their designs on Discord for feedback and emphasizes the value of understanding these principles for creating visually appealing and functional designs.

Keywords

💡Gestalt Principles

Gestalt Principles are a set of psychological rules that describe how humans perceive visual elements as organized groups or unified wholes rather than as separate parts. In the video, this concept is foundational, as it underpins the discussion of how people naturally organize visual information into meaningful patterns, as illustrated by the Olympic rings and roundabout examples.

💡Perception

Perception in this context refers to the process by which individuals organize and interpret sensory information. The video explains that according to Gestalt principles, people perceive objects in their simplest form, such as seeing the Olympic rings as interlocking circles rather than individual lines.

💡Closure

Closure is a Gestalt principle that suggests the mind will fill in missing information to perceive a complete picture. The WWF logo example in the video demonstrates closure, as the viewer perceives a panda's head even though parts are not physically present.

💡Continuation

Continuation is the principle that the eye is compelled to move through or across elements in a design. The video uses the ProQuest logo to illustrate this, where the serif on the 'Q' guides the viewer's eye downwards, creating a sense of movement and connection.

💡Similarity

Similarity in Gestalt theory means that when objects share common characteristics, they are perceived as part of the same group. The video provides the NBC logo as an example, where similar shapes are recognized as related, even without color or positional similarity.

💡Proximity

Proximity is the principle that objects close to each other are perceived as related. The video script uses the grouping of dots to explain this, where dots that are near each other are seen as separate elements, unlike if they were clustered together.

💡Symmetry

Symmetry refers to the balance of elements that are identical on either side of a central axis. The video mentions the Starbucks logo to illustrate vertical symmetry, where the left side of the logo mirrors the right.

💡Figure and Ground

Figure and ground is the principle where the human eye distinguishes between an object (figure) and its background (ground). The video demonstrates this with examples of silhouettes, where the foreground figure can be perceived as the background in a reversed image, creating an intriguing visual effect.

💡Anomaly

Anomaly in the context of Gestalt principles is when an element that differs from a pattern of similar elements is used to create emphasis. The video script describes a grid of green squares with a single rotated blue square, which draws the viewer's attention due to its difference from the pattern.

💡Visual Weight

Visual weight is the perceived emphasis or importance of an element in a design based on factors like size, color, and position. The Pepsi logo in the video is mentioned to have visual weight, where the red section is perceived as slightly lighter than the blue, contributing to the logo's symmetry.

Highlights

Introduction to Gestalt principles and their significance in design psychology.

Explanation of how Gestalt principles help perceive relationships between design elements.

Definition of the first rule: objects are perceived in their simplest form.

Example of Olympic rings illustrating perception of interlocking circles instead of individual shapes.

Humans naturally follow lines or curves, demonstrated through examples like roundabouts.

The mind attempts to fill in detail where information is implied but not present.

Gestalt theory proposes that the whole is different from the sum of its parts, correcting the common mistranslation.

Introduction to the six main Gestalt principles: continuation, similarity, closure, proximity, symmetry, and figure and ground.

Continuation: the eye is compelled to move through one element to another, with examples like the Amazon logo.

Closure: the mind fills in gaps to perceive a complete shape, illustrated by logos like WWF and EA.

Similarity: objects that look the same are perceived as a group or pattern, demonstrated by the NBC logo.

Proximity: elements close to each other are perceived as related, shown through examples like the Adidas logo.

Symmetry: identical elements on either side of a fold or mirror imply a relationship, with examples like the Starbucks and Nintendo Switch logos.

Figure and ground: differentiating objects from the background, illustrated by complex designs like the Batman and Penguin graphic novel cover.

Encouragement to research more into Gestalt principles for deeper understanding and application in design.

Transcripts

hello everybody and welcome back to tip

tart and welcome back to basics for

beginners wow it's been a little while

since we've done a video in this series

but that's okay because this time we're

gonna dive headfirst into quite a big

subject Gestalt principles basics for

beginners Gestalt principles are well

Gestalt is a psychology term it

hypothesizes that people tend to

organize elements into groups so you

look at a design that someone has made

and rather than seeing the individual

elements and make it up you see the

relationships between them when certain

principles are applied what this means

is if you saw for example two circles of

the same color and the same size placed

next to each other you'd perceive them

as having a relationship rather than as

two separate circles it literally

translates to unified whole and it's

sort of a German psychologist theory

developed in the 1920s this will make

sense as we go through but essentially

some general rules you need to

understand are as follows

so objects will be perceived in their

simplest form so we talked about how we

perceive relationships between objects

that is what Gestalt theory is about the

relationships of different objects or

elements of a design have with each

other the first rule is that we perceive

them in their simplest form so if you

take these Olympic rings down on the

bottom left we perceive this as five

interlocking different colored circles

rather than what it physically is which

is a blue curved line that is then split

by a yellow curved line which is then

split by so we don't see these as

individual shapes we don't perceive this

section of the blue circle as one

element and this section of the yellow

circle as an element and then the rest

of this is another element and in this

black section no we perceive it in its

simplest form which is five circles that

are interlocking although technically

that can't be the case because it's just

a 2d picture you may hear my cat

attacking her food tower in the

background as usual secondly humans

naturally follow lines or curves now an

odd example but I find quite a useful

one is if you drive and you approach a

roundabout there are guided lines

help you pick a lane sorry for those who

don't live in the UK roundabouts are

less common in the US but bear with me

on roundabouts there is a guideline or

guidelines that run around the perimeter

of the roundabout although these are

technically separate shapes that should

have no relationship to each other by

human nature we perceive this line and

this curve as a single element okay we

naturally follow these lines and curves

same for this line here same for this

line here coming up like so where these

two lines intersect we perceive them as

doing so okay we perceive this as one

flowing object this as another flowing

object even though this is technically a

t-shape here okay we perceive these

lines and curves first before we

perceive any sort of right angles or

harsh adjacent lines finally the mind

will attempt to fill in detail there

isn't actually there now using this

example may be a little bit confusing as

this also follows several of the other

principles of Gestalt theory namely

closure which is this gap here being

filled in but essentially all of them

boil down to the fact that if there is

no information there but it is implied

our mind will subconsciously fill in the

blanks so as long as you understand that

going forward then this should be super

easy for you guys

basically you break down to this core

minimum Gestalt psychology Gestalt

design theory proposes that the whole is

different from the sum of its parts

interesting bit of trivia coming from

the guy who first proposed Gestalt

theory but he was really pissed off at

the mistranslation there's the famous

quote the whole is greater than the sum

of its parts that is not the correct

translation the correct translation is

the whole is something else from the sum

of his parts he got mad at this because

it implies addition it implies that the

whole is something more than its

individual elements whereas his argument

was it was something else entirely it's

not addition it's just completely

different

whilst there are several principles so

that Gestalt Theory defines there are a

few main ones okay and we're going to go

through the main

six here like I said there are more but

to get yourself started this will be

plenty continuation similarity closure

proximity symmetry and figure and ground

we're going to dive through these one by

one and hopefully by the end of it

you'll have a better understanding of

the main principles that build up

Gestalt theory let's start with

continuation okay here in this example

the continuation consists of that place

where the letter G has been sliced into

by that gap excuse me with the two

leaves growing out of it continuation

essentially means when the eye is sort

of pushed through or compelled to move

through one object or element and into

or through another object or elements in

the design quite often used in

typography logos you can see here in

this ProQuest logo for example that the

serif on the Q the little crossbar

sweeps out compelling the viewers eye

downwards towards the start here a

portion of the logo okay often this is

coupled with gaps in the text you can

see that the there is a gap on the

bottom of the Q here between this

section and the serif just helps to

emphasize this sort of swooping

continuation here same thing for this

Amazon logo connecting the A to Z

obviously implying that they have

everything you need from A to Z on

Amazon this the tail of this a swoops

down across the continuation goes

through and pushes up the Z dragging

your eyes along okay so that implies a

relationship between a and Z on Amazon

and a relationship between the path of

this Q and the starting point of the

journey for whatever ProQuest is here

the S is a continuation down through the

USA Network this also applies to another

gestalt principle that we're going to

talk about in a minute

so it's important to note that it is no

way exclusive very much the opposite in

fact several Gestalt principles can be

applied in the same design and

oftentimes if they are it's a more

compelling and interesting design let's

talk about closure

cloture occurs when an element is

incomplete or not totally finished or

enclosed okay but if they're nuf of the

shape is there then the human mind will

fill in what remains now we've talked

about this with the WWF logo we imply or

rather the design implies that the rest

of this pandas head is here when in fact

there is nothing there is no design

element in this place okay

the same goes for here as well however

because enough of it is indicated our

mind fills in the rest and we perceive

this as a finished shape same goes for

this light bulb here clearly there is

nothing going on there's no connection

between the screw and the bulb portion

of the design however because of the

implication we perceive it to be true we

perceive a relationship between this

man's gap of his hand and the screw of

this light bulb similarly here closure

on this e okay technically this is a -

with a sort of t that is joined to an a

here well even an a because there's a

gap there yeah however we know as in the

Western alphabet that the letters e na

and when we apply that to the company

name ea sports or EA whatever we know

that this is supposed to represent an

ene therefore we subconsciously fill in

the remaining information and it makes a

nice little design animun USA Network

very much the same thing this S does not

exist there is a you with a tail at an a

with the preceding tail there is no s

however we as people who can understand

the Western alphabet understand there is

supposed to be an S hit but it is

implied but not explicitly designed

similarity then similarity occurs when

objects look the same simple as that

okay the viewer will perceive them as a

group or pattern even though technically

there is no other relationship between

them can be similarities in color shape

texture any design element you want this

is probably the easiest to understand

but also the most broad of the gestalt

principles okay we can see in the NBC

logo here similarity of shape between

this and Peacock's feathers however no

similarity of color no similarity of

position there will rotate in different

ways but we understand that they are

related to each other

this little peacock head here actually

again doesn't exist a form of closure

but also form a figure and ground

another gestalt principle we're going to

talk about in a little bit similarity

here similarity of patterns between

different shapes of foliage okay nice

and simple

you can imply a relationship based on

similarity coupled with this is the

theory of anomaly okay when enough

objects are similar in some kind of

pattern then you can emphasize a

different object by creating an anomaly

making it different to the pattern or

the similarity that you have just spent

your time creating when you do this it's

known as an anomaly and it creates

emphasis it draws the eye you can see

here this grid of green squares and a

rotated blue one off to the corner

you're automatically compelled to see

that blue square over the pattern let's

talk about proximity proximity occurs

when things are close to each other

simple as that the position of each

element helps to portray the

relationship between the separate parts

the opposite is also true if there is no

proximity there is a perception of a

lack of relationship between those

elements will you see these group dots

here clearly perceived as a three

separate elements purely by this channel

that's running down through them if

these were grouped together they'd be

perceived as a single element perhaps

this is a count of some kind okay again

here a single item a single element of a

curved man reaching over his head you

praise them in proximity so you place

them in proximity to each other and it

becomes this idea of a tree purely by

proximity if these are all in a row or a

circle you get a different relationship

the only design element here that

implies relationship is proximity I

suppose you could say similarity as well

because they're all the same shapes

we've talked about the NBC logo -

proximity as well of these feathers to

each other okay

proximity of the N B and C they can very

closely to each other very similar very

easy to understand

Unilever logo very much the same

principle there is no u here this is not

the letter U this is just a series of

shapes that are in close proximity to

each other performing or hinting at the

shape of this

you this is probably the best example on

the page the adidas logo these three

separate adidas stripes are clearly not

related to each other you place them in

close proximity they are clearly related

to each other very powerful very simple

technique let's talk about symmetry then

next symmetry is very simple elements

that are identical to each other over

the fold of a mirror or more similar

chicas are here there is some vertical

symmetry running down the image of this

Starbucks logo the left is exactly the

same as the right of course the opposite

is also true if you have a lack of

symmetry it can imply a lack of a

relationship if you have mostly

symmetrical but with an anomaly so you

see the parallels here between symmetry

and similarity also a design can have

several symmetries for example this a

Nintendo switch logo symmetrical main

body shapes of the joy calm similarities

in their shapes anomalies in the

positions of the joysticks okay again a

bit of a gap between this and the logo

so that's proximity the symmetry of the

Nintendo and the switch whilst this is

less visually heavy than the switch

because there are more letters it evens

it out a little bit makes it a bit more

symmetrical so here we have a very nice

combination of symmetry and asymmetry

working together in order to imply

relationships the golden arches don't

need to say much about that 100%

symmetrical technically two separate

arches joined in the middle is plural

golden arches it's not a god not because

they are symmetrical they imply a

relationship probably the most famous

logo in the world this Pepsi logo has

typical symptoms of asymmetry and

symmetry involved in there as well okay

as well as closure from this Pepsi logo

here vertically symmetrical mostly due

to the visual weighting of the red being

slightly lighter than the weighting of

the blue you could say that this has

vertical symmetry it also has a symmetry

the visual weighting of this Pepsi logo

here is heavier than the rest

this bland red section and if you don't

really understand what I mean when I say

visual wait I recommend looking at my

basic compositional Theory basics for

beginners episode that I've made

previously help understand what that

term means let's talk about figure and

ground then the final one and probably

the most difficult to understand but

indeed the most powerful the eye the

human eye differentiates objects and

backgrounds just by its pure nature by

perceiving the world we see that when we

look at something we try to apply a

focus to that something you look at for

a tree for example and then the tree

sits on a field the trees clearly the

object the field is clearly the

background that theory can be applied

using figure and ground figure being the

object ground being the background okay

balancing it is an art form but you can

break the rules to great effect take for

example this criminal underworld Batman

a graphic novel cover the black section

clearly a silhouette of Batman however

the yellow which may be perceived as the

ground or background of the image if

reversed is a silhouette of the penguin

causing the Batman to be the ground and

the penguin to be the figure very clever

these three examples in the top-left use

similar techniques the black here on the

tree trunk is perceived as the figure

however this section of the black is

perceived as the ground the white here

of the river behind the tree clearly

perceived as the ground but the leaves

here perceived is the figure very

intricate this one very good could be an

emblem of some kind this blind very

simple man's face silhouetted in the

blinds you look at the other way and it

is a series of blinds very simple this

is probably my favorite one really

intricate tree really cool use of the

line and guerrilla here I think I don't

like but at least floating elements okay

you could perhaps say they're supposed

to be birds or something like up here

but they've clearly been added as an

afterthought because the silhouette

edging of this lion or tiger and

gorillas are just not apparent enough I

love it maybe could done without

this air I think Melbourne's Food and

Wine Festival very simple one

clear clear figure of a fork clear

figure of three bottle bottles of wine

the reverse of which is also true okay

the bottles of wine become the recesses

in the fork to polar bears hugging don't

need to explain that one very much the

same thing here goes for typography you

do see a lot of figure and ground in

typography it's probably the most

interesting gestalt principle I feel in

terms of what you can actually do with

it if you understand this one you'll

have no trouble with any of the others

and as far as Gestalt theory goes for a

beginner that's probably all you need to

understand as long as you have a basic

understanding of continuation similarity

closure proximity symmetry fix ground

you'll probably be okay do you feel free

to research into this more though this

is us of a black hole of knowledge and

it would pay your dues very well to

research this have a google have a look

see if you can come up with my days of

your own if you can let me know pop them

on the discord and I'll I'll have a look

at them I was gonna say feedback on them

or feedback on them if you want if you

want my feedback you can get an access

to the discord via the link in the

description below thank you very much

for watching everybody

I do appreciate it sorry it's been a

while since the last basics for beginner

episode they don't get a lot of love so

I tend not to do them but I do enjoy

making them so if you have any theories

you want me to explore any basic stuff

please let me know in the comments on

the discord and I'll do my best to

create that for you thanks very much for

watching everybody and I'll see you all

next time on tip top for more tips

tricks and tutorials thanks for watching