How To Design Awesome Hero Headers & Sliders

Sedat Yusuf Ergüneş
Nov 5 · 6 min read

Hero headers are maybe one of the most important parts of our websites. Let’s take a quick look at what’s a hero header. Then we can discuss what makes a hero header awesome!

“Make it simple, but significant.” — Don Draper, fictional character on Mad Men

Hero header is the first and oversized part of your websites. They could be in different types such as only images, sliders, background videos or just big and bold text, etc.

Credits: vadimdrut, wnek, filipjustic, urancd, gruev, louisdesign

When a visitor or a client comes to your website most likely (unless there is an interruption by pop-ups or modals) the first thing that they will encounter your hero header and its elements. And as a web user when we enter a website we usually scan according to F or Z patterns.

It takes 2.6 seconds for a user’s eyes to land on the area of a website that most influences their first impression

According to that, firstly our subconscious mind will get the message from background media (as a whole image) and we will look for a logo (left-top), then we will go for navigations and after that our eyes will scan for the texts or other messages.


Now we can look at the fundamentals of designing beautiful, powerful and eye-catching hero headers. First, let’s talk about the main elements: Background media, logo, navigation, texts, CTA(Call to Action) buttons.

1) Background Media (Images, Slides or Videos)

It takes about 50 milliseconds (that’s 0.05 seconds) for users to form an opinion about your website that determines whether they like your site or not, whether they’ll stay or leave.

So while we are choosing our background the first thing that we need to focus on the message/the vibe that the media pass on to the user.

Here is a good example below. It’s an architecture company website and when we focus on the background media, a very well designed, cozy and luxury villa is welcoming us. Everybody wants to call that place as home. So maybe we should work with that company!!!

Credits Kaixapham

As you figured out from the example, the next important thing is that you should always use high-quality media.

Here are some free high-quality image resources

And for the background media, the next thing is to be aware of the color usages. Colors have different symbolism and psychological effects on our brains. They send different messages and it’s important to consider this while choosing the background media. You can find a beneficial guideline about color psychology here

And below there is an example of one of our works. Our client is from the logistics sector, in this case, we focused on blue colors on the hero header because blue is the color of trust, responsibility, honesty, and loyalty.

BOS Group Website — Credits @yergunes

Some Background Tips

  • Choose a proper media to give the right message.
  • If it’s not disrupting the visual integrity of your website (or your brand guidelines) don’t afraid to use high contrasted, light and highly saturated images.
  • If your texts are not easily readable, you can use part of blurred images or you can add an overlay filter.

2) Logo & Branding

Credit sensible

Tips

  • If you don’t have different logo variations you should select background media according to your logo design.
  • You can consider to give some space around your logo and separate them from other elements.

3) Main Navigation

Like we mentioned before when we enter a website first, we see the background media and logo, then we look for the navigation to see what are we going to find on that website. So for the better user experience your navigation should be visible and also self-explanatory.

Credits: Flixxo

Here some tips for navigations

  • Don’t use too many items on your menu. If its really necessary consider using submenus.
  • Don’t hide your navigation under the hamburger menu, except on mobile devices. (for the user-experience)

4) A Catchy Slogan & Texts

The best practice for the slogans is using big, bold and eye-catching texts. And supporting them with a little paragraph and call to action button for balancing the view.

You can see a clear example of the messages, text areas below.

Credits: realvjy

Some Tips

  • If you are using white-dominated media, white or light texts will be unreadable. You can use a color overlay or blurred parts on the background media.
  • If you can’t increase contrast enough, you can also try to add some text-shadow (but be careful about to not using too much)
  • If you are using a slogan and some other texts on the hero header, make sure that using different sizes, colors, fonts or font weights. Creating a visual hierarchy is important!
  • The character limit is too important. Avoid using long sentences as slogans and too long paragraphs for explanatory texts.

5) Call To Action Buttons (CTA)

There are lots of stuff to discuss for designing a good call to action button. But for now just choose a shiny, glamorous color. Make sure the button is pop-out and it has a clear definition of the action. (maybe I will write about it too later)

Credits: Grammarly

Some Tips

  • If you need more than one button, you can use ghost buttons, text links with underlines or secondary colors for the second one.
  • Create a good contrast with the background.
  • Use the colors that drive users to click and engage.

Additional Notes

Most of my client requests to add more texts, more sliders and more videos on the hero header…They believe that adding 5 images on a slider makes the sell.

When it comes to reality most users won’t even stick for long for the seeing third slider. They want to dive into action and see what’s you/your website is offering to them. So avoid using too many sliders or long videos too.

Only 1% of people actually click on a slider, which almost always was the first slide.

Conclusion

Thank you!

Resource: ENGINEEDS Blog

Follow: Instagram | Twitter

ENGINEEDS

Digital.Marketing.Strategy

Sedat Yusuf Ergüneş

Written by

💡 Aspiring Entrepreneur | 👨🏻‍💻Full Stack Developer | 🎨 UI/UX Designer | Passionate About Self Improvement

ENGINEEDS

ENGINEEDS

Digital.Marketing.Strategy

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade