I’ve designed multiple logos throughout my career. Actually, it began way before that. My first logo was a room logo to be used on the yearbook. After that, I designed quite a few e.g. class projects, a dormitory forum, and some of my early business ideas. They were all pretty bad when I look back now. But back then, they were gorgeous✨.

Each time I created a new logo, I would try new techniques, tools, and processes as I saw the flaws of the current one. So I keep learning and adjusting the process over time. Today, I want to share my current process of designing a logo I use for my latest business, Telepath.

Warning, I’m an indie maker, not a professional designer. I don’t want to spend too much time designing logos as I would rather spend time developing the business itself. Therefore, this process is intended to create a design that is ‘good enough’ as quickly as possible and is not intended to be used long-term. Use it at your own risk.

Inspiration

If you want to follow along, I assume you already have a name for your brand, with some meaning behind it as a starting point. Now it’s time to look for inspiration.

There are multiple ways to gather inspiration. What I usually do is search for the name on Google Images and append the design keywords I prefer. For example, I may try searching for, “Telepath icon”, Telepath symbol”, “Telepath flat”, “Telepath material”, etc. This helps me solidify the name into shapes or symbols.

Another way is to use the logo maker tools. Try searching for “logo maker” on Google and you will find a ton. The results are quite generic but still good for inspiration.

As a marketer, I collect swipe files. A swipe file is a collection of marketing materials to use for inspiration. This can be Facebook posts, display ads, blog banners, YouTube thumbnails, etc. In other words, collections of designs I like.

Whenever I see something I like, I save it to my collection (I simply use Google Keep). By doing this regularly, I end up having a big library of design examples that are up to my taste. Not only that it is a good source of inspiration for my future designs, but also when I outsource the design to someone else.

Draft

After gathering inspiration, it is time to start drawing. The easiest way is to grab a pen and paper (or a tablet if you have one) and just keep drawing. If you are on a PC, you can use Excalidraw or any whiteboard tools. There is no rule at this point, just keep drawing multiple symbols, types, sketches, and shapes until they start to repeat.

What do I mean when they start to repeat? It means when you draw the same or very similar sketch twice. Now highlight those repeating sketches and pick a few more you like. At this point, you may have drawn 10–20 sketches. You have to pick only 4–5 of them.

Design tool

In the past, the first design tool I learned was Adobe Photoshop (I don’t count Paint🤣). Because it was the only tool I knew at the time, I used it for everything. While it is doable, other tools can be far better and easier for different purposes. Going into that, we need to understand the differences between Bitmap and Vector.

Bitmap images (JPG, PNG files) are made up of a grid of pixels that contain information about the color of each pixel. When you export an image from Photoshop, you need to specify the size in pixels not bigger than your original design resolution. If you design in 1080 x 1080 px, you can export anything smaller but not bigger, or else your image will be blurry.

Vector images (EPS, PDF, SVG files), on the other hand, are made up of lines, curves, and shapes and can be scaled to any size without losing resolution. Because of that, they are better for creating layouts, illustrations, and, in our case, logos. Adobe Illustrator is designed for that. This approach is more flexible as you can design in vector and later export it as bitmap files.

So, what tool do I use for logo design today? Figma is my design tool of choice. It is primarily used for UX design and is not as powerful as Adobe Illustrator. But it is very easy to learn, works on the web, and is free to use. (I use ChromeOS at work, so can’t use any of Abobe’s software anyway🥲)

Logomark

Now we need to turn those sketches into clean shapes. Whichever tool you choose, create clean shapes of your logo. What I recommend here is to draw them in black and white. We are going to ignore colors for now.

Why black and white? Your logo will usually be displayed in many places, monitors, phone screens, packages, papers, and many more. Having them in black and white ensures that your logo will always be recognizable, without the color. So even when printed on a black and white newspaper, people should not confuse your brand with others.

Logotype

Choosing the font is one of the most time-consuming for many designers, but not for me. I don’t plan to buy fonts so I stick to free fonts available on Google Fonts.

Keep in mind that the logo font doesn’t have to be the same as the font you use for other stuff. So you can pretty much pick whatever you like. For example, I use Plus Jakarta Sans for the logotype, Noto Sans for headlines, and Noto Serif for body texts.

Once the font is selected, you need to choose the case: UPPERCASE, lowercase, or Title Case. There is no right or wrong but I prefer the title case. I think using uppercase and lowercase might be cool for you, but difficult for everyone else.

Let’s give Facebook as an example. Should I write facebook? (the consumer logo) or FACEBOOK? (the enterprise logo) or Facebook? (what Facebook wants us to write). See? It is confusing. (It is now Meta, thank god🤣)

Having your logotype capitalized or as a title case will ensure that it will always be consistent everywhere. But I’m no designer so, some may disagree👎.

Selection

At this point, you should have a few pairs of logomarks and logotypes. Take a screenshot of all of them side by side and send them to your friends for feedback. This doesn’t mean that you let your friends decide which one to go for. This is only to safeguard some critical stuff you may have missed.

For example, one of your friends may spot that one of your logos is too similar to a well-known brand in the market. Or one of your logomarks can be misleading or inappropriate to a certain group of people. What is left is for you to make the final decision.

Color

Once you have your logo, it is time to brighten it up with colors. There are ways to come up with colors. Using tools like Adobe Color or Coolers is a good way. But I still found it too difficult for me. There are millions of colors to choose from and I have no clue how to pick the right shades.

So instead of learning the color theory, it is much easier to just copy from a set of colors in existing design frameworks like Tailwind CSS (or tailwindcss?🤣).

For this project, I use UntitledUI. Another good thing about using this is they already account for the contrast ratios, so I know when to pair it with white or dark text color.

Generally, you will need one or two brand palettes (I prefer only one) plus one gray palette. These palettes will be used throughout your future designs. Usually, I use shade 600–700 of the brand color for the logomark and pair it with shade 900 of gray for the logotype. But for this project specifically, I would like to try gradient.

Variations

We’re not done yet? Hell no! We only have one version of our logo, the default version. In this step, we need to expand our logo into different variations including light, dark, white, black, brand, and gray.

There are also situations we need our logo with the background, so pair them with different background colors too. We also need our logo as icons, sometimes pre-cropped in circles.

When pairing the logo with the background, you will need to leave some padding (space between the edges and the logo). While you can set this distance in pixels, it is best practice to use the existing element in the logo itself as a guide.

Setting padding in fixed pixels won’t apply as you scale your logo up or down, difficult for day-to-day use. For example, if the padding is 60 pixels when your logo is 500 x 1200 px. What if I want the logo to be 750 px in height, what is the padding now? I need to do some calculations to know exactly how much space I should leave.

On the other hand, by using an element in the logo, in this case, I decided to use the capital T letter as a guide, Anyone can easily guess the distance regardless of the logo size.

Export

Now that we are done with the design, it is time to export them. Export the transparent variations (those without background) as PNG and SVG, and background variations as PNG only. The PNG should be at 512 pixels in height. I found that this size is big enough for general purposes. You can always come back and export again for any specific use cases.

Why did I choose PNG and not JPG?

JPG and PNG are bitmap images. JPG doesn’t support transparency while PNG does. The reason we still need these is because many platforms require them. While JPG is smaller, we only use these formats on platforms other than ours, where we don’t care how big it gets. Most platforms will do their own image compressions anyway so PNG will be fine.

And what is SVG?

SVGs are Scalable Vector Graphics or vector files. It has no size and can scale infinitely. It is also much smaller than bitmaps like PNG and JPG. We will use this on our website.

Why not use PNG on the website?

PNG is a bitmap and not scalable. But your website is (or should be) responsive and scale to any device. Too large images will be slow to load which is bad for SEO. Too small images are blurry and bad for user experience. Unless you have a system to auto-resize images to fit exactly every screen of your users, you will end up serving too large or too small images.

This doesn’t apply to SVG as it scales to fit any screen size. So instead of serving 5 different sizes of PNG logos, you can just use one SVG file. It is also smaller and faster to load. Your logo will almost always be at the top of every single page of your website. So every little thing adds up.

Store and share

As you have a lot of variations, it is best to set some kind of naming convention so that it is easier to find. Then keep them in folders somewhere that is easy to share.

I uploaded all my logos to Google Drive and set the folder to public. The next time I need someone to take care of my design, I can just attach the link to all of my logos.

Your turn

And that’s how I design a logo. I hope this is useful to young founders looking to build an awesome brand in the future.

Again, I’m no designer. If you need a properly designed logo, I recommend consulting a real designer😂.

Am I missing something? Let me know in the comments.