A Closer Look at Hierarchy in Web Design

Many times designers will depend on other great designs for inspiration, trends, or 'tricks of the trade' to get by. However, learning the basic design principles and getting a feel for how they are applied to web design is essential for the career of any designer. In this post, we're going to take a close look at one of those basic design principles, and how it applies specifically to web design.

Hierarchy Web Design


Hierarchy is the element that makes users look where they do and when they do it. The top hierarchical element on a web page will be the first thing the user sees, and the lowest will be the last. It's easy to see why hierarchy has such a profound effect on web design — it's all about the user experience, and any website's presentation to the user. In this post, we'll cover some of the basics of working with correct hierarchy, and how it specifically applies to web design.

What Exactly is Hierarchy?

Hierarchy is the division of ranks; the order of things from most important to least important. While hierarchy can be applied to a number of situations — social class, grades, religion — in the design world it applies to the user experience. It is the rank of what is most important in a design, and what is least important. Using correct hierarchy is also knowing how to create designs where the highest ranked item stands out the most.

Hierarchy Applied to Web Design

Just like with all other forms of design, hierarchy is an essential feature to web design and the whole user experience. Hierarchy is a way for us, as web designers to create the user's experience by showing them where to go, and when to do certain things. It is one major piece of the user experience puzzle.

Web Design Hierarchy

By planning out for hierarchy and the user's flow, whether for a client web design or personal project, web visitors will be happier because they will be finding things easier. Also, conversions will likely increase, which will of course make clients happier. Hierarchy is one of those design elements that can make a design go from just aesthetically pleasing, to functional and useful.

Planning Out the User Experience

Before one should ever begin the design phase, a planning stage is essential. Planning out a wireframe, or set of wireframes, is a huge step in the overall design process. The wireframe sets up the navigation structure, determines how a user will use the website, and plans out for the best visual hierarchy to get the desired results.

Define Website Goals

Remember: All websites have one main goal. It is your job as a designer to accomplish this goal.

For an online store, it may be to increase sales. For an informational website, it may be to create contacts. Or, for an online app, it may be to create more signups — free or paid. Know what this main goal for the website is, and it can be easy to create a correct wireframe with excellent hierarchy.

It is likely that there are other goals for a website as well, on top of the main one. For example, psd2html (below) obviously has a main goal to get more sales of their service. However, psd2html also has some other 'sub' goals: gaining repeat customers, being memorable, and gaining attraction as a premium service. All of these goals can aid in helping the business grow.

PSD2html

In their new redesign above, we can see these goals being called into action via visual hierarchy. The #1 place our eyes go is to the Order Now button. Because of its size, contrast, and surrounding whitespace (exclusion from everything else), we can see that it is important. There is also some additional polishing imagery around the button for a greater standout. Remember, this website's #1 goal is to increase sales, so the relevant call to action button is given the top rank in the websites visual hierarchy. It's how they survive in the business world, after all.

Visitors immediately know it's a service type of website, and only need to look slightly above at the logo and tagline to see what type of service. Based on the placement, size, and again surrounding whitespace, this is the second ranked hierarchical spot.

There's also a huge focus on customer service and their work towards recognizable brands. By providing top brands and putting focus on the company phone number, we begin to see one of our sub-goals taking shape: being able to recognize psd2html as a premium service. This directly affects their prices and can gain repeat visitors. Working with a reputable company always feels more secure.

Before we get into the best practices of how to make things stand out, organize in plain English what the goals of a design are, and their order of importance. Then, plan out what the 'calls to action' will be. For example, the call to action for getting more customers above was an Order Now button. Then, we can finally focus on the design elements that will surround these web page elements to stick out in the rank they're intended to.

Create a User Flow

So we've laid out what we'll need to highlight, but we still need to define in what order we'll need the users to see this information. Half of it is already done for us: we should follow the importance of the goals to determine what should be given the most importance and what should be given the least. However, are there other elements that come into play?

For example, what's the best way to make a sale to a not-so-convinced customer? Answer: to create a flow, a layout, of information that will convince them.

Freshbooks

Note how Freshbooks has done this. Above we've laid out the intended flow of information for the user. At the top are the main attention grabbers, and the primary call-to-action. For those who are not convinced, further down lists features and testimonials, arranged in a way for the user to quickly scan and get the most information. After some more convincing with these pieces of content, the same call-to-action links are applied.

The Art of Making things Noticeable

So we've already mentioned a few ways to make things more noticeable in our examples above. Now let's look though, with more detail, at how we can achieve correct hierarchy. After planning out a web design's user experience, use these design techniques to create the right effect.

Color

The use of color is one of the most powerful visual elements. It immediately draws attention, and is often times the primary practice to bring attention to the top ranking hierarchical element. Try using contrast (seen below), or just a pop of color on an otherwise evenly-toned web design.

Color

Dimension

We live in a 3D world, and can naturally be attracted to elements with more depth in visual design. To add depth, use gradients, drop-shadows, highlights, letterpress, etc.

Dimension

Size

Bigger equals more important and smaller equals less important. Our eyes naturally pick out the big pieces first, and use them to help guide us to the smaller pieces later on. One example used most often in web design is typography and size. Bigger header tags are larger, while lesser header tags are smaller. Then, paragraphs, blockquotes, etc. are the next size down, and captions or footnotes are the smallest. This creates a ranking system that allows the user to see the content in the correct order, and organize it according to important points (headings).

Size

Placement

Where things are placed has a huge impact on when it will get noticed, and also how important the thing is. Generally, hierarchy uses the F pattern. (Imagine a large "F" across the screen.) Top left, then to the right, then down a bit and to the right again. By following this placement pattern, we can estimate the first and last places a user will look.

Placement

Contrast

This was briefly mentioned above under color, but the same can also be applied to other forms of contrast beyond color opposites. Think black and white, dark and light. The higher the contrast, the more attention an element gets; the lower the contrast, the less attention.

Contrast

Great Examples in the Community

Below are a few great examples right here within our design community. Notice that we've labeled the hierarchical labels in right on the image. Each label represents a rank area of the web page, in the order the user sees it, and in the order of its importance. See if you can tell how we came up with these ranks; was it color, imagery, contrast, whitespace, or something else?

Made By Sofa
Sofa

Josh Tilton
Joshtilton

Ten24Media
Ten24

Jeff Sarmiento
Jeffsarmiento

Zee The Designer
Zee

Conclusion

Hopefully this quick guide can help those who are new to design, or those who could improve their application of the basic principles in their everyday designs. Be sure to take a look at the above designs for better understanding, and look elsewhere in web design for other examples. To truly understand hierarchy, study other great designs, and perhaps even some poor designs. Design your own mockups with hierarchy in mind, and get feedback or find another way to improve upon its order of elements.

Hierarchy can be a powerful tool in the user experience and in design overall. Often times, it can be the one thing that makes a design 'pop.' It can also be the one thing that makes a design effective, for your clients or for yourself. By understanding hierarchy as a designer, one can better understand how to place things on a web page, or within any design. Never just place things wherever — have a plan that will focus on the best possible outcome.