Successful website design is not only visually interesting but has well-organized content. Our role as the designer is to employ various tools of hierarchy to create a “path” for the viewer to follow, making sure they receive information in a logical order with an emphasis on what you’ve deemed most important.
Typography
Typestyles are probably the most important and useful tool we use for creating visual hierarchy. With type styles, our tools of the trade include size, color, contrast, alignment, and proximity, to name a few. We can provide the visual cues for the content that emphasize the overall importance of that information. You may think that setting all of your type in a large point size or a bold weight will help it get noticed, but overwhelming your viewer with too much information of the same visual weight can cause confusion, reduce readability and prevent them from finding what they are looking for.
When we set up different type styles to use across a website design, it not only helps with deciphering the order of information, it also helps users to recognize patterns so they can quickly discern what type of information they are looking at (eg. menu items, events, contact information, links).
Color
The same holds true for color. We don’t want to flood a design with too many eye-catching, bright colors. Colors have to be used in a way to serve as support for the information, using a set of main and accent colors, to provide hierarchy – complementing without competing. We reserve brighter or more dominant colors to put emphasis on buttons, headlines and other “calls to action” that we’d like the user to notice and interact with.
Examples of the various “calls to action” we use across the OtherWisz Creative site.
Contrast & More
Contrast, alignment, and proximity are less obvious elements, but when used correctly, they work together to help us group or differentiate information. These design tools, working together with type styles and color, are used to create an overall hierarchy for your content, visually guiding a user through your website, creating an intuitive experience.
Check out some of our other successful uses of hierarchy in web design.
