Gestalt and Design: Focal Point
This week's installment of gestalt and design looks at the Principle of Focal Point.
Focal Point
A visual element that stands out will be the first to catch and hold the user’s attention.
In image A, the triangle is the focal point as it is the only visual element against a white background and therefore immediately draws the eye to it. The triangle is the focal point in image B as well because it is different from the squares so therefore stands out.
Focal points can be created in several different ways including proportions, contrast, and physical relationship with other visual elements.
There are several ways to create contrast. One way is through color as seen in the image above. The dark call to action button immediately draws attention to the light background.
Shape is another way contrast is created to catch attention. In the image above, the starburst shape would be the focal point.
When a visual element is larger than the others it is likely to grab attention. For example, the words “creative bunch” stands out as the focal point in the image above.
A visual element’s relation to other elements can affect its visual weight.
In the image above, the arrow points to the word “crypto” drawing the eye to it.
Focal points create a visual hierarchy as they guide the user where to look next. In the image above, the watch would be the first place the user looked. The hands guide the user towards the text by pointing at it.
An image may consist of a single or multiple focal point.
In the image above, the word “Valentine’s Day”, the maroon circle, and the shop now button are all focal points and stand out amongst the light background.
Multiple focal points are often organized on different levels of dominance. For the most part, people perceive three levels, being what’s the most dominant, the least dominant (subordinate), and everything else (subdominant).
The image above shows three levels of dominance. The triangle is the dominant focal point as it is the object with the most visual emphasis. The lavender squares are the subdominant focal point, as they have less emphasis than the triangle, but more emphasis than the gray squares. This makes the gray squares the subordinate with the least visual emphasis that almost fades into the background.
Creating different levels of dominance creates visual hierarchy which helps the flow and makes it more digestible to the user. This is illustrated in the examples below.
Sources:
- https://www.interaction-design.org/courses/gestalt-psychology-and-web-design-the-ultimate-guide
- https://www.interaction-design.org/literature/article/emphasis-setting-up-the-focal-point-of-your-design
- https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/
Check out the other articles in the Gestalt and Design series
