Digital Design 1

Week 2: Gestalt Principles

© Curtin University

Image source
School of Design & the Built Environment
 COMMONWEALTH OF AUSTRALIA
Copyright Regulation 1969

WARNING
This material has been copied and communicated to you by or on behalf of Curtin
University of Technology pursuant to Part VB of the Copyright Act 1968 (the Act)

The Material in this communication may be subject to copyright under the Act. Any
further copying or communication of this material by you may be the subject of
copyright protection under the Act.

Do not remove this notice.

© Curtin University | School of Design & the Built Environment Slide 2

Week 2:
1. Continuation
2. Enclosure
3. Figure-Ground
4. Proximity
5. Similarity

© Curtin University | School of Design & the Built Environment Slide 3 / 18

 Visual Relationships:
Gestalt Principles

© Curtin University | School of Design & the Built Environment Slide 4 / 18

 In the next slide you
will see a floor plan
for 5 BUILDINGS in the
Design & Art precinct

© Curtin University | School of Design & the Built Environment Slide 5 / 18

 Image adapted from
Figure 1.1 in Johnson, Jeff. 2014. Designing with the Mind in Mind: Simple Guide to Understanding
User Interface Design Guidelines. 2 edition. (Amsterdam ; Boston: Morgan Kaufmann.), 2

© Curtin University | School of Design & the Built Environment Slide 6 / 18

Gestalt Principles
Our perception of the world around us is not a true depiction of what is actually there. Our
perceptions are heavily biased by at least three factors (Johnson 2014, p.1):

• The past: our past experience

• The present: the current context
• The future: our goals

“Gestalt” is a psychological concept which suggests that the whole of something is more
valuable to our understanding than its component parts.

In visual design, Gestalt Principles provide insight into how our minds perceive and interpret
visual elements. (Bonner 2019)

© Curtin University | School of Design & the Built Environment Slide 7 / 18

Gestalt Principles – Continuation

The visual tendency to follow continuous and uninterrupted elements that are aligned with
straight lines or curves, and relating those elements together (Hensley 2016).

Link to source

© Curtin University | School of Design & the Built Environment Slide 8 / 18

Gestalt Principles – Continuation
The visual tendency to follow continuous and uninterrupted elements that are aligned with
straight lines or curves, and relating those elements together (Hensley 2016).

Link to source

Link to source

© Curtin University | School of Design & the Built Environment Slide 9 / 18

Gestalt Principles – Enclosure
The perception that elements which have a visual boundary around them are are grouped
together and related (Bonner 2019).

Link to source Link to source Link to source

© Curtin University | School of Design & the Built Environment Slide 10 / 18

Gestalt Principles – Figure-Ground (Stable)
The perception that elements are perceived as either figures aka objects of focus or ground aka
rest of the perceptual field (Lidwell, Holden, and Butler 2003).

Stable figure and ground relationships ensure the figure is better remembered.

Link to source

© Curtin University | School of Design & the Built Environment Slide 11 / 18

Gestalt Principles – Figure-Ground (Stable)
Stable figure and ground relationships ensure the figure is better remembered.

Link to source

© Curtin University | School of Design & the Built Environment Slide 12 / 18

Gestalt Principles – Figure-Ground (Unstable)
Unstable figure and ground relationships alternate our idea of what we are looking at, causing us
to switch between figure and ground. In an illustration or logo design, this can make for a
dynamic image.

Link to source

© Curtin University | School of Design & the Built Environment Slide 13 / 18

Gestalt Principles – Figure-Ground (Unstable)
However, having an unstable figure ground relationship can be problematic in a
website or app design (unless its intended for frivolity!)

Link to source

© Curtin University | School of Design & the Built Environment Slide 14 / 18

Gestalt Principles – Proximity
The perception that elements which are close together are related, and as such part of a group
(Soegaard 2020).

Link to source

© Curtin University | School of Design & the Built Environment Slide 15 / 18

Gestalt Principles – Similarity
The perception that objects which are similar are part of a pattern or grouping (Cao 2015).

Link to source

© Curtin University | School of Design & the Built Environment Slide 16 / 18

References
Bonner, Carolann. 2019. ‘Using Gestalt Principles for Natural Interactions’. Thoughtbot. 23 March 2019.
https://thoughtbot.com/blog/gestalt-principles.
Brinck, Tom, Darren Gergle, and Scott D. Wood. 2002. Designing Web Sites That Work: Usability for the Web.
Morgan Kaufmann.

Cao, Jerry. 2015. ‘How to Apply Optical Illusions to Web UI Design’. The Next Web. 17 March 2015.
https://thenextweb.com/dd/2015/03/17/how-to-apply-optical-illusions-to-web-ui-design/.

Hensley, Jon. 2016. ‘Improve Your Designs With The Principles Of Closure And Figure-Ground (Part 2)’. Smashing
Magazine. 10 May 2016. https://www.smashingmagazine.com/2016/05/improve-your-designs-with-the-principles-of-
closure-and-figure-ground-part-2/.

Hensley, Jon. 2016. ‘Improve Your Designs With The Principles Of Continuation And Common Fate (Part 3)’.
Smashing Magazine. 23 May 2016. https://www.smashingmagazine.com/2016/05/improve-your-designs-with-the-
principles-of-continuation-and-common-fate-part-three/.

Johnson, Jeff. 2014. Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design
Guidelines. 2 edition. Amsterdam ; Boston: Morgan Kaufmann.

© Curtin University | School of Design & the Built Environment Slide 17 / 18

References
Lidwell, William, Kritina Holden, and Jill Butler. 2003. Universal Principles of Design. Gloucester, Mass: Rockport
Publishers.

Soegaard, Mads. 2020. ‘Laws of Proximity, Uniform Connectedness, and Continuation – Gestalt Principles (2)’. The
Interaction Design Foundation. February 2020. https://www.interaction-design.org/literature/article/laws-of-proximity-
uniform-connectedness-and-continuation-gestalt-principles-2.

© Curtin University | School of Design & the Built Environment Slide 18 / 18