Gestalt Principles Assignment

.
Proximity
We tend to perceive objects as similar
when closer together though they are
different.
The tab and dropdown are in proximity and The price, text and image are in proximity and
perceived as one though they are different perceived as one group
. Similarity
The law of similarity from the gestalt principles states that if the individual elements share some
kind of similar traits, the human brain will organize them in a group and perceive them as a
whole. This similarity can be explored in terms of size, color, texture or shapes.
The text/links design are similar in

different categories so user
perceives them as text/links in
different categories across the site
. Similarity
The buttons are similar in design so they are perceived as

buttons in different places across the site
. Similarity
Different colors but same

shape perceive as similar
Repetition of checkbox
Similar color and design for
selections in each filter
icons in dropdown
. Similarity
Similar Outlined icons perceived as

one group
Circular shape perceived as brand names in myntra
Myntra brand cards perceived as one group due to

similarity in shape and alignment
Play-store buttons similar everywhere, grouped as one

. closure
This principle states that the human brain has a tendency to seek out patterns, and if the right
amount of information is presented, the brain will use it to complete the pattern.
Truck icon design on myntra site Cart icon design on myntra site
. closure
Perceived as star Perceived as boy’s face
Negative space perceived as 1

. continuation
The law of continuity states that elements that are similarly aligned will be perceived as a
whole –your eye will begin to follow them in that direction unless something breaks the
continuity. that are arranged either on a line or a curve are seen as being more related than elements
that are not on either the line or the curve.
you may be able to bind two

different colors or two
different ideas with the help of
a continuous element
Continuity b/w navigation tabs and details inside it

. continuation
Our eyes follow from a to z
Continuity from first C leading to next C

Google maps continuity from location to destination
. continuation
White lines on road helping in

navigation
Volume and progress sliders continuing

to another object
Wayfinding signboards
. continuation
Shoes pointing in same direction left to

right continuing to next row
Vertical Progress path of billing process
. continuation
The green curve in skillshare site,leading the user to scroll down

. Figure-ground
First, figure is strengthened through large copy and the large

“Hope for African Children Initiative” size of the smartphone. Positioning the smartphone at the
simultaneously depicts the map of Africa bottom of the screen also assists in bringing figure forward.
and the waning silhouettes of an adult and The figure is further enhanced by tinting back the video
a child. animation in the background, causing ground to recede.
Finally, contrast between the bright screen and the dark
background provide good separation between figure and
ground.
. Figure-ground
The cool background is separated from the

figure(the tiles)
The woman’s image and letters separate the figure and

ground with green bg as ground and woman as figure
. Figure-ground
Tesla website using video on background and displaying details on fore

ground.
Side nav as figure giving itself

more focus
. Figure-ground
The modal is in foreground and has background darkened to

give figure more focus
The card has image in
background and title in
foreground giving it more
focus
. Figure-ground
Text and button in figure and image/video in background on

skillshare website
Contrast
Smashing magazines’ site has red and white contrast that

attracts user to look at the white text contrasting the red
background
Andy Warhol’s painting of
cheguvera
Contrast
ThinkSEM site has brand name with three contrasting colors

red, white and black.
Pizza hut website has contrasting green

button to the red theme color.
Color contrast of blue bg and orange CTA. Font contrast of title

and subtitle
Contrast
Contrast in font styles

Gestalt Principles Assignment

Uploaded by

Copyright:

Available Formats

Gestalt Principles Assignment

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Gestalt Principles Assignment

Uploaded by

Copyright:

Available Formats

.

The text/links design are similar in

The buttons are similar in design so they are perceived as

Different colors but same

Similar Outlined icons perceived as

Circular shape perceived as brand names in myntra

Myntra brand cards perceived as one group due to

Play-store buttons similar everywhere, grouped as one

Perceived as star Perceived as boy’s face

Negative space perceived as 1

you may be able to bind two

Continuity b/w navigation tabs and details inside it

Our eyes follow from a to z

Continuity from first C leading to next C

White lines on road helping in

Volume and progress sliders continuing

Shoes pointing in same direction left to

The green curve in skillshare site,leading the user to scroll down

First, figure is strengthened through large copy and the large

The cool background is separated from the

The woman’s image and letters separate the figure and

Tesla website using video on background and displaying details on fore

Side nav as figure giving itself

The modal is in foreground and has background darkened to

Text and button in figure and image/video in background on

Smashing magazines’ site has red and white contrast that

ThinkSEM site has brand name with three contrasting colors

Pizza hut website has contrasting green

Color contrast of blue bg and orange CTA. Font contrast of title

Contrast in font styles

You might also like