21
16 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. 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 👍

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.

  7. 9

    This comment was deleted 3 months ago.

    1. 2

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

Trending on Indie Hackers
I watch how IH is turning into a marketing sink, and I feel sad :( 41 comments Bootstrapped my productivity app to 700 paying customers! AMA. 25 comments Bootstrapped my SaaS to $20,000 MRR. AMA! 19 comments How we got our SEO clicks from 1 to 1200 a day 14 comments Small pivot. Big redesign. Tell us what you think. 4 comments How to bootstrapp a printing and reporting solution to $1M ARR 1 comment