Headers
Overview
Description
A header is the consistent, topmost element of a user interface that provides branding, navigation, and immediate access to key information or actions for users.
Key elements
Key elements often found in a header include a brand logo, the main navigation menu, search bars, and interactive elements like call-to-action (CTA) buttons or user account links. A well-designed header is crucial for establishing brand identity, guiding users through a website or application, and creating a positive first impression.
Uses
- Branding: it displays the company’s logo or brand name, establishing brand identity and credibility.
- Navigation: it provides links to the most important sections and pages of a website or app, allowing users to explore different areas.
- Information & actions: it offers quick access to essential features like search, notifications, account settings, or contact details.
- Orientation: it serves as a familiar, fixed point at the top of the screen, helping users understand their current location within the interface
Value to user
- Provides orientation and consistent access to main features.
Best practices
- Include clear brand identity.
- Maintain visual hierarchy: Use size, color, and spacing to emphasize important elements.
- Ensure responsiveness: The header should adapt to different screen sizes, such as mobile phones.
- Prioritize user experience: Make sure the header provides clear answers to fundamental user questions (What is this brand? What does it offer?).
- Create a good first impression: A well-designed header can capture user attention and encourage further exploration.
Accessibility notes
- Use proper form controls with labels.
- Provide keyboard navigation support
Can’t find what you’re looking for? Get in touch