SlideShare a Scribd company logo
Mater of Arts in Communication Design

WEB DESIGN
Gestalt
Gestalt (applied to design)
Visual perception theory
"The whole is other than the sum of the parts"
Kurt Koffka

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

2
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

3
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

4
Zeotrope

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

5
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

6
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

7
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

8
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

9
S.Dalì, 1935, Mae West

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

10
Gestalt
Principle of form perception

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

11
Gestalt grouping

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

12
The law of proximity posits that when we
perceive a collection of objects, we will see
objects close to each other as forming a
group.

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

13
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

14
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

15
The law of symmetry captures the idea that
when we perceive objects we tend to
perceive them as symmetrical shapes that
form around their centre.

[
Gestalt

][

][

WEB DESIGN NABA 2014 Roberto DADDA

]
16
Similarity occurs when objects look
similar to one another. People often perceive
them as a group or pattern.

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

17
Opera
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

18
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

19
When similarity occurs, an object can be
emphasised if it is dissimilar to the others.
This is called anomally.

The figure on the far right
becomes a focal point because it
is dissimilar to the other shapes.

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

20
Aka common fate

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

21
The law of closure posits that we
perceptually close up, or complete, objects
that are not, in fact, complete.

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

22
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

23
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

24
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

25
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

26
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

27
Closure: let’s use it!

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

28
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

29
Continuation occurs when the eye is
compelled to move through one object and
continue to another object.

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

30
Aka good curve

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

31
Aka good figure

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

32
The figure & ground phenomenon captures the idea
that in perceiving a visual field, some objects take a
prominent role (the figures) while others recede into the
background (the ground).

Edgar Rubin
Figure-ground ambiguities. (a) Ambiguous face–vase (31). (b)
Normally, trees are seen as figure, and the space between as
ground. However, when the space is attended, or when it has a
meaningful shape, it also can be seen as figure. (Courier &
Ives, ca. 1835).
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

33
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

34
Experience

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

35
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

36
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

37
Maurits Cornelis Escher
(Leeuwarden, 17 giugno 1898 – Laren, 27 marzo 1972)

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

38
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

39
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

40
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

41
Ambiguity

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

42
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

43
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

44
You should always start with the container, or the overall
structural shell of a design.
Forget the details and individual components for now.

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

45
Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

46
Roberto Dadda
www.dadda.it
roberto@dadda.it
+39 338 775 22 03
Twitter, facebook, linkedin: robertodadda

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

47

More Related Content

Viewers also liked

Visual Communication
Visual CommunicationVisual Communication
Visual Communication
Coky Fauzi Alfi
 
Visual Communication
Visual CommunicationVisual Communication
Visual CommunicationArzoo Sahni
 
The Power of Visual Communication
The Power of Visual CommunicationThe Power of Visual Communication
The Power of Visual Communication
NounProject
 
Gestalt Principles of Design
Gestalt Principles of DesignGestalt Principles of Design
Gestalt Principles of Design
Gayle Christopher
 
Gestalt Design Principles for Developers
Gestalt Design Principles for DevelopersGestalt Design Principles for Developers
Gestalt Design Principles for Developers
Erin 'Folletto' Casali
 

Viewers also liked (6)

Visual Communication
Visual CommunicationVisual Communication
Visual Communication
 
Gestalt
GestaltGestalt
Gestalt
 
Visual Communication
Visual CommunicationVisual Communication
Visual Communication
 
The Power of Visual Communication
The Power of Visual CommunicationThe Power of Visual Communication
The Power of Visual Communication
 
Gestalt Principles of Design
Gestalt Principles of DesignGestalt Principles of Design
Gestalt Principles of Design
 
Gestalt Design Principles for Developers
Gestalt Design Principles for DevelopersGestalt Design Principles for Developers
Gestalt Design Principles for Developers
 

More from Roberto Dadda

01 usability
01 usability01 usability
01 usability
Roberto Dadda
 
02 unusability
02 unusability02 unusability
02 unusability
Roberto Dadda
 
03 users models
03 users models03 users models
03 users models
Roberto Dadda
 
04 user centered design
04 user centered design04 user centered design
04 user centered design
Roberto Dadda
 
05 1 artifacts
05 1 artifacts05 1 artifacts
05 1 artifacts
Roberto Dadda
 
05 2 artifacts
05 2 artifacts05 2 artifacts
05 2 artifacts
Roberto Dadda
 
07 norms and standards
07 norms and standards07 norms and standards
07 norms and standards
Roberto Dadda
 
08 vision and gestalt
08 vision and gestalt08 vision and gestalt
08 vision and gestalt
Roberto Dadda
 
09 colors
09 colors09 colors
09 colors
Roberto Dadda
 
10 form design
10 form design10 form design
10 form design
Roberto Dadda
 
11 error management
11 error management11 error management
11 error management
Roberto Dadda
 
12 tipography for the web
12 tipography for the web12 tipography for the web
12 tipography for the web
Roberto Dadda
 
14 accessibility short
14 accessibility short14 accessibility short
14 accessibility short
Roberto Dadda
 
13 equilibrium order time
13 equilibrium order time13 equilibrium order time
13 equilibrium order time
Roberto Dadda
 
15 emotional design
15 emotional design15 emotional design
15 emotional design
Roberto Dadda
 
Poli15 uffizi - 2016-02-03
Poli15   uffizi - 2016-02-03Poli15   uffizi - 2016-02-03
Poli15 uffizi - 2016-02-03
Roberto Dadda
 
Poli15 careffour - 2015-12-01
Poli15   careffour - 2015-12-01Poli15   careffour - 2015-12-01
Poli15 careffour - 2015-12-01
Roberto Dadda
 
Poli15 barbie - 20160202
Poli15   barbie - 20160202Poli15   barbie - 20160202
Poli15 barbie - 20160202
Roberto Dadda
 
Poli15 guanda publishing - 2016-02-03
Poli15   guanda publishing - 2016-02-03Poli15   guanda publishing - 2016-02-03
Poli15 guanda publishing - 2016-02-03
Roberto Dadda
 
Poli15 sansha
Poli15   sanshaPoli15   sansha
Poli15 sansha
Roberto Dadda
 

More from Roberto Dadda (20)

01 usability
01 usability01 usability
01 usability
 
02 unusability
02 unusability02 unusability
02 unusability
 
03 users models
03 users models03 users models
03 users models
 
04 user centered design
04 user centered design04 user centered design
04 user centered design
 
05 1 artifacts
05 1 artifacts05 1 artifacts
05 1 artifacts
 
05 2 artifacts
05 2 artifacts05 2 artifacts
05 2 artifacts
 
07 norms and standards
07 norms and standards07 norms and standards
07 norms and standards
 
08 vision and gestalt
08 vision and gestalt08 vision and gestalt
08 vision and gestalt
 
09 colors
09 colors09 colors
09 colors
 
10 form design
10 form design10 form design
10 form design
 
11 error management
11 error management11 error management
11 error management
 
12 tipography for the web
12 tipography for the web12 tipography for the web
12 tipography for the web
 
14 accessibility short
14 accessibility short14 accessibility short
14 accessibility short
 
13 equilibrium order time
13 equilibrium order time13 equilibrium order time
13 equilibrium order time
 
15 emotional design
15 emotional design15 emotional design
15 emotional design
 
Poli15 uffizi - 2016-02-03
Poli15   uffizi - 2016-02-03Poli15   uffizi - 2016-02-03
Poli15 uffizi - 2016-02-03
 
Poli15 careffour - 2015-12-01
Poli15   careffour - 2015-12-01Poli15   careffour - 2015-12-01
Poli15 careffour - 2015-12-01
 
Poli15 barbie - 20160202
Poli15   barbie - 20160202Poli15   barbie - 20160202
Poli15 barbie - 20160202
 
Poli15 guanda publishing - 2016-02-03
Poli15   guanda publishing - 2016-02-03Poli15   guanda publishing - 2016-02-03
Poli15 guanda publishing - 2016-02-03
 
Poli15 sansha
Poli15   sanshaPoli15   sansha
Poli15 sansha
 

Recently uploaded

Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
taqyed
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Mansi Shah
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
184804
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
eloprejohn333
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
peuce
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
GOWSIKRAJA PALANISAMY
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
M. A. Architect
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
h7j5io0
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
Alan Dix
 
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
taqyed
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 

Recently uploaded (20)

Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理一比一原版(毕业证)长崎大学毕业证成绩单如何办理
一比一原版(毕业证)长崎大学毕业证成绩单如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdfSECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
SECURING BUILDING PERMIT CITY OF CALOOCAN.pdf
 
一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理一比一原版(BU毕业证)波士顿大学毕业证如何办理
一比一原版(BU毕业证)波士顿大学毕业证如何办理
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
 
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
一比一原版(毕业证)早稻田大学毕业证成绩单如何办理
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 

Gestalt