The biggest misconception about better web design is that it has to be beautiful. Many companies and site owners primarily pay attention to the “beautiful” design, forgetting about the principles of building information on the site. As a result, we get sites that everyone cries for: they are inconvenient for users, they don’t like other designers, they don’t work for business. Read more about the pain of designers here.
One of the important principles for creating better designs is hierarchy.
Hierarchy in web design – rules for the arrangement of elements on the site. When creating a hierarchy, the visual perception of the user is always taken into account.
The site structure should be simple and user-friendly. To create a clear site, you must adhere to certain rules that will help the user not to get confused in a large amount of information.
Below we will analyze the very rules that should be taken into account when developing a design and which will allow you to get the same “best” design.
Hierarchy for Better Web Design: 7 Must-Have Elements
1. Size matters
Size is one of the basic principles of building the correct site structure. To make an element pay attention in the first place, make it larger. Make minor objects smaller.
An example of this principle of hierarchy can be seen in online stores. On such pages, the first thing that catches your eye is the product itself. Other elements appear less visible.
See how it’s done on the Samsung website:
And on the Footwork website:
Elena Krygina’s website uses the same technique:
All popular web designs in 2020 are built on this principle.
2. Color for Better Web Design
Color plays an important role in human perception of information. The main thing here is to maintain a balance. Do not overload the visible content area with multiple colors.
There is a risk that the user will simply be “scared” by the aggressive combination of colors and will not be able to perform the targeted action. Better to use one accent color and two secondary ones. In this case, it is always clear where the most important information is located.
In advance, you should pay attention to the corporate identity or at least the logo. If you have a corporate identity, you need to select a color scheme according to it. And if there is a developed logo, try to use the colors for the site that are present in it. For instructions on how to create a logo, see here.
Examples of great designs that can use colors include online shopping. Most often, accent color is used in various banners with discounts, new products, exclusive products, etc.
For example, an Asos outlet:
Or the website of the Adidas company:
Every site that can be said to have a cool design has one bright accent, not an endless play with colors. The next important element of a perfect website design in 2020 is typography.
Typography forms the correct perception of text information on the site. To create the best design, it’s not enough to play with fonts, you need to build a hierarchy with the help of text, and you do not need to use several different fonts at all. It is enough to choose one, and change only the size and style.
By using this technique, the page will not be overloaded and the text will be easily perceived in a sequential order.
Similar visual hierarchy techniques can be seen on article hosting sites. The text hierarchy is strictly observed here. Otherwise, the reader, entangled in the jungle of incomprehensibly built text, will simply leave the page.
Take a look at Medium’s website:
Grouping is an integral part of the visual perception of content on the site as a whole. In order for the user to somehow delimit information, it is necessary to group elements into separate blocks. Here you can apply the rule of inner and outer: the indents between objects inside the block should be less than outside.
It helps to break down information by meaning. A person, being on the site, will subconsciously group the data and, accordingly, it will be easier to perceive them.
Sites with a strong grouping, as a rule, have a lot of text and graphic information. These examples include regular landing pages.
For example, I liked the Skillbox landing page:
Or the website of the veterinary center:
5. Free space
All modern designs should always have free space. A common design mistake is to neglect the white space between objects. There should be enough air on the site, let the content “breathe” =).
There is no need to be afraid that the extra negative space will alienate the user and the information will seem boring. On the contrary, such a design approach will help to visually differentiate content and facilitate perception.
This principle of hierarchy is trending at Apple:
6. Patterns Z
Control the user’s attention. Information is read according to a certain pattern, repeating the spelling of the letters “Z” and “F”.
The Z-pattern leads the eye from left to right, starting with the logo. Then down diagonally, and further to the heading of the next block – also from left to right. This pattern can be repeated several times on the site. Most often used for landing pages with little information.
The F-shaped pattern, like the Z, starts from left to right. Then it goes down a little and repeats the movement. Used on sites with left-aligned content with a lot of headings and text.
Look, the site of the singer Monatic is made according to the Z-pattern:
And the Kremlin’s website on F:
If you want to get a cool design at the end, do not deviate from these patterns. They are in vogue now.
And then there’s the math formula for cool design.
7. Golden ratio
The golden ratio helps to build the correct ratio of elements. The scheme of the golden section is revealed mathematically. It determines the favorable arrangement of elements for human perception of information. Using the golden ratio, you can correctly build the proportions of objects.
Let’s take a look at the example of the Maybelline website:
Or here’s the familiar Youtube:
Look at what a cool cat, you will definitely like it, because it fits neatly into the Golden Ratio model:
General guidelines on how to create the perfect design
To create a competent hierarchy on the site, you must remember that all elements must be well combined with each other.
- All information that will be posted on the site must be prepared in advance. Prototype, text, images – all this must be in place before starting work.
- All content should have a consistent structure. Divide all information into several levels – from the most important to the least significant.
- Try not to overload the site with decorative elements. If some detail is added in order to embellish the site, it is better to remove it.
To create a design that will appeal to most users, of course, you first need to think about convenience. All of the above rules work well if you follow them in general with each stage of website development. After all, our candy, in addition to a beautiful wrapper (design), should also have a tasty filling (layout, programming, content, etc.).
If you managed to create such a resource – congratulations! You are the owner of the perfect site =).
Well, if you need help, you can order website development from us. Our experts will perform a full range of services and take into account all your wishes.