gestalt

Post on 27-Jan-2015

522 Views

Category:

Design

0 Downloads

Preview:

Click to see full reader

DESCRIPTION

Gestalt elements for web designers

TRANSCRIPT

WEB DESIGNMater of Arts in Communication Design

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

WEB DESIGN NABA 2014 Roberto DADDA 3 Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 4 Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

Zeotrope

Gestalt 5

WEB DESIGN NABA 2014 Roberto DADDA 6 Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 7

WEB DESIGN NABA 2014 Roberto DADDAGestalt 8

WEB DESIGN NABA 2014 Roberto DADDAGestalt 9

WEB DESIGN NABA 2014 Roberto DADDAGestalt 10

S.Dalì, 1935, Mae West

WEB DESIGN NABA 2014 Roberto DADDA

GestaltPrinciple of form perception

Gestalt 11

WEB DESIGN NABA 2014 Roberto DADDA 12

Gestalt grouping

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

WEB DESIGN NABA 2014 Roberto DADDA 14 Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 15

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

[ ][ ][ ]

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

WEB DESIGN NABA 2014 Roberto DADDA 18 Gestalt

Opera

WEB DESIGN NABA 2014 Roberto DADDAGestalt 19

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.

WEB DESIGN NABA 2014 Roberto DADDA 21

Aka common fate

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

WEB DESIGN NABA 2014 Roberto DADDA 23 Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 24Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 25 Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 26

WEB DESIGN NABA 2014 Roberto DADDAGestalt 27

WEB DESIGN NABA 2014 Roberto DADDA

Closure: let’s use it!

Gestalt 28

WEB DESIGN NABA 2014 Roberto DADDA 29 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

WEB DESIGN NABA 2014 Roberto DADDA 31

Aka good curve

Gestalt

WEB DESIGN NABA 2014 Roberto DADDA 32

Aka good figure

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

WEB DESIGN NABA 2014 Roberto DADDA 34 Gestalt

WEB DESIGN NABA 2014 Roberto DADDA

Experience

Gestalt 35

WEB DESIGN NABA 2014 Roberto DADDAGestalt 36

WEB DESIGN NABA 2014 Roberto DADDAGestalt 37

WEB DESIGN NABA 2014 Roberto DADDAGestalt 38

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

WEB DESIGN NABA 2014 Roberto DADDAGestalt 39

WEB DESIGN NABA 2014 Roberto DADDAGestalt 40

WEB DESIGN NABA 2014 Roberto DADDAGestalt 41

WEB DESIGN NABA 2014 Roberto DADDA

Ambiguity

Gestalt 42

WEB DESIGN NABA 2014 Roberto DADDA 43 Gestalt

WEB DESIGN NABA 2014 Roberto DADDAGestalt 44

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

WEB DESIGN NABA 2014 Roberto DADDAGestalt 46

WEB DESIGN NABA 2014 Roberto DADDAGestalt 47

Roberto Dadda

www.dadda.itroberto@dadda.it+39 338 775 22 03Twitter, facebook, linkedin: robertodadda

top related