How does the logo placement influence other UI components?

Deep dive

When thinking about logo placement, remember that a logo is a part of the brand’s visual identity and serves these goals:

1. It reminds visitors where they are—that is, what app or website they’re using.

2. It facilitates navigation to the home page when placed in the top-left corner. Most apps and websites no longer include a “Home” button in the navigation.

3. It increases brand awareness, appearing across all marketing channels—website, social media, videos, and print.

Keep this in mind when answering these questions:

• Should I add a logo now?

• Does it improve the user experience, or is it mainly for branding or decoration?

• Where should I place it? Should the logo be on the left or right?

Which components do logos typically interact with?

In app design, common logo locations are:

1. Header or sidebar: It serves purposes 1 and 2. Whether it’s in the header or sidebar depends on the logo's shape and size, which we’ll discuss later in the article.

2. Onboarding or user guide: It serves purpose 1 and reinforces brand recognition. 

3. Internal pages (e.g., About Us, Terms & Conditions): It’s mostly decorative.

4. Advertising pop-ups (e.g., Sales or New Features): It can grab the user's attention, but the purpose is mostly decorative. 

Logos in onboarding screens, internal pages, or pop-ups are optional.

Websites often include logos in footers, serving the same purpose as in the header. Mobile apps, however, usually don’t have footers.

Are there industry logo placement guidelines for UI?

As mentioned, logos typically appear in headers or sidebars, depending on their form and size. 

A wide but short logo works well in both the header and sidebar, while a tall logo is better suited for the sidebar.

Ideally, create two versions of the logo—one with text (full version) and one without, such as just an icon (short version).

👋 Read the full case study 

Top-left corner

Logos in the top-left corner naturally align with the left-to-right (F-shaped) scanning pattern. Users expect to find the logo there. 

Research by Nielsen Norman Group found that users are 89% more likely to remember logos in this traditional top-left position compared to logos placed on the right. This finding comes from a study of 128 participants, conducted remotely via the UserZoom platform.

Procedure:

1. Participants viewed four hotel websites in randomized order.

2. Each participant saw either the actual design with a left-aligned logo or a manipulated version with a right-aligned logo.

3. After viewing each site for about a minute, users rated it on qualities like being welcoming, unique, stylish, and desirable to stay at.

4. To assess brand recall, users were later asked to identify the hotels they had seen from a list of ten names.

Source

Results:

• Brand recall: Users were significantly more likely to remember the hotel name when the logo was in the top left (39% recall) compared to the top right (21% recall). The left-aligned logo resulted in an 89% higher recall rate.

• Perception of the hotels: Ratings for “unique”, “stylish”, “welcoming” and “desirable” were almost similar.

Source

Center

Centered logos have become more common, likely due to responsive and mobile-first designs.

On mobile, the menu icon often appears in the top-left corner, moving the logo to the center. On small screens, the distance between the menu icon and logo is minor, but on larger screens, it becomes significant. 

Hence, the center is not the best place for logo design.

Source

Research by Nielsen Norman Group found that getting back to the homepage is about 6 times harder when the logo is placed in the center of a page compared to when it’s in the top-left corner. 

This finding comes from a study of 50 participants, each interacting with one of the 14 fashion retail sites with either left-aligned or centered logos.

Users completed two tasks:

• Select a gift costing less than $100 and add it to the cart (the users started on the homepage).

• Return to the homepage from the page where task 1 was completed.

UserZoom’s clickstream tracking recorded users' actions, noting if they could reach the homepage in a single click.

Results:

• Left-aligned logos: Users were more successful in reaching the homepage with one click. Only 4% of users had trouble. 

• Centered logos: 24% of users struggled to navigate back to the homepage with one click. They often misclicked on the leftmost link rather than the centered logo.

Top-right corner

In right-to-left languages (e.g., Hebrew, Arabic, Persian, Urdu), logos are typically placed in the top-right corner, along with the main navigation. 

It’s generally a good practice to align the logo to the side that matches the user’s natural gaze direction.

Other cases

On internal pages, onboarding screens, or marketing materials, logo placement usually depends on the layout and the designer’s or stakeholders’ preferences. 

In these cases, the logo is more decorative, placed where it looks best, without strict rules to follow.

How do a logo's size and shape impact its placement in the UI?

The logo location in the UI—such as in the header or sidebar—depends on its size, shape, layout, and the surrounding elements. For example:

• A wide, short logo can fit well in both the header and sidebar.

• A tall logo is typically better suited for the sidebar.

If you have multiple logo versions—such as one with the text and icon and a simplified version with just the icon—you can easily switch between them to best fit the available space.

The same principle applies to size: adjust logos based on the surrounding elements.

For example, if a header has a button height of 40px, the logo should not exceed 40px to maintain visual harmony. For logos that include both an icon and text, using a smaller size like 24-32px often works better to avoid drawing too much attention. 

A logo already stands out due to its unique color or font. 

Additionally, consider where the logo will be used—whether on a website, social media channels, or print materials—and prepare different versions to suit these various mediums.

How might logo colors impact the design system palette?

It largely depends on the context and where the design process begins. 

Sometimes, a UX/UI designer starts by creating the application, and then a graphic designer creates the logo to fit within that system. Alternatively, there may already be an established brand, and the UX/UI designer will base their work on the existing branding.

Consider these questions:

• What design assets are already available?

• Does the design system already include primary, secondary, tertiary colors, and their shades and tints?

• Is the branding finalized, or does the logo still need adjustments?

• Are there specific client requirements?

• Are stakeholders open to changes?

When it comes to logo colors, visual harmony is key. 

The logo doesn’t necessarily have to match the primary product color, but it should be harmonious. For instance, a green logo with blue primary buttons may clash, while an orange logo with blue buttons might work better.

The logo can also be black and white, while the rest of the system is colorful—like Coca-Cola’s black and white logo. 

❓Questions designers should ask themselves

By asking the right questions, designers can question their decisions, find areas to improve, make sure nothing is overlooked, and reduce mistakes, leading to better, more thoughtful designs.

• Do existing brand guidelines specify logo placement rules?

• What's the primary navigation pattern of our application?

• How frequently do users need to return to the home page?

• Does our user base have established mental models from competitor products?

• Does the logo visually dominate other UI elements?

• Is the logo placed in a way that maintains a clear visual hierarchy and does not overwhelm the user?

• Does the logo placement align with common industry standards and user expectations?

• How does it impact user navigation and information processing?

• How does it adapt to different screen sizes and devices?

⚠️ Common mistakes to avoid

Learning from your mistakes is important, but many problems can indeed be predicted and avoided. Based on Cieden's collective expertise, we're sharing the most common ones.

• Placing the logo in a non-intuitive location that disrupts user flow.

• Ignoring the impact of logo placement on brand perception and recall.

• Focusing solely on aesthetics without considering usability and cognitive factors.

👥How to convince stakeholders

One of the most crucial skills for a designer is being able to explain and back up their ideas. If you're having a hard time convincing stakeholders, take a look at our tips to help you communicate better.

• Present research data and case studies highlighting the positive impact of logo placement on brand recall and user engagement.

• Conduct A/B testing to showcase the difference in user response and brand recognition with different logo placements.

• Discuss the long-term benefits of optimizing logo placement for improved user experience and brand consistency.

🛠️ Useful tools 

These tools will make your job easier and more effective.

• Eye-tracking software to analyze user attention and behavior regarding logo placement.

• Prototyping tools for testing different logo placements and gathering user feedback.

• Usability testing methods to evaluate the effectiveness of logo placement in enhancing brand recall.

🤝 Credits

Our content combines the knowledge of Cieden’s designers with insights from industry influencers. Big thanks to all the influencers for sharing awesome content!

• Website Logo Placement for Maximum Brand Recall by Kathryn Whitenton

• Centered Logos Hurt Website Navigation by Kathryn Whitenton