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.

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

Current* IndieWebCamp (logomark and logotype)
Current* IndieWebCamp (logomark and logotype)

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.

Current* IndieWebCamp (logomark and NO logotype)
Current* IndieWebCamp (logomark and NO logotype)

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
Finger sketch in Notes.app
Finger sketch in Notes.app (square I base)
Finger sketch in Notes.app
Finger sketch in Notes.app (square entire I)
Pen sketch on paper (square I base and C with circle and square knockouts)
Pen sketch on paper (square I base and C with circle and square knockouts)

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.

Current IndieWebCamp silhouette
Current IndieWebCamp silhouette of regular polygons

New IndieWebCamp Logo Iterations

New IndieWebCamp sketch
The I with square base and dot made of two squares. C made of two circles.

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.

New IndieWebCamp sketch
The I overlaid on a Golden Rectangle

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

New IndieWebCamp sketch
The I scaled to Golden Rectangle proportion

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.

New IndieWebCamp sketch
Current IndieWebCamp logo's silhouette overlaid on new sketch

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

New IndieWebCamp sketch
Re-scaled to current IndieWebCamp logo's silhouette's size

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.

New IndieWebCamp sketch
Removed current IndieWebCamp logo's silhouette

I removed current IndieWebCamp logo’s silhouette.

New IndieWebCamp sketch
Horizontal Golden Rectangles in I anc C

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

New IndieWebCamp sketch
Removed Golden Rectangle guides

Then I removed the Golden Rectangles.

New IndieWebCamp sketch
Guides for adjusting spacing

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.

New IndieWebCamp sketch
Solid one color version

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

New IndieWebCamp sketch
Three color version

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.

New IndieWebCamp sketch
Transparent Rectangle Golden in C

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.

New IndieWebCamp sketch
Golden Rectangle masked by C's circle

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.

New IndieWebCamp sketch
Solid one color version

I applied the solid black and thick separators again.

New IndieWebCamp sketch
Three color version

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

New IndieWebCamp sketch
Outlines with logotype

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.

New IndieWebCamp sketch
One color with logotype

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

New IndieWebCamp sketch
Three color version with logotype

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.

New IndieWebCamp sketch
Thicker lines outline version

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

New IndieWebCamp sketch
One color with thicker logotype

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

New IndieWebCamp sketch
Color logomark with logotype

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.

New IndieWebCamp sketch
Changed color order

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

Before and After Comparisons

Current and New IndieWebCamp logo comparison
Current and New Logomarks

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

Current and New IndieWebCamp logo comparison
Current and New Logotypes

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

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.

Final proposed new IndieWebCamp logo Final proposed new IndieWebCamp logo Final proposed new IndieWebCamp logo
Proposed New IndieWebCamp Logos

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