Website Headers: Trends and Case Study

As a key instrument of the website that has a couple of seconds to attach users’ attention, good header make them stayed for a little longer. Promptly, it gives you a piece of basic information but in trendy, attractive way.


In this article, we will get some help from Lana, ChallengeSoft UI/UX Designer and analyze headers types, trends and tips that she has prepared for us.

What is Website Header


Everyone sees a website header from their perspective:

From this part, we are getting deeper into the theme of what website header could offer you, it’s purpose.

Purpose of the Right Header for your Website

The useful Website Header should consist of as many as possible answers to the users’ basic questions that have got people to your website. 


It’s a base of actual header’s purpose: to be useful. To achieve this goal, let’s see the main elements of it:


On the header, there should be your logo or brand identifier if your creativity and preferences let you put something better, like the mascot, for example. 


When it comes to placing a logo on a website, these elements may seem trivial. However, they may have implications for your bottom line if potential customers find your site confusing:

  1. The logo is too small to be recognized;

  2. The logo is too big and it occupies the whole territory;

  3. The logo doesn’t stand up: If the logo color is similar to the theme of your website, it may be lost in the background;

  4. The blurry logo: pay attention to its quality;

  5. The logo looks inconsistent across devices: no matter whether someone drags your site through Google search on their laptop or clicks on Instagram links from their smartphone, they want your website to have a responsive design that maintains the quality and appearance of your logo across devices.


Headline a small text that should be stuck in your users’ heads. How to do it? Well:

  1. Don’t think that you must be a writer to put together a great title. In fact, the more creative you are, the harder it is for you to write a catchy title. Turn off your mind.

  2. Don’t try to please everyone. Write an article that you are sure will sound great for 25-30% of your actual clients.

Call to Action:


Call-to-Action buttons let your users search on your website. There are various of them, but we can recommend you a few that could be put as essential:


You will never be sure in 100% that you know what exactly your user wants. That’s why, search box would be very useful. Websites use different places for it in a permanent sidebar, while others slot it to the upper, somewhere at the right part the menu. 

Navigation Elements:

Without going to the website, visitors will learn how to find your blog, email registration page, your product listings, pricing, contact information, or help documents.

It would be nice if you knew that every visitor would launch their homepage and follow the intended path. Not reality. Website visitors navigate around the world.

Website Header Trend: Animation

Everything in the movement so does your header


If you are thinking about an efficient feature that could change the look of a static picture as your website is – add a video. Thematic video is a great solution for increasing the user’s attention.


However, there’s another not less interesting way for it – animation. 

3 features to animate for your Website

Navigation Markers: first thing first for UI?UX Design is to make the website become useful for your users. The animation could add recognition for your navigation.

Emphasizes the hierarchy: visual anchors can be subtle and almost invisible due to the magnetic movement of meaningful elements.

Animate the process: show in quick animation the process on production. It will help to break the gap what the “expectation and reality” have sometimes. 

Animation for Background Headers

More and more people submit that animation is a wonderful invention for everything and website headers also. Why it’s only became as a trend? That’s a question without answer. However, with animation you can attract a lot of attention to your website header. 


Before taking a look at the types of animated background headers, we can take time for risks of issues to remember:

  • Intensive running of the animation loop by Java Script affects large components on the page.

  • For the smooth frame rate, limit the intensive processor operations

  • Keep in mind that there are devices with poor Canvas performance and think about a fallback using (for mobile).


Now, we are ready for it: 8 Animated Background Headers and with what you can create them: 

What else to try on Website Header

Animation can’t be the only interesting feature for the header. You can also add other great features. What exactly? It depends on your preferences! However, here’s what we at ChallengeSoft can recommend for your website.

Give it your Message 

You can’t put resources into something without value. Nevertheless, you have the purpose of business, so build the message of it!

Learn and analyze your users as potential clients and create the sentence to catch their attention. It could be a promise, a boasting or laconic description – depends on your audience. 

Types of Images to fit in

The header image should directly transmit business information. Generally speaking, when a visitor sees your site, they want to buy something from you.

Well-Quality Pictures/Photos: images can not be overlooked. They wake up every emotion and it’s exactly that tool that you can use for the header. Always keep in mind that the website header is the first meeting of user and your business.

The header is the place of your and visitor’s first date: 

show your best.

Images in Gallery/Slides: if you can’t use only one image to represent the brand – it’s fine, use more than one! If you have some great photos representing your business website, keep going! Users can scroll through a set of sophisticated, high-resolution images.

Illustrations: unique images is also a right choice for such thing as website header – first personal connection. It will add recognition and exclusive look.

Put Call to Action into Design


It’s some kind of challenge from UI/UX Designers to the elements of the action, such as “login”, “login”, “communication” and more. But how to catch user’s attention without a way to escape and initiate the necessary actions? Simply, the button should consist of message that is understandable for everyone.

Hamburger Menu

This is a solution that is commonly. It is a small icon divided on three stripes that transit user into the whole menu and it’s options by the clicking on it. UI/UX Designers approach it to satisfy the need of home screen spotlighting. 


We bet that you have seen such menu on different kind of websites. It is advisable for the advertising type of websites. There, you can see value of product’s quality for company. Presentation through media material. But, we won’t recommend you this type of menu for different types of online shops. Instead of it, put a “to the basket” or “categories” buttons.

UI/UX Designer About Website Header 

Website Headers: Trends and Case StudyWe ask our UI/UX designer Lana about her experience and opinions about Website Header and its trends, because who knows better than expert that does it every day.

About the Experience with Website Headers

Work with header’s it’s a usual thing for today’s UI/UX designer. Because clients know how it’s important to get your attention and make sure that user stays on the site. This task lies on the header. 

For effective work, I usually do it by this algorithm of tasks: it must be stylish, in concept, in trend, and it must respond to client’s requests. Also, with the initial development, I take into account the color scheme and corporate identity of the company and research the target audience.

However, there are some basic elements that I definitely use in the header: the company or person identity elements, the horizontal top menu. And there are some that I don’t necessarily use depending on the concept: product or company information, social network links, contacts, search, language switch, subscription.

Which Type of Headers you Wanted to Rebrand or Needed to rebrand?

Well, this feeling is always happens to me after the client’s edits. But seriously, looking at different pages on the Internet, you want to change headers that are vague, do not fit the concept of the site, do not “touch the user’s feelings” at first sight, or they are too basic and look like everyone else. 

What do you Think about Animation in Headers and How Difficult it is to Make them?

Header animation makes it very difficult to load a site, although widescreen animation is now trending. That’s why you need to analyze if it gives you a wow effect, then the header animation should be used.

Of course an animated header takes a lot of time to develop. It’s more difficult than just inserting a picture, but if the customer wants it and it attracts an audience, then you should consider of using this technique.

The designer can collaborate with a developer to embody the idea and animate the header with the help of java scripts, whether it is possible to capture the video and process it in After Effects or to create unique animation in the same program. There is also plugins that allow the designer to solve the problem of heavy animations and insert the animation as a piece of code (in case it is not super-complicated animation).

How you Get Started Working on a Website Header?

I do a lot of study work: the product, the customer, the market, competitors already existing in the market, the target audience, the progress of the customer’s country. I study statistics on gadgets (which devices to orient the design of the site as a whole), collect the mood board considering a desire to understand what the client really wants.

If you have more questions to Lana, you can always contact her.