Owltastic

I set out to write a quick post about the problems and solutions I’ve encountered while redesigning this site. Instead, this turned into a 1,000 word account of my attempt to make the type look better. For those who can’t be bothered (and I couldn’t blame you) here are the highlights: I like FF Tisa, check out MIN, and be true to yourself when designing your logo.

As some of you may notice, I’m gradually redesigning this site. Here are some of the goals for this undertaking:

• Use a fluid layout
• Design a better logo
• Improve the typography
• Incorporate CSS3 hotness
• Re-think the content

While these sound like good, important objectives, I think the primary drive behind the redesign is that I simply need something different. I can’t look at the same design for more than a year before I start to loathe it.

The erratic type in version one.

After months of adjusting I’d managed to execute the first two goals with some level of satisfaction (though I continue to tweak the layout, and have scrapped dozens of logos). So, I recently decided to start giving the typography for the site some serious thought.

This aim to make the type look better began only with the vague knowledge that what I’d used in the past was rubbish. The original version of Owltastic featured lots of arbitrary all-caps and italics, and the occasional cluster of Zebrawood. As I embarked on improving the type for version two, all I could think to do was to experiment with that old standby of Helvetica and Georgia, juggling the two around, and always feeling they came up short.

One of the many variations on the seal logo.

I started to wonder if part of the problem was that Helvetica didn’t sit well with my pretty new logo, which contained a mix of handcrafted, old-fashioned typefaces. Trade Gothic, Avenir, Georgia, and… Helvetica? One of these things is not like the other.

I decided I needed something that jived well with my love of sturdy but slightly quirky fonts, and almost immediately I fell in love with FF Tisa. I’ve seen FF Tisa around the web for awhile now, and it must’ve been lurking in the massive Design Idea Dump in the back of my mind, because as soon as I set it up it felt right. From the Typedia blog:

“FF Tisa has become a web designer’s darling… Its rugged build, short serifs, lack of decoration, and gently leaning italics are all well suited for the pixel grid.”

Typekit, the service I’m using to display FF Tisa, describes the font as “a softer, more dynamic version of a nineteenth-century slab serif wood type.” This really resonates with me, since along with my endless pining after vintage, decorative typefaces, I am forever hungering for the perfect web-ready slab serif. So, I dumped the dreaded Swiss sans-serif, and settled into FF Tisa.

However, something was still off. The balance didn’t feel right; the headlines weren’t discernible enough, and the body and secondary text weren’t clearly differentiated. Frustrated, I gave up designing, and decided to browse through my forever backed-up collection of RSS feeds.

Owltastic, using FF Tisa, viewed through MIN

This turned out to be the right move, since there I stumbled across Brian Hoff’s link to MIN. Oh man, is this tool useful. I could’ve saved myself from some embarrassing line-height incidents in the past if I’d had MIN in my tool belt. MIN is a simple bookmarklet that, when clicked, hides a site’s imagery, colors, borders, and other ornamentation, displaying a stark, black-and-white version of the design. This helps to narrow the focus to the typography, and ensure everything is balanced and readable. After some experimenting, and frequent references to the godsend that is type-a-file, I struck what seems to be a better balance.

The overall feel for the type on the page was starting to strike the right chords, except for one distracting element: my brand new pretty logo. Now it felt like all the Avenir and Trade Gothic and Archer were competing with the lovely FF Tisa, not to mention how hokey the idea of an “Owltastic seal” suddenly seemed. Seals are trendy and hip and often look amazing, but it just wasn’t me. Of course, if trendy and hip isn’t me, then what is? I am silly. I love to doodle, I like cuteness, and cuteness was something I had in the old design, with its humongous, ridiculous owl.

A snippet of the illustration I created for Interlink

Unrelated to the redesign work, all week I’d been playing with this owl illustration I created for the upcoming Interlink Conference. I’m not sure why I kept returning to this illustration, since I suck at using Illustrator, and the “design” was already finalized.

I use sarcastic quotes around “design” because this little doodle looks like something someone scribbled on a scrap paper, which is exactly what it is.

When Shawn, the conference organizer, told me to make an illustration that is “classic Meagan,” all I could think of was the silly little owl characters I scrawl when I’m bored. So I scanned one in, traced it, and handed it off as a “design.”

The new sketchy Owltastic logo.

This got me thinking that if a hastily sketched owl is “classic Meagan”, then perhaps that’s what should greet visitors to my site. So, I tweaked my Interlink owl a bit and slipped him into the #logo div on the site. The “font” below him is something I drew in 30 seconds in illustrator, and pretty closely matches the crooked, lanky letters I sometimes draw.

Thanks to the new logo and FF Tisa, instead of 5-6 fonts on the site, I have two (if you can even count my hastily drawn “Owltastic.”) Things are simpler now. Simpler feels like progress.

I’m still not happy with the colors, or the layout, or all of the code, and I haven’t even finished the content (is there anything worse than writing your own about page?). And even after all this, I’ll probably still obsessively adjust the type.

I set out to write this blog post about doing a redesign, and almost 1000 words later I’ve barely touched on the ridiculous process I put myself through when selecting a typeface.

When designers do a redesign or personal project, it’s usually the only time we get to work unencumbered by petty demands. The sky is the limit: we can support any browsers we want, use any colors we want, and curse as much as we want. Sounds liberating, right? But if all my projects were this open-ended, then this level of obsessive, tortured adjusting is what my work life would always be like. Suddenly I’m incredibly grateful for the constraints of client demands, art director visions, time, and budget.

There’s a good chance I’ll have another design up tomorrow, but I probably still won’t have an about page.