gestalt principles of perception

79
Design principles Basic design theory for UI/UX design Created by / using reveal.js by edokoa @edokoa Hakim El Hattab

Upload: javier-diaz

Post on 17-Dec-2014

2.025 views

Category:

Design


5 download

DESCRIPTION

Those are the slides of my talk at Open Tech School Berlin dealing with some design fundamentals for UI/UX designers. It contains explanations and examples for some Gestalt principles of perception.

TRANSCRIPT

Page 1: Gestalt principles of perception

Design principlesBasic design theory for UI/UX design

Created by / using reveal.js by edokoa @edokoa Hakim El Hattab

Page 2: Gestalt principles of perception

Who am I?My name is Javier Díaz a.k.a.

I'm a freelance designer

@edokoa

Page 3: Gestalt principles of perception

Gestalt Principles of Visual PerceptionHow the brain perceives complex surroundings and converts this

information to easier to process unitary information.

Page 4: Gestalt principles of perception

Figure / Ground relationshipElements are perceived as either figures (distinct elements of focus) or

ground (the background or landscape on which the figures rest).

Page 5: Gestalt principles of perception
Page 6: Gestalt principles of perception
Page 7: Gestalt principles of perception
Page 8: Gestalt principles of perception

In UI/UX

Page 9: Gestalt principles of perception
Page 10: Gestalt principles of perception
Page 11: Gestalt principles of perception
Page 12: Gestalt principles of perception
Page 13: Gestalt principles of perception

Contrast is key

Page 14: Gestalt principles of perception
Page 15: Gestalt principles of perception
Page 16: Gestalt principles of perception
Page 17: Gestalt principles of perception
Page 18: Gestalt principles of perception
Page 19: Gestalt principles of perception
Page 20: Gestalt principles of perception
Page 21: Gestalt principles of perception

ProximityElements closer to each other are perceived more related to each other.

Page 22: Gestalt principles of perception
Page 23: Gestalt principles of perception
Page 24: Gestalt principles of perception
Page 25: Gestalt principles of perception

In UI/UX

Page 26: Gestalt principles of perception
Page 27: Gestalt principles of perception
Page 28: Gestalt principles of perception
Page 29: Gestalt principles of perception
Page 30: Gestalt principles of perception
Page 31: Gestalt principles of perception
Page 32: Gestalt principles of perception

SimilarityElements that share common attributes are perceived to be more

related than those that don't.

Page 33: Gestalt principles of perception
Page 34: Gestalt principles of perception
Page 35: Gestalt principles of perception
Page 36: Gestalt principles of perception
Page 37: Gestalt principles of perception

In UI/UX

Page 38: Gestalt principles of perception
Page 39: Gestalt principles of perception
Page 40: Gestalt principles of perception
Page 41: Gestalt principles of perception
Page 42: Gestalt principles of perception
Page 43: Gestalt principles of perception

Uniform ConnectednessElements connected by uniform visual properties are perceived to be

more related than those not connected.

Page 44: Gestalt principles of perception
Page 45: Gestalt principles of perception
Page 46: Gestalt principles of perception
Page 47: Gestalt principles of perception

This is the strongest of thegestalt principles

It generally overpowers Similarity and Proximity

Page 48: Gestalt principles of perception
Page 49: Gestalt principles of perception
Page 50: Gestalt principles of perception

In UI/UX

Page 51: Gestalt principles of perception
Page 52: Gestalt principles of perception
Page 53: Gestalt principles of perception
Page 54: Gestalt principles of perception

ClosureWhen confronted with a set of elements, the human brain tries to find

recognizable patterns and automatically fill in the gaps.

Page 55: Gestalt principles of perception
Page 56: Gestalt principles of perception
Page 57: Gestalt principles of perception
Page 58: Gestalt principles of perception

Law of Prägnanz (Conciseness)The brain tends to interpret ambiguous images as simple and complete,

versus complex and incomplete.

Page 59: Gestalt principles of perception
Page 60: Gestalt principles of perception
Page 61: Gestalt principles of perception
Page 62: Gestalt principles of perception

The combination of those twoprinciples is really powerful

They rely heavily in the psyche and experience of the user.

Page 63: Gestalt principles of perception
Page 64: Gestalt principles of perception
Page 65: Gestalt principles of perception
Page 66: Gestalt principles of perception
Page 67: Gestalt principles of perception
Page 68: Gestalt principles of perception

In UX/UI

Page 69: Gestalt principles of perception
Page 70: Gestalt principles of perception
Page 71: Gestalt principles of perception
Page 72: Gestalt principles of perception
Page 73: Gestalt principles of perception

ConclussionsContrast is a key factor in design.Position of elements does not only have an aestethic purpose.We can use visual similarities, connections & dividers to create strongrelationships.We can tell complex stories by using simple images.

Page 74: Gestalt principles of perception

Bibliography & Further research

Page 75: Gestalt principles of perception
Page 76: Gestalt principles of perception
Page 77: Gestalt principles of perception
Page 78: Gestalt principles of perception

Interested in this?Contact OPEN TECH SCHOOL

Page 79: Gestalt principles of perception

THANK YOU@edokoa