How I made our company logo without a designer

Jeff Cannon
5 min readJul 24, 2020

--

Not too shabby for someone with zero formal design experience

I’m a software engineer by trade and for years I have tried developing websites without a design from my mind’s eye. The result is that they came out bad and were hard to use. Furthermore, I wasted so much time developing things that ended up being bad UX and had to get scrapped.

One way to fix this problem is to hire a designer but that can be pricy—not really an option for a small startup. Instead I have picked up design in the past year or two. I hope to illustrate in this post that good design can be achieved by anyone with sufficient inspiration and a little tinkering.

The inspiration

In order to design any logo, the first thing I start doing is pulling any related images into my design software. I’m using Figma for design because it’s a great free alternative to Sketch.

String Theory is a lacrosse company so naturally, I started designing the logo by pulling in some lacrosse images. My friend has a very old lacrosse stick at his house and something about it caught my eye. I took a picture and pulled that in:

Traditional lacrosse stick

Getting started

This stick became the starting point for me. In order to recreate a logo based on this, I created two inverted triangles with rounded edges and subtracted the smaller triangle from the larger one. Then, for good measure to balance out the spacing, I put a lacrosse ball in the middle. Here was the result:

First attempt at a logo design

Yikes… Let’s keep going.

Time for more inspiration

I don’t know at what point I decided this but I knew that I wanted to rely heavily on the design of Airbnb for not only our logo but also our website. The founders themselves are designers and I think they have a great-looking brand. Next, I import the Airbnb logo into Figma and start playing with it.

Airbnb logo to the left, inverted logo to the right

If I invert the Airbnb logo, it sort of has the shape of a lacrosse head and it’s stringy looking—perfect for a company named String Theory! But it needs to be tweaked a bit in order to look more like a lacrosse head with a ball in it. So I start drawing some simple circles on top of it.

Using Airbnb’s logo as a guide to create my own

I know that I’m going to want to keep the center circle in the final design as a lacrosse ball so I hollow that one out. The other three circles are in place to establish the boundaries of the logo. Using these circles as a guide, I start to connect them with ellipses.

Using simple ellipses to form the outline of the String Theory logo

After establishing some boundaries that I was happy with, I removed the Airbnb logo and the three circles that I wasn’t planning on using in the final design.

Removing the Airbnb logo and unused circles from my design

With the Airbnb logo removed, I can start chipping away at these simple ellipses to carve out the boundaries of the String Theory logo and be left with the final result:

Carving out the String Theory icon from simple ellipses

I love the symmetry and simplicity required to create this icon. I’m a big advocate of Occam’s razor and as a general rule of thumb, the simplest solution is the most elegant one. The best logos can be created with simple circles and rectangles—no need for fancy Bezier curves in my opinion.

Incorporating the text

After the icon was finished, I needed to figure out how to incorporate the text with the logo. Again, I am referencing Airbnb’s brand for this:

Airbnb’s logo with text

I like that they’re using all lowercase for this—I’m going to do that as well. I’m also going to find out what font they’re using. A quick Google search for “airbnb font” reveals it is their own proprietary font called Cereal.

Next, I do another search for “airbnb font free alternative” and one of the top results is Montserrat. Montserrat is a free font available on Google Fonts and there’s also a similar font called Montserrat Alternates. I like the idea of having a slightly different font for our brand separate from our website so I decide to use Montserrat Alternates for the brand and Montserrat for text on our site and other marketing materials.

The last thing I needed to decide with the text is how it will be placed next to the logo:

Trying different layouts of “string theory” with the logo

“string theory” on one line was too long so I broke it up onto two lines for better spacing. I also decided to right-align the text due to the slanted shape of the logo.

Picking the colors

One thing I glossed over in all of this is how I decided on colors. Guess where I drew inspiration to figure out what colors I wanted to use for my brand?

Airbnb uses a complementary color palette with primary shades of red/pink and secondary shades of green. I also decided to use a complementary color palette for our brand. I didn’t want to use the same colors as Airbnb so my options were oranges/blues or yellows/purples. Oranges/blues seemed like a better option to me.

As far as what orange I chose for the logo, I did a Google search for “shades of orange” and found this chart:

Shades of orange

“Fire” sounded like a cool shade of orange so that’s what I went with. 😎

If you’re in need of design-work and trying to create your own brand, I hope the explanation of my design process for our company logo at String Theory inspires you to give design a shot yourself. You too can create beautiful designs using very simple shapes and referencing other companies that you like the look of and want to emulate.

One last note: We just started selling branded merchandise on Amazon so if you like the look of our brand, you can get yourself a String Theory shirt here!

--

--

Jeff Cannon

Creator of https://stringtheory.us — Premium lacrosse stringing made easy. See what else I’m working on at https://jeffcannon.dev/