The Website Masthead – Learn Web Design

Welcome to the first part of our web design essentials series, where we will break down the website into its key components.

—-

You can access a bucket load of tutorials and guides on our dedicated Hostinger Website Builder section at Pixelhaze Academy: https://www.pixelhaze.academy/hostinger-website-builder

—–

I’m now going to look at the masthead for our website, sometimes called the header. It’s a section that remains at the top of our web page and generally contains the logo, navigation menu, and additional features like a telephone number, call-to-action button, login menu, and social media icons.

For e-commerce websites, this is where we will see the shopping cart icon, often displaying the number of items in the shopping cart as part of a badge.

This section is essential for anchoring the user to the website; it remains consistent regardless of which page is visited, providing reassurance to the visitor.

It’s essential to create enough white space around the logo and avoid making the logo too large in the masthead. We also want even spacing with our menu, ideally fitting a horizontal menu on one row in the navigation.

If there are multiple levels to the navigation, we need to carefully structure our menu system. A site map can be useful in the design and planning process.

For larger and many e-commerce websites, it can be prudent to add a search feature to the header area. Here’s an example showing how the apple search appears upon the mouse click. The pull-out drawer animates in the same way as the sub menus, saving considerable website retail space by appearing on a new layer above the website hero unit.

Mastheads can vary from transparent to solid backgrounds, with gradient or blur effects, or solid block colours. Different effects require different approaches; for a corporate traditional feel, a solid white background is recommended.

As we scroll through the page, the masthead can fold away, disappear entirely, or remain fixed within the masthead area (called a sticky header), providing simple navigation without having to scroll back to the top of the page.

A sticky header is preferred where available in certain website builders, as it offers simple navigation for users. The outline structure of a masthead should focus on ease of use, simplicity, reliability, and familiarity for users.

When getting creative with a website, usability and simplicity are crucial, especially in the masthead section. Remember, users should not have to think about how to navigate through your website but instead enjoy the content available.

To summarise, the masthead sits at the top of your page, repeats on every other page on your site, and should act as the central hub or anchor for users to navigate through effortlessly, regardless of their landing page or current location on your website.

—–

If you are struggling to find the time, our team at Pixelhaze Studio can build your Hostinger website for you from only £16.99 per month, with NO UPFRONT FEES. We can also turn it around for you in under 2 weeks:
https://www.pixelhaze.studio/genesis-monthly-plan

Looking to kick-start your web design career with Hostinger Website Builder? Our Project Genesis model is a tried and tested process to get you selling and building Hostinger websites within a couple of weeks. Oh, and week 1 is completely FREE:
Https://pixelhaze.academy/project-genesis-4-hour-web-design-system

Affiliate notice: We are affiliate partners with Hostinger and may receive remuneration for any purchases via the links on this page.