Gestalt Principless Applied to Web Design

10
PrinciplesSimilarity GESTALT Things that are similar are perceived to be more related than things that are dissimilar. Here we see similarity played out within the various stylings. The difference in stylings within the feature communicate the difference in category, context or purpose.

Transcript of Gestalt Principless Applied to Web Design

Page 1: Gestalt Principless Applied to Web Design

Principles︱SimilarityG E S T A L TThings that are similar are perceived to be more related than things that are dissimilar.

Here we see similarity played out within the various stylings. The difference in stylings within the feature communicate the difference in category, context or purpose.

Page 2: Gestalt Principless Applied to Web Design

Principles︱ProximityThings that are close to one another are perceived to be more related than things that are spaced farther apart.

In the example above, proximity clearly indicates relatedness and relative associations. There are multiple groupings throughout this image that imply you will find different information there.

G E S T A L T

Page 3: Gestalt Principless Applied to Web Design

Principles︱ClosureWhen presented with less than the full picture, we attempt to employ the principle of closure to fill in missing information and form a complete image or idea

Closure is at work here within the spacing between bodies of text and images. The groupings of text and images create larger sections for their own sub-cate-gories. Gradients are also applied to headers of categories that start square and rectangular shapes that the viewer completes his/her self.

G E S T A L T

Page 4: Gestalt Principless Applied to Web Design

Principles︱ContinuityElements arranged on a line or curve are perceived to be more related than elements not on the line or curve.

On this page continuity is work within the rows of images that are creating sub categories for the viewer to establish groupings.

G E S T A L T

Page 5: Gestalt Principless Applied to Web Design

G E S T A L TPrinciples︱Common FateHumans tend to perceive elements moving in the same direction as being more related than elements that are stationary or that move in different directions.

Common fate is established through the grouped sub categories that are found by moving the cursor over the sidebar on the left side of the page. The way that sub-menu items move into visibility as distinct groupings of elements all moving in concert shows us that the grouped links are related (within each group).

Page 6: Gestalt Principless Applied to Web Design

Principles︱SymmetryElements arranged on a line or curve are perceived to be more related than elements not on the line or curve.

G E S T A L T

Below the header on this page symmetry is created using images on the screen displaying the sitees content in a a structured grid like style.

Page 7: Gestalt Principless Applied to Web Design

G E S T A L TLaws︱EmergenceThe total is more than the sum of the parts.

Here the links that are scattered throughout the text pop out from the page and imply that there is more to them than just words in a paragraph. They highlight information and bounce the viewers attention throughout the page.

Page 8: Gestalt Principless Applied to Web Design

Laws︱ReificationYou percieve more than is visualizedG E S T A L T

Using the principle of closure, reification occurs on this page in its header. There are obvious rectangular shapes started around the logo and main links that due to their visual allignment, become visible to the viewer.

Page 9: Gestalt Principless Applied to Web Design

G E S T A L TSimple objects are recognized independently of rotation, scale, deformation and style.

Laws︱Invariance

Using similarity, invariance is created through the various buttons on and above the header. The viewer knows they are all buttons regardless of what shape they are or where they are located on the screen.

Page 10: Gestalt Principless Applied to Web Design

Laws︱Multi-StabilityAmbiguous perceptual experiences oscillate between alternative interpretations.

G E S T A L T

Using similarity, invariance is created through the various buttons on and above the header. The viewer knows they are all buttons regardless of what shape they are or where they are located on the screen.