Visual Hierarchy in Mobile Design

According to the first definition in dictionary.com, hierarchy is defined as any system of persons or things ranked one above another. Based on that definition, visual hierarchy would then simply be the visual system of ranked elements, one above another – or how the visual elements rank and relate to each other. Some elements on the page have more visual weight than others, these elements grab the attention of your eye and draw focus on them.

One of the easiest ways to create visual hierarchy in a small mobile display is to take advantage of contrasting elements. Contrast can be built in many different ways, but the basics include the use of color, shape, size and relationship. Contrast is about creating a difference between elements allowing certain elements to stand out and weigh more – visually. Generally, you’ll want just a handful of elements to grab the user’s eye while the others will need to blend into each other a bit more. If all your elements are trying to take center stage, you’ll just create chaos and confusion.