Break the Twitch

A minimal, flexible identity for a blog exploring intentional living.

Project Details

Done for

Break the Twitch

Time

Spring 2015

Main Collaborators

  • Creator, Writer: Anthony Ongaro {Minneapolis, MN}

Screen Shot 2015-06-28 at 5.57.26 PM

Anthony needed a flexible, minimal, and memorable identity for his blog, so I created a literally flexible masthead to achieve those goals.

In 2014, Anthony Ongaro came to the realization that his online shopping “twitches” – momentary impulse buys – were a waste of time, energy, money, and a sacrifice of lasting contentment in the pursuit of short-term gains. He began to experiment with getting rid of unnecessary things to find space for the things that really mattered to him. It impacted his life so positively, he wanted to share these lessons with others.

Anthony Ongaro is a friend from the Minneapolis tech and creative community, who has for several years been the marketing director for Nice Ride Minnesota, the Twin Cities bike share system. Anthony is an all-around awesome guy, and his job at Nice Ride means that he knows a lot of other creative professionals in Minneapolis, a city full of bike enthusiasts.

Why was my help needed?

Anthony had gotten a great start on his blog, but he wanted to level it up from a generic WordPress site to something with a little more personality. Beyond that, of course, every blog today is more than just a blog – it’s also a voice that must extend to social media, email newsletters, and potentially into other forms of media entirely, such as podcasting or printed material. Anthony knew that without a thoughtful visual identity, these leaps simply wouldn’t work as well.

This question of identity came to a focal point when a lettering artist reached out to Anthony with a Break the Twitch logo, already made, offering it for purchase. Anthony took a moment to contact me and ask whether I had any bandwidth to create something as an alternative. Luckily, this came at a moment when I did have a little extra time and was open to a creative challenge on the side of my regular work.

How did we do it?

To respect Anthony’s timeline and make this a project I could finish relatively in my limited time outside of my main job, we sought to make this a lean project. To that end, I asked Anthony to create a Pinterest board of what he had in mind for his blog’s identity. As a plus, he already had plenty of writing already on his blog, explaining his mission and beliefs. Also, the deliverable was fairly clear: a visual identity that would work well across a blog, social media avatars, and possible future editorial content.

IMG_880549

One of many notebook pages I filled out at my desk and on the subway to explore what visual identity and central mark would be right for Break the Twitch

IMG_880747

When I want to draw a script word or logo, I typically start by using a brush pen or marker to experiment with styles rapidly. I’m no expert brush calligrapher, but this helps me find the organic shape of the letters I’m working on and to stumble upon beautiful accidents.

Originally, we were leaning towards an identity based around hand-lettering. I made a few variations of logos with the Break the Twitch rendered in script. After some exploration, I also came to the possibility of representing the name in a concentric form, with a compass needle in the center connecting two of the letters. Additionally, due to this site being about minimalist living, I played around with what a graphically minimalist identity might be and how it could still be made unique to this project.

IMG_880945

After finding a style that seems right with brush work, I tend to draw it with pencil. This allows me to pick out the most intriguing and beautiful shapes out of many iterations, rather than simply tracing a single instance.

IMG_8800

Once I’ve drawn a solid script composition with pencil, I pull out tracing paper and trace it with ink – usually a black Copic marker for the interior and a Micron or Copic Multiliner for the outside lines, sharp points, and details.

IMG_8802

This concept – a compass rose pointing to True North – was something that initially appealed to Anthony and me, but which we ultimately decided wouldn’t be as effective to communicate his purpose and brand voice.

IMG_8804 copy

This third route was the dark horse concept. Because Anthony calls his movement “minimalism,” I wanted to explore what a minimalistic logo would look like. I added slashes as a simple visual device, to differentiate Break the Twitch from run-of-the-mill personal blogs, and to support Anthony’s vision to make this a scaleable brand, that could hold up beyond the web. The “H” in this sketch is a simple accident, caused by me paying more attention to the spacing of the letters than the letters, themselves. It’s probably a good thing I’m a graphic designer, not a tattoo artist.

Both Anthony and I were drawn to the compass idea – it seemed like it might embody the adventurous journey of living a minimalist life.

However, whereas I might have once chased an intriguing idea until I could force it to work, I’ve learned the value of more deliberate experimentation and testing through UX/UI design. When I asked a broad range of people whether they could read the logo and what they saw in it, I got just as broad a range of answers. In contrast to my hopes that the easy majority of respondents would see the compass symbolism with little problem, that wasn’t the case.

Screen Shot 2015-08-15 at 4.43.18 PM

I experimented a lot with a compass-themed concept, but in the end, it became clear that this route was me chasing something “cool” above finding something that would actually solve the real problem of this project.

In talking with a broader range of people about the logo possibilities, another consideration became clear: the compass route seemed cool, but it was turning into a graphic system more appropriate for a hip bar in the East Village or a boutique in Williamsburg than for an earnest, multi-channel project focused on living with purpose.

Once we were able to identify that the compass route wasn’t as perfect as it seemed at first, we really got rolling on the more-minimal route. Inspired in part by London-based Spin Studios, I was able to create a logo that was both minimal and flexible.

And, once I found that the best way to take this logo would be something that would flex along with its content, I knew that it wouldn’t live up to its calling and properly respect the blog’s content if it were just a PNG plopped into the header. So, I took care to find two typefaces on Google Fonts that could uphold Anthony’s writing and ethos, and used the headline font to create a masthead that could respond to any screen size.

flexible-header

The header of Break the Twitch, shown at large, medium, and small widths.

This responsive logo made it easy to expand into social media, because it became clear how the logo would reduce down into a social avatar.

break_the_twitch-social_avatars

For social media avatars, the logo condenses a little more to make a big statement in a little space.

In my time at IBM, I’ve had a lot of practice in communicating designs for others to build on or implement. This proved helpful in making Anthony a simple but clear set of guidelines for how to use the flexible set of logos I was delivering: PDF: Break the Twitch Logos.

What did I learn?

  • How to better balancing minimalism and flexibility in logo design
  • How to work with vendor-prefixed flexbox CSS to create a responsive header layout
  • How to modify the style of a WordPress blog, if it’s already utilizing a Child Theme
Building Community at IBM