Header pattern

10 months ago by
  1. What factors do you take into consideration when designing headers? Upload examples of what you've used for your project (and what worked/didn't work)
  2. Comment on the patterns that are posted below (and why you think it works, doesn't work)
Link to the header pattern audit

The audit showed that headers are used everywhere! They’re used on websites, forms, web views, modal popovers, panels and more.

The audit showed that a header can serve many purposes, such as:
  • Anchor the page
  • Reinforce the brand (visual elements help provide familiarity eg. logo, colour)
  • Give context and help to orient the user (through things like headings)
  • Provide navigation options (link to content, menus, search)
  • Quick access to support or highly accessed features eg. call us, help, sign-in to online banking
  • If you had to put this pattern in a category, which one does it fall into? Headers or navigation? Or both?
  • What is the relationship between navigational headers and IA?
  • Considerations for how the header and footer work together eg. is the relationship between header and footer important, or, is the relationship between header, footer and content important to you when you design or use this pattern?

4 Answers

10 months ago by
Global headers

Global header. Complete Freedom form.


Global, navigational header. WLive.


10 months ago by
Navigational headers

Navigational header. WLive, mobile banking app. L1, L2.


Global, navigational header. Public site.
10 months ago by
This may be a bit "off topic" but we're working adding the Basic header component to the GUI. The Basic header is what we currently use in Forms. It's a simple, responsive, multi-brand header with a few options for logo and button placements depending on your needs. We're hoping to get this into the October release.





10 months ago by

In general i use only the headers provided in the Sketch file where i can. Certainly for application forms. 

Below is WIP for the CSH application form headers. Though we would like to tone down the prominence of the 'sign out' button and are using a soft button.

We have also removed the chat icon and current thought is for that to sit bottom right as this appears to be common web practice.

I personally think the Westpac Live site should adopt the new Public site style header.





Please login to add an answer/comment or follow this question.

Similar posts:
Search »