Gestalt Laws – Website

May 30, 2011 No Comments by

In the previous article it has already explained about gestalt laws and several examples in logo. Now gestalt will accompanying website. The subject will be same as before, there are closure, continuity, similarity, proximity, and figure and ground.

 

CLOSURE

If there is missing spot at something, we usually trying to add it and recognizing the object as the ordinary thing we saw. Although the shapes aren’t fully covered but we can recognize the shapes. There are websites using closure;

 

 

 

 

 

 

 

 

 

 

Three big categories in icblind make our eyes to separate the grids as three boxes automatically.

 

 

 

 

 

 

 

 

 

 

 

dbushell did the same. 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 guided us. It happened on web design either. Without any arguing we usually let ourselves become guided by the previous object or recognizing.

Websites using continuity law;

 

 

 

 

 

 

 

 

 

Mailchimp interact the gorilla to let the viewers see the right side to sign in.

 

getmefast interact the red shirt boy to let the viewers eyes come to the hook, the fish, and then home area.

 

 

SIMILARITY

We usually tend to group similar item together so viewer can also recognize easily with some tools or other things.

Websites below using similarity law;

lega-lega use the eye-catching icon on the right top. The orange icon really make an attention and since the icons has the same colors, it will be the same for its function, right?

 

youzee also use green neon color on black background to attract viewers, and I think it is successful. The unique icon, although it has a different item but it explain the same. It is about watching and a film.

 

 

PROXIMITY

Things that are close togetherness as seen as belonging together.

Websites using proximity laws;

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

 

nissanusa has six categories and it visualizes attracting with six icons around a circle. Although they are on a different colors but because they are all around each other closer, so it can seen as a whole composition.

 

 

FIGURE AND GROUND

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


Images above, what do you see? Two people in close distance, or vintage vase? Both of them are true, it depends on your first view; the black one or the white one area.

Websites using figure and ground law;

real-visuals

es bueno

 

Question : Are there possible to using some Gestalt laws in one appearance? The answer is, Yes, you could.

http://www.nissanusa.com/leaf-electric-car/index#/leaf-electric-car/tags/show/specsnbi

Design

About The Author

I am a design graphic student in Indonesia. I like all about art, design, and others related of them. And blogging is fun too! I love blogging; sharing about art and design, shared about what we know and we can exchange our ideas and opinion one another, and it is cool.
No Responses to “Gestalt Laws – Website”

Leave a Reply

Anti-Spam Protection by WP-SpamFree