Header Aspect – Website Cover

Header Aspect – Website Cover

What is and what represents a header?

The header is the first thing that is seen by a website’s visitors. It’s practically the cover that conveys the first emotion, the first thing that interacts with the netizen.

The proverb stating “Don’t judge a book by its covers” wasn’t probably referring to websites, because most of the people do judge it by its header. And because of this great care and importance is taken when it comes to the content of the header. It is the point the visitor decides whether he should go on or not.

Dex: JUDECÁ, júdec, vb I. 1. Tranz. Form an opinion about someone or something, examining the arguments, taking into consideration the surroundings, consequences etc.;

A well-configured header consists of:

The menu section that can have the following:

  • Logo
  • Menu
  • Search Bar
  • Social Media Buttons

The submenu section that should contain the following:

  • Image
  • Title
  • Description
  • Call-to-action Button

 

Example:

 Forwards, we will focus on the most mistaken element, namely:

THE HEADER’S IMAGE

Size

First of all the image we choose should be at least of 2MP (megapixels), this means a width of 1600 pixels.

Recommended would be 1920 pixels for the Full HD screens, in case we are using the full-width style (which allows the elements to be displayed on the entire width of the browser’s screen).

Clarity

The chosen images must be clear and of modest quality, this if we don’t want to use overlays (colour filters) or other effects like Gaussian Blur with which we can clarify the images that are not big or clear enough. It is important that we don’t let ourselves fooled by images with size increased to a certain resolution while they are actually small.

How do we do this?

We increase the image’s size to 100% or on the entire screen and judge via metric eye if the image is clear enough.

This matter more than the image’s density in pixels because, for example, an image of 800px wide can be increased in size even proportionally (without stretching it) to 1920px but this means the source is practically the same, only visually increased in size, as if you were to get close to the screen and start seeing the pixels an image is built of.

Editing

It is possible that we have insufficient resources. In this case, we can use a graphic editing software like Photoshop with which we machine the image placing a fog effect on it (Blur), thus fading the pixels.

Other pages

On the home page, we use a pretty tall image, over 500 pixels in height to send an emotion, feeling, impression together with a message and a “call to action” button. On the other side, on the other pages, it is recommended we use images with a much smaller height, around 200px and full-width, thus creating just an untranslatable line.

Optimization

After we chose and edit the image it is important we optimize it for the web and avoid loading up the website with large images.

UX Vision

On another side, we must choose the images with great care because these are destined to the visitor (people) and are to send a mood and interact with them. Negative or positive would be the options on a binary, very simple, level. But it is actually much more different on a human level. So, a good way would be to put ourselves in the place of the visitor and pay attention to our own expectations. What would we like to see? How detailed? How coloured? How clear? How big? Also, check out the UX Vision article from Baboon.

 

We hope we’ve helped you understand the header’s importance and we are at your disposal for any queries in the comment section. Thank you!

Leave a reply

Your email address will not be published. Required fields are marked *