The ideal height for a header typically ranges between 70-120 pixels on desktop, ensuring enough space for clear navigation and branding without taking up too much screen real estate.

---

If your main navigation bar is around 50-70 pixels, a utility bar (top bar) of 20-40 pixels works well, ensuring it remains subtle but functional. It’s common for the utility bar to be roughly half the height of the main navigation bar, but this is not a strict rule. The key is maintaining a balanced visual hierarchy where the utility bar is clearly secondary to the main navigation.

Place the logo in a prominent position, like the top left or center, ensuring it is large enough to be recognizable, with clear space around it to avoid clutter. Make it clickable to return to the homepage, align it with the brand’s style and colors, and ensure it scales well for all d

Logo Size

Avoid making the logo too small, where it becomes hard to recognize, or too large, where it dominates the header.

The ideal height of a logo in a header typically ranges between 40-100 pixels, depending on the overall design of the website, the logo’s aspect ratio, and the header layout.

If the logo is detailed and too large to use in a slim header, consider overlapping the logo with the hero section. See below:

---

Contrast

Don’t place the logo against a background color that makes it difficult to see. Ensure there is enough contrast between the logo and its background.

---

Clutter 

Avoid placing too many elements near the logo that compete for attention or make the header look crowded.

---

Logo may need to be cropped

• If the logo elements are not fitting well within the header, they should be reformatted to fit cohesively.
• Example: In this instance, the business contact information could have been cropped to allow for the logo to display larger in the header. Due to the scripted style of the logo, bigger size allows for better visibility.

• The logo tagline, domain name, or other unnecessary text should be cropped from the logo
  • This is especially true when the text is unreadable or causes unnecessary clutter in the header
• If the logo tagline is removed, it should be placed elsewhere on the site (i.e. the hero image, the h1, heading below the hero, etc.)

Example: The tagline in the logo is not legible and needs to be cropped and placed somewhere else.

Spacing

For modern web design, the recommended spacing between navigation menu buttons is typically between 20-40 pixels. This provides enough space to avoid a cramped look while ensuring the buttons are easy to click or tap, especially on mobile devices.

Key considerations:

• Desktop: Aim for around 20-30 pixels of spacing for a clean and balanced layout that enhances readability without feeling too spread out.
• Mobile: You may want slightly more spacing (around 30-40 pixels) to ensure touch targets are easily clickable and not too close together.

The exact spacing can vary depending on the overall design style, but maintaining a visually balanced and user-friendly experience is the priority.

---

Active, hover, and visited

Avoid underline, instead stick with color change of the text for mouse over. Underlines are best for hover effects on body content links or for accessibility. In menus, they can clutter the design unless used sparingly and thoughtfully.

Generally, changing text or background colors provides a modern, clean design with clear interactivity.

Best Practices:

• Hover State: Changing the text or background color is a clean way to show interactivity, especially with subtle animations or transitions.
• Active State: Use a bold text or background color to highlight the current menu item and visually anchor the user.
• Visited State: Changing the text color slightly (e.g., a softer shade) can help distinguish visited links, though it’s less common in menus.

---

All caps vs sentence case vs lowercase

Using sentence case for navigation menus is generally the best practice. Sentence case (where only the first letter of the first word is capitalized) is easier to read, more user-friendly, and feels less aggressive than all caps. It also creates a more approachable, professional look and improves readability, especially for longer navigation items.

All caps can be effective in certain cases, such as for very short menu items (e.g., “HOME” or “ABOUT”), as it can create a bold, clean appearance. However, overuse of all caps can feel overwhelming or harder to read, especially on smaller screens or for users with accessibility needs.

In most cases, sentence case is a better choice for usability and aesthetics.

---

Below is an example when you:

1. Reduce the font size from 18px to 16px
2. Change navigation from all caps to sentence case
3. Increase spacing between button from 20px to 30 px
4. Round corners of CTA
5. Remove the underline from the active button

Before:

After:

---

Button Shape

Rounded corners are currently more common for CTA buttons in modern web design. This trend is largely driven by the increasing focus on creating user-friendly, approachable interfaces. Rounded corners are perceived as more inviting and less rigid, which aligns with the emphasis on improving user experience, especially on mobile devices, where touch-friendly design is crucial.

Additionally, rounded buttons often feel more dynamic and modern, fitting well with current design aesthetics that favor smooth, organic shapes and softer visual elements. While square corners can still be effective for certain brands, rounded corners tend to dominate because they create a sense of comfort and accessibility that resonates with users.

Button Color

When choosing the color of your CTA, focus on making it visually distinct while aligning with your brand and ensuring it’s attention-grabbing. Here are the key considerations:

1. Contrast: The CTA should stand out from the background and surrounding elements, ensuring it’s easily noticeable. High contrast between the button and its background (e.g., light button on a dark background) improves visibility and draws the user’s eye.
2. Brand Alignment: The CTA color should align with your brand’s color palette but still be distinct enough to stand out. Often, brands choose a secondary or accent color for the CTA to create a visual hierarchy.
3. Emotional Response: Colors evoke emotions, so choose a color that matches the tone and goal of your CTA. For example:
   • Red: Urgency or action (“Buy Now”).
   • Green: Positive actions (“Get Started”).
   • Blue: Trust and calmness (“Learn More”).
   • Orange/Yellow: Energy and enthusiasm (“Sign Up”).
4. Consistency: Use the same CTA color consistently across your website to maintain a cohesive design and reinforce its importance.
5. Accessibility: Ensure your CTA color is accessible for users with visual impairments, meeting contrast ratios recommended by WCAG guidelines (4.5:1 for small text).

By balancing contrast, brand alignment, emotional response, and accessibility, you can choose a CTA color that is both visually effective and functional.

Font color

The font color inside the CTA button should provide strong contrast against the button background to ensure readability and visibility. Here are some key guidelines:

1. High Contrast:
   • The text color should sharply contrast with the button color. If the button is dark, use a light font color (like white or light gray). If the button is light, use a dark font color (like black or dark gray). This ensures the text stands out and is easy to read.

Search bar

Ensure it is easily accessible and visible, typically placed in the top right. It should be unobtrusive but large enough for easy use, especially on mobile devices.

Phone numbers

Include a clickable phone number in the header if your business relies on calls (e.g., service-based businesses). Ensure it is prominent but not overpowering other elements, often placed near the top right.

Addresses

Only include addresses if your business is location-centric (e.g., retail or restaurants). It’s usually better suited for the footer or a dedicated contact page, unless local business discovery is key.

Social media

Keep social media icons small and positioned in a non-distracting area, like the top right corner. Ensure they don’t compete with primary CTAs or navigation.

Social media icons can indeed act as exit points that drive users away from your site to more engaging platforms like Facebook, Instagram, or X (Twitter). Once a user leaves your site, they may get distracted by other content, reducing the chances of them completing a conversion action on your website (e.g., purchasing, subscribing).

Key Points:

1. Primary Goal of Social Media: The main purpose of social media is to drive traffic to your website, not take users away from it. Once they’re on your site, your goal is to keep them engaged with your content, products, or services.
2. Potential Distraction: Clicking a social media icon can lead users into endless scrolling on social platforms, which often means they won’t return to your site.
3. When to Include: Social media icons should generally be used in the footer or less prominent areas of the site, where they’re accessible but don’t tempt users to leave right away. Some businesses also include them on a dedicated “Follow Us” page or during the checkout/thank you process to minimize distraction.

Best Practice:

• If you include social media links, make sure they open in a new tab, so the user’s session on your site remains intact. This gives them the option to check out your social media but easily return to your website.

Tagline

• If you use a tagline, it should be short and placed near the logo to reinforce branding. Ensure it doesn’t crowd the navigation or other key elements.

Hours of operation

Only include hours if they’re critical for your business (e.g., restaurants, service businesses). These are often better suited for the contact page or footer, but if in the header, place them in a subtle yet accessible spot.

Icons next to elements in header

Including icons next to addresses, phone numbers, or emails is generally a good practice, as it provides quick visual cues that make the information easier to identify and process. Here’s why and when to use them:

Why Include Icons:

1. Visual Clarity: Icons make it easier for users to quickly distinguish between different types of contact information (phone, address, email) without having to read closely.
2. User Experience: Icons help streamline the user experience by breaking up text and adding a visual element that draws attention to key details.
3. Mobile-Friendly: On smaller screens, icons help reduce cognitive load by clearly indicating the type of information at a glance.

When to Use:

• Phone Numbers: Use a phone icon to make it clear that the number is clickable and to indicate it’s for calling.
• Email: A simple envelope icon works well to denote an email address.
• Addresses: A location pin icon helps users instantly recognize that it’s a physical address.

When to Skip:

• Minimalist Design: If your design is very minimalist, or if icons would crowd the header, you can omit them and rely on well-placed text.

In general, using icons enhances clarity and user experience, but it’s important to maintain balance and not overcrowd the header.

Header Color

The ideal background color for the header should enhance the site’s design while ensuring good readability and contrast for elements like the logo, navigation, and CTAs. Here are best practices and considerations:

Ideal Background Color:

1. Neutral Tones: Light or neutral backgrounds (white, light gray, or soft beige) are common choices because they create a clean, minimal look that pairs well with various content and allows text, logos, and CTAs to stand out.
2. Brand Colors: Use brand colors if they align with the site’s identity and ensure they don’t clash with other elements. A subtle shade of your primary or secondary brand color can add consistency and reinforce branding.
3. Dark Backgrounds: Dark backgrounds (black, dark gray, or navy) work well for sleek, modern designs, especially when paired with light-colored text and logos. This creates high contrast and makes key elements pop.

What to Avoid:

1. Low Contrast: Avoid background colors that don’t provide enough contrast with text or logos. For example, light text on a light background or dark text on a dark background can reduce readability and accessibility.
2. Overly Bright Colors: Avoid extremely bright or neon colors, as they can be harsh on the eyes and distract from the content. They can also make elements like navigation difficult to read.
3. Clashing Colors: Ensure that the header background complements the site’s overall color scheme and doesn’t clash with key elements. Avoid busy patterns or gradients that can make text harder to read.

When to Use a Transparent Header:

1. Over Hero Sections: Transparent headers are often used when the header overlaps a hero image or video to create a more immersive, clean look. This works well when the hero image or background has enough contrast and the header elements remain clearly visible.
2. Minimalist Design: Use transparency for a sleek, minimalist design where the focus is on the content rather than the header.
3. Sticky Headers: Transparent sticky headers work well as users scroll down, keeping the navigation accessible without disrupting the content flow.

When to Avoid a Transparent Header:

1. Low Contrast with Background: Avoid transparent headers if the hero image or background behind the header is too busy or lacks contrast, making navigation and text unreadable.
2. Complex Designs: If your header has many elements (social icons, phone numbers, etc.), transparency can make the design feel cluttered and hard to read. In these cases, a solid or semi-opaque background is better for clarity.
3. Brand Identity: If the header is an important part of the brand identity (e.g., using a solid brand color), transparency may dilute the visual impact.

Utility Bar (Top Bar)

The narrow, upper strip that contains secondary information like contact details, login links, promotions, or utility functions.

A second bar (utility bar) is useful for sites with important information that needs quick access, like e-commerce or content-heavy websites. Here’s when to use or avoid it, and what to include:

When to Use:

• E-commerce Sites: Great for displaying promotions, free shipping offers, or return policies.
• Contact Information: Perfect for phone numbers, emails, or live chat links, especially for service businesses.
• Utility Links: Useful for login, cart, language, or currency options, particularly in e-commerce.
• Notifications: Ideal for urgent messages or site-wide updates.

When Not to Use:

• Minimalist Designs: May add unnecessary clutter to simple layouts.
• Low Content Needs: If no secondary navigation is required, the bar may distract from the main menu.
• Mobile View: If it clutters the mobile version or requires too much scrolling, it’s better to avoid.

Design

It’s common for the utility bar to be roughly half the height of the main navigation bar, but this is not a strict rule. The key is maintaining a balanced visual hierarchy where the utility bar is clearly secondary to the main navigation.

General Guideline:

• If your main navigation bar is around 50-70 pixels, a utility bar of 20-40 pixels works well, ensuring it remains subtle but functional.
• The exact ratio can vary depending on the content in each section, but keeping the utility bar smaller helps it feel unobtrusive and visually distinct.

Keep It Minimal: The utility bar should contain only the most essential information or links (e.g., promotions, contact info, account login). Avoid overcrowding it with too much content to maintain a clean, user-friendly design.

Maintain Visual Hierarchy: Position the utility bar above the main header, keeping it visually distinct but subtle. Use smaller icons or text to indicate that the information is secondary to the primary navigation.

Avoid Distractions: Don’t use flashing elements or overly bright colors in the utility bar, as they can distract users from the main content or navigation.