Something had just clicked in my head, so I went running to create this article

But before going into it, just for context’s sake, what we’re talking about is these sorts of sections, like the one on Quintly’s page:

Or this component from Lander's home page:

It’s an odd choice, isn’t it?

I mean, why not have all the logos take their real colors?

Why grey them all out? And why does it come up on so many landing pages?

The first few guesses you might come up with might be:

• It’s a design choice. (It is, but not for reasons you imagine)
• The “grayed out component” has showed up on the biggest landing pages out there, and as a consequence, it ends up being copied onto smaller pages. (Which is probably true, but that doesn’t tell us anything about why it’s grayed out in the first place.)
• If we left the logos as is, colors and all, they’d distract from the landing page and its offer. (This one is super, super close! But it’s not the exact reason.)

Alright, so what is it? And why are they grayed out?

The answer has to do with conveying a sense of clarity to your page.

Let me explain.

Landing pages are pages that, by principle, have one goal (or action) they want the user to complete.

This could be opting in to something, downloading an app, calling a phone number, etc. Things we already have an idea on.

And we also know that, the idea behind including other company’s brands on our page is to convey a sense of social proof.

Something that says:

“Hey, these awesome companies trusted us to do good work for them. Would you like to try us out?”

And that’s all well and good.

But here’s the thing…

When we have users land on our page, we don’t want to make things seem more complicated than they are.

That is to say, we want things to be as clear as possible.

Our headlines, page colors, images, videos — they should all make obvious:

1. The offer being proposed to the lead.
2. Where to click next/Where they should click to accept the offer
3. The benefits/features and what they’ll get once we accept/pay for the offer.

Now if you read that list carefully, you’ll notice something.

More than it being a design issue…

Isn’t that a UX issue?

And it is!

The reason why logos are greyed out has to do with UX

And the basic principle leading here is this:

“Don’t make things that aren’t actually clickable, look clickable”.

To show off this principle, let me show you one of Slack’s home page (It’s the Spanish version).

And here’s a question I want you to answer:

Do these colored brand logos look clickable? (The ones inside the red rectangle)

They kind of do, don’t they?

And you know what?

They are.

You can click on them to see different case studies!

Of course, looking at it from afar, you’re not 100% sure they’re clickable or not, right?

Which is a problem.

There are ways in this case to make it more obvious though.

Maybe by making so that when the mouse is hovered over one of the logos, they grow in size, like this:

Or maybe by including a small headline before the logos that says something like “Explore our client’s case studies”. (But you know, in Spanish)

This is important because you don’t want users to have to guess or investigate which are links and which are just images.

Leads should only have to worry about your offer, NOT your page design.

And here is where the greyed out logos come in.

They don’t look clickable, do they?

Thus, they don’t distract your user away from your offer.

Which is a great thing! Because…

Users shouldn’t have to guess OR investigate what they can or can’t click on!

Another easy way to associate this with another familiar concept you might be familiar with would be a “disabled” dropdown selection:

You’ve probably seen one of these on a sign-up form before. And you know from past experiences, that no matter what you did, you couldn’t really interact with it.

So, by association, you kind of understand that greyed out objects can’t be interacted with. They’re just informative (Or you might need to do something before they become active.)

That’s why you’ll see those greyed out logos everywhere.

And that was the little ah-ha! moment I had.

But that doesn’t mean every time you want to showcase client’s you need to gray them out.

This is just a concept.

As long as you make it seem like they aren’t clickable, you can make other design choices.

Here’s one example from Shopify’s plus page:

Or this component from eztexting.com:

Same principle, different design decision.

If you’d like to see more analysis like this, consider checking out my profile and downloading my free landing page swipe file.

Get My Free Landing Page Swipe File (Examples & Studies Included!)

I’ve front-loaded the work of collecting, analyzing and categorizing a number of different landing page examples for you. These include squeeze pages, “free trial” pages, homepages that look like landing pages and much more.
Sign up to my newsletter here and get it as a bonus. < —