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

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.

UX Basics

Covers the brand basics like colours, fonts, logos, graphics, type, and UX topics like SEO and responsive design.

Headers, in UI Components

Headers establish structure, brand and identity, and provide global navigation.