How your nonprofit displays your supporters/sponsors' logos matters. Here we share a few tips on how to create a clean and well-designed grid of logos.
August 28th, 2020
By Michelle Perreault
It's typical to include the logos of your nonprofit's corporate sponsors and funders on your website. You showcase their brands to say thanks, give credit, and to give your own brand a boost. It's a small detail, but how you present this collection of logos matters.
A well done logo grid expresses respect, gratitude, and care. It elicits a feeling of trust in your organization from supporters and website visitors.
Done not so good is, well, not so good. An egregiously large logo next to a small one might suggest one is more important than another. A randomly spaced grid may be hard to read. Mishandling a supporter's brand could have a negative impact on their relationship confidence.
The following examples are based on real examples that have been recreated.
Without a consistent size and amount of spacing around each logo some of them get lost while others really stand out.
While all of the logos are the same width, they are not given the same presence due to their varying shapes and sizes. Notice which logos your eye focuses on and which fade into the background. Assuming all should have equal presence, this is problematic.
The logos in this grid are evenly spaced and each logo is well-proportioned, regardless of their varying shapes and sizes.
It’s often easy to look at a website design element and think, “that seems pretty simple.” But the reality is that even a simple grid of logos needs a fair amount of design thinking and problem solving.
What makes a logo grid challenging starts with the variability in the logo graphic. Some logos are horizontally oriented. Others are vertical. Some have a lot of space around them and some do not. Some have a small amount of text and are easy to read. Some have a longer amount. Basic logo image manipulation is often needed.
Have simple instructions for how you'd like the logo files to share with your sponsor/supporter. Include the size of the file you need. Note if you prefer a particular variation, such as black or white version as opposed to full color. You may not always receive what you ask for though.
Edit all your logo files so they are all close in size. Make sure the logo mark is centered both vertically and horizontally.
Find the right balance of white space. If there is a lot of extra white space around a logo, crop it tighter. Do keep in mind that not all white space is bad. Sometimes you need some white space to help balance one mark's size compared to others.
Logos are generally made of type and illustrative elements. Save these as .png files to use on your website to help preserve their sharp lines and colors.
Review your grid of logos as a whole. Sometimes you might have to adjust your whitespace and cropping of a logo to adjust the marks size to balance with other logos.
Then you weave in the challenges of the web and making a well-spaced collection of logos look good on a phone or desktop. Good files needs good code to make it all come together.
This article by Ahmad Shadeed has great tips for coding a grid of logos so it looks polished. It highlights approaches we have employed over the years.
Designing and coding a grid of logos may look like a simple task, but is actually quite involved. Keep in mind that treating your supporters' brands well is also a reflection of your brand. A logo grid is one of those design elements that merits a notable attention to detail. These details, when polished and seemingly simple, add to building a positive brand experience for you.
Sign up for our occasional newsletter highlighting recent articles to the Mightier Blog, Minds on Design Lab news, and other resources.
Minds On Design Lab is a strategic design studio with digital expertise. We’re passionate about elevating small and mighty teams in the social sector. We connect people to mission through beautifully designed branding, web, and print.
