Every website must have a beautiful hero section. It makes a website more attractive and engaging. And there are some things you should pay attention to when designing your website’s hero.
Every website designing process starts with a hero because it is perhaps the most important section on your website, so you have to have a beautiful and well-designed hero section.
What Is A Hero Section
A hero is the first section on your website, below the navigation. This is the first section a visitor sees. It is like the face of your website. So, it has to be beautiful, engaging, and informative.
And it is very important to have a well-structured hero section, with small information, etc. If a website doesn’t have a good hero, then it is more likely that visitors leave it. And that is bad.
So, in order to design a good and structured hero section, you should consider some crucial aspects. Some are general design principles and some of them are specific to the hero.
Now let’s start and if you follow these steps and design your websites accordingly, you will have modern and beautiful hero sections.
First of all, a hero section must be simple and easy to understand. A complicated design will not work well.
It is a general design principle. Simple & minimalistic design works better than over-complicated designs.
A simple design is easy to understand and more professional looking. When a design is complicated, the human eye and brain don’t understand well what it sees and it is a bad UX. Visitors will soon leave a website and may never come back.
The same goes for the hero section. It doesn’t have to be full of text, images, buttons, or other elements. Yeah, it must have information and images in it but not many, just what is needed.
Beginner designers make these mistakes and make their whole design very hard to understand. Because they use too many colors, texts, images. They often break simple design rules.
More stuff doesn’t make the hero section more beautiful or professional. It is the opposite. So, remember that simpler and minimalistic is better in design whether it is web design, graphic design, or design in general.
Just use what is needed to tell a story and give a visitor an idea of what your website is about. That is what you should have in your hero section.
The structure is also very important in design. A hero must be well-structured because it makes a design understandable.
It is a good practice to follow the Z-pattern layout. Read more about Z-Pattern here.
And a hero can have a different structure. It depends on your whole website design and what you want to include in your hero. You can have a two-column design, center design, or more creative design, but remember that it must be simple.
A very popular design is a two-column design, where one column has a text & button on one side and an image on the other side. Background can be a color, gradient, image, or video.
Also, a one-column, center design is a great one too. Typically, this type of design has some kind of background and in the center title, text, and button, or email subscription. Both are great and very popular.
But if you want to get more creative and stand out, you can try different designs where you can have more than one image, overlapping images, animations, etc. You can do whatever you want as long as it follows the design rules and is not complicated.
But you have to consider the website type. For example, a blog should have a simple hero or just the latest posts. Also, digital agencies, corporate, startup websites can have simpler hero designs.
More creative hero designs often are found on portfolio websites. And it is understandable because when you are a designer or a creative person, you want your website to show a visitor what you can do.
But in general, it is better to have a minimalistic design. And if you want to get more creative, just follow the design rules and include what is really needed.
I said above and will repeat – the hero section must be informative. It should tell a visitor what this website is all about. Because, when visitors come to your website, they may not have a clue what you do. So, tell them.
Insert text and tell about yourself or your company. What you do, what is your product, or whatever you want. In this way, visitors will know what it is about and will likely scroll down and know more about your work.
But remember, don’t include too long or too short text. About 2 or 3 small sentences are enough. Write short, informative, and clear texts in your hero section.
Also, it is a good practice to do title and paragraph combination. Use a title for important information and with a paragraph explaining it and add a little bit of information. Some websites use only big text for their hero and some use both. But don’t use the only paragraph, it doesn’t look good.
A very important detail for hero sections is font. Bad font choices can ruin your design and visitors’ experience. But good font choice can make your website much more appealing.
Also, you should consider what type of fonts to use – serif, sans, display, or other. Different types of websites need different font styles.
For example, tech and kid’s websites can’t have the same fonts. So, you have to think about your whole design and choose the right font.
Also, it is good practice to use font pairs. When you use two font combinations, it adds a different flavor to it. But don’t overdo it. The hero section must be simple. Just use one or two font. One for headings and one for paragraphs.
Font Joy is a great tool for font pairing. It generates fonts that work well with each other. If you can’t decide what to use, it will help you and make your work easier.
Hierarchy & Whitespace
Hierarchy and whitespace are also important in design. Without these two things, a design won’t be good. Every website must use these design principles in order to be professional and modern.
Hierarchy is the size difference between texts. Title and important text must be bigger and bolder than regular text or paragraphs. This way it is easy to understand what is important and is also good for the human eye and attention.
So, you always have to have a good hierarchy between texts. Hierarchy can be achieved by increasing the size of the font and/or making it bolder. Also, you can use italic text to separate different texts.
And the white space is the gap between text or other elements. If a title and paragraph are too close to each other, it won’t look good. So, there must be a gap between to be appealing to the eye.
Also, you should consider line-height. It is a gap between a paragraph when it is written on multiple lines. With these three design principles, your hero section will look more professional.
One of the most important and many times not understood aspects is color. Especially with beginner designers. Color can beautify a website but bad use can really damage it. Do not use many colors.
It is a good thing to know a little about color theory, how different colors work together, etc. You can use tools like the color wheel and color palette as a guide. Understand complementary, triad, and monochromic color harmonies and you will make better color choices.
On the hero section, there might be images, buttons, text, background, and all of them have colors. So, it is crucial to choose the right colors. Because, if you oversaturate, it will break not only the hero section but the whole design.
Read blogs or watch videos about colors to understand it more. Also, there is a 60/30/10 rule for colors, where you choose three colors – primary, secondary, and accent. Read more about this rule in this video.
Images & Graphics
Every website needs images. Not only on the hero sections but on almost every section and page. So, you should carefully choose the images to fit your design and don’t break it. And you can use regular images as well as vectors or other graphics.
Images really make websites more beautiful but like color, the wrong image can be bad and can damage your hero design So, pick high-quality images or graphics for your website. You can find a great image and vector design resources here.
Images and graphics can be used in many ways. You can set an image as a background, as an element, or both. Or, you can use image and vector graphics combination. It depends on the website.
Many technologies and startup companies use graphics or even 3D assets on their website. But blogs and portfolios mostly use regular images. When choosing images, consider website type, colors, fonts, structure, and pick accordingly.
To add a little flavor to your hero section, you can animate vectors, or make a parallax design for images. There are many things you can do with images but don’t break a design with it. Use them wisely.
Call To Action
Another important detail for the hero section is Call To Action (CTA). It is a button that can do different things – take visitors to a new section, page, or download a file. Mostly it is placed under the title and paragraph.
CTA can have a different style. This button can be square, rectangular, round corners, etc. And if you remember the 60/30/10 rule, the 10% color can be used for buttons. Most of the time, the accent color is used for CTAs and buttons in general.
The reason why CTA is good in the hero section is that you can take a visitor to a special page or a section. For example, an online store can have a sale button, a portfolio website can take a visitor to a portfolio or project page, etc.
Also, some websites use email subscription forms instead of CTA. But it is also a kind of CTA button. Because you collect emails and then you can start an email marketing campaign. Many blogs use email subscriptions instead of the regular CTA buttons.
It is almost mandatory to have a CTA on the hero section. Because it is easier to navigate for visitors. When visitors go to an app website and immediately see the download button, most likely they will click it.
So, you CTA as a download or destination option, or use as an email subscription form. Both work well and it also sits well in almost every design.
Now you have a good idea of how important a hero section is for any website and how to create a beautiful one. Follow these steps, learn some design fundamental rules and you will be able to create a beautiful and modern hero section.