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:
Let me know if you have any suggestions for how to improve my process!