Visual Screen Design

Week 3 Gestalt

"A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away Antoine de Saint-Exupery

Emiel.ruis@han.nl @mastermiel

Gestalt

The way things are placed or are composed.

Gestalt

Gestalt is about human perception.

Gestalt - Founders

Wolfgang Khler

Kurt Koffka

Max Wertheimer

Gestalt - Founders

Why do we see certain things as foreground and others as background?

Gestalt - Founders

How can we distinguish different shapes?

Gestalt - Founders

What is a good shape?

Gestalt - Founders

How we see things in context?

Closure

If there is a part missing we usually try to add it and recognize the object as the most common object we know. Although the shapes arent fully shown we can recognize the shapes. There are websites using closure;

Three big categories make our eyes to seperate the grids as three boxes automatically

There is no grid line but once again it makes our eyes separate the grids as three boxes.

Continuity

Our eyes are invited to follow something that guids them. It happens in web design as well. We usually let ourselves be guided by the previous object.

Continuity

Use the gorilla to lead the viewers eye to the right side to sign in.

Continuity

Use the red shirt boy to lead the viewers eyes to the hook, the fish, and then home area.

Similarity

We tend to group similar looking items together so viewers can recognize them easily.

Similarity

Use the eye-catching icon on the right top. The orange icons really pull attention and since the icons have the same colors, it will be the same for its function, right?

Proximity

Things that are close together are as seen as belonging together.

Proximity

Fundo los paltos has few categories in the right above and viewers can switch it as they want. If you hover at that place, it will show a few more sub specifically.

Proximity

Nissan usa has six categories and visualizes this with six icons around a circle. Although they have different colors, they are all close to eachother closer, so its percieved as a whole composition.

Figure and Ground

Just like the name; figure and ground. It means that there are two different visuals that are merged to become one. Foreground and background are mixed up to become a complex one and show a different point of interest.

Figure and Ground

Figure and Ground