Importance of hierarchy on website
Tags: webdev, design, beginners, css
Published: 2022-11-23 17:51:51

Hi !

I would love to talk about the importance of hierarchy on the website. I would give you some examples of real projects that you can learn from. I will show what is considered to be a good web design practice and bad.

## Why it's useful to know 🔥

**This blog would be very useful for designers and software engineers**. As I realized, it's a good practice to know the basics of what other specialist do in other departments.

**For example**, If you are a front end engineer, it would be great to know the basics of web design. This way, you can have much more thorough communication with other specialist in the project ☝

_I'm not here to judge other project, but to learn from them._

## How to overwhelm user 😁

Hierarchy on the website is crucial. I'm sure that you had experience visiting websites when everything is being thrown at you at a one time and it "shouts" with lots of colors, actions and text at you. It's so easy to get confused and lose the point what am I supposed to do here.

If you want your website to be successful and easy-to-use you need to "point" the user where he should look first, second and third, etc.


## Bad practice #1

Let's take a look at [this ](https://www.lingscars.com/)website:

![bad design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mavytp1nv3x9mj0qpap7.png)

**Tell us about your feelings.** **Are you confused?** 

 
Let's go deeply into the website structure:

1) How am I supposed to look through the website ? Top to bottom or left to right ?

2) Too many colors and fonts

3) Give more space to the elements (in the good examples you can see what I mean by that)

## Bad practice #2:

Now, let's take a look at another [website](https://eqv.co.uk/):


![bad design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mamdj8y6dwdcgwd9qmi2.png)


1) What's wrong with navigation bar ? It's taking 30% of the screen size. 

2) Action is happening on the background that just distracts the user from understanding the content.

3) What's with the text shadow?

I think your website structure is great, when you can see an answer to a question: **What do you want me to do on your website?**.

In the examples above there are no clear indications of paths that I need to follow on the website. _**You just get lost.**_

## Good example #1

Now, let's take a look at [good](https://staylime.com/) examples.

![good design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1eojynmh42bq8ykzad3n.png)

Here let's talk about the way developers want us to look through the website.


1) Background image

2) Big text **We help ecommerce evolve**

3) Button


![Navigation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34cqodow05wqvy6i61ww.png)


## Good example #2

Another great [example](https://reactjs.org/) - React JS website.


![good design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cyeok090hfil1ux0ms2s.png)

**What are your feelings now ?** 😍

1) Great CTA(Call-to-action) asking user to click the button

2) Amazing color contrast

3) Clear and concise nav bar

I think you can see the difference and the effort that was put into design.

**If you have any ideas about the design of the websites above, drop them in the comments.**

Stay tuned and have a wonderful week !


[Buy me a coffee](https://www.buymeacoffee.com/mnosov622N)