IndieWebCamp Logo Study

(Jump to bottom to see the final iteration of my logo study.)

I’ve been a part of the #indieweb community for several years now. I attended the very first IndieWebCamp in Portland in 2011. I’ve always loved a lot about this community — its ideas and ideals, its technology and approach to new technology, its events and structure. Like anything, its not without flaws. Socially, technologically, structurarlly.

One little thing about IndieWebCamp that has always bothered me a little is the branding in general and the logo in particular. And given my experience and ability, I felt like this was something that I could take a stab at improving it.

Current* IndieWebCamp Logo

* — as of publishing this article, 2016–02–02

What I like about this logo:

• the simplicity of it
• the silhouette of the logomark forms
• the colorway

What I don’t like this logo:

• the white lines with dots (too 80s “tech” looking)
• the gradient
• that the forms don’t read as their respective letters (I, W, C)
• the spacing between I & W and W & C isn’t consistent
• the logotype (weight, spacing, position, visual hierarchy, all of it)

Dropping the logotype really improves the visual hierarchy of it.

Sketches

In the Notes.app on my phone, I sketched a couple ideas with my finger.

My goals were:

• to make the logomark read more like its letters (I, W, C)
• re-use the regular polygons from current logo

• get rid of the lines with dots

  

</figcaption> </figure>

Silhouette

The silhouette of the current IndieWebCamp logo is pretty good by itself. I would use this as a point of reference as I worked through different iterations.

New IndieWebCamp Logo Iterations

I didn’t like the I or the C. The I’s split dot just doesn’t work and the C looks like an olive or a cresent moon or a Death Star.

I overlaid the sketch on a Golden Rectangle to try to use it as a proportion guide.

I tried making the I’s square base the square of a Golden Rectangle and the overall I height commensurate to that square. I scaled up the C and stretched up the W. I also allowed both triangles of the W to be visible.

I had lost the regular polygons of the current IndieWebCamp logo’s silhouette. So, I overlaid to head back that direction.

I scaled the IWC mark to match the current IndieWebCamp logo’s silhouette. Then used a rectangle instead of a circle to make the C’s knockout. The W also went back to opaque triangles.

I removed current IndieWebCamp logo’s silhouette.

I rotated the Golden Rectangle 90° and used it to size the base of the I and the size of the C’s knockout.

Then I removed the Golden Rectangles.

At this point I was pretty happy with the direction the shapes of the marks, so I shifted to the spacing between them. I used the amount of the Golden Rectangle in the C that was overhanging the outer edge (while the rectangle was aligned with the center of the C’s circle) as the unit of distance between each mark.

I made the marks solid black and thickened the separation lines in the W and the C.

Finally, I got to where I could add some color. I chose three colors from the current IndieWebCamp logo. The left most pixel color in the I, the middle pixel of the W and the right most pixel of the C.

At this point, I felt pretty happy with the three versions (outlines, black, three color). I posted up a little preview.

After letting it marinate in my brain for a bit, I came back to it and decided that the C wasn’t working as a C. It read too much like a G. @snarfed mentioned this too.

I cut the edge of the Golden Rectangle that was hanging outside of the C’s circle. Which I like a lot better and it read as a C a lot more.

I applied the solid black and thick separators again.

I then added the colors back in. And now, I was really liking it.

I added the word (hashtag) “#indiewebcamp” in Helvetica Neue Thin and Light. The versions I tried with lowercase, separate words and not as a hashtag all felt imbalanced. The three words are different character lengths and physcial sizes. The space between the words was either not the same or “web” wasn’t under the W. I made “web” the boldest to increase reability and because none of what we’re trying to do with IndieWebCamp is possible without the web itself.

I had to thicken the logotype up a little bit for the solid one color version.

Here’s the three color version with the same logotype as the one color version. The balance and weight is good, but I don’t love the combination of black logotype with three color logomark.

I then realized that if I thickened the lines of the outline version, I could use the same logotype as the other versions.

I then bumped up the weight of the logotype on the one color version as well.

I added color to the logotype too. But I didn’t like the I and “#indie” being yellow. They lacked the weight and their importance deserves. Especially given that indie is the whole point of this.

So, I flipped the colors of the I/#indie and C/camp. Which I think works a lot better.

Before and After Comparisons

Here’s the current logomark (above) and my proposed new logomark (below).

Here’s the current logomark and logotype (above) and my proposed new logomark and logotype (below).

Proposed New IndieWebCamp Logo

I am proposing that we retire the current IndieWebCamp logo and use this new logo instead. Below are the outline, one color and full color versions.

If accepted and adopted by the community, I would do a full work up and style guide about when (and how) to use each version. Additionally, I’d create horizontal versions and explore a square/circle version usable for avatar and icons.

All discussion about this proposal should take place on the IndieWebCamp wiki /logo page.