How to make a website design suitable for different logo shapes
Are you working on a website design and don’t know which logo it will be using? Creating website templates for an online marketplace? You want to make sure the design is suitable for different logo shapes.
Nothing is more frustrating for clients having a logo that is to small or to big on your beautiful crafted website design.
Define a logo window for your website design. A logo window has a maximum width and height. It’s a container in which most different logo shapes fits. A logo window helps making your website design beter.
I’ve been there myself.
I’ve created a website template which is used by multiple clients. The theme worked well with the rectangle shaped logo, but not with the square ones.
Making a custom work around for each client isn’t time efficient. I wanted a uniform solution for this. No matter the format of the logo — square, circle, rectangle — it must be displayed nicely. So I came up with this solution which I called the logo window.
The logo window
The logo window is a defined space in which the logo lives. No logo may exceed this window. The window is specified by a maximum width and height. The logo window works for mobile, tablet and desktop.
To define the logo window I’m using three main logo shapes: square, rectangle and wide rectangle. I’m skipping the circular logo’s, because they fit in the square and rectangular ones.
For defining the logo window, we have nine scenario’s to deal with:
- square logo on mobile, tablet and desktop (3)
- rectangular logo on mobile, tablet and desktop (3)
- wide rectangular logo on mobile, tablet and desktop (3)
The goal is a logo window that works well for each scenario. So let’s start…
Step 1: create dummy logo’s
The first step is creating the different logo shapes: square, rectangular and wide rectangular. Best is to use fully filled logo shapes. These can be dummies, as showed below.
Step 2: all the scenario’s
Place those logo variants in the mobile, tablet and desktop version of your design. Get the best result for each scenario individually. For example, when you position and size the square logo on tablet, don’t bother about the mobile and desktop version.
Below you can see the result for mobile.
You will end up with a solution for all nine scenario’s.
The third and final step is defining the logo window.
Step 3: creating the logo window
Create another copy of your design for one device, e.g. mobile. Place all three logo variants on top of each other. Define the logo window by drawing a box that fits exactly all logo shapes.
Now you can measure the width and height. For this example, the logo window for mobile is:
- max width: 152 px
- max height: 60 px
For simplicity I’ve used pixels here. You can use others units, it will work the same.
Repeat this for tablet and desktop. The result should look something like this.
CSS for you
You can use the logo window specifications for your CSS. For example:
// for mobile.logo-container {
max-width: 152px;
max-height: 60px;
}// for tablet.logo-container {
max-width: 180px;
max-height: 72px;
}// for desktop.logo-container {
max-width: 270px;
max-height: 72px;
}
Final notes
Please note, the logo window is an optimum. It may not be perfect for one specific logo shape. But the goal here is to make your website design suitable for different logo shapes.
With three steps you can define your own logo window. A logo window makes your website design more versatile. It will put a big smile on the faces of your clients.
