Case study: A logo for TaskFight

— An article about: - Case studies

TaskFight is a side project of mine. It’s an app that helps sort task priorities by pitching them against one another. Part of the project was designing it a logo that would make it stand out.

Constraints & inspiration

Before any drawing begins, a few things needed to be laid down to make sure I got where I wanted.

Most important was how I wanted people to perceive the app. Sorting task priorities sound like serious business. I didn’t want it too far that way, if at all. I set for something more on the fun side, dynamic and bold. It’s dreadful enough having to figure out which task to work on next. Might as well make it a bit lighter.

I also needed to list of the constraints that would impact the design. Take the places the logo would be displayed, for example. A website header usually has limited height, which encourages a logo more long than tall. In other situations, the logo might have to fit an app icon or the favicon in the browser tabs. These constraints where important to make sure the designed logo was fit for use.

Based on these information, I gathered inspiration in a Pinterest board to identify design elements that would help convey specific aspects of TaskFight personnality. Contrasting, vibrant colors, bold type, dynamic lines, halftone testures, for example would be building blocks for an original logo for TaskFight.

Filling white pages

I always start my lettering projects with pencil on paper. This make it really easy to quickly sketch different ideas, explore some further, without paying too big a “time price” for straying in a direction that won’t be used later.

So over the pages of my sketchbook, I explored different styles to give “TaskFight” the fun, dynamic and bold mood I was looking for.

Exploring lettering styles for TaskFight logo
Style exploration sketches

The fighting horizontal bars of the ‘F’ & ‘T’ felt a good concept to push further and refine into a final logo. The sketch left plenty of details to fix. After a few iterations, the letters were all tidy, ready to be digitized.


Iterations to refine chosen direction

The word was too bit to fit in an app icon on a phone screen, let alone in the minuscule favicon of a browser. That was one last problem to solve before going digital.
While refining the logotype, I sketched a ‘TF’ monogram that would be perfect for that kind of space.


‘TF’ monogram for small spaces

Paper to Pixel

A sketch on paper isn’t much use, so it was time to go digital and turn it into vector images I could embed in the app and its website. These would scale up & down nicely without pixelating and I could always export a bitmap if I needed.

Digitizing the logo in Illustrator

Colors

The shape of the logo was complete, but black & white wasn’t really the feel I was going for. It was time to pick a color palette to make it a bit more energetic.

A bold and contrasting combination of yellow and dark purple would make it feel really dynamic. Associated to a red background and a halftone pattern, this would give a comic book feel adding a touch of fun to the whole.


The final branding inside the app

Save