What is a hierarchy, and how do you create one?
Hierarchy is one of the critical things in creating good web design an excellent user experience and making sure that the goals of the website are achieved, and it's the probably number one mistake that I see when I'm looking at other people's web design.
To sum up, the hierarchy is super essential and not just on the hero. Even though we've show kind of the website's main cover on every section of the website. When you're trying to communicate information, you have to make sure that there's a clear hierarchy.
The hierarchy is clear. We want to make sure that it's clear who's the top second and third hierarchies to know where to look first. We can use size, we can use color, and we can use a position to create this hierarchy. So make sure all your designs have this.
What is Hierarchy?
Hierarchy is what is on top or maybe more important than something else. It comes back to the military. Hence, we have the top commander, and below it, the secondary commander, and the soldiers. A family, where you have kids and beyond them, the parents, means what is on top of what is more important.
Why does this matter when it comes to web design? The thing is that our brains, as humans, we have to look at something. We have to deal with a concentrate on something. We have to understand what we should look at first. What should we deal with first? If we have too many things on the screen that demands our attention, we will be confused. We won't know where to begin where to look at first and, then immediately, because we're overwhelmed, we're like I don't want to be here.
As designers, our job is to create a hierarchy that says, " Hey, this is the most important thing you should be looking at right now." "Once you're dealing with that, you can look at here." "This is a little bit less important and then get to this." By using clear hierarchies, understanding what is essential, and then secondary and then third, we're guiding the eye and the visitor's experience.
So let's jump here into some horrible examples.
Now note that this is a little bit similar like we talked about layout. And we talked about the most significant thing and secondary saying and third thing. But hierarchy it goes deeper into. I will show you some more elements besides the layout here. So on this website, everything is green and black. Everything is trying to scream at me. This is the biggest thing here that demands my attention. But also, this logo is almost the same size as the letters. This is black, and then we have these numbers with the drop shadow of black that commands my attention. I don't know where to look here. The text is super black. It also controls my attention because everything commands my attention. I don't even know where to look, and I'm overwhelmed. Even the thing that maybe should have been different and commanded my attention like download a brochure. I'll probably see it after seeing everything else because it just looks like so many other things here. So this is just like too it is much going on here.
In this Bank website, I would say the logo is the biggest thing, and then we have this important announcement. Because this is blue, this whole rectangular is blue. The contrast in color commands my attention to the entire thing. And then we have this blue button here, and another blue button. Again, I'm overwhelmed, and I'm not sure where to look first; there are too many things going on here. Well, an example of many things going on, many things screaming at me simultaneously.
However, the opposite can also be a minimalistic website that nothing goes on, but nothing is significant. Then as well, I don't know where to look where I should start in this like actually the About, and the Agile software is the same as the main headline. So again, no hierarchy here, no exact visual prompt - as to look. So these are some terrible examples.
A good example is the number one thing that jumped in here because both of the size and the contrast of color is We help eCommerce website evolve.
Then we have these kinds of and as part of it, Learn How. So this is the first thing that I see, and it's obvious. As a secondary, they have the visual there because it's different colors, and I can get a little bit of context as to what this is. And then later on, as the third thing, we have this kind of navigation here.
Now let's check out another website, so here the number one thing I would say is visual because it's so big. But then immediately, as part of it, I see the headline here and then the navigation as well.
Here we have number one as well. You can see the visual you look at this, and then immediately you look here and here. So you might think that it's about the minimalism of not too many things, and that's part of it. But I think what you're trying to see here is that they're guiding you where you should look instead of overwhelming yourself.
Let's dive here into my design software. And I'm using Adobe XD, but I want to demo some things. So on a page, we're going to have a few different content pieces, and I'm drawing here black rectangular, but obviously, the text is a block of color.
So even though this is text, you can refer to it as it has some visual blackness. Let's say that it commands attention. There are too many things, but you can see that it's a block of color. So text is also a block of color. Now what I have here on the screen in four different blocks of color, but there is no hierarchy between the rights. They are all similar and again. I'm being confused. I don't know which rectangle to look at first.
There are three ways for me to create simple hierarchies. The first one is by creating a size differentiation. I can make this larger (1), and then these smaller (2).
I've created some hierarchy. This is number one (1), and these are less important (2). I've talked about this in the layout a lot of times. We'll do something like creating something big, medium, and small. That would be that that's a layout that makes sense. So that's kind of a layout based on size. So that's one way to create a hierarchy. However, it's not the only way to create a hierarchy; another one would be using color, they are all the same color, and I'm using black. But imagine that these would be not entirely black, but they would be kind of greyish I'm using to reduce the opacity. How transparent they are but to create a little difference.
Now that we also have a kind of hierarchy. This is number one, and I can add can make this number two, and these are number three. We use this color hierarchy a lot of times when we're using buttons. You would see a Buy Now button. Buy Now is the most important button. Then we have a button next to it that says Learn More. This button is grey, and that's how we create a kind of hierarchy between them. You want people to look at the Buy Now button first and then the second is to Learn More.
You'll see many times is we're using a button that doesn't feel it has a border, and that's called a Ghost button. So that's a button that doesn't have a fill color. You'll see that because right now, there's a hierarchy here that's based on color. This grabs our attention first, and then this grabs our attention second. Suppose you would have two buttons that look the same Buy now and then learn more. I'll be just confused. I wouldn't be sure where to click on first or which one to read first. I want people to buy, so I want this to be with a higher hierarchy.
So that's how we're going to use color to create a hierarchy. The third tool we have is the position property; they are all very much aligned and look the same. But what would happen if I would, let's make the rectangle turn around? We have something that's positioned differently, and it grabs our attention just because it's not in line with the other elements.
That makes oh this one is special in, or maybe we can make this one go up. And I think this is very common in a lot of time you'll see on the website. You'll see kind of like pricing tables.
We have a variety of this is the price plan number one. Let's make this more prominent. This is the price plan number one, which is price plan number two. Number two, and this is price plan number three. And what you'll see is that they're going to do something like this. They're going to put the price plan number two up because they want you to look at that. They're trying to sell you this. To create a hierarchy, they're going to use them, and they'll use all three tools. They'll make plan number two bigger and make that stronger color. A lot of times, you'll see a layout that looks like the image from above. A pricing table is just one example because what they're trying to do here is to make you look at plan two and plan one and three.
I want to show you even when we're dealing with text, and we talked about this when we talked about Type. If "This is my headline" and "This is my paragraph". We need some hierarchy and contrast. We talked about this in the Type blog; that's why I want to make "This is my paragraph" smaller. I won't make this bold I'll make this regular because now this is not as black. We have a color, and we have some size and color. Because when I make this regular, it's not as black as this. It's a little bit greyish. So we've created a contrast between them, and it's an obvious hierarchy that this is number one and this is number two, and I'll have kind of like the smaller text. I'll make this, you know, greyer than this to be one-two-three hierarchy in my text.