19
17 Comments

How I design logos for for side projects as a non-designer

I’ve never been great at design; the idea of designing a logo I was proud of has always seemed daunting.

Over the last few months, I’ve been hacking away at a few side projects, all web apps. In doing so, I put together a repeatable process for designing an above-average logo as a non-designer.

I wanted to share it here to see if others had any suggestions for how to improve it.

I wrote up more detailed step-by-step instructions here on DinoSaaS if you’re interested. This post is a shorter summary.


I break it down into 4 steps:

Step 1: Choose a color palette

I stumbled upon this site called Colorhunt on ProductHunt awhile back. I usually start in their “Popular” section.


Step 2: Choose a Google Font

Google Fonts has hundreds of free fonts.

You can browse the page for a font that catches your eye. But as a starting point, I find it easier to do some Googling for articles where authors list their favorites.


Step 3: Find a logo mark

I’ve been using free icons on Flaticon. You need to include an attribution link for your free icons, but I don’t mind doing that for side projects (or you can shell out a bit of cash to avoid it).

I recently discovered that if you download an SVG file, you can import it into a design tool like Figma and edit it! 🤯


Step 4: Combine text and mark in Figma

Figma has a bit of learning curve, but I found that if you take the time to read up on it and study examples, you can get to the point of being dangerous with it pretty quickly.

First, I add a text box with my company name, formatted with my chosen color and Google Font.

Next, I import the mark as an SVG, placing it next to the text box. Then I edit individual layers on the SVG to match my color palette.

Sometimes I’ll get fancy with a stroke, shadow, or blur effect. Easy to do, but as a non-designer, I try to keep things simple.

Next, group the text and mark together and export it. Voilà - you’ve got a halfway-decent logo!


Here's an example logo made with this process:
BugTracker

Let me know if you have any suggestions for how to improve my process!

  1. 9

    You should call yourself a designer. 👍

    What I'd do differently, is to avoid stroke on the text.
    I'd keep the words uppercased, differentiate the weight if necessary (by skipping one).
    Make the text height half as the icon.
    Give it an x-height spacing.

    bt

    I wasn't aware flaticon improved their quality that much, thanks for the tip.

    1. 2

      Wow, these are great! Love the ideas; I'll add those to my toolbelt for future projects :)

  2. 3

    Just made a quick logo for an upcoming Substack newsletter using Coolors and The Noun Project. Thanks for the recommendations! @hschne @peterparker @stevenkkim

    The MVP Sprint logo

    1. 2

      Super cool, like it 👍

  3. 3

    Another good source for logo icons is https://thenounproject.com
    It's an insanely large collection (website says over 3 million icons), and at $2.99 per icon, it's super affordable.

    1. 1

      Thanks, that looks like an awesome resource. I'm glad I posted this; there are so many great tools out there I was unaware of.

      1. 1

        Glad to help. Your logo-creating process is great. Soon you'll have to stop calling yourself a "non-designer" 🙂

        1. 1

          Thank you! And you're right; as Indie Hackers, I guess we all need to "own" the many hats we wear.

  4. 2

    Nice summary! 👍

    Just to add to that: I found Logos By Nick an incredibly helpful youtube channel. A collection of logo design videos using GIMP.

    Also, if you feel creative you can use coolors.co to generate color palettes or adjust the ones found on Colorhunt.

    1. 1

      Subscribed to Nick!

      Coolors looks neat! I'll definitely be using that next time.

  5. 2

    Nice step by step 👍

    I can relate, that's kind of the way I followed to create the logo of Tie Tracker 😉.

    To generate the color palette, I like to use Colormind and Coolors.

    1. 2

      I like the Tie Tracker logo! You were more ambitious with actually designing your own mark, good for you.

  6. 1

    Engineers should learn figma a little. Comes very handy.

    I did same thing yesterday but for illustrations. I bought some from iStock and then changed their colors to match my pallete in figma.

    1. 1

      Oh neat! I've never worked with illustrations but see a bunch of them being posted on Product Hung. I'll have to try sometime.

  7. 1

    I use https://brandmark.io/. Their style is quite modern to my POV. $65 is a very good deal for all you need, including logos (multiple color variants), icons, brand guidelines, social medias, presentations, mockups, etc.

    P/s: They have a side free product https://namelix.com/ that I usually use to create brand name and logo together.

    1. 1

      Someone else just recommended namelix to me; that seems like an awesome starting point for coming up with a name. Definitely will use that next time.

      Just walked through the Brandmark flow and that's awesome too. Even without paying, it gives a ton of value with initial inspiration. I could see myself paying for the $65 if I had already been reeled in by a logo I really liked.

Trending on Indie Hackers
Songbox - finally - breaks $1000 MRR 41 comments Aim to be valuable and you'll be indispensable. 29 comments NFTs are a dangerous trap 23 comments I made $804 in February 22 comments Some sales and a ban. A week of ups and downs 7 comments Tesla closes its forums and raises the anger of fans 6 comments