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.
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:
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:
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.
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.
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.
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.
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:
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:
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:
“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:
“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!