September 18, 2020

Clean UI Trends for Large Website Headers

Once a visitor lands on your website the first thing they notice is your header. Whether it’s only a small navigation bar or a large fullscreen photo slideshow, the header section is an important part to any layout. Larger headers tend to be more memorable and help to promote a website’s branding. When built correctly a large header can leave an impactful lasting impression on every visitor.

In this post I want to cover a few helpful tips for web designers looking to implement large trendy header sections. The best technique is to focus on a website’s content and highlight the important stuff. Make that content stand out with a featured spot in the oversized header design. Otherwise just focus on branding to create a more recognizable influence.

Hero Images

The use of large fullscreen images has become a lot more commonplace in recent years. Faster Internet connections allow resources to be downloaded quicker than ever before. Now it’s quite simple to include a 1920×1080 background image which naturally resizes to fit any screen size.

The hero image is typically compared to a banner which is placed front-and-center above the fold. This is often used to promote a product, company, or individual with the use of captivating photography. Branding is always a crucial factor, but hero images are not always about branding. The goal is to strike a connection with the visitor and get them itching to scroll a little further.

woothemes woocommerce hero landing page design

A good example of this effect can be found on the WooCommerce homepage. The hero image is not necessarily related to WooCommerce itself. Each image presents a hypothetical scenario for eCommerce shops that need a solution to sell their products or services. Ideally this image would connect with entrepreneurs who need a solution like WooCommerce to manage their online web shop.

I really like the use of hero images when done in relation to content. It helps to solidify the purpose of a website and photos look spectacular. Obviously the biggest problem is finding a photo which naturally fits into the project. If you’re a photographer this is much easier but for those of us who aren’t always snapping photos consider a royalty-free solution like Unsplash.

Legible Navigation Links

An obvious factor to designing a recognizable header is the navigation. Unless you’re creating a single-page layout it’s likely that you need some links for navigating the website – and even many single-page designs use dynamic scrolling links.

The legibility of your navigation is critical to a positive user reception. People want to be able to recognize pages at a glance and quickly ponder their options. Links could be bold, caps, underlined, or heavily contrasted with the background… anything to make them readable.

1minus1 design agency navigation

An example from the design studio 1minus1 is their ability to generate contrast off the black/white color scheme. Also the links use a snippet of description text located underneath the primary text. This may not help a lot with user experience but it does add to the overall design.

kin hr kinhr homepage background image navigation

Kin HR is another website using a slightly different approach to navigation. Links are placed in the top right corner of the page with bolded all-caps text. They use a shade of grey which animates to a brighter white on hover. Also the current page link has an underline effect to denote location without relying on content. Legibility is about connecting ideas quickly in the easiest fashion imaginable. Keep this in mind when designing your own navigation menus.

Noticeable Branding

It should go without saying that a company’s brand is very important. Regardless of what the company does it needs a recognizable branding. Visitors remember things that are recognizable because they stand out amongst a sea of familiar logos.

themetrust website themes layout homepage

The logo for Theme Trust is memorable and large enough to be a focal point right off the bat. It’s also a great example of a simple logo that doesn’t use too many frills. The capital ‘T’ in a shield icon is also found in their favicon which adds some multidimensionality to the design. Look for new ways to expand a website’s branding outside of just the header. But don’t underestimate the power of a great logo.

Fixed Scrolling Menus

As web browsers have become more standardized some effects have become much more commonplace. Fixed scrolling navigation is one such effect that has found plenty of fame amongst modern developers. It’s a quick solution to navigating a website from anywhere on the page. And thankfully it’s much easier to build with advancements in CSS3 and jQuery.

ausdom camera website homepage layout

The website Ausdom has an interesting method of fixed scrolling navigation. When first landing on the page all the links appear to be situated right within the header’s hero image. The links are a bright white color that seem crisp on the darker background.

Yet as you begin to scroll the navbar will pop out and follow you down the page. It uses a bright white background so the logo and link text changes to a new color scheme. This is a cool design style which creates uniformity on the page and still makes the navigation usable from any location.

drew wilson personal portfolio cloudy navbar

As an alternative to the blended navigation you might try designing a more noticeable scrolling bar. Drew Wilson has a scrolling navbar on his portfolio and it uses the cloudy blurred effect common with iOS7 apps. There aren’t many links since the website is only a single page but it is still a creative design choice which keenly captures attention while scrolling.

Inspiration Gallery

Along with the tips above I put together a short gallery of well-designed website headers. These are primarily large headers that focus on imagery, content, logos, or navigation to capture interest. Since users gravitate toward interesting page elements these headers are perfect for demonstrating how to ignite curiosity in first-time visitors.

Daniel Filler

daniel filler personal design portfolio

Grain & Mortar

grain mortar design studio website header

Playground Inc.

nyc playground studio inc website

Sellfy

sellfy selling digital products homepage

Kiawah Island

kiawah island real estate website

Localfu

localfu website plans local traveling

Statsiv

statsiv instagram stats website homepage image

n+1

nplusone n+1 print digital magazine website layout

Seed Spot

seed spot 2014 conference website homepage

LeShopo

leshopo dark webpage header layout design

Picsell

picsell sell items digital web store header

Góralski Domek

snow ice illustration vectors header webdesign

Clouder

get clouder startup homepage layout

Circle

circle internet financial website homepage design

Paleo Granola Sola

paleo granola sola website homepage

Cuppa

cuppa freelance web design homepage

Photoshop Etiquette

photoshop etiquette header web design

CUPS Annual Report

cups canada website dynamic illustrated header

Pastini Pastaria

pastini pastaria italian restaurant big header design

Metaverse Mod Squad

metaverse mod squad personal website homepage design

Share

Jake is a creative writer and UI designer by trade. You can follow him on twitter @jakerocheleau or learn more at his personal website JakeRocheleau.com.