Visual Hierarchy and Mind Motion in Advertising Design
Doaa Farouk Badawy Eldesouky
Assistant Professor
Faculty of Mass Communication Ahram Canadian University (ACU), Giza, Egypt
ABSTRACT
Visual hierarchy is a significant concept in the field of advertising, a field that is dominated by effective communication, visual recognition and motion. Designers of advertisements have always been trying to organize the visual hierarchy throughout their advertising designs to aid the eye to recognize information in the desired order, to achieve the ultimate goals of clear perception and effectively delivering the advertising messages. However many assumptions and questions usually rise on how to create effective hierarchy throughout advertising designs and lead the eye and mind of the viewer in the most favorable way. This paper attempts to study visual hierarchy and mind motion in advertising designs and why it is important to develop visual paths when designing an advertisement. It explores the theory behind it, and how the very principles can be used to put these concepts into practice. The paper demonstrates some advertising samples applying visual hierarchy and mind motion in a representation of applying the basics and discussing the results.
Keywords: visual communication, advertising, design basics, visual hierarchy, mind motion.
As a matter of fact, the human brain uses distinctive physical characteristics to differentiate objects from
others. These characteristics can be categorized into four aspects including character, alignment, size and color.
The aspect of color, which perceives texture, includes saturation, hue, and value. Size explains the surface area
of a structure while alignment is the aspect that describes the array of structures with regards to their
orientation, direction, or pattern (Feldsted, 1950). Character is the “curvilinearity” and ”rectilinearity” of
structures. In view of this, a distinction between structures can be drawn from the differences in these
characteristics.
Visual hierarchy is a significant concept in the field of advertising, a field that is dominated by visual recognition and motion. Designers of advertisements try to organize the visual hierarchy to aid the eye to recognize information in the desired order in an attempt to achieve a specific goal. Just the way grammar is organized with respect to the significance of each concept, the visual hierarchy in almost all advertising media is organized in a similar manner (Groeger, 2002).
Doaa Farouk Badawy Eldesouky
Assistant Professor
Faculty of Mass Communication Ahram Canadian University (ACU), Giza, Egypt
ABSTRACT
Visual hierarchy is a significant concept in the field of advertising, a field that is dominated by effective communication, visual recognition and motion. Designers of advertisements have always been trying to organize the visual hierarchy throughout their advertising designs to aid the eye to recognize information in the desired order, to achieve the ultimate goals of clear perception and effectively delivering the advertising messages. However many assumptions and questions usually rise on how to create effective hierarchy throughout advertising designs and lead the eye and mind of the viewer in the most favorable way. This paper attempts to study visual hierarchy and mind motion in advertising designs and why it is important to develop visual paths when designing an advertisement. It explores the theory behind it, and how the very principles can be used to put these concepts into practice. The paper demonstrates some advertising samples applying visual hierarchy and mind motion in a representation of applying the basics and discussing the results.
Keywords: visual communication, advertising, design basics, visual hierarchy, mind motion.
Introduction
Visual hierarchy is the order that the human eye follows when recognizing what it observes. Given a field of perception, the visual contrast between forms is involved in creating the order in question. The human mind begins by identifying the objects that have the highest contrast compared with their environment. Although the term visual art is most commonly applied in graphic design, the same concept can be used to explain perceptions in advertisements. Gestalt psychological theory is the basis upon which the concept of hierarchy is construed. This 20th century German theory recommends that the human intellect has an instinctive organizing propensity that “structure individual elements, shapes or forms into a coherent, organized whole” (Ian, 2008). The word Gestalt in English means “form,” “shape,” or “pattern” (Rune, 2010). Ideally, when a visual component set its self apart from the ‘whole’ shaped by a person’s intellect perceptual organization, it becomes very conspicuous in the eye of the observer. Usually, the shapes that are the most conspicuous are those that highly set themselves apart from their surroundings and identified by the viewer through mind motion.
Visual hierarchy is the order that the human eye follows when recognizing what it observes. Given a field of perception, the visual contrast between forms is involved in creating the order in question. The human mind begins by identifying the objects that have the highest contrast compared with their environment. Although the term visual art is most commonly applied in graphic design, the same concept can be used to explain perceptions in advertisements. Gestalt psychological theory is the basis upon which the concept of hierarchy is construed. This 20th century German theory recommends that the human intellect has an instinctive organizing propensity that “structure individual elements, shapes or forms into a coherent, organized whole” (Ian, 2008). The word Gestalt in English means “form,” “shape,” or “pattern” (Rune, 2010). Ideally, when a visual component set its self apart from the ‘whole’ shaped by a person’s intellect perceptual organization, it becomes very conspicuous in the eye of the observer. Usually, the shapes that are the most conspicuous are those that highly set themselves apart from their surroundings and identified by the viewer through mind motion.
Visual hierarchy is a significant concept in the field of advertising, a field that is dominated by visual recognition and motion. Designers of advertisements try to organize the visual hierarchy to aid the eye to recognize information in the desired order in an attempt to achieve a specific goal. Just the way grammar is organized with respect to the significance of each concept, the visual hierarchy in almost all advertising media is organized in a similar manner (Groeger, 2002).
Journal of Arts and Humanities (JAH), Volume -2, No.-2, March, 2013
(Figure 4)
Visual Hierarchy & leading the eye through visual paths
Several layout patterns are often recommended to take advantage of how people scan or read through a design. Three of the more common are the Gutenberg diagram, the z-pattern layout, and the f-pattern layout. Each offers advice for where to place important information, but these patterns are often misunderstood and followed without thought to what they really describe.
1- The Gutenberg Diagram
The Gutenberg diagram describes a general pattern the eyes move through when looking at evenly distributed, homogenous information. This pattern applies best to text-heavy content, like pages in a novel or a newspaper, as this pattern isn’t meant to describe every possible design.
The Gutenberg diagram divides the layout into 4 quadrants (figure 3);
Naturally this is for left to right reading languages and would be reversed for right to left reading languages.
The Gutenberg diagram suggests that the strong and weak fallow areas fall outside this reading gravity path and receive minimal attention unless emphasized visually in some way.
Important elements should be placed along the reading gravity path. For example, placing logo or headline in the top left, an image, or some important content in the middle, and a call-to-action or contact information in the bottom right.
Designs that follow Gutenberg are said to be in harmony with natural reading gravity.
The claim is these designs improve reading rhythm, by being in harmony with the natural reading rhythm, as well as improving reading comprehension, but there’s little empirical evidence to support the claim.
2- Z-Pattern Layout
As you would expect the z-pattern layout follows the shape of the letter z. Readers will start in the top/left, move horizontally to the top/right and then diagonally to the bottom/right before finishing with another horizontal movement to the bottom/right (Figure 4). The z-pattern is sometimes called a reverse-s-pattern, which might indicate more of a curved path as opposed to the hard angled path. Otherwise they’re basically the same thing.
(Figure 6)
The main difference with the Gutenberg diagram is that the z-pattern suggests viewers will pass through the two fallow areas. Otherwise they still start and end in the same places and still pass through the middle.
As with Gutenberg a designer would place the most important information along the pattern’s path. The z- pattern is good for simple designs with a few key elements that need to be seen. Any storytelling aspect of the design would follow the path of the z.
- Golden Triangle Pattern
The z-pattern also leads to what’s called a golden triangle pattern. If you take the first horizontal and first diagonal movement and then close the shape you end up with a right triangle whose right angle is the top/left corner.
This triangular area at the top of the page will be the area most seen and the pattern suggests your most important information needs to be placed inside of it.
(Figure 7)
- Zig-Zag Pattern
We can extend this pattern a little by seeing it more as a series of z-movements instead of one big z- movement(Figure 5). Common sense would dictate this is more realistic as the reader will continue to move to the right and then a little down and back to the left before starting another horizontal movement to the right again.
154 | P a g e
(Figure 7)
As with the other patterns the eye starts in the top/left, moves horizontally to the top/right and then comes back to the left edge before making another horizontal sweep to the right. This second sweep won’t extend as far as the first sweep.
Additional sweeps move less and less to the right and for the most part after the second major sweep the eye sticks close to the left edge as it moves downs.
The f-pattern suggests that:
(Figure 4)
Visual Hierarchy & leading the eye through visual paths
Several layout patterns are often recommended to take advantage of how people scan or read through a design. Three of the more common are the Gutenberg diagram, the z-pattern layout, and the f-pattern layout. Each offers advice for where to place important information, but these patterns are often misunderstood and followed without thought to what they really describe.
1- The Gutenberg Diagram
The Gutenberg diagram describes a general pattern the eyes move through when looking at evenly distributed, homogenous information. This pattern applies best to text-heavy content, like pages in a novel or a newspaper, as this pattern isn’t meant to describe every possible design.
The Gutenberg diagram divides the layout into 4 quadrants (figure 3);
-
Primary optical area located in the top/left
-
Strong fallow area located in the top/right
-
Weak fallow area located in the bottom/left
-
Terminal area located in the bottom/right
The pattern suggests that the eye will sweep across and down the page in a series of horizontal movements called axes of orientation. Each sweep starts a little further from the left edge and moves a little closer to the right edge. The overall movement is for the eye to travel from the primary area to the terminal area and this path is referred to as reading gravity.
Naturally this is for left to right reading languages and would be reversed for right to left reading languages.
The Gutenberg diagram suggests that the strong and weak fallow areas fall outside this reading gravity path and receive minimal attention unless emphasized visually in some way.
Important elements should be placed along the reading gravity path. For example, placing logo or headline in the top left, an image, or some important content in the middle, and a call-to-action or contact information in the bottom right.
Designs that follow Gutenberg are said to be in harmony with natural reading gravity.
The claim is these designs improve reading rhythm, by being in harmony with the natural reading rhythm, as well as improving reading comprehension, but there’s little empirical evidence to support the claim.
2- Z-Pattern Layout
As you would expect the z-pattern layout follows the shape of the letter z. Readers will start in the top/left, move horizontally to the top/right and then diagonally to the bottom/right before finishing with another horizontal movement to the bottom/right (Figure 4). The z-pattern is sometimes called a reverse-s-pattern, which might indicate more of a curved path as opposed to the hard angled path. Otherwise they’re basically the same thing.
Visual Hierarchy and Mind Motion in Advertising Design
Doaa Farouk Badawy Eldesouky
Doaa Farouk Badawy Eldesouky
(Figure 6)
The main difference with the Gutenberg diagram is that the z-pattern suggests viewers will pass through the two fallow areas. Otherwise they still start and end in the same places and still pass through the middle.
As with Gutenberg a designer would place the most important information along the pattern’s path. The z- pattern is good for simple designs with a few key elements that need to be seen. Any storytelling aspect of the design would follow the path of the z.
- Golden Triangle Pattern
The z-pattern also leads to what’s called a golden triangle pattern. If you take the first horizontal and first diagonal movement and then close the shape you end up with a right triangle whose right angle is the top/left corner.
This triangular area at the top of the page will be the area most seen and the pattern suggests your most important information needs to be placed inside of it.
(Figure 7)
- Zig-Zag Pattern
We can extend this pattern a little by seeing it more as a series of z-movements instead of one big z- movement(Figure 5). Common sense would dictate this is more realistic as the reader will continue to move to the right and then a little down and back to the left before starting another horizontal movement to the right again.
154 | P a g e
It’s how we naturally read large blocks of text. This series of z-movements is sometimes referred to as a “zig-zag”
pattern. If we continue to add more zigs and zags to the pattern we ultimately end up with a series of near
horizontal right and left movements as the diagonal portion of the z gets shallower and shallower.
3- F-Pattern Layout
(Figure 6)
The f-pattern gets mentioned on the web and as you would expect it follows the shape of the letter F. Jacob
Nielsen first suggested the pattern after eye-tracking studies his company performed. What often gets lost in the
f-pattern is that these original studies were done on online text heavy designs and search results.
(Figure 7)
As with the other patterns the eye starts in the top/left, moves horizontally to the top/right and then comes back to the left edge before making another horizontal sweep to the right. This second sweep won’t extend as far as the first sweep.
Additional sweeps move less and less to the right and for the most part after the second major sweep the eye sticks close to the left edge as it moves downs.
The f-pattern suggests that:
-
Important information should be placed across the top of the design where it will generally be read.
-
Lesser information should be placed along the left edge of the design often in bullet points where little
horizontal eye movement is required to take everything in.
-
People don’t read online. They scan.
Fortunately the pattern seems to get applied to everything online instead of only text-heavy content. When applying the f-pattern the designer thinks scanners and places content these scanners would most likely be interested in along the F. Placing important information at the top, and information designed to pull someone further into the page down the side.
However in this case a designer must keep in mind that if someone scanning the page finds it interesting, they will read more, so placing information in places outside the F for those people who will read will be of a great effect.
It’s important to understand these patterns describe where the eye naturally goes when there’s a lack of hierarchy in the design. They describe natural patterns for evenly distributed and text-heavy content. So these patterns can be used to induce visual hierarchy to most designs and designs that include more than just text.
Focal Points
The pattern of focal points says that people will first look at the most dominant element; the element or area with the greatest visual weight on the page.
From there the eye will follow paths from the dominant element to other focal points in the design. The order will depend on the relative weights of these focal points as well as any visual cues indicating where to look next.
No comments:
Post a Comment