Latest Entries »

The things that made me Me: Compose to a Vertical Rhythm

Earlier this week I was fortunate enough to attend an event at which Richard Rutter gave a talk about web typography. Several years ago, 2006 to be exact, Richard wrote an article for 24 ways called Compose to a Vertical Rhythm; two years after that, I discovered 24 ways and read it. Listening to him speak reminded me of the effect which reading that article had on me.

Prior to then I had been designing and building websites which, to put it kindly, aspired to mediocrity. This wasn’t through choice or laziness: I was desperate to improve, and spent more time reading than I did coding. But my reading list lacked a certain coherence. I would consume articles on HTML, CSS, PHP, and JavaScript techniques with no regard for provenance, and then try and implement them all at once, in the same project. As a consequence I was capable of displaying the server time in the browser (yay me!) and coding a working, if unattractive, JavaScript slideshow (sexy times!) but what I couldn’t do was write good mark-up or make websites which were a pleasure to use. Despite doing this ‘professionally’, in the sense that it was part of my job and I was being paid, I was the archetypal amateur.

And then I read Compose to a Vertical Rhythm. Now, I’m not going to pretend that the scales fell from my eyes, or that I emerged, blinking, into the light. What did happen, though, was that I read the article and ‘got’ it. I had always been able to tell a good website from a bad one, but because I lacked a background in design I didn’t have the vocabulary to articulate why. Looking at the before and after examples inspired in me a sense of calmness and inner peace with respect to the latter, and so I learnt to recognise one aspect of good web design. I read the article and put the ideas into practice with an understanding of what I was trying to achieve and why it was important.

I think the reason this article struck a chord with me was the way in which it was framed. I had always been an aspiring musician (I still dabble, since you ask) and I had embarked on my career as a web designer at about the same time as I had accepted that the invitation to headline Reading Festival probably wasn’t just lost in the post. I had over a decade of experience with the structure and composition of music but barely six months experience with the web. So when Richard wrote that ‘just as regular use of time provides rhythm in music, so regular use of space provides rhythm in typography’ it was the first time I was able to put web design into a context which I understood. It also didn’t hurt that he obviously had good taste in books: anybody who uses an excerpt from a Neal Stephenson novel to illustrate their ideas has got to be worth listening to.

I didn’t suddenly become a good web designer, of course, or an expert in typography. My websites were still positioned somewhere south of mediocrity, and they still had faces that only their mothers could love. But, with proper consideration given to the mechanics of reading and the foundations of typography, they started to become a little more comfortable to read, a little easier to use. More importantly this also marked the point at which I realised that I needed to learn about design as well as code, and I needed to take more care over how I chose to educate myself. I stopped reading badly written articles about unnecessary JavaScript and started reading about semantic mark-up. I came to understand the concept of separating the structural, presentational and behavioural layers of a website, and why it was important to do so. I also started reading about grids, colour theory, and information architecture, as well as a great deal more about typography.

I didn’t realise any of this at the time; it wasn’t until at least eighteen months later that I was able to pinpoint reading Richard’s article as the point at which my designs had started to become subtly better. My designs were sill ugly as hell, but at least they were readable. And from this point on I learnt to implement other people’s ideas only when they chimed with my own ‘inner designer.’ Mark Boulton’s articles about grids for example, or Erin Kissane’s book on content strategy. Reading Compose to a Vertical Rhythm had been the first time I had found a concept which ‘spoke’ to me, and so it was also the moment in which I realised that I could become a better designer by working hard, paying attention to the details, and learning from the right people. It also made me think more carefully about my strengths, and my interests. I’m better at typography than I am with, say, colour, and I get greater satisfaction from it. My websites are never going to win any beauty contests, but they will always make typographical sense.

Sometimes the important moments in our careers — or, given how much time we spend at work, our lives — only become obvious as we watch them recede in the rear-view mirror. So if by some chance you’re reading this Richard: thank you.

An extract from Cryptonomicon by Neal Stephenson

When I was reading the project brief I was reminded of a passage from Neal Stephenson’s Cyptonomicon.

To Randy and the others, the business plan functions as Torah, master calendar, motivational text, philosophical treatise. It is a dynamic, living document. Its spreadsheets are palimpsests, linked to the company’s bank accounts and financial records so that they automatically adjust whenever money flows in or out. Beryl handles that stuff. Avi handles the words—the underlying, abstract plan, and the concrete details, that inform those spreadsheets—interpreting the numbers. Avi’s part of the plan mutates too, from week to week, as he gets new input from articles in the Asian Wall Street Journal, conversations with government officials in flyblown Shenzhen karaoke bars, remote-sensing data pouring in from satellites, and obscure technical journals analyzing the latest advances in optical fiber technology. Avi’s brain also digests the ideas of Randy and the other members of the group and incorporates them into the plan. Every quarter, they take a snapshot of the business plan in its current state, trowel some Maybelline onto it, and ship out new copies to investors.

Take from that what you will. Not sure I’m going to be able to stretch to satellites, but I think this is something close to the relationship I’m going to have with my thesis project over the next year.

Hopefully this is fair use and not copyright infringement. In the unlikely event that Neal Stephenson is reading this, and thinking I’m taking liberties with his text, then I’ll take it down and buy everyone a copy of the book (with the corner of page 240 turned down) because it’s really very good.


What I did with my summer

University tomorrow. Yikes. Here’s what I’ve done with my summer.

Responsive design

I’ve finally got the hang of this, and it’s completely changed the way I think about web design. It’s pretty straight forward. Start with one of the extremes. If your project’s mobile focused start with hand-held devices; if it’s desktop focused start with a standard or widescreen monitor. Build your website, and then scale it up or down as you come across your breakpoints. Add some media queries, and do it again. You might need lots of media queries, or you might only need one or two. View full article »