Design Pattern: Site Header

Site Branding, Identity, & Navigation

There are many different ways to structure and style your site header. Since it is is at the top of the interface, the site header plays an important role in establishing the site brand, identity, and navigational system. Below are a few different options to consider when customizing your site header.

Information Architecture (IA)

When it comes to site headers, one of the first decisions that web designers need to make is what content will be included within the header. Common elements and related concerns often times include:

Site Name
- often times located in the top-left corner
- clickable/linkable to the home page (e.g. href=”index.html”)
Logo
- if there are multiple versions, which version of the logo should be included here?
- Logo + Site name? Logo only?
- Responsive logo? (e.g. see responsive logos)
Navigation (Main Menu)
- How many sub pages should be included?
- Should a link to “Home” also be included within the nav?
- Should third-level pages also be included (e.g. via drop down menus)?
- Any call-to-action buttons (e.g. “Sign in”)

User Experience Design (UX)

How will the user interact with the header? How should the site header behave? Should it always be fixed at the top? or scroll away? Should it appear large at first when the user is at the top of the page, but then shrink in size as the user scrolls down? Should the header expand when the user hovers or clicks on certain parts of it (e.g. navigation items)? Where should the site identity/logo be placed? Top center? Top Left? How will users know what page they are on? Should the site header include a visual indicator to provide feedback to the user what page you are on? Will there be any changes to the user experience for small screens? extra large screens?

User Interface Design (UI)

What color should the site header be? What color should the text be? What typography works well to both communicate the brand and be usable/readable/legible? Should the site identity text be different (e.g. larger? bolder?) than the navigation text? What should the layout be? Header left-aligned and navigation right-aligned? Both centered and stacked? Should each element align to a grid? Should they align to a baseline? How should the site look on small screens? extra large screens?