Bringing character to Themify with animator Thom Mack

About halfway through working on Themify I began taking notes of areas that I felt needed improvement within the UI. Much of these were things I could handle myself, changing layouts or modifying icons, but there were a handful of widgets and screens that I wanted to add more energy to in a way that was outside of my abilities.

This is where Thom comes in. I've known him very well for several years now and his skills are absolutely incredible, he has a background in animation but truly excells at character design and conceptualisation. The quick pitch of a mascot for Themify really inspired the both of us, and almost immediately he had a large number of sketches to show.

The project's mascot is a squishy robot called T0Fu. These early sketches take an extreme approach to the metaphor of T0Fu being an iPod. You can see some of the experimentation taken into the vibes of the design, we ended up settling on a relaxed but playful character for them. Similarly we chose one of the simplest variants for the next iteration of the design. While the rest had more vibrant and expressive energy we felt that the simple designs matched the tone of the UI in Themify much better.

At this point, I had begun to finalise a list of illustrations to be made and where they would go. One key location for the mascot was in the fallback album art, the graphics shown in place of album art while it's loading or if it fails to load. Thom explored a number of different approaches to this, some passive and some active. I'm really fond of these sets of sketches, especially the singing one, I think they're brilliant examples of Thom's expressive style that really made me want to work with him on this originally. Ultimately though we felt that the passive lying down pose was the best choice.

The next stage involved turning these sketches into usable illustrations. With the iPod's low resolution display, it was important to keep the illustrations readable. This meant drawing them at angles that looked good with anti-aliasing, as you can see in the sketches above. These were then traced over in Inkscape and exported to Themify's graphics format before being placed in the theme itself.

We explored the addition of an animated scene for some of the illustration, however settled on the final implementation to reduce complexity of the task. These illustrations went through several iterations, with the final outcome looking beautiful in context.

Thom also prepared a series of really fun hand-drawn illustrations in a comic-book style for use in various promotional material. You'll also find it around the site and the user manual.

I'm ever grateful to Thom for his time and effort in helping to bring this mascot for Themify to life, I cannot recommend him enough as an illustrator and concept artist. Check out his portfolio below if you're interested in seeing more of his work!