Whether you’re dealing with screen or print media, you have content—words and images—that needs to be organized into a layout. Visual hierarchy is the organization and prioritization of content as a means to communicate a message.
Designers need to make very intentional decisions when it comes to prioritizing content.
- Where do you want your audience to look first?
- What is the call-to-action that you need to draw attention to?
Hierarchy guides the user from one element to the next, ideally in a flow that corresponds to the content’s message. Also keep in mind that if you give visual importance or weight to too many elements, everything becomes flat.
It’s like saying you have ten ‘favorite’ flavors of ice cream. Elements should not have to compete for our attention. Let the content shine and and make sure graphic elements don’t distract.
1. On Visual Hierarchy
Explains Visual Hierarchy quite simply. By using color, contrast, texture, shape, position, orientation, and size, one can organize elements on a page so that users gets a sense of visual importance.
A common mistake that I have made often: If you make everything bold, nothing is bold.
A shortcut to feel the visual hierarchy of something that you’ve created - Blur out everything and just look at the hotspots i.e. areas where your eye automatically focuses on.
"When positioning elements on a page I like to work in gray tones first, like the screenshot above. You can do a lot with just contrast and sometimes colors get in the way early on. However, once you achieve a solid foundation on position and weight, color can take the visual importance even further."
"Nail down the purpose of each page element, and then dress it up." - True for webpages and apps alike.
2. Understanding Visual Heirarchy in Web Design
"At its core, design is all about visual communication."
Differences in scale suggest that one object is closer to us than another or that one is more dominant than the other; Variations in color might suggest that one object holds a unique personality that sets it apart from the other object. A lot of information can be delivered in just a single image by using some very rudimentary tools.
The proximity, scale, and similarity of the text formatting allows a reader to organize the lower example into titles and paragrahs. The hierarchy gives the titles more meaning than the other information, and makes it easier to scan.
The Hierarchists Toolbox
- Size: Because size is one of the most powerful forms of organization, it’s important to correlate size with importance in a design.
- Color: Color is an interesting tool because it can function as both an organizational tool as well as a personality tool. Bold, contrasting colors on a particular element of a website will demand attention (such as with buttons or error messages or hyperlinks). When used as a personality tool, color can extend beyond into more sophisticated types of hierarchy; Using lush, comforting colors can bring an emotional appeal to a page.
- Contrast: Contrast shows relative important. Dramatic shifts in text-size or color will impart a message that something is different and requires attention. Changing from a light background color to a dark background color can quickly separate the core content of a page from the footer.
- Alignment: Alignment creates order between elements. It can be as simple as the difference between a “content column” and a “sidebar column”, but alignment can also take on more complex hierarchical roles.
- Repetition: Repetition assigns relative meaning to elements
- Proximity: Proximity separates elements from each other and creates sub-hierarchies. Within a page there might be widgets that are separated from each other by space; within those widgets there is a new hierarchy of title, subtitle, and content. Proximity is also the quickest way to associate similar content.
- Density and Whitespace: When a page is designed “just right”, the eye will easily recognize when elements are related and when they aren’t
- Style and Texture
An Exercise to Test Visual Hierarchy
1. List the key information points that visitors are likely seeking.
2. Assign values (1-10) according to their importance to the average visitor.
3. Now, look at the actual design again.
4. Assign values (1-10) according to the actual visual importance as you see it in the live design.
5. Consider: Does the expected importance match up with the actual designed importance?
3. Hierarchy as Expressed Through Typography
Being able to interpret the connotations of different typefaces is valuable. For example, large, bold full-caps sans-serif typefaces are highly visible, but they are frequently used to warn of danger, and they dramatically increase the significance of certain words within the overall design.
Hierarchy based on type is usually shaped by relationships of visual texture and tone; that is, letterforms, words and lines of type come together to form different tonal values and varying characteristics of patterns or texture.
Position and orientation in a layout can have far less of an impact than depth of tone or typographic texture. A piece of type can be arresting wherever it is positioned, providing it has sufficient visual strength. If the information that follows is given lower tonal values, then a visual hierarchy will have been established, regardless of positioning.
The key to creating hierarchy is contrast, which can come from simple changes in weight, scale, positioning, color, tone or font. Although this might sound easy, it can be complex. For example, altering line spacing or inter-character spacing can certainly add character, but it could also increase or decrease the tone of the type.
A simple and very general starting point for creating contrast is to combine one serif font with a sans-serif partner. Fonts with multiple weights prove to be the most useful. Faces from the same family also sit well together. Pairing two serif or two sans-serif fonts together would not be impossible, but would be much more demanding and time-consuming to pull off.
Bright and vibrant colors tend to attract us, while softer paler colors can be used to subdue detail. Certain colors have different associations in different cultures. You’ll need to carefully select not only the hue, but also the tone of a color.
An excellent way to test prominence and priority created by combinations of color is to view a design in grayscale. Inevitably, if the background’s tone is dark, it will merge with darker shades and throw out lighter colors, and vice versa.
We might imagine that a small amount of type in a large amount of space is an ideal situation, but making the type, images and space work well together without seeming forced is rather hard. As with an odd number of columns, an asymmetric balance is likely more powerful, while a center-positioned design might appear static and less dynamic.
+Many more links
4. How Well Does Your Design Communicate?
Visual hierarchies create centers of interest on your page, communicate additional meaning through convention and repetition, highlight actions you want your visitors to take, and establish patterns of movement and flow.
Contrast shows relative importance. Without being told you know the larger text is more important than the smaller text. An h1 heading is bigger than an h2 heading is bigger than an h3 heading. Bigger grabs our attention first and so comes across as more important.
Repetition attaches meaning to new elements. Think blue underlined links. You’ve seen them before and the next time you see them you bring with you information about them. Repetition instantly communicates that elements are at the same level in the hierarchy.
Alignment creates order. It allows you to quickly connect elements across the page and helps define start and end points. Think grids.
A single element that breaks the established alignment calls attention to itself and it’s importance. Think of a pull quote. Visually it gives you clues it’s an important concept taken from within the text.
Proximity groups elements within a hierarchy and creates new sub hierarchies. Your home page has three offers for different products or services. Each might have a heading, a descriptive paragraph, an image, and a link to more information. The specific design elements would be on a different hierarchical level, but each offer (by containing the same 4 elements) connects the offers as being at the same hierarchical level.
Size – As you would expect larger elements carry more weight
Color – It’s not fully understood why, but some colors are perceived as weighing more than others. Red seems to be heaviest while yellow seems to be lightest.
Density – Packing more elements into a given space, gives more weight to that space
Value – A darker object will have more weight than a ligher object
Whitespace – Positive space weighs more than negative space or whitespace
V Imp for future - The 7 Components of Design
Color Part I: Color Theory: http://www.vanseodesign.com/web-design/color-theory/
Color Part II: How to Use Color: http://www.vanseodesign.com/web-design/color-meaning/
5. Contrast & Meaning
The vocabulary of artistry is found largely within the fundamentals of line, form, color, and texture.
For instance, angular lines and forms are generally indicative of strength, speed, and masculinity, while rounded lines and forms are generally associated with softness, slower tempo, and femininity.
Communicative grammar is generally defined by contrast, balance, harmony, and distribution. These are the building blocks of composition, and they help convey context and manipulate relationships among content elements.
6. Visual Hierarchy and Weight
Visual heirarchy sets the context.
Overall the sense of all these articles was to explain the concept of Visual Heirarchy and various factors helping to create a good heirarchy. Knowing this would help set the alleged “common sense of design”.