• Terms and Conditions
  • Privacy Policy
  • Cookie Policy
  • Contact Us
No Result
View All Result
NEWSLETTER
The Designest
  • Home
  • Design
  • Free Design Goods
  • Inspiration
  • Videos
  • Tutorials
  • Toolbox
  • Featured
  • Tech
  • Wallpapers
  • Home
  • Design
  • Free Design Goods
  • Inspiration
  • Videos
  • Tutorials
  • Toolbox
  • Featured
  • Tech
  • Wallpapers
No Result
View All Result
The Designest
No Result
View All Result
Home Design

Responsive logo: our well-deserved web innovation

Do you still believe resizing is enough?

Ksenia Pedchenko by Ksenia Pedchenko
April 23, 2020
in Design
9
10.6k
VIEWS
Share on FacebookShare on Twitter

I might have written hundreds of articles about the importance of a good logo. Embrace trends, best experience, unexpected discoveries. But I won’t, since there is another “!” to focus on — the phenomenon of a responsive logo.

Inspire first

Some time ago I discovered a project of Joe Harrison, an outstanding British designer, and digital experimentalist. He’s picked some well-known logos — Chanel, Nike, Heinz, Walt Disney, Levi’s and many others — to bring their alternatives for the desktop and mobile screens. Oh, I’ve spent a great hour studying how he removes details the logotype can do without and works with the texts leaving the irreplaceable only.

Responsive logos by Joe Harrison
Responsive logos by Joe Harrison

So much inspired and impressed, I’ve done my best to embrace the essence of the responsive logo philosophy and move you closer to the trend, that’s on its way to arise and be implemented in every website.

Logo is a brand

Even though it’s quite evident to you that a logo is not sacred and it MUST change as the technologies develop, a few years ago many creatives and companies didn’t treat that question seriously. Indeed, traditionally we have such branding canons:
  • Brand is a logo,
  • Logo is a brand,
  • Logo must thoroughly follow the identity system of the brand.

But such well-known companies as Pepsi or Slack prove the contrary and regard their logo as a face of a company — a face that can be different, that can adapt to situations and backgrounds, and once it remains recognizable it’s not an immovable and inevitable stamp. They just rush at branding experiments, leaving behind the popular fear (more a superstition for me) that once they make a step aside from the model, the community will not acknowledge them anymore.

Logo variations from Slack brand guidelines
Logo variations from Slack brand guidelines

Remove the slogan and leave the logomark alone? Play with colors, effects, and textures? Remove a logo icon? That’s right about responsive logos. Just remember, no matter what you try, corporate identity should remain the same.

How to be responsive

Aiming to attain responsiveness, first and foremost you must not attach yourself to a single image you know or have. Think outside the box instead! If your logo contains many small details that can be seen on a desktop, avoid them on a mobile to keep elegance. Simplify as much as you can: colors, composition, everything!

Study thoroughly the logo for the most distinctive elements you can’t design without. Like ‘M’ which speaks for the Medium logo. Like Pepsi (again) have left the logomark alone for the mobile version. Or Kodak with their perfectly recognizable K-shaped logotype have removed the brand name from it for the small screens.

Kodak, Medium and Pepsi responsive logos

And yet reducing a logotype is the most evident and, if you like, simple solution, there are still some fanciful alternatives — like experimenting with shapes and textures to lighten it visually. Or check out the experience of Google. Their ‘G’ miniature is a nice symbiosis of reducing and playing with the color palette where the brand traits are respected. There’s nothing to bind you, actually, just keep the distinctive features on the surface.

Google, Jaguar and Premier League responsive logos
Google, Jaguar and Premier League responsive logos

By the way, you can use SVG format, as it’s capability of being scaled is a considerable booster when you are not ready for the redesign yet. You’ll be sure your logotype will look awesome anywhere — but still avoid packing it full with tiny details, as in this case resizing won’t help.

While resizing an SVG for a responsive logo, you can try deconstructing it as well. I mean you may just remove some original elements, typography, frames, shadows. This doesn’t imply compulsory redesign — simply erase everything you can do without, literally!

PayPal, Adobe and InVision responsive logos
PayPal, Adobe and InVision responsive logos

With their smartness and absolute digital convenience responsive logos, as I see them — and as the experience of the pioneer companies shows — will not stay just a trend the one may welcome or not. Instead, they are to become a must-have, and even if now responsive logos are a pretty rare thing, having them everywhere is a matter of time, nothing more.

Tags: BrandingInspirationTrendsWeb design
Previous Post

Mote Free Business Card Mockup

Next Post

36 Floral Fonts for Perfect Botanical Compositions

Ksenia Pedchenko

Ksenia Pedchenko

A design blogger and editor, who has an eye for the trends and feels what you want to read and learn. She’s in love with a good text, so be sure there won’t be empty talk, only precisely picked content.

Related Posts

Best Drawing Software in 2021 For Your Creativity — Free & Paid

by Milena Abrosimova
January 13, 2021
2

We’ve collected the best free art programs and paid software for you to always have a wide choice of creative...

10 Graphic Design Trends for 2021: Experimental Art Arises

by Ksenia Pedchenko
January 4, 2021
0

2020 was a hard year, and I'm neither the first nor the last to mention it. However, we can't underestimate...

Pantone Chose Two Colors Of The Year 2021: Ultimate Gray and Illuminating

by Milena Abrosimova
December 11, 2020
0

Pantone colors of the year, ultimate gray and illuminating yellow, are a pure incarnation of these ideas.

5 Easy Ways To Create Images for Your Blog Posts

by The Designest Staff
November 24, 2020
0

Original, brand visuals are a must-have for blogs claiming traffic, high rankings, and loyal audiences.

Dark Mode in UI Design for Mobile Apps: Beauty Born in the Darkness

by Dana Kachan
October 26, 2020
0

Considering why the dark mode of mobile apps is becoming amazingly popular today and how to design it the most...

How Creating a Unique Font Will Foster Your Brand Recognition

by Angela Baker
October 12, 2020
1

The value of having a unique font available for marketing and brand recognition purposes cannot be overstated.

Next Post

36 Floral Fonts for Perfect Botanical Compositions

Comments 9

  1. Andre says:
    3 years ago

    Why The Designest doesn’t have a logo?

    Reply
    • Ksenia Pedchenko says:
      3 years ago

      We do have one! Still should make it responsive 🙂

      Reply
      • Wren says:
        3 years ago

        I think the fact that you have to point out that The Designest does, in fact, have a logo would make the case that there isn’t one. At least, not one that one can recognize. (Is it the favicon?)

        Reply
        • Mathias says:
          3 years ago

          This would be the equivalent of saying, that The New York Times does not have a logo either, which I do not think would be an acceptable theory.. Or is that just me? ?

          Reply
          • Greg Lapin says:
            3 years ago

            My thought exactly! I just didn’t dare to compare our blog to The New York Times (yet) ?

    • Chris says:
      3 years ago

      Isn’t the custom font of “The Designest” the logo? It’s not completely responsive but I guess the Favicon can be used when a simple version of the logo is needed.

      Reply
      • Greg Lapin says:
        3 years ago

        You’re right, Chris! While working on our logo, we’ve been entirely focused on the typography aspect. The part we use as Favicon or social network user-pics is only a temporary decision. To make The Designest logo responsive and usable in any case we will add a recognizable logo mark, eventually ?

        Reply
  2. Gerrit says:
    2 years ago

    Sorry, I did not learn anything interesting here.
    Basically, companies use their pictogram if space gets small? This is not really news or unheard of. Pepsi would just use its orb instead of the full name. It does not need a genius or even a designer to come up with that, just a clearly recognizable imagery. Think Mercedes and its star…

    And the initial logo interpretations are totally off.
    – Coke still becomes illegible
    – Replacing the “C” from the wordmark Chanel with the logo-icon feels so wrong and just using the inverted C’s is what Chanel does everywhere even on its necklaces…
    – Nike Air is not the brand, but a product etc.
    -B&O is just resizing nothing happened (yes the wordmark went away, but again, what is new about this?)

    So what is responsive about it?

    Reply
    • Ksenia Pedchenko says:
      2 years ago

      You’re right, Gerrit. If the one removes ‘Pepsi’ and leaves the logomark alone, it will still be recognizable thanks to the long history of the brand. Our idea is to show that today companies consider (and should consider) adapting their websites to different screen sizes, where the logo will look familiar and quality. The experience of other brands is here to illustrate the phenomenon.

      As for the examples you’ve written about, they are all designed by Joe Harrison and are his vision how some logos can be adapted. It’s not real experience, just а hypothesis 🙂

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Popular Posts

  • 45+ Photoshop Text Styles & Effects: Free PSD Templates

  • 40 Plastic Texture Images

  • 100+ free wood textures, cozy and versatile

  • Realistic 3D Logo Mockups

  • 20+ Pillow Mockups For Your Designs to Rest

Envato Elements
with Envato Elements membership

Categories

  • Design (94)
  • Featured (7)
  • Fonts (8)
  • Free Design Goods (42)
  • Inspiration (120)
  • Lifestyle (3)
  • Marketing (2)
  • Mockups (8)
  • Other (6)
  • Tech (21)
  • Toolbox (104)
  • Tutorials (34)
  • Videos (30)
  • Wallpapers (27)

Connect with us

Follow us on Twitter

My Tweets
Youtube Facebook Instagram Dribbble Pinterest Twitter RSS

Subscribe

The Designest

Weekly Email Updates

We got tons of fascinating articles, videos and freebies for you every week!

SUBSCRIBE

Design Blog

  • Design
  • Featured
  • Fonts
  • Free Design Goods
  • Inspiration
  • Lifestyle
  • Marketing
  • Mockups
  • Other
  • Tech
  • Toolbox
  • Tutorials
  • Videos
  • Wallpapers

About Us

Welcome to The Designest — a professional design blog aimed to deliver fresh news & trends of the industry as well as the most essential courses & tutorials you must have been searching for.

Company

  • Contact Us
  • Cookie Policy
  • Privacy Policy
  • Terms and Conditions

© 2020 The Designest — Professional design blog aimed to deliver fresh news & trends of the industry

No Result
View All Result
  • Home
  • Design
  • Free Design Goods
  • Inspiration
  • Videos
  • Tutorials
  • Toolbox
  • Featured
  • Tech
  • Wallpapers

© 2020 The Designest — Professional design blog aimed to deliver fresh news & trends of the industry

Subscribe to Regular Updates
We got tons of fascinating articles, videos and
freebies for you every week.
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.