I said it before and I’ll say it again: I hope my design work invites the viewer to become involved, gets them to act for a cause, educates and informs. In the simplest of terms, inspires and motivates the viewer to do something. One way to accomplish this goal is ensuring I have established visual hierarchy when placing the different elements into my design. How these elements interact and engage with each other relates directly to how well the piece communicates to my intended audience.
Wikipedia.org defines visual hierarchy as the order in which the human eye perceives what it sees. Visual hierarchy is a group of visual elements arranged according to emphasis. (1)
Visual design aspires to communicate some sort of message to an intended audience. How you organize and prioritize the elements in your design conveys valuable information to the viewer about how important they are. Visual hierarchy helps the viewer comprehend, reinforces your message, and guides your target audience through your story. Establishing hierarchy in design is simply organizing objects (type, imagery, etc) into different levels of relative significance. Visual hierarchy creates organization and prioritization through the use and placement of visual elements.
Using basic design principles allows you to emphasize one element over another so more important content looks and presents as more important. Placing the elements so they are on the same level of visual hierarchy can create a sense of visual tension, a visual tug of war of sorts. This visual struggle can result in the design feeling cluttered and disorganized leaving the viewer confused. Don’t get me wrong; some visual tension is a good thing to have for it offers a sense of energy and movement. The issue occurs when everything in the composition is screaming, “look at me!”
Properly established visual hierarchies create focal points in your design, communicate additional meaning through convention and repetition, highlight actions you want your visitors to take and establish patterns of movement and flow. (2) Try asking yourself this simple question: what do I want the viewer to see first, second, third? Placing the elements in the composition according to the predetermined numbered list is a simple but effective way to start establishing visual hierarchy.
I mentioned the principles of design and want to ensure I offer you a list of some of these to help offer more clarity (3): I say “some” for there is really is no definitive list and we can add any number of additional elements to it. Please feel free to do so!
Alignment
The way different objects within a composition are spaced to each other.
Balance
Designs in balance have the parts of the design arranged in a planned, coherent visual pattern. "Balance" is a concept based on human perception and the complex nature of the human senses of weight and proportion. Humans can evaluate these visual elements in several situations to find a sense of balance. A design composition does not have to be symmetrical or linear to be considered balanced. It is also true that perfectly symmetrical and linear compositions are not necessarily balanced. Asymmetrical or radial distributions of text and graphic elements can achieve balance in a composition.
Contrast
Distinguishing by comparing/creating differences. Some ways of creating contrast among elements in the design include using contrasting colors, sizes, shapes, locations, or relationships. For text, contrast is achieved by mixing serif and sans-serif on the page, by using very different type styles, or by using type in surprising or unusual ways. Another way to describe contrast, is to say "a small object next to a large object will look smaller". As contrast in size diminishes, monotony is approached.
Emphasis
Making a specific element stand out or draw attention to the eye. Emphasis can be achieved in graphic design by placing elements on the page in positions where the eye is naturally drawn, by using other principles such as contrast, repetition, or movement. Bold and italic type provides emphasis for text. Graphic elements gain emphasis through size, visual weight, color, complexity, uniqueness, placement on the page, and other features.
Gestalt
Sometimes considered a distinct principle of design, gestalt is the concept that "the whole is greater than the sum of its parts." Gestalt is a concept from psychology, where theorists note the propensity of humans to conceptually group things together to make a meaningful whole. When viewing designs, humans apply this principle unconsciously by seeing connections and relationships among and between the elements in the design. The overall perception of gestalt in a design is created through harmony, unity, balance, proportion, proximity, and other visual cues. Designers can use this principle to create visual connections and relationships that clarify and strengthen the overall "feel" and meaning of the design.
Harmony
As with music, graphical elements can be said to be working in harmony - the individual parts come together as visually compelling and a meaningful whole. Disharmony can also be used just as it is in musical compositions: to enhance the emotional complexity, to challenge the viewer, and to give a contrast within the overall composition.
Movement
Movement is creating instability, making motion to blur the image. Movement can be achieved by using graphic elements that direct the eye in a certain direction such as arrows that point the way overtly or a series of lines or dots that get progressively larger or smaller, creating a more subtle sense of movement. Movement can be accomplished simply by using a photograph or clip art of something moving - a runner - as opposed to something stationary - a person standing.
Proportion
This indicates the relative visual size and weight of particular graphical elements in a design composition.
Proximity
Closeness or distance of individual design elements. Close proximity indicates a connection.
Repetition
Repeating a sequence; having it occur more than a few times. In design, repetition creates visual consistency in page designs, such as using the same style of headlines, the same style of initial capitals, or repeating the same basic layout from one page to another.
Excessive repetition (monotony) may lead to boredom and uninteresting compositions. If one cannot avoid excessive repetitions for any reason, do not forget to add some visual breaks and white spaces where eyes can rest for a while.
Rhythm
Successful designs have an effective ebb and flow. Text and graphics should seem to be paced and patterned. Spacing is an effective application of this principle. Second, human beings are more comfortable with variation in general. Psychologically, most any serious lack in variation of anything (a solid, a line, a sound, a situation) can become very boring. Adding a little variation at non-specific intervals (every now and again) gives most any design an interesting appeal as long as it is not overdone.
In setting type, rhythm can be created or disrupted. Compare the gibberish strings, "as erav mono ewone zenao oro remuna oravanam" and "githol urtym reislyt quadirit". Notice how the latter seems to be more organic and readable than the former. This is resultant of two things. One, the eye more easily follows abnormalities and variation, like an ocular foothold. Too-narrow columns result in over-hyphenation. Images that interrupt a passage of text can break the rhythm for the reader and they could disturb the visual appearance of the page.
Unity
Unity creates a feeling of wholeness. Unity is usually achieved when the parts complement each other in a way where they have something in common. Unity can be achieved by use of the same color, or different tints of it, or using a similar graphic style for illustrations.
White Space
Areas of a design devoid of text or graphics. White space includes margins, gutters, space between lines of type (leading), off-set of text from images (text wraps) and any other part of the page that is empty. White space is also analogous to "negative space" where "positive space" is defined as images, blocks of text, and other graphical elements. In graphic design, the white space, or negative space, is considered an important element of the overall design. It is used - and evaluated - based on the same criteria as the rest of the elements in the design. White space can add to or detract from the balance, unity, harmony, rhythm, and overall success of a design. White space can give emphasis, contrast, and movement. It can be used for repetition and pattern, and work within various relationships with other elements of the positive and negative spaces in the design.
Perhaps a visual example will help cement the idea of establishing visual hierarchy for you. (4)
Above is text without any visual hierarchy established. This formatting is acceptable, if it comes as a mobile text message, but in a layout this arrangement fails to guide and help the user getting information.
So let’s add in some of the design principles outlined above to help establish visual hierarchy. One design principle we can utilize is proportion. The level of attention on a specific element can be decided with typography scale, weight, and alignment. Yes, simply formatting the typography alludes to what the viewer should read first, second and so on. Further detailing can be done using color, texture, shape and even by layering the elements to support the visual hierarchy even more. Establishing visual hierarchy in your layout supports your message and justifies the importance of design details. It helps establish visual priorities in your intended communication. Do you see the difference?!
Below are some excellent resources you might want to reference if you are exploring ways to establish visual hierarchy in your designs.
How To Create A Visual Hierarchy
http://theelearningcoach.com/media/graphics/how-to-create-a-visual-hierarchy/
Understanding Visual Hierarchy in Web Design (many of these principles can be applied to many other design mediums)
http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/
Blog Resources:
(1) Visual Hierarchy:
http://kellysevernscurtis.com/art140/art140_visual.htm
(2) Visual Hierarchy: How Well Does Your Design Communicate?
http://www.vanseodesign.com/web-design/visual-hierarchy/
(3) Graphic Design/Principles of Design: http://en.wikibooks.org/wiki/Graphic_Design/Principles_of_Design
(4) designjunction.in / blog
http://designjunction.in/blog/2009/08/31/visual-hierarchy-and-typography/
No comments:
Post a Comment