If you have slow internet, you’re in for a treat, because the loading page for Lion Guardians is stunning:

LionLoading

The white space, the beautiful logo and type, the thin orange line—this is a supremely elegant welcome into a website.

But…inside, this elegance isn’t consistently applied throughout. I found this colored block in the “About us” section of the site:

LionsAboutUs

The text is centered and wrapped on both sides of two curves. Set in all caps, the words are harder to read quickly. The shape of the white field creates a pseudo-extension of the lion portrait, or a tube-like effect that adds a confusing dimension.

What’s more, it’s not clear why this graphic needs to exist at all, given the explanatory text on the right (which doesn’t list them in the same order as in the graphic). But let’s set aside the disordered redundancy for a moment and consider ways to redesign that block.

Poking the logo past the top of the square adds some interest. Here’s what it might look like in context. Another image could replace the logo here:

LionCoreMock1

But if the block is meant to signal a section of information, this option does a much bolder job of that:

LionCoreMock2

Notice that the faces in the logo face the header text, which is positioned squarely in their line of sight. The white is a strong choice here because it pulls from the “core” of the image (really subtly reinforcing the meaning of the words), and emphasizes the lion (which, of course is at the center of this work). The values are set in an 80% tint of the brown pulled from the human figure. The logo “breaks” the grid by poking out of the transparent ribbon, activating the negative space above and beneath it.

It’d be unfair of me end this critique without highlighting that these are truly admirable core values for an organization. Lion Guardians is an amazing nonprofit helping communities in Africa thrive with lions, and I encourage you to explore their site (and consider making a donation) at lionguardians.org.