How to design web pages around a big logo?


Question

I'm currently designing a website for a place that uses a large circular logo. Their logo contains an image as well as text.

The problem I'm running into is fitting this logo into the web design while still keeping the text in the logo readable, but not taking up a huge amount of screen real estate.

Circular logos are as tall as they are wide. Most logos are wider than they are tall and are easier to fit on a screen because of it.

I'm thinking of incorporating it into the header of the page along with the menu but the height of the logo creates a real imbalance on the screen and the text in the logo makes it impossible to make the logo any smaller.

So my question is this how do you deal with unruly logos? Is it alright to deconstruct them, or what kind of workarounds are useful in these types of situation?

1
8
9/22/2013 4:30:00 AM

Accepted Answer

One thought that comes to mind is that you can really take advantage of what a circle does naturally in terms of its optics. If you put it over a colored nav bar and you let the top and bottom of the circular logo spill over the rectangle, it should reduce the amount of white space you'd need between the header and the body.

In my example the circle is centered (which I kind of like for circular logos, but that's probably a personal thing), but you can left-align it as well.

Image of circle, rectangle, text

I checked out a couple of websites with circular logos. Dell's is just small. So is UPS (not circular but about as wide as it is tall). So is Apple. Burger King did something interesting:

Logo inside hero image

No, French fries on a sandwich are not the interesting part...We've been doing that for decades in Pittsburgh. What's interesting is that they place it inside the hero image. Because they've got awesome photographers, they can make sure their shots are set up so that there's nothing in the upper left to detract from the logo. But it definitely allows for a bigger logo that doesn't overpower because it's still small in relation to a huge picture of food that's right there.

4
9/22/2013 12:23:00 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow


Website under construction!!!
^