47
WEB DESIGN Mater of Arts in Communication Design Gestalt

Gestalt

Embed Size (px)

DESCRIPTION

Gestalt elements for web designers

Citation preview

Page 1: Gestalt

WEB DESIGNMater of Arts in Communication Design

Gestalt

Page 2: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 2

Gestalt (applied to design)Visual perception theory

Gestalt

"The whole is other than the sum of the parts" Kurt Koffka

Page 3: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 3 Gestalt

Page 4: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 4 Gestalt

Page 5: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

Zeotrope

Gestalt 5

Page 6: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 6 Gestalt

Page 7: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 7

Page 8: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 8

Page 9: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 9

Page 10: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 10

S.Dalì, 1935, Mae West

Page 11: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

GestaltPrinciple of form perception

Gestalt 11

Page 12: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 12

Gestalt grouping

Gestalt

Page 13: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 13

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

Page 14: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 14 Gestalt

Page 15: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 15

Page 16: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 16

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

[ ][ ][ ]

Page 17: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

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

Gestalt 17

Page 18: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 18 Gestalt

Opera

Page 19: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 19

Page 20: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

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

Gestalt 20

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

Page 21: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 21

Aka common fate

Gestalt

Page 22: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

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

Gestalt 22

Page 23: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 23 Gestalt

Page 24: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 24Gestalt

Page 25: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 25 Gestalt

Page 26: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 26

Page 27: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 27

Page 28: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

Closure: let’s use it!

Gestalt 28

Page 29: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 29 Gestalt

Page 30: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

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

Gestalt 30

Page 31: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 31

Aka good curve

Gestalt

Page 32: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 32

Aka good figure

Gestalt

Page 33: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 33

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).

Gestalt

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).

Edgar Rubin

Page 34: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 34 Gestalt

Page 35: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

Experience

Gestalt 35

Page 36: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 36

Page 37: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 37

Page 38: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 38

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

Page 39: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 39

Page 40: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 40

Page 41: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 41

Page 42: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

Ambiguity

Gestalt 42

Page 43: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 43 Gestalt

Page 44: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 44

Page 45: Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

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

Gestalt 45

Page 46: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 46

Page 47: Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 47

Roberto Dadda

[email protected]+39 338 775 22 03Twitter, facebook, linkedin: robertodadda