How can I establish a visual hierarchy for my application?
1. Adjust the scale of elements
The principle of scale in user interface design states that users pay more attention to objects that are larger, which means that size can be used to indicate importance. Using this principle, you can use larger fonts, buttons, or other elements to direct a user's attention to a specific area.
2. Apply color and/or contrast
Applying color to design elements can determine the level of importance we assign to them. In fact, it's not the actual color that creates the hierarchy, but rather the contrast and saturation of the element compared the context in which it appears (ie. background and nearby elements). As a general rule, brighter, more saturated colors stand out the most. You can use them to draw the user's focus to the element(s) with the greatest importance.
3. Let whitespace do most of the work
When it comes to defining a hierarchy, properly spacing the elements of your UI can be a huge help. In fact, whitespace is so important that we've given it its own section.
A general rule of thumb
- Define no more than 3 sizes for UI elements. For example, small, medium and large button (or other component) sizes. For type sizing, think header, subheader and body copy. Too many sizes will make it harder to keep hierchical relationships well defined.
- Don't use too many colors. In the presence of too many colors, the user's perception of hierarchy will be reduced. Try to use only a primary, secondary, and accent color if at all possible. There will likely be the need for other colors as well (ie. blacks/grays, alert/status colors, tints and shades of main colors, etc.), but try to follow this rule to the best of your ability.