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.
Table of Contents
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 short information about your website, an image, etc. If a website doesn’t have a good hero, then it is more likely that visitors leave your website. This means a high bounce rate and that’s bad.
Also Read: Best UI Design Fundamentals
So, in order to design an attractive and structured hero section, you should consider some critical aspects. Some are general design principles and some of them are specific to this section.
Now, let’s start the tutorial. If you follow the steps and design your websites respectively, you will have modern and beautiful hero sections.
1. Hero Must Be Clean & Simple
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 complex, the human eye and brain don’t understand well what it sees and it is a bad UX experience. 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 short info 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 a 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.
2. Give Hero A Structure
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, centered 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, centered design is a great one too. Typically, this type of design has some kind of background and title, text, and button, or email subscription in the center. Both layouts 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 query. Also, digital agencies, corporate, startup websites can have simpler hero designs.
More creative hero designs often are found on portfolio websites. And it’s normal 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.
3. Include Short Info
I’ve already said and will repeat again – 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 combinations. Use a title for important information, the main message, and in a paragraph add a little bit of information. Some websites use only big text for their hero and some use both. But don’t use only small text, it doesn’t look good.
4. Choose Appealing Typography
A very important detail for hero sections is typography. Bad font choices can ruin your design and visitors’ experience. But good font choice can make your website much more appealing.
Avoid old, dated fonts. Instead use modern, popular fonts. Today we have many free font libraries like Google Fonts, Fontspace where you can find very beautiful and modern fonts.
Also, you should consider what type of fonts to use – serif, sans, display, or other types. 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 fonts. 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.
5. Hierarchy & Whitespace
Hierarchy and whitespace are also very important in design. Without these two things, a design won’t look good and attractive. 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 the lines of a paragraph when it is written on multiple lines. With these three design principles, your hero section will look more professional.
6. Choose Colors Wisely
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 of colors can really damage it. Do not use too 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 of your website.
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. Find out more about the rule in this video.
7. Add 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 great images 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.
8. Utilize 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 use it as a file download trigger. 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, use CTA as a file download trigger, destination option, or email subscription form. Both work well and it also sits well in almost every design.
Conclusion
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 basic design fundamental rules and you will be able to create a beautiful and modern hero section.
Beautiful UI design attracts more people and you will have more returning visitors. And because a website shows people who you are and what your business is, it should be well-structured, attractive, and modern.
