Media Contour is a multi-disciplined design studio that works and writes about issues, trends and strategies that affect businesses and the design industry. Our goal is to deliver cutting edge, usable information that will ultimately add to your online success.
Published on May 8th, 2012 by Daniel
What Is Hierarchy?
Have you ever visited a website and said to yourself “Whoa, where do I start?” If you have, then you are looking at a page that lacks a little something known as hierarchy. If that page you were looking at was your own, then this blog is for you.
Hierarchy gives a focal point to a design. A properly structured website brings attention to the most important information first and makes sure that the reader understands what to read next. Your page’s hierarchy is critical to capturing the reader’s attention and hold their hand as they are guided through your website.
Why Is Hierarchy important?
Ask any salesman about their sales pitch and they’ll tell you that it’s all about the flow and pacing of how you inform your audience about your product. Consider your pages hierarchy like a set of pauses that pace the speed in which your viewer takes in information. A good website hierarchy will increase a company’s ROI because it makes your pitch more effective by delivering it the way it was intended. By using an array of visual cues, a site’s hierarchy will create a natural rhythm that holds your audiences hand and walks them through your message; the same way they would if they were in the store with your best salesman. Let’s take a further look into the many ways you can structure your content in a more effective way.
How Do You Make Your Hierarchy Better?
Below are a few ideas on how to organize your site as to better lead them on a journey through your site. Use only one as a means to bring uniformity to your site or multiple tactics in conjunction for a more layered and structured concept.
Using a large image on a page is a great way to grab the user’s attention and keep them focused on one your message for a few seconds. The eye will tend to lead to a caption next then to the adjacent words. Use this as an opportunity to hook them in with copy that pertains to your image and carries them to the next point.
Color & Contrast
Use vivid colors to draw attention to important elements. Using contrasting colors separates blocks of text and keeps them visible. You can also use color to highlight important parts or to hammer home a subject. Consider this tactic when separating two articles that are side-by-side or to isolate captions to a photo.
Tip: Take the main color of your color scheme and use its complementary color for important elements and call to actions.
Creative typography can add interest, but also capture the user’s attention for longer than the regular fonts they see everyday. Don’t use extra fancy fonts that are hard to read or look like they belong on a greeting card for long pieces of copy; use them to separate messages and create banners or titles.
Let your idea’s breath. Give space around important headlines so that it take longer for the user to get distracted by other elements. It is also a valuable tool in decluttering your site and keeping the message simple. Too much going on within a page makes the reader’s eyes lose focus and detracts them from taking in your message.
Shapes and Containers
Shapes and containers can help organize and section important areas containing key messages. Once contained, these key messages act as stand-alone statements that can hold anything from an important tip to a sage quote from your copy. When used properly, keeping messages within certain boundaries gives your site a feeling of depth and clean structure. Shapes and containers are a great way to bring emphasis to a call-to-action. Avoid overusing this method however as after while it will clutter your site with lines and boxes that can detract from your message.
Hierarchy is an important piece of the design process for websites. Play around with different ideas on structuring your hierarchy and see how each one changes your message.
Do you have any other questions on hierarchy or site structure? Send us a message and we will get back to you!