Try this experiment: place your hand over your finished design for just two seconds, then look again and ask yourself one thing: what did you see immediately? If your answer isn’t the main point, what’s probably wrong isn’t the absence of a texture, icon, gradient, or additional shape. What’s needed is stronger visual hierarchy instead of more ornamentation.
Visual hierarchy is the sequence by which a viewer consumes the information on your canvas. In a novice graphic design assignment, it’s easy to lose your grip on that sequence. A heading, subheading, image, button, logo, and decorative shape can all have a job to do, but they can’t all be as attention-hungry. When each element competes equally for attention, the viewer is left too puzzled to determine where to start. Even the busiest designs can feel jumbled to the eye, as it hops from item to item.
The first and most important step in visual hierarchy is to define your focal point. A flyer’s focal point might be the name of the event. A website banner’s focus might be a deal. A Facebook post’s focus might be a single line backed up by an image. After you define your focal point, type scale, contrast, color, placement, and blank space can help make it pop out. Supporting information can be read by the eye, but not at the expense of the headline.
Beginners lose hierarchy in their early drafts because they try to enhance everything together. The headline gets a bolder font, the subheading gets a brighter color, the picture is scaled up, the background gets a texture, a shape, and an icon to make the blank space look better. The effect of these changes, even individually, is subtle, but all combined, they’re competitive. Prior to adding to your design, turn down the volume on a supporting element. Make your subheading smaller, decrease the contrast of a form for decoration, or push an image slightly back from the message to let it take center stage.
Test this with a basic poster. Use a headline, body text paragraph, an image, and one accent color. First, scale and strengthen every element equally and save that file. Second, change it so the title is clearly larger and more eye-catching with a larger type size, more contrast, and more whitespace. Third, keep the title dominant but make your accent less dominant while expanding the paragraph’s line spacing. View the three layouts at a small, thumbnail scale. You’ll likely find that you prefer the layout where you can see the headline immediately and not lose sight of the rest of the content.
You can begin working with hierarchy on typography. Your heading shouldn’t just be larger by coincidence; it needs to feel like the entry into your design. Your subheading can serve as a bridge into the secondary content, while your body text can stay smaller and more relaxed for readability. If your heading, subheading, and body paragraph are equal in type size, font weight, and line height, your layout may appear as though nothing is happening. Vary your type size and line height to help create a path to read through, without any added decoration.
Color can help you create or ruin hierarchy. A vibrant accent color makes a lot of sense if it points to something vital, but a lot less when it covers everything. If your headline, icon, border, call-to-action, and background shape are all using the same accent, the eye may not know where to look. Save that eye-popping accent for a particular use case; allow other parts to be more subdued. This allows your design to feel more structured and your viewer to know where to start.
A good indicator that you’ve improved your visual hierarchy is if you can explain the visual weight of each piece. The headline is larger because it conveys the message. The image is cropped so it’s not competing, but instead it complements the message. The paragraph is smaller because it’s still readable. The accent shape draws the eye but doesn’t fill the page. Once you understand this, decoration can be more deliberate because it fills the role assigned to it. You’re not decorating something you can’t decipher.