Intro to Headers in UI

Discover the components that make up a UI header
Intro to Headers in UI Lesson

First impressions are vital in any product design, and headers are often the first thing new users see. Headers contain important information and functionality for users, including the site’s branding information and usually primary navigation links.

Headers need to prominently stand out on the page, ensuring they're immediately recognized as the primary navigational and informational hub. However, it's equally important for headers to harmoniously integrate with the overall design of the site. This balance ensures that while headers catch attention, they don't overshadow or disrupt the content and aesthetic of the rest of the page.

The purpose of a header

In UI design, a header serves as the topmost section, providing a consistent and easily recognizable area across different pages or screens. Its primary functions include:

  • Branding and identity: It often contains the logo or name of the application, website, or company, establishing a sense of brand identity.
  • Navigation: Headers typically include navigation elements like menus or links, guiding users to various parts of the UI efficiently.
  • Accessibility and orientation: It helps users orient themselves within the application or website, often featuring search bars, user account access, or settings to enhance usability.
  • Visual hierarchy: The header contributes to the overall visual hierarchy, separating different sections clearly and aiding in the organization of content.

Ensure the harmony and consistency of a header's colors  Bad Practice
Ensure the harmony and consistency of a header's colors  Best Practice

The color scheme of a header sets the tone for the user experience and should align with the overall branding and design of the site or application.

Here are some key considerations for choosing the header's color scheme:

  • Use colors that reflect the brand's identity and values. The header often contains the logo, and matching the color scheme with the logo enhances brand recognition.
  • Ensure high contrast between the header background and text or icons for readability.
  • The header's colors should harmonize with the rest of the site's design, creating a cohesive look and feel.
  • Choose colors that elicit the desired response from users, whether it's calm, trust, excitement, or energy.
Provide enough space within a header Bad Practice
Provide enough space within a header Best Practice

The header, being the central navigation element of a product, must be instantly and effortlessly scannable by users. They shouldn't struggle to understand what's included in the header. This is where the significance of header spacing comes into play.

Keep text labels short and to the point, allowing users to quickly grasp their meaning. Ample space should surround the logo, buttons, and other interactive elements. This spacing prevents the elements from appearing cluttered and helps users easily differentiate and select the options they need instead of accidentally clicking something else.

Avoid oversizing the header Bad Practice
Avoid oversizing the header Best Practice

Design header height with usability in mind. On touchscreen devices, ensure all tappable elements are at least 44x44 pixels (1x1 cm) for easy pressing without errors. Text should be around 16 pixels for readability on small screens, though this may vary slightly with font style. Keep the header compact without compromising its look and feel.

On desktops, avoid an oversized header. Start with text sizes that are easy to read, then design the header to be just large enough to include necessary elements without excessive empty space. This keeps the header functional and aesthetically pleasing without wasting screen space or making the logo too large.[1]

 Include enough padding around the edges Bad Practice
 Include enough padding around the edges Best Practice

Your header should at least be as wide as the page's grid, covering the area where the main content resides. However, it's completely acceptable for the header to extend across the full width of the page.

When designing a full-width header, include sufficient padding around the edges. This padding prevents elements like logos, navigation links, or buttons from being right against the edge of the page, which can make the design look cramped and can cause usability issues, especially on touch devices where users might accidentally press the wrong thing.

Position the logo in a familiar location Bad Practice
Position the logo in a familiar location Best Practice

Logos in headers play a crucial role in branding and user recognition. They are typically positioned prominently, often in the top left corner, as this is where users tend to look first.[2] The size of the logo should be balanced — large enough to be recognizable, yet not so large that it overwhelms other header elements or the content itself.

The logo should be clickable, linking back to the homepage or main section. This enhances user navigation, providing a quick and intuitive way to return to a starting point.

Pro Tip! Keep the logo position consistent between pages.

Context-specific header elements Bad Practice
Context-specific header elements Best Practice

Context-specific elements that can be added to a header include:

  • Social media links: Direct links to the brand's social media profiles for enhanced engagement and reach.
  • Primary CTA: A button or link designed to prompt an immediate response or encourage users to take a specific action.
  • Contact information: Quick access to phone numbers, email addresses, or a contact form for easy communication in the form of a Contact button.
  • Search bar: A tool enabling users to quickly find specific content or products within the site or application.
  • Language selection: For multi-lingual sites, allowing users to switch between different language options.[3]
  • User account access: Links or icons for login, registration, or accessing user profiles.
  • Shopping cart icon: For e-commerce sites, providing direct access to users’ shopping carts.
  • Notification icons: To alert users about new messages, updates, or other important information.

A sticky header is a type of header that remains fixed to the top of the screen as users scroll down a webpage. This means that the header is always visible, allowing easy access to navigation, search, and other key functions at all times. Sticky headers are especially useful on long pages, like news websites or e-commerce sites, where users scroll through a lot of content but might want to quickly navigate elsewhere without scrolling all the way back up.

When designing a sticky header, keep it as compact as possible to avoid taking up too much screen space. This is especially critical on mobile devices where screen real estate is limited. Also, ensure that the header is visually distinct from the page content, perhaps with a subtle shadow or a different background color, so it stands out as users scroll. This way, the sticky header provides constant functionality without disrupting the overall browsing experience.

Complete the lesson quiz and track your learning progress.
Start
<?xml version="1.0" encoding="utf-8"?>