Neurotic Design.

Sunday 15 June, 2008

I was recently given a tough challenge. Design a layout — something I am still quite unskilled at — for my partners brand new blog. I was given a rough sketch, a moderately simple brief (two column layout) and a degree of flexibility in how I interpreted it.

First hurdle? Typography. My partner is a budding author and as such I wanted the design to focus attention on the content. San-serifs were out, which meant finding a good serif that was easy on the eye. It eventually came down to a choice between Palatino and Georgia, neither of which are particularly stunning when viewed at 9, 10 or even 12 pixels.

Solution? Make it bigger. Much bigger. Typically that isn’t the first (or best) answer to a styling issue and yet, somehow, it just works. Sizes are defined in EMs, but body text is equivalent to ~14px and post headings a whopping 19px. Both give the body text a clear, carefree feel with a moderate amount of typeface styling actually being visible, making it a bit of a joy to build.

The design is comment free, yet there is easy access to the feedback form — encouraging more thoughtful responses — and, overall, I am pretty happy with the result. It’s also pleasing in that the final result matches the original sketch quite closely. Perhaps I have indeed remained true to my partners simple, yet elegant request. The comments so far is that I have.

Amusingly, my partner is as nervous about her re-invigorated launch into the blogosphere as I am in how well the design will be received in return. Design really isn’t my forte, but I am pleased on how it all turned out (it validated on first pass, no less) and how much I learned in the process.

Invention.

Thursday 24 April, 2008

Welcome to The Lab.

Atomic Ninja Labs has been the most crazy-insane, frustrating and eye-opening development I’ve done in quite some time. It’s a radical shift away from my previous experiences and represents an entirely new, fresh approach to blogging.

Gone is the re-blogging. Gone is the hard-to-handle and clumsy Wordpress interface. Say hello to Textpattern, a fresh new design, dynamic content spanning code, design, full on nerdery and piles of experimentation. All scratch built in XHTML CSS and is liberated by Textile.

So, lets rip the cover off the lab manual and see what is hiding underneath.

Structure.

The design uses the EM measure where possible, rather than px. That means it should scale (up and down) reasonably well without too much borkage, and should also display correctly in most modern standards based browsers. It wasn’t an easy or familiar choice, and it took reading Dan Cederholm’s book Bullet Proof Web Design to convince me. However.. I feel as though the design just works better as a result.

The content features include a rolling link list, full articles and lab notes. The later will cover projects and efforts this author is involved in, whereas the former will track interesting and or relevant resources elsewhere on the web¹. The design has been built to present content clearly, a minimalist “simple” brief.

Images and media are served from the Amazon Web Services S3, an ideal, stable platform to serve static media and content that helps reduce load on the (dv) server.

Typography.

The fonts used for The Lab include common cross-platform fonts such as Verdana, Geneva and Helvetica (in order of preference) for body text with Impact used for navigation bar. The logo sports Sonora Medium Italic — for something a little different I’ve deployed P22 Atomica for some of the symbols.

It’s often difficult to find a balance between using common fonts and something more unique, as there really isn’t any strong alternative to using image replacement, which is seldom efficient or portable. The decision was made to focus on content rather than cosmetics and as such the numbers of fonts used have been kept to an absolute minimum and the design should thus look very similar across a number of platforms.

Painted Canvas.

Whilst the colours might feel a little familiar, they’re actually a whole new set. The background #F5F5D5, which has been variously described to me as “fawn” or “khaki” was only actually chosen towards the end² of the design process after nearly two months of rejecting numerous other (similar and not so) colours. Given the original design goals, I think the softer colours and minimal pallet use helps illustrate a simple, clean look.

You can view the complete set at COLOURlovers.

There is a lot more going on here and I’m pretty excited about what the future holds — which I fully intend to cover over the next few weeks — but as a beginners guide to the lab, it’s a start. Feel free to have a wander around the lab. There are a small number of experiments that might quite be ready for prime time yet and rest assured I’ll be working on those.

Finally, you will have noticed that there is only one advertising spot, site wide. That is by design. I can’t go into too much detail right now, but if you’d like to know more, please do make contact to see what can be worked out.

Now it’s over to you. I’d love to hear what you think — be it conversation over the design elements, things you like (dislike?) or even simply reports of any breakage, feel free to click on the contact link below.

¹ Actually sharing the love, not just mindlessly re-blogging it.

² A happy accident with the colour chooser in the Gimp.