8

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?

Improve this question
5
  • 1
    How does the company itself deal with reproducing the logo at small sizes? On a business card, say, or a promotional pencil?
    – Andrew Leach
    Sep 22, 2013 at 10:33
  • Many web pages are oriented towards the upper left, leaving the potential for white space at right. Can you use the empty space at the right for the logo?
    – Lauren-Clear-Monica-Ipsum
    Sep 22, 2013 at 13:49
  • The company is actually a non-profit. They don't have any designers and try to do everything themselves which has led to some... interesting design choices in the past. But for the most part their logo is only reproduced on vehicles and uniforms and can be bigger.
    – Hanna
    Sep 22, 2013 at 17:51
  • Also @LaurenIpsum, is it okay to have the logo be on the right-hand side of the page? I find this to be a little strange.
    – Hanna
    Sep 22, 2013 at 17:52
  • Without seeing your design, I can't tell you. I'm just throwing out a suggestion. You could try wrapping the menu around it like spokes of a wheel too.
    – Lauren-Clear-Monica-Ipsum
    Sep 22, 2013 at 18:13

3 Answers 3

Reset to default
4

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.

Improve this answer
1
  • Very funny and insightful answer. +1. I actually really like the centered logo idea. I suppose the header would still be on the larger side but at least keeping the logo centered keeps the header balanced. Also the way BK is doing it is similar to what I tried to do in my own design, but it wasn't feeling right, but I might take another stab at it.
    – Hanna
    Sep 22, 2013 at 17:54
3

There is a Linux Distro that has a logo that is also a circle. Ubuntu's logo is a circle that has a "Circle of Friends" inside of it. They shrunk their logo, and put it in place of where you might expect to see a "Trade Mark" symbol at the top right corner of their name. They do have alterations of their "Logo" and this is one of them. To see the variations of the logos go to http://design.ubuntu.com/brand/ubuntu-logo It also features how they allocated the logo. This may give you an idea for design, if they are not too conservative on what they want it to look like. Otherwise I would suggest making a banner with the logo on it, and using it as the website's header.

Improve this answer
1
  • I really like what Ubuntu did. The advantage they have is that their circular logo doesn't contain text and can shrink it more (or at least they have a textless version of it). I appreciate the input.
    – Hanna
    Sep 22, 2013 at 17:55
0

Big logos, and especially circular is a bit of a headache. Not knowing much about what the logo actually looks like, here are some very quick and dirty concepts.

Pardon the extremely primitive examples; take it for what it is: conceptual ideas, not layout guidelines.

Balance the page with the logo to the left (where you are most likely to have more space)

enter image description here

Use a bit of transparency, make the logo big, do not be afraid of "whitespace" (or more precisely; "logospace".

enter image description here

Depending on the logo properties, you can use transparency and non-transparency simultaneously

enter image description here

Another take on transparency - non-transparency

enter image description here

And, at last, have a little wacky fun in slicing the logo. As long as you have the whole somewhere, slicing can actually be pretty effective; and makes for exciting design.

enter image description here

Improve this answer
5
  • These are interesting as layout ideas, but likely would all break the logo usage guidelines (overlapping text, white space, etc.)
    – DA01
    Dec 3, 2013 at 19:38
  • Ah. Is that logo usage guidelines the organisation imposes? Or the general-rule-of-thumbs? Actually, I often think they are not a good idea in general. When I can, I create logos that would lend themselves to be sliced: where a decent level of recognition is easy without the entire circle. And I enjoy "living on the edge" designwise when I can.
    – benteh
    Dec 3, 2013 at 20:58
  • The logo usage guidelines are typically created by the agency doing the visual branding, and then maintained by marketing. Typically (though by no means universally) logos are designed to stand alone and not have to compete with the rest of the layout. There's always exceptions, though.
    – DA01
    Dec 3, 2013 at 21:18
  • Oh, I know... I often think they stink.
    – benteh
    Dec 3, 2013 at 21:20
  • ...and I assumed the OP would have a good deal more freedom, since he said "They don't have any designers and try to do everything themselves which has led to some... interesting design choices in the past."
    – benteh
    Dec 4, 2013 at 0:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.