25th January, 2010

Redesigning the undesigned

For two years—and with much embarrassment, I have been apologising for my undesigned blog. Well, no more shall I blush. To mark this fourth redesign and rebuild, I’ve decided to detail my inspiration, ideas, processes, type and design choices—and hopefully explain what this miscellany thing is all about.

Back in 2008, I’d frustratedly stripped out almost all presentation from my blog, aiming to create and implement some great new design very swiftly. It didn’t happen. I could blame this failure on family issues,[1] the growth of my business,[2] or lethargy, but ultimately I blame my own misguided pursuit of perfection.

Tools

I wasn’t looking for a design or approach that would please every visitor, nor was I looking for the approval of designers whose opinions I value dearly. All I wanted was something new that absolutely made sense to me, and reflected who I am, be that a good or a bad thing. So far, the work I’m most proud of has been the stuff that divides opinion. If some people love something I’ve designed, and others hate it, I end up pretty happy. It tells me that I’m not being boring.

This has been a long process. I think over the last year or so I have toyed with around a dozen different ideas for this site. Some were pretty good, some were (with the benefit of hindsight) fucking awful. I’ve threw away more hours-worth of ideas than I dare calculate, with no regrets.

Breaking down the process

Around October 2009, this new idea started to come together—fast. I was sure it was the one and just blitzed it, night after night. At several points, however, this was also nearly abandoned. Ultimately, after trudging a long road of iterations and abandoned treatments, I’m really very happy with it, and just glad it’s done.

So, whether it is loved or hated it isn’t worrying me too much right now, but nevertheless (and for my own good) I’ve sought to try and explain how it came together and what it’s all about. What follows is all a little bit over-confident, but remember that I’m trying to convince myself, as much as I’m trying to convince anyone else.

Inspiration

I’ve long owned a copy of Schott’s Miscellany, and the tone of voice and attention to detail in the book has always appealed to me. Also, I used to keep a lot of sketch/notebooks[3] and miss that sense of archiving as opposed to blogging.

Scotts Miscellany
A spread from Schott’s Miscellany.

I knew I wanted to fill the redesign with a lot of personality, and I kept coming back to the contradictory idea of a modern yet old-fashioned Edwardian gentleman’s journal, wrapped within a wider miscellany of nonsense. I don’t know why, but I’ve always loved such things, and after so many failed concepts and ideas, I ended up convincing myself to do it. The plan was to have a “journal” (blog) disguised within something playful and irrelevant. More on that later.

I’m constantly aware of the restrictions faced when designing for clients every day, and there’s rarely the freedom to do something odd. Thus, early on I was certain that my own site should be whatever the hell I want it to be. I could abandon sensible signage and navigation, and write copy in a slightly weird way. I could and should do anything at all without worrying.

Typography

I wanted the design to be type-led, and with a rough idea of this miscellany/journal approach lodged in my brain, I first sought out the kind of typefaces that would inform the whole feel of the site. Franklin Gothic (Demi/Book Extra Compressed) came first, as I tried to find something sympathetic to the “double-L” in my surname. Go with a wide face and that sucks, so I opted for a narrow sans-serif that doesn’t feel too modern.

I next needed a serif and/or slab to help evolve the Edwardian-style “logo”, and tried pairing weights of Clarendon Lt Std with Franklin Gothic, and this pairing remained throughout, albeit tweaked daily. There’s also a touch of Mrs. Eaves (SmartLigItalic) in the masthead to help antiquate the whole thing (still not 100% on that). I think that’s it, save for a Baskerville ampersand, and the odd monospace thing here and there.

Times New Roman

If there’s one typeface that I’ve leaned on more than any other it’s Times New Roman (predominantly Regular and Italic, using Bold only for drop caps). A couple of months ago, our Greg suggested it as the body face, once he had a gist of the journal/miscellany idea, but I never intended to do so much with it.

With Times being one of those “web-safe fonts” we’ve all become so bored of, it’s certainly no longer cool, and we usually can’t wait to get rid of it. The thing is, with the onset of an interweb full of magic new type via the likes of Typekit and FontDeck, it actually feels quite good to be taking a tired old typeface and trying to squeeze every possible ounce from it. Certainly, with a design heavily reliant on images, it’s good to avoid external type supply and heavy image replacement for text.

So, I’m using all sorts of styles for Times, often in combination with quite a few spans to let colour and size variations lift things. I even broke one of my own rules and used letter-spacing for the navigation headings, which seemed a bit too squashed to begin with. Thankfully I wanted them in uppercase, so at least Frederic Goudy would approve:

Anyone who would letterspace lowercase would steal sheep.

Some suggest Goudy used “shag” rather than “steal”[4] but I’ve no idea. Anyway, many will recall the excellent Seed Conference site from a couple of years ago (which I’d actually forgotten about), a design that did some refreshing things with Times. I also suddenly started seeing subtle yet creative uses of Times all over the place this last month or so. I think my Times-radar was turned up high of late. Anyway, I for one have fallen in love with it for the very first time.

The menagerie

So, the type looked kind of right, but I still had this idea of the journal being wrapped around something else. What would that be? I found some beautiful images in a knackered old book about botanists and Darwin’s experiments, and immediately went and grabbed loads of brilliant animal illustrations from a stock library.[5] I did consider this to be cheating for a while, and thought about wasting my life re-drawing thirty or so images just to avoid negative comments. Then I realised that if anyone takes umbrage with me using stock illustrations, they can “ bollocks”, and moved on.

As soon as I placed the butterfly next to the early type ideas, everything seemed right. Something about the typefaces, tone of voice, and utterly irrelevant wildlife gave me loads of things to play with all of a sudden. The image below shows the very first juxtaposition of type and wildlife.

The eureka moment
First placing of wildlife against type.

The idea I was most keen to retain is that the wildlife should have no correlation to the section or external site that they are paired with. For me, that’s the playful thing again. There is no reason why Flickr should be represented by a flea, or Delicious by a snake, but that’s where I get my kicks.

Cue dozens of Photoshop and browser iterations around a basic layout that went on for nearly two months. I ended up with little wildlife “cards” or transparencies, and I’ve already grown quite attached to my menagerie.

Design treatments and CSS3

It was perhaps inevitable that a concept based around the idea of an old journal would lead me towards increasingly wicked-worn territory. The thing is, that has always been a natural style for me, so I don’t fear it. However, I’ve grown more and more eager to be honest about the fact that we’re using computer screens, browsers and pixels, and less fond of the fakery in web design—usually because the ideas are often executed poorly.

Last year I presented Bauhaus Ideology and the Future of Web Design[6] on the FOWD Tour, with some focus on how we should acknowledge the machine, and the honesty of construction, truth to materials principle that suggests us web designers should not pretend we’ve actually managed to rest a sticky coffee cup on a computer screen (you know the kind of designs I’m referring to). Still, if it’s done well…

Anyway, through all the iterations, the temptation was to add more and more textures using PNGs and opacity filters. The thing was hanging together very well, and I pretty much decided this was the final look and feel. Below is a detail, with subtle CSS transitions kicking off.

Abandoned wicked-worn treatment
An abandoned “wicked-worn” treatment.

I posted teasers on Dribbble to gauge feedback. I also showed the site to three or four designers at this stage, and all but one came back and said it looked great. The exception was a designer who I can rely on to be honest and say what he really thinks.

That designer put plenty of effort into some superb feedback, and pretty much said that the backgrounds and layers were “cheapening” the concept—a concept he really likes. This was the honest feedback I needed, and as I too had nagging doubts, without a hint of regret I moved forward in search of a more minimal way to present the ideas. Plenty of late nights later, I have a more sober, less obtrusive canvas for all the type, wildlife and content—and as a result I’m much happier with the modern/antiquated balance.

Finally, I turned off a number of CSS3 clever bits. I wasn’t happy with the way Opera 10.1 ignored these features or the poor way that Firefox (any version) handled the rotations that contained real text. Also, that occasional ridiculous div-flash you get when triggering a rotation in Safari bugs the hell out of me. This means the spinning home button, the slinky opacity fades and other tricks are gone. I had to be bold and do away with some of the coolest stuff I’ve done with CSS in years, but I don’t regret it really. The gimmicks were potentially cheapening the idea anyway. Use with caution, I say.

A few Easter eggs

All the cool kids keep banging on about adding “Easter eggs” into their designs. Clever, knowing little treats that might not be obvious on the first pass. I have to admit that it’s a lot of fun to sprinkle a few goodies in here and there.

For example, you’ll possibly find a nice approach to footnotes[7] (so difficult to do properly on the web) using the sup element, anchors, and some jQuery. It’s a bit of a hack to use sup, but it works (albeit not on Opera, which doesn’t seem to aim for the anchors at all). I’ll spoil the fun if I reveal them all, but if you’ve an eye for detail you may find a few subtle things to interest you.

Redesign Flickr set
Flickr set containing various Photoshop and browser iterations.

Browser notes

As you’d expect it looks best in this order: Safari, Chrome, Firefox, Opera (preferably 10.5 beta for CSS3 stuff), then any other browsers that aren’t on Windows, and then Internet Explorer of course. On IE 7/8 for example, you’ll miss shadows, rounded corners, exact measurement and plenty more, and some forced opacity ( such as filter: alpha(opacity=60);) seems to suppress the benefits of ClearType in places. On IE6 it hangs together, but content page floats and some transparencies are screwed. Just stop using it.

That’s it

So, that’s it. A whirlwind diary of reasoning, mistakes, ideas, backtracks and decisions that I hope help explains why this site looks the way it does. Don’t get me wrong, all this hot air doesn’t mean I arrogantly assume this is all wonderful. I know it isn’t perfect, but like I said, pursuing perfection is—I think—a misguided quest.

I said up above that I don’t really care what people think, but in truth I would be very interested to hear your thoughts either way. Also, if anyone wants me to go into more detail about anything I’ve mentioned, whether big stuff or small details, then drop a comment. I’d be happy to consider expanding if it helps anyone.

Footnotes

  1. Specifically, the loss of my Dad, and both Granddads within two years, and all that means.
  2. Erskine Design, Nottingham UK.
  3. Many of my old sketchbooks are scanned and available on Flickr.
  4. According to Wikipedia he said “Any man who would letterspace blackletter would shag sheep.”
  5. All wildlife images were obtained from iStockPhoto.com.
  6. The Bauhaus was a school in Germany that combined crafts and arts in modern design.
  7. Footnotes like this one, for example!

Prev / Next

Tags

If you enjoyed this article, please subscribe to my Internet of Natural Things letter, and maybe grab the RSS feed. Thank you.