The Inertia Logo and README Design

The Inertia Logo and README Design

READMEs that really say "READ ME"

- 5 mins

There isn’t too much a project on GitHub can do in terms of looking attractive and professional outside of a clean name, concise description, and a clean README. In the past I hadn’t really thought much about it since my projects were of rather… low quality and were unlikely to see widespread use. Take this README from my very first personal project:

Hmmm...

I figured pretty early on that I really liked the look of badges, and given their popularity it doesn’t seem like I’m the only one. I’m not really sure what makes them so comfortable to look at - perhaps it’s something about their colourfulness, or their nice rectangular roundness, or how easy they are to parse at a glance. There is even an entire project dedicated to making these badges. If you’re interested, they have a neat design document specifying what makes a good badge as well as a brief history of the badges.

Badges aren’t just nice in READMEs - I also use them in my Project pages:

Badges!

With such limited room to make an impression on a reader, badges in READMEs convey a lot of important information to potential users and contributors, such as the presence of continuous integration and tests or whether the project is well-maintained (dependency statuses, etc), which can contribute a lot (for me at least) to the perceived quality of the project.

And, as with all things, an eye-catching logo goes a long way.

A quality, animated README logo from Instagram's IGListKit library.

I learned quite a few things when I first saw IGListKit’s README:

So of course I had to do something similar for Inertia, a project that we are hoping hobbyist users both within UBC Launch Pad and in the wider Docker community will find useful, needed a bit of snazz. Here’s what our README looked like originally:

Ehhhhh

As a Golang project, I figured we might as well use a Golang gopher-inspired logo - it’s a pretty popular option that is widely used amongst Golang libraries, both official and unofficial.

An official gopher asset that I used in my first Inertia presentation.

I wanted to preserve the typical lighthearted gopher style and convey the same feeling of momentum, but without the plane in the gopher that I first used. The goal of the Inertia project is to allow simple, painless continuous and manual deployment management.

Most of Golang's fantastic gophers are by Renee French, who is amazing.

As a visitor to the Inertia repository, these goals should hopefully be immediately conveyed by the logo. So I decided that the Inertia gopher would be unclothed (gasp!) and without any extraneous apparatuses. As for colour, I initially felt a simple black and white image would be fine, but after trying my hand at colouring it I thought it turned out fine.

Some initial drafts.

A calm, leaping gopher seemed to do the trick. It took a very long time to make the speed trail thingos look right (and to be honest it still feels a bit off). Either way it felt like something was still missing - I figured a helmet might add a bit more of a “speedy” feel to the gopher, and give it some more character, despite what I said about extraneous apparatuses at first.

Safety first everyone!

I was personally pretty happy with this version. In my eyes the gopher even seemed to be smiling a little as it joyfully leapt towards the heavens. I considered tacking on the word “Inertia” alongside the gopher, since I felt some handwritten text would go along nicely with a handdrawn image - I did something similar with my first Inertia presentation, albeit with a stylised font instead.

Doesn't seem quite right...

Over the course of half an hour I must have written the word “Inertia” at least a hundred times. My awful handwriting did not help in the slightest and it drove me insane. Towards the end I gave up trying to write in a straight line and resorted to manually moving words and characters until they looked alright. After several iterations I also gave up on including “UBC Launch Pad” - it didn’t add much and it seemed rather pointless.

Eventually, though, I thinned out the text and finally ended up with something that I thought was okay, although in hindsight maybe the text is a bit too small relative to the gopher but oh well:

Wheeeeeeeeeeeeeeee!

The Inertia gopher then moved onto the Inertia README alongside some nice badges and lived happily ever after.

Robert Lin

Robert Lin

Enthusiastic eater of lunches. Please feel free to reach out to me at robert@bobheadxi.dev!

rss facebook twitter github youtube tumblr mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora quora