I'm new to the graphic design section of SE, this being my first question here, but not new to graphic or web design.

I am in the process of making a free website for a new local eSports bar. The basic layout is there, but the logo looks out of place. (please note none of the grahpics were made by me and are currently just placeholders) The website uses media queries and there are 4 different size layouts based on width:

  • Very Large: 1051px +
  • Large: 751px - 1050px
  • Medium: 461px - 750px
  • Small: Less than 460

In my opinion, the logo looks perfectly in place on the "small" layout, but looks terribly out of place on the other three.

My Question: What can I do to tie my logo into the larger layouts so that it doesn't look as if it's just sitting there? (Resize browser width to see different layouts)

Website: http://pvp.comeze.com/

enter image description here enter image description here

  • smashing magazine has a detailed article about using SVG and CSS to do exactly what you're asking. coding.smashingmagazine.com/2014/03/05/…
    – BrianC
    Commented Apr 10, 2014 at 17:52
  • @BrianC I know how to make it responsive, and I know how to have "different" logos based on which layout is being used. I'm just not liking how it looks at the three higher resolutions, layout-wise. Thanks for the interesting article though.
    – user21784
    Commented Apr 10, 2014 at 17:53
  • Not related to your question, but I have to ask...what is an "eSports bar"?
    – DA01
    Commented Apr 10, 2014 at 18:34
  • @DA01 A bar dedicated to video games and eSports. They stream popular tournaments of video games such as League of Legends, Starcraft, DotA 2, etc. eSports = internet sports.
    – user21784
    Commented Apr 10, 2014 at 18:37
  • I would hang out at that bar!
    – DA01
    Commented Apr 10, 2014 at 18:40

2 Answers 2


Simplest answer: I don't think the logo looks terrible sitting above everything as it is.

Simple answer: You could try floating the logo to the left at large and above and moving the menu up to fill the space.

Complicated answer: You could think more about an identity system. A logo is not a brand; it's just a part of it. Think of how Coca-Cola has their logo, but then they also have the "Dynamic Ribbon" that they use as a secondary element on their can. If you had some secondary branding elements or a color palette to work with, you could work that into the header and better fill the space.

  • That is a good idea, I could add a little something to fill up the blank space on either side. The question is, what?
    – user21784
    Commented Apr 10, 2014 at 18:19
  • 1
    Don't feel that you need to fill the space. White space isn't a bad thing--especially surrounding a logo.
    – DA01
    Commented Apr 10, 2014 at 18:45
  • 1
    To extend Brendan's last suggestion, on mobile (narrow) screen your vertical logo layout makes sense. But on a wide screen, you may want to consider a logo variation that is more horizontal. Perhaps PVP on the left and the tagline on the right.
    – DA01
    Commented Apr 10, 2014 at 18:46

A vertical shape like this logo+text does tend to look a bit lost in a wide horizontal space, especially centered. That's largely because it immediately defines three rectangles, two of which are in the opposite orientation to the logo and text. In order to keep the "bar and comic book lounge" text large enough to be readable, you also have to use an unwelcome amount of valuable vertical real estate at the top of the screen.

Centering the text under the logo, as you've done here, makes it very still. Compare with the slightly offset text you've used in the slider, which has a sense of motion that's very appropriate to the theme. With the letter shapes of your logo, the "pedestal" formed by the two lines of text make the PVP seem just enough off-balance to be a bit uncomfortable.

Make a version for horizontal applications like your web header (you should have one anyway). That allows "Bar and Comic Book Lounge" to be more prominent and also allows you to maintain that sense of motion, which reducing the amount of vertical space needed.

On the mobile screen, it will nicely fill the header. On the large screen it should float to the left. That's where we expect to see a logo on a left-to-right language website, and it leaves you room for an auxiliary menu or a banner rotator for special event announcements or ads if you need them.

Your Answer

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