Graphic & Web Design
Hierarchy - 6 Simple Ways To Structure Your Website

Hierarchy - 6 Simple Ways To Structure Your Website

Hierarchy - 6 Simple Ways To Structure Your Website

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.

Large Images

web design los angeles

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.

Are You Unhappy With Your Conversion Rates?

Book a Strategy Session and learn how Media Contour can help you increase:

  • Conversion Rates
  • Return on Ad Spend
  • Revenue
  • Customer LTV
  • Profit Margins
  • Average Order Value
Book a Strategy Session

Color & Contrast

Deadlines.com Company Website

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 isolating 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.


iFrame Company Website

Creative typography can add interest, but also capture the user’s attention for longer than the regular fonts they see every day. 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.

Are your Product Pages a mess, or do you need some pointers on how to improve them?

Download our FREE High-Performance Product Page PDF to see what you’re missing or may not need, and improve your:

  • Conversion Rates
  • Return on Ad Spend
  • Revenue
  • Customer Lifetime Value
  • Profit Margins
  • Average Order Value


Example of good website spacing

Let your ideas breathe. Give space around important headlines so that it takes longer for the user to get distracted by other elements. It is also a valuable tool for 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

Using Shapes and Containers for Hierarchy

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 a 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!

Find this helpful? Check out these articles: Web Design Los Angeles: What You Should Know5 Ways To Optimize Your Blog For Your Customers