Gestalt Principless Applied to Web Design
-
Upload
christopher-white -
Category
Design
-
view
169 -
download
0
Transcript of 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.
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
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
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
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).
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.
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.
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.
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.
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.