All-Important Design Elements for Your Website Header
A website header is the first thing everybody sees when visiting any website. It sets the first impression and leads to many things. Let’s learn all the important elements for your web header design.
We as a Bangkok web agency have provided all of the must-know about website header for you.
In this article, we will talk about what the website header is referring to, what should be in the header, best practice to design each element, and what to do for the header of mobile websites.
- What is a website header?
- Important elements on the website header
- Website header elements design
- Website header for mobile devices
- Final thought
What is a website header?
Website header is simply the top part of the websites, usually it refers to the strips at the top of the websites where you can find logos, some menus, and Call-to-Actions. However, today the term website header now refers to the whole area above the fold of the web page, especially the homepage.
The area above the fold is the space that we see when entering the website without having to scroll down. It is the first part of the website that the visitors will see. It is important in getting attention, stating basic information about the website, and even inviting and encouraging visitors to do some actions like subscribing, or signing up.
Important elements on the website header
Since the header is there to give basic information about the brand, convey the important message, as well as guiding and sending the visitors to other sections of the websites. There are a few elements that should be included in the web header.
The important elements of website headers are
- Name and logo
- Navigations
- Call-to-Actions
- Contact information
- Headlines or texts
- Images or videos
- Search query
- Space
The elements listed above are recommended to be the part of the header, however, you do not need to include everything. You can always choose to only corporate the elements that suit your goals for the header of the page and website. For example, search queries may not be necessary for your websites if you have less pages and contents.
The most important factors to consider including any element is the suitability and the goals of your website. As long as you have all the necessary elements to help your website’s visitors, your web header is as perfect as it should be. Remember that having more elements does not guarantee the usability of your header. Sometimes you can achieve more with less elements, like many minimalistic web header designs.
Website header elements design
Now that we know all the important elements, let’s talk about how to make each element work best. We will learn how to place and what to do about each element and what to keep in mind when designing each of them.
Name and logo
Brand name and logo is a must for any page of the websites. It is a brand identifier, showing them on the header is great since the viewers will definitely see it. Name and logo should be present on the top left corner of the header.
It is proven that when you place the logo on the left side, people are more likely to remember or recognize the logo more than the one placed on the right side. If you do not want to place the logo on the top left corner, placing it at the center is also a good choice.
This is because it follows the natural rules of how people read. When reading or even scanning, we will usually start at the top left corner, which is why it is the perfect place for the name and logo of the brand to be at.
Navigations
Navigation in this case means navigation bars or menu buttons that link to other pages of the website. These navigational elements are important for guiding the visitors to complete their tasks and goals of visiting the website, such as buying products, contacting the brand, and many more.
There are many designs for navigation bars, but let’s look at the ones that are suitable for the website header.
1.Horizontal bar
Horizontal navigation bar is when the pages of the website are linked and listed at the top of the header. It is the most common design for header navigational elements as well, see the image above of amber using horizontal navigation bar.
When using a horizontal bar for the header, you can consider only listing the important pages only to keep the design easy to the eyes and to save spaces.
To make the horizontal bar more functional, you could turn it into a sticky navigation bar or what is called a fixed header. It is when you make the navigation bar stick at the top of the page at all times. This way, no matter how far the visitors scroll down, they will always have access to the menu bars, making it easy for them to travel from the homepage to other pages.
2.Vertical sidebar
Another great way to design the navigation bar for the header is to make a sidebar. The pages menus will be listed vertically mostly at the left side of the screen. Similar to the sticky bar, this design gives the chance for the visitors to always see the page options on the screen for easy access.
When using the sidebar, you will need to pick only a few important pages since the vertical side of the screen has limited space if your websites have lots of menus and pages. Which is why it is more suitable for websites with less main pages.
3.Hidden or Hamburger
Last navigation design is the hidden menus or the three lines icon that is called the hamburger. This navigation needs to be clicked or hovered over the three line icon to show to the hidden menus. It is the design that helps you save lots of space on the header. It is perfect for minimal design and is used widely for mobile websites as well.
Call-to-Actions (CTAs)
Call-to-Actions is the texts or phrases that encourage and invite site visitors to do some actions. More common CTAs are “sign up now”, “log in”, “learn more” or “buy now”. It is a text that tells the reader to do something, usually the goals that you as a brand want the visitors to participate in.
CTAs will work better if they are present well. The placement and design of the CTAs button is very important. It should be placed at the place that is easy to spot and use the help of colors or fonts to draw attention to them as well.
Contact information
Contact information is one of the elements that you could put in the header, it can be a phone number or social media. It is not necessary to do so if you provide a contact us page. However, having one of the contact information methods in a place where everyone can spot easily is better. It allows the visitors to contact you quickly and effortlessly.
The contact information can be at the right side of the screen either top or bottom part. If you have a horizontal navigation bar, you can put the contact information along with the menus. However, if you have a chatbox service, you might consider placing them at the bottom right corner of the header instead.
Headlines or texts
Headlines and texts are there to intrigue and excite the visitors. It is a message that intends to capture the attention and interest of the visitors. It is usually a statement that shows the value and identity of the brand. It could be a slogan, or anything that is advertising or works well building trust among brand and visitors. It will mostly be at the middle or center part of the header.
Images or videos
Images, videos and other visual media usually appear on the header to convey some message as well as drawing eyes and attention as well. It can be used as background or as elements on the header and will be placed in the middle level either left, right, or center. It works well in drawing the eyes to other elements like texts and CTAs. Also, do not remember to use high quality images it makes your brand seem professional and stylish at the same time.
Search query
Search query is a cool and functional feature to have on the header of the websites. It will benefit you and the visitor greatly especially if you have lots of pages or products and services to offer. It is another way to navigate the visitors to other pages on the website. Search query will mostly be placed at the top right corner of the website header. It is easy to spot and is not distracting.
Space
Another important element of any design is the space. Space is important for header design since it works as the guide for the visitors to look for the next elements. It draws the eyes to the place you want to highlight. Space also makes the header easy to look at and make the design seem modern and cozy as well as professional.
Moreover, space at the bottom of the header is very important. There needs to be some space between the header and the fold in order to let the visitors know that there is more content to discover by scrolling down. If you take up all the space above the fold for header, the visitors may think that what they see is all of this page. In the example, Carolinaherrera left the space below the header white and blank to indicate this is not the end of the page.
Website header for mobile devices
Now that you have learned about important elements of header and how to design them, you will be fine creating the header for your website. Still, you need to know more about the website header design for mobile devices. Mobile devices are now the most used tools for people to access websites. So if you want to have a good website design for everyone, you need to design a responsive website.
When designing the header for mobile devices, you need to keep in mind that the space is very limited. The common and effective design for mobile website header is to have a logo on the top left corner and hamburger icon on the top right corner with the impactful image at the center. Also, switching between logo and menu icon can be done and still be as functional.
Final thought
Since the website header is the first thing that the website visitors will see and interact with. You should put in effort and care into creating and designing them. It is the important part of the websites that will keep the visitors on the website and lead them to other parts. We have provided tips for best practice for you to follow, but you can always change it up and make it fit your website goals the most. The most important thing to think of when designing the header is the visitors, see the header in the eyes of the visitors to make the best impression for them.