Building a Captivating Website Header

If your website was a house, your header would be the lawn. It’s the first thing users see, and it dictates whether they keep driving or stop to take a look the house.

With so much riding on the header, it can be tempting to jam it full of bells and whistles. Do not fall into that temptation as the header is one of the most important parts of your site. Website design companies will tell you that the header is a secret tool in your design arsenal.

A header can accomplish the following:

• Display the brand identity, including photos, slogans, logos, and colors. If the brand has a visual element, the header can display it.
• Interaction fields for search, subscription, and/or language options.
• Call-to-Action fields (i.e., a button that says “try” or “shop”).
• Basic navigation links.
• Social media network links.

But is the capacity enough to justify fulfilling every function? No. If every available element of a header is used, the quality of the user experience (UX) will dissolve. Headers should be easy to access and easier to decipher – remember, this is the website’s lawn. If the lawn were covered with shrubbery from curbside to door, it would be inaccessible. In the same way, a cluttered header signals that navigation and content will be difficult to reach from their current location. As per digital marketing agencies, there are a number of things you need to keep in mind when it comes to designing the perfect header.

Header Design Aspects

Defining which functions a header should fulfill will vary from site to site. If the goal of the site to provide information on a product, a CTA field and brand identification would be higher priorities than linking social media networks. But if the site were devoted to showcasing a marketing agency’s work, social media links would have a much higher priority than the first case.

There are some constants to consider for header design, however. Most websites want users to engage and explore the content. It is something that forms the basis of their website redesign and initial design as well. One of the most important header design aspects is how it facilitates site navigation.

Navigation Options

Perhaps the most popular option for providing navigation within the header is the hamburger button (displayed as ☰ ). This button, sometimes called the pancake or hotdog button for its layered appearance, has two advantages over other navigation styles.

The first advantage is that it allows the designer to display a full menu easily from the header without displaying complicated paths, as in the classic navigation style. Instead of displaying a textual-based hierarchy (i.e., home > gallery > cats > gifs), users can use a visual hierarchy to access the end page they want in fewer clicks.

The second advantage, and likely the reason that the hamburger menu harbors so many top left corners is that it’s highly compatible with mobile viewing. These compressed menus allow mobile users to appreciate the style and content of a header without significant amounts of screen space being occupied by the navigation pane. This menu is something you must keep at the top of your mind when you are approaching a Drupal development company for your header and website design needs.

Typography

Source: Hawk & Hen

Clean, smart typography is half the visual battle for a header. It is one of the most important website redesign services available in your toolkit. The text must be visually distinct without losing readability. If the typeface in a header is too stylized, it can detract from the credibility of a site and discourage users from reading further. On the other hand, if the typeface is so generic that it’s unremarkable, what it gains in readability it may lose interest.

But in the battle of form versus function, typography will always favor function. It’s more important that text is legible than it is to establish brand identity through typeface.

Of course, in an ideal situation, the typeface can accomplish branding and readability at the same time. But when in doubt, focus on visual acuity above all other facets in header typography. As per the best Branding Companies, this is something that always works wonders.

Illustrations and Photos

Source: Climate Under Pressure

There was a time when a header was defined as the static image behind a site’s navigation. While a header can still be defined that way, the use of imagery has changed significantly in recent years. Illustrations are more popular than ever for website designs and can offer the right level of abstraction to improve aesthetics without decreasing readability.

Photos and illustrations used on the header should be large enough to accommodate the widest displays while maintaining a ratio aspect to scale down to the smallest of them as well.

Trending Header Styles

Creative agencies would like for you to know one very important thing: Two header styles have taken the main stage in website design trends lately: Hero and video. Both trends have pros and cons for use. Ultimately, which header style (if either) is ideal for a website will be determined by user research and target demographics.

Hero

Source: Pierre’s Ice Cream Company

The hero header design features a large image, often the total or near total view of the above-scroll space a user sees, with navigation elements overlaid on top of it. Provided it’s a standard image file, these headers are easy for users to load and often translate well to a mobile display. You also need to make sure that you are using the right web development languages in order to support the image files on your site. For merchant websites, hero headers can make a bold impression by featuring flagship products behind the navigation and encouraging users to investigate further.

The downside of a hero header style is that the image chosen defines the user’s first impression: If it’s the wrong picture or a stock photo, they may not be left with a positive–or any impression at all; rarely do websites get the chance to make a second. If you choose to incorporate the hero header design, devote extra time to image selection and testing.

Video

Source: Follow-Your-Intuition.com

Video headers, usually part of a hero layout, are an exciting new trend in web design. These headers allow web designers to display video clips that can make a striking impression and keep users intrigued longer than static images. However, this trend is a relatively recent emergence for a reason: The videos should be at least 720p quality.

High definition translates into higher loading times. On a desktop with a high-speed internet connection, this usually isn’t a problem, but mobile users will have issues with loading and playing videos regardless of their phone OS.

If your website uses a video header, hero-style or not, disable them for mobile users. They’ll appreciate it.

Narrowing Down Your Header Design

When you approach web design los angeles, you will have a dilemma in front of you. Determining which bells to include in your header and which whistles to cut can be a lengthy process, but it boils down to one important question:

“What is the goal of this content?”

When you narrow down what you want your website to do, say, and mean for users, choosing header attributes will come naturally.

Remember, it’s not form versus function. It forms a function.