close

A step‑by‑step process for creating responsive logo designs

In this guest post, go behind the scenes with the team at Unfold as they share their process for designing responsive logos based on a real client project. Let’s go!

  1. PicnicHealth drawing design iphone mark website identity illustration logo branding icon
  2. Testmo rebranding modern logo time tracker management tool management test responsive logo identity pattern testmo unfold mark rebrand branding logo
    Shot Link
  3. Oceana Logo logo design icons water ocean wavy grid engineering tshirt architecture building circular roboto mono charcoal green identity logo branding
    Shot Link


Benjamin Oberemok Benjamin Oberemok Branding | Web Design | UI/UX. Designer for @unfold. Open to new challenges sendtobenjober@gmail.com

There are several good articles on the internet that cover what responsive logos are and why they are needed. In this article, I won’t go deep into history or consider various examples in detail, but I will tell you how we design responsive logos at the Unfold agency. To do this, I’ll take a real client case and walk you through all the stages step by step.

A responsive logo is a logo with design elements that differ slightly depending on the device or screen size on which they are displayed.

If you’re not familiar with the concept of a responsive logo, here’s a brief description: A responsive logo is a logo with design elements that differ slightly depending on the device or screen size on which they are displayed, without compromising the brand identity. Design elements considered may include icons or symbols, company names and slogans, colors, backgrounds, outlines, and other details.

Now, let’s move on to the project where you’ll see how our team developed a responsive logo for our client.

The Project: Design a logo for a next-generation testing tool

Some time ago, we were approached by the team at Testmo, who created a next-generation test management tool to help teams create high-quality software. The founder of Testmo explained that, “software is getting super complex; users demand flawless apps. We help teams get there.”

After agreeing on a visual direction with the client, we started developing their logo design. Since I was directly working on this project, I plunged headfirst into the study of images and symbols associated with testing software and related areas. In the course of my research, I came across an article called “Hexagonal Architecture for Testers” and decided to make some sketches with a hexagon to develop a logomark.

This idea turned out to be quite successful, and after some refining, the following concept was obtained:


6d6f5d4e0a00a494f740c8ecd419c855


But before presenting the concept to the client, we first needed to think carefully and test everything to make sure that the logo design works across different applications.

Step 1: The Mono Color Version

We started with a mono-colored version of the logo, because if the logo doesn’t work in black and white, then it technically isn’t a logo and will require a certain degree of stylization. For example, on Dribbble, you can see a lot of beautiful Shots titled ‘logo’. However, a logo isn’t a beautiful picture or illustration, but a sign that should work in a variety of conditions.

On top of that, because of production costs, sometimes only one color of ink is available. Therefore the logo must be reproduced using only one color. In this scenario, the logo, logotype, or symbol must be used following the convention of a light color on a dark background, or vice versa.

0e09643b40a94bf16f3651ff87502218
A1c3870b1c9a3602eb6a246df86dc98b

It’s also at this stage that we select the typography to go along with the symbol. We select suitable fonts, test them, and if necessary, modify them for the logotype and the logo mark to look as one whole.

Step 2: The Full Color Version

If the mono color version works well, then we start developing the full color version. Most often, it’s the horizontal basic version. The horizontal logo is mainly used for websites, business cards, advertising on billboards, and other sponsorship products.

The main challenge here is to find the right color combination for the logo design to work on both light and dark backgrounds. This isn’t always a simple task—sometimes the logo is perfectly readable on white and light backgrounds, but not so much on dark ones, and vice versa. When this task is solved, you can move on with a clear conscience.

15e15371db46808739d22772d07571e9
4012c4c5275d6dbc603b9f9c539b564f
8c1586cea35371063cd37b40cf7e2cee


Step 3: The Small Size Version

When it comes to logo design, at Unfold we adhere to the following rule: “less is more.” In other words, our goal is to make logos simple, memorable, and unique all at the same time. This is quite difficult to achieve, but as a result, such a logo will not lose its relevance even after several decades! But even simple forms in small scale sometimes lose their readability. Therefore, we have to make an additional version of the logo mark that can be used in especially small sizes.

We conducted detailed tests and defined the scale for scaling the logo. We usually don’t recommend using the main version of the logo at a scale less than 24 pixels, and instead, we create an additional version of the logo. Everything here will depend on how many details the logo contains.

C11d247b765853f2e477c13ec0c8ef5b

When creating a small version of the logo, we basically remove the details without sacrificing the overall concept. For example, we delete lines and shapes, or get rid of unnecessary colors.

Cec8bfcf0faf95e953834a8017bf2486
F2f9bb525e3c2a8c5e3cc9825f93e313
C1fbf3fef019d59fc155b1d4e18a5bb5


Step 4: The Greyscale Version

If more than one color is used in the logomark, we make a grayscale version. This is necessary when only shades of certain inks are available due to some restrictions. It’s also necessary in order to avoid reducing the logo to a mono color version when it needs to be placed it on a colored background.

690c2a118dd57cf52dac82c644744c77
E7ceadb581b15afda269437c453309f7

Below, I’ve placed 4 versions of the logo design together that cover most of the responsive application aspects.


2d27d444f84533106f13ef0b3aa935f6


Step 5: The Vertical Version

After we completely worked out the horizontal version of the logo (steps outlined above), we created a vertical version, the so-called stacked version.

The vertical version is used for square and vertical layout formats. For example, for printing typographic products, t-shirts, mugs, for instant messengers, social networks, signboards, etc.

I wrote a detailed article on how to keep a good balance in building a vertical version, in which you’ll find many examples and a ton of useful information.

1ef0c6d5bbf3475bad9f892485c60d5b
367c9a3a43c661b4403c109d7e6cbc51


Additional versions

Testmo is a typical project in which I showed how we designed a responsive logo system. We also create other versions depending on the client branding project. For example, a full version of the logo with a description at the bottom, or a round version, etc. It all depends, mainly on the style of the logo, the scope of its application, as well as the wishes of the client


Benjamin Oberemok I’m Benjamin Oberemok, born in Ukraine, currently living in Florida. My skillset is versatile, but I specialize in web design and visual identities. I love typography and painting as well. I gladly temporarily trade my computer for cycling, tennis, or archery. Follow me on Dribbble.


Find more Process stories on our blog Courtside. Have a suggestion? Contact stories@dribbble.com.


Previous
Next