Can you make the logo smaller?

It’s the cliched scourge of graphic designers the world over: a perfect design is presented to a client, who immediately asks for their logo to be made bigger. Well, those days are gone my friends. Let me tell you why you should be saying to your clients – you need the logo to be smaller.

The idea of a responsive brand identity would have had many a designer scratching their head only a few years ago, but it has very quickly become a necessity borne out of the widespread proliferation of the modern internet. Whereas in simpler times web pages had much in common with the fixed size constraints of a billboard or magazine page, today website content is viewed on over 15 trillion common resolutions across a minimum of 50,000,0000 screen sizes split over a plethora of platforms across several device types*. Where once a designer had to design a thing only once, today they must design to a seemingly unlimited set of rules. 

Screen Resolutions 2020: Responsive Logo Design
*my figures are approximate, and I don’t know what this graph is

Consider the fictional website below:

You are using an iMac with a 27” screen but have yet to realise that you can reduce the size of your browser window. You’ll notice the site fills the screen – there’s a full navigation menu with every page name across the top, the graphic below the menu is eye-poppingly huge yet retains a sharp crispness, the whole site reads across as well as down, the text heading bounds across the screen demanding the attention of even the laziest eyes. 

Now look at the same site on a smartphone.

Responsive logo design 2: mobile view

Everything is smaller – the menu has been hidden behind a button, the graphics are small enough to fit a pocket-sized screen, everything is in a single column, the headings are split over multiple short lines. But they both retain the same feel, and convey the same messages and emotions. This is a responsive website.

Apart from one thing: that header. The header of the website needs to be far too big for a mobile screen in order to accommodate the brand logo. But if the menu, the photos, the content, the line height, the header size, the background image, even the copyright notice at the bottom of the page all change to suit the smaller screen, should not the logo too? 

You’ll see the logo is vertically stacked – that is there’s a visual brand symbol, with the brand wordmark below it. And we can see this logo works absolutely fine on the full desktop version of the site. It also looks good on the side of trucks and on a T-shirt.

Responsive logo design 3: other views

All making great use of space to ram that brand home to anyone looking. But on a tablet screen, having that logo so it’s large enough to be legible is eating up highly valuable real estate on that tiny little screen.

An easy way of using a responsive logo to solve the issue here would be to re-arrange the two elements to be aligned horizontally instead of vertically. This frees up space in the vertical, meaning the main hero section of the site is given more prominence. 

Responsive logo design 4: horizontal & vertical stacks

So now we have two versions of the same logo – a vertical stack, and a horizontal stack. But what about those even smaller screens? On a smartphone display, even more precious screen can be freed up for life-enhancing content and aspirational photography by taking the responsive logo concept even further. By simplifying the mark and cutting it back to just the icon from the original logo, the spirit of the brand is retained within a simplicity far better suited to a mobile phone screen.

Responsive logo design 5: losing the name

The concept of a responsive brand is not really that new – Coca-Cola started advertising with the abbreviation ‘Coke’ in 1941. But this formerly optional branding concept is fast-becoming a must-have for any business that wants a truly future-proof identity. Website developers can work wonders with layouts and typography, so it’s time that the world’s graphic designers catch up – and give them the responsive logos they deserve. 

  • Can you make the logo smaller?

    Can you make the logo smaller?

    It’s the cliched scourge of graphic designers the world over: a perfect design is presented to a client, who immediately asks for their logo to be made bigger. Well, those days are gone my friends. Let me tell you why you should be saying to your clients – you need the logo to be smaller….

  • How to make more money from your website

    How to make more money from your website

    If you’re running a business and you have a website, then your website exists to help you make more money. You might think that this statement doesn’t apply to you unless you’re selling goods or services online, but you couldn’t be more wrong.

  • Is WordPress the right choice for your website?

    Is WordPress the right choice for your website?

    Everybody has heard of WordPress. What started out as a platform for blogging has grown into one of the most popular content management systems (CMS) in the world – powering over 30% of the internet. It may not be the most exciting choice of software, but its combination of user-friendliness, reliability and flexibility is unmatched…

  • Our Web Hosting Service Explained

    Our Web Hosting Service Explained

    As with many web design agencies, part of our service is the hosting of our clients’ websites. We seek out and partner with the best, most reliable hosting providers we can find and then use their services to host your website. We then manage all aspects of your hosting package so that you never need…