Headers
Last updated: October 8, 2015 at 20:20 pm

The area at the very top of your site that includes your logo and branding; it might also include some type of global navigation, a customer personalization area, login links, open site search, social media links, etc.


Visual example of the element:


What problem does this element or pattern solve?
Whenever a great deal of information is presented in one location, users need a consistent reference point to keep their bearings. This is not limited to site identification, navigation and/or access to frequently used items, but also the need to verify current login status, locate social media links, confirm items in a shopping cart, etc. The goal of your header is for users to feel comfortable when exploring your site, confident they can locate any topic quickly and easily.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Will you display multiple header states depending upon the user’s current or activity? For example, e-commerce sites often present a streamlined header once the customer enters the checkout path in order to minimize distractions. If you use this approach, clearly define the display rules for each variation and provide clear examples.
  • Because the global navigation is such an important part of the header, you may find it useful for the headers and global navigation patterns to share owners.
  • Responsive sites may have highly complex rules, as headers often change radically depending upon the device being used. Your header page should define all device variations and functionality. Be careful not to include actual breakpoints specifications, but rather cross-reference your “Scaffolding” section.
  • Does your header contain personalized information such as customer name? Again, provide all business rules, all necessary dynamic fields, and visual styling.


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
branding, logo area, heading, banner
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply