.

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
“Hope for African Children Initiative”
simultaneously depicts the map of Africa
and the waning silhouettes of an adult and
a child.
First, figure is strengthened through large copy and the large
size of the smartphone. Positioning the smartphone at the
bottom of the screen also assists in bringing figure forward.
The figure is further enhanced by tinting back the video
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