Picchu

Header

Guidance

The universal header and footer service (UHF) was created as a unified brand UI structure for all Microsoft products, services, devices, and offerings for web. It incorporates the new Microsoft design standards and is built on our responsive grid framework. The UHF solves for how to use logos and brand symbols, color theming, typography, iconography, common controls, and IA navigation hierarchy.

Without a consistent visual language to communicate brand identity and connection, the user can quickly become disoriented. Inconsistency in visual treatment of similar functions also reduces usability. These two problems negatively impact trust in our brand, reducing conversion and customer satisfaction.

There are two parts to the universal header: 1) The global header, and 2) the category header.

The global header establishes that the site is from Microsoft. It includes common controls that are generally persistent across all site pages: Microsoft logo, global navigation, search, global cart, and sign in/out. The global cart can be turned off for business, commercial, and developer audience segments. No additional elements should be added to the global header.

Site pages that do not accrue to a product, service, or corporate category, such as the Microsoft home page, should only display the global header. Everything else should include the accompanying category header.

The ME control allows for authentication and personalization. It provides page authentication and direct access to Microsoft Account, where the user can access communication or personalization preferences.

Category header

The category header establishes the pages intent, while still showing it is part of Microsoft. It includes a product logo or site label, category navigation, assigned theme color for the site, and an optional primary CTA. It maintains overall brand consistency, while still allowing the individual site’s message and personality to be expressed.

If your page has a product logo, your header should reflect it. Examples include: Windows, Office, Xbox, and Visual Studio. If it does not, the category header will display your site label in text. Examples include: Surface, Band, Lumia, Store, and Support. For site labels, avoid using technical jargon, acronyms, or internal operations language. Use natural, friendly labels that are clear and direct.

The category header includes an optional primary call-to-action (CTA) that can be persistent across all pages the category header is on. It should be your sites primary CTA that drive's your key business objective. Only one CTA should be used in the category header. Additional CTAs should be reflected in the content area of the page.

Resources