Header inspiration is always a great way to start designing a new SaaS websites. The header is one of the most important parts of a website as it’s usually the first section at the top, therefore, the user sees it first. It generally contains the company logo, the navigation and in some case, a call-to-action button (mostly for SaaS).
This post list 18 headers for your inspiration from some of the most popular SaaS websites. As you will see below, all headers look really similar. We could conclude that if all these headers use the same patterns, it might mean that they represent the strategy to be used.
Still, all the headers look the same, they have some minor differences which were probably tested before implementing them. For example, Freshdesk uses two levels of navigation, Trello and Zapier didn’t put any navigation in their header and Highrise did use any button for their Sign In link.
ActiveCampaign Header Inspiration
ActiveCampaign’s header displays more links including a contact link which is not clear if it’s for the support or to contact the company for any other reason than support. Also, the login link is mixed with the other links instead of using a button like many other examples below.
Asana Header Inspiration
Here we have a really simple header, the logo and two buttons only.
Basecamp Header Inspiration
As Asana, Basecamp has two buttons to sign up and log in. Also, the links are underlined to show that they are clickable.
Buffer Header Inspiration
Buffer uses two different styles for their buttons to make it clear that the action is different.
Campaign Monitor Header Inspiration
All the attention is on the signup button.
Dropbox Header Inspiration
The label of the signup button is their promotion (Try free for 30 days). Also, there are arrows on the right side of the last two links to indicate a drop-down menu (second level).
Emma Header Inspiration
Emma decided to include their phone number in the header.
FreshBooks Header Inspiration
Like Emma, FreshBooks has their phone number in their header with a small doodle “Call Toll Free” to attract the eye of the visitor.
Freshdesk Header Inspiration
Unlike any other examples in this list, Freshdesk has two complete levels of links in their header. Also, there is a magnifying glass icon to search on the website.
GitHub Header Inspiration
Github header is not simple, it uses many distinct elements like the logo mark of GitHub, two groups of links, a search field and two buttons to sign in or to sign up.
Help Scout Header Inspiration
Unlike many examples listed in this blog post, Help Scout separated their list of links and their two call-to-action links so your eye might find them faster.
Highrise Header Inspiration
Highrise has one of the most simple headers from all our examples. Only three links and no special style for their Sign In link.
HubSpot
Like GitHub, HubSpot has many different elements in their header. There are two icons in the top left corners, the globe earth is used to change the language of the site and the magnifying glass is used to display a search field.
MailChimp
By separating the navigation and the two buttons (Sign up and Log in), the eyes of the user can focus easily on the buttons. Also, Mailchimp only uses their logo mark as the brand is well known.
Slack
Here is one of the really few headers listed in this post without signup button. Instead, the button is lower on the homepage or on the Pricing page.
Shopify
The link Help Center has a small arrow on the right to indicate to the users that this link will bring them to another website, in this case, the sub-domain help.shopify.com. If you visit their website from Canada, you will land on Shopify.ca and the Help Center is still on their .com domain.
Trello
Trello completely removed the navigation from their header to keep only the two call-to-action button, Log In and Sign Up.
Zapier
As Trello above, Zapier’s header removed the navigation from their header. An interesting detail is the label of their sign up button: Sign Up For Free to make the offer more interesting for the user.