Header Design Patterns
Not only is the good designed header visually comforting but also it organizes the contents of the website very well, which inevitably leads to the better user experience, which leads to more revenue.
Here are 32 patterns of global header.
Presumption
If you don’t like to read this section, skip to Design Patterns.
I want to make a few statements on how I chose the websites and how I made the mock-up.
Selection
There is only my prejudice how I selected the thirty-two website. Some are from the largest corporations. Some are ones that I stumbled upon during my daily browsing. Since I work in the technology, the tech companies dominates the spots.
Mock-up
I made the mock ups instead of pasting the screenshots of the websites in order not to violate copyrights. Although this undertaking was cumbersome, I hope the simplified mock-ups help you get the concept of each header.
The mock-up is or does:
Made in gray scale. The components that have color in the original are converted to the gray scale color with the similar brightness.
Have the exact same value of header height, container width, and font size as the original. The other design aspects are not carefully intended.
Use Avenir Next as a font. It is that it is widely available, no need to go Goole Fonts, download and install the font set. Helvetica is too Helvetica. So I avoid it.
Use Material Symbols as a icon set.
Replace brand logos with the square rectangle.
Replace brand name with “bland”
Some selections are from the Japanese websites. In the mock-up Japanese texts are translated to English by the author. This might be confusing for some readers but I decided to do so in hope that those Japanese websites would give you refreshing insight.
The reader can download the mock-up in XD.
Design Patterns
Ordered alphabetically.
Adobe Creative Cloud
Height: 64px, container width: full with the 16px margin, font size: 14, 15px
Source: https://www.adobe.com
Alphabet
Height: 78px, container width: full with the 36px margin, font size: 18px
Source: https://abc.xyz/
Amazon
Height: 99px(60+39px), container width: full with the 16px margin, font size: 14, 12px
Source: https://amazon.com/
Apple
Height: 44px, container width: 980px, font size: 12px
Source: https://apple.com/
Asics
Height: 109px (48+60px), container width: 1180px, font size: 14, 12px
Source: https://www.asics.com/jp/ja-jp/
Auth0
Height: 108px (44+64px), container width: 1216px, font size: 14, 13px
Source: https://auth0.com/
Bootstrap
Height: 66px, container width: 1272px, font size: 16px
Source: https://getbootstrap.com/
Cybozu
Height: 110px, container width: 1280px, font size: 14, 12px
Source: https://cybozu.co.jp/
DigitalOcean
Height: 110px(38+72px), container width: 1280px, font size: 16, 14px
Source: https://www.digitalocean.com/
Docker Documentation
Height: 55px, container width: 1140px, font size: 16px
Source: https://docs.docker.com/
Draft.js
Height: 60px, container width: full with the 20px margin, font size: 16px
Source: https://draftjs.org/
Gatsby
Height: 112px(48+64px), container width: full with the 32px margin, font size: 14, 12px
Source: https://www.gatsbyjs.com/
GitHub
Height: 60px, container width: full with the 32px margin, font size: 14px
Source: https://github.com/
GitLab
Height: 120px, container width: full with the 36px margin, font size: 16, 18px
Source: https://gitlab.com/
GoDaddy
Height: 64px, container width: full with the 34px margin, font size: 16px
Source: https://www.godaddy.com/
HRMOS
Height: 129px(71+58px), container width: 1160px, font size: 14px
Source: https://hrmos.co/
HubSpot
Height: 133px(79+54px), container width: 1080px, font size: 18, 14, 12px
Source: https://www.hubspot.com/
Iubneda
Height: 115px(71+44px), container width: 1110px, font size: 15, 16, 13px
Source: https://www.hubspot.com/
Kintone
Height: 96px(70+26px), container width: 960px, font size: 15, 18, 11px
Source: https://kintone.cybozu.co.jp/
Lucid Motors
Height: 80px, container width: 1260px, font size: 14px
Source: https://www.lucidmotors.com/
Lucidchart
Height: 140px(70+70px), container width: 1200px, font size: 16px
Source: https://www.lucidchart.com/pages/
Meta
Height: 112px(80+32px), container width: full with the 32px margin, font size: 14, 12px
Source: https://www.meta.com/
Microsoft
Height: 54px, container width: full with the 72px margin, font size: 13px
Source: https://www.microsoft.com/en-us/
MoneyForward
Height: 90px, container width: full with the 32px margin, font size: 15px
Source: https://corp.moneyforward.com/
Nissan Aria
Height: 104px(50+54px), container width: full with the 36px margin, font size: 14px
Source: https://www3.nissan.co.jp/vehicles/new/ariya.html
Sony
Height: 64px, container width: 1200px, font size: 12, 10px
Source: https://www.sony.jp/
Tesla
Height: 56px, container width: full with the 48px margin, font size: 14px
Source: https://www.tesla.com/
Toto
Height: 107px, container width: full with the 48px margin, font size: 16, 12px
Source: https://jp.toto.com/
Value Domain
Height: 121px(92+28px), container width: full with the 32px margin, font size: 14, 12, 11px
Source: https://www.value-domain.com/
Virgin
Height: 128px(64+64px), container width: full with the 24px margin, font size: 15px
Source: https://www.virgin.com/
Visual Studio Code
Height: 50px, container width: 1140px, font size: 16px
Source: https://code.visualstudio.com/
VMware
Height: 121px(81+41px), container width: 1250px, font size: 14px
Source: https://www.vmware.com/
Variables
Designers should consider number of variables when design the header as a basis. Those are:
- Header height
- Container width
- Menu font size
- Letter casing
- Contents
There is no absolute answer for each. Nonetheless I attempt to draw some principles.
Header Height
Most of the modern global headers are fixed on the top of the screen. Therefore the bigger the header, the less space for the main content. This fact might make us conclude that the shorter header is better. I wish it is that simple. The purpose of the global header is to navigate users to the content they are looking for. As your business grows, you will have more underlying contents the users would seek. Product lines, manuals, login/signup form, contact, cart, customer support, FAQs, about your company…One row of menu won’t be enough. If the header is too short, the user might not be able to recognize it is there; the main content gets all their attention.
When the header has two layers or only one layer of the block, the main layer height is to be somewhere between 60 to 80px. The minimum height of 54px is plausible. The taller header gives you more breadth, in some way attracts users. Around 64px is standard, not too shaggy.
There are two types of the sub layer: secondary or promotional.
The secondary sub layer, just like main layer, functions as navigation. This place is where the second prioritized contents, yet be useful some users, are fallen into. The height of sub layer must not surpass the height of main layer. Usually the font size of the sub layer is two or more pixels smaller than that of the main layer.
The promotional sub layer is only shown when the business want to show the seasonal periodical content, such as discount sale, or important change in business operation. In many cases, this layer move up as scroll, be invisible to the user, remaining only the main layer fixed on the window. The promotional sub layer is designed tight, leaves minimum margin—or padding in CSS—over and below the texts. The height of this type ends up around 32px.
If the header has a secondary sub layer, the height would be 100-128px. If it has the promotional sub layer, the height would be 90–110px.
Container Width
I think Bootstrap made the term "container" famous and popular. The "container" is an HTML element that has maximum-width, wrapping the contents with padding on both left and right sides, making sure the inside contents do not expand too wide leaving the margin between the window and the contents even when the width of the window is less than the maximum width of the container.
Maybe designers start to design one website with the header. But you are better off sharing the same container width for both the header and main contents. That being said, you should come back to designing header after finish designing the main content. Or other approach is you design the container even before the header and main contents. In general, the container width is tied to 12-column grid. So you design the container as you design the grid. That is what I do.
The maximum width of container is somewhere between 1080-1280px not including the padding.
Besides letting your header have container, you can choose full width approach. That is a layout in which the contents are laid out onto the side of window, leaving some margin. This margin, if the website is informative, not interactive, is usually between 32–48px.
The downside of full-width approach is that if the window is too wide, say iMac that has 2240px screen with the browser window is opened to the full screen width, there could be a awkward space.
I currently use MacBook Air 2020, which shows websites at 1440px. Many websites are designed for the target width of 1280, 1366, or 1440px.
Menu Font Size
“Could you make the font a little bit bigger?” says the client. “We could. But there would be less empty space and be more cluttered.” you reply.
So what is the right font size for the header? I think now I can answer to that question. 14 or 16px. When the letters are uppercase, your only choice is 14px because they look bigger.
You might wonder “which out of 14 or 16?” Again, there is no absolute answer. But here I would do. First use 14px. If that font size does not get approval, make it 16px, willingly or unwillingly. If it gets approval, love your client or boss. If your client ask you to make font bigger than 16px, well, you are doomed. Just kidding. Show them this page, compel them that Fortune 500 companies use 16px, or even smaller size.
How about 15px? To be honest I love to use 15px in the real projects. But not because I cannot decide, but because I live in Japan and 14px Japanese letters are literally harder to read since they have mush more strokes than the roman alphabet characters. I ended up using 15px, sometimes 16px.
Letter Casing
We have three options:
- Sentence case (normal case)
- Title Case
- Uppercase
Title casing can be more legible, which concludes the general approach is to use title casing for menu texts, sentence case for buttons. Many companies use sentence casing for the button text. If all of your menu items are one-word, there would be no distinction between sentence and title case.
Uppercase is more elegant, luxurious, rich, and classy than the other two. Lucid and Virgin prove this point.
Contents
All your effort to design will fail if your contents are dumb. I wrote this last because it’s your first priority. Design contents. You might not have authority to control the contents but you shall try. I shall, too. Make it make sense, understandable, and semantic.
Download
You can download the XD file of the mock-up at:
