As part of the North project we’re developing in partnership with folly I needed to produce a new web presence. It was quite a quick job, as time and resource were at a premium, but I thought it would be fun to do a screen capture of the design process. I’ve condensed the entire process, which was about 5 hours spread over 3 days, into just under three minutes.

You can watch it below, or head over to Vimeo to see it in glorious HD.

This was a really quick job, implementing a design which is flexible and which can be developed over time. The foundation is a fairly rigid grid system with a strong emphasis on typographic style. I went through three different iterations before arriving at the final blue/green version. Most of the work was done in Photoshop, with some of the graphical elements sketched in Illustrator.

I really liked the second iteration, with the paper plane sketches, but it just wasn’t cutting it with the rest of the team. I’ll shelve that idea for a future project though, as I really like the aesthetic.

I hope this is an interesting little insight into the way I develop concepts when working on a new design. Feel free to let me know what you think, and whether you found it useful/interesting.

If you want to see the finished design in all it’s HTML markup glory, or just want to know more about North, then head over to the website.

It’s funny how you work with stuff for so long, and you become very entrenched in a certain way of doing things.  You follow the trends because that’s the consensus.  You ocassionally push the boundaries in small ways, to create distinct designs and user experiences.  But there are certain guidelines you set yourself; basic rules you adhere to.  Many times it’s subconscious: you do things a certain way because, well, you’ve always done things that way, everybody else does them that way, so there’s no reason to change.

That, I think, is there very defintion of complacency.  It’s creative apathy.

I’ve been fortnate enough to be able to spread a little more creativity around with my web designing in the past 6 months, and I’ve found myself slowly moving towards a new design aesthetic.  It started when I began to revisit Edward Tufte, and began using grids as a design foundation.  I’ve very much moved away from designing with pixels, putting things in boxes and placing restrictions on content – instead I’ve begun to think a lot more about flexibility, expnadibility and getting a lot deeper in the exploration of the beauty which can be extracted from the content.

What do I mean by that last bit?  Well, I guess it comes down the fact that I’ve grown to have a much better appreciation of how text, images and other media can really shine as the basis of a design.  Far too much web design (and I’m wholely guilty of this too) is based on the principle of creating a container which looks beautful and which functions wonderfully, but with less consideration for what is going to be contained therein: the content.

The best analogy I can think of is this: if you have a beautiful painting, you wouldn’t want to house it in a frame which overwhelms the picture – you want something which complements the painting and accentuates it’s beauty.  The painting is more important than the frame.

And so it is with websites.  The usual process for creating a website is to start with the structure, and the design.  Consideration is given to the content which will be contained within it, but it’s usually hypothetical.  From my experience, website copy is normally the last thing to be written, at the last minute, in a rush and with a “that’ll do” attitude.  In most situations, that’s the nature of the beast.  But I think that as the web matures, and as we move forward with new design ideologies to fit in with the evolution of people’s expectations of their online interaction, that is something which will need to change.

And I think that change will manifest itself very much in a move back towards the first days of the World Wide Web: when the value was in the free exchange of information, without bells and whistles; back when there was nothing to consider other than the content; no distractions, no advertising, no over-zealous design, no whizzy graphics – just pure-and-simple, straight to the point content.

Now, this may sound like I’m advocating a return to a Neolithic version of the Web – an age where everything is just boring text and ugly underlined links.  I’m not at all.  God forbid!  What I’m advocating is, as web designers, we need to back up the truck a little, and take stock of where we’ve come from in the relatively short life of the Web.  We need to think a little more philosophically about how we approach the design of information and how that information is applied.  The iPhone has already begun to show us a future where a device dictates how people interact with information, and the design principles which need to be applied to faciliaate that.  The Web has been confined to the computer screen for all these years, but that is all about to change.  And with it, I predict, will come a huge shift in the approach to interactive design.  Don’t know what, don’t know when, don’t know where – but it’s coming.

And so, how is this relevant ot my epiphany?  As I mentioned at the start of this post, I’ve been casually aware of a shift in my design aesthetic.  It wasn’t until I read this post by Wilson Miner, that it suddenly struck home, and I realised where I’d been heading:

After years of wondering why browsers defaulted to 16pt text sizes I’m starting to be convinced that long text really is significantly more readable on screen at precisely that size.

In that post, Wilson references a post by Oliver Reichenstein, in which Oliver introduces the 100% Easy-2-Read Standard.  The main point he makes seems so glaringly obvious: the text size on most web pages is too small.  Wilson provides a brilliant visual example.  As the resolution of our monitors has increased, the size of the fonts used on web pages has gotten smaller and smaller, and through that complacent attitude of “having always done it that way”, us web designers haven’t considered compensating for the change.

Duh.

This was the final peice of the jigsaw which I’d seemingly been trying to put together in the back of my head.  I have a whole bunch of other unwritten rules which I follow (working with grids, clean document structure, progressive enhancement etc.) and now, this new one has been added to the imaginary list:

• Use a relevant and readable font.

And so, to Websites & Sausages (a phrase blatantly lifted from an episode of The West Wing I was watching recently).  I’m working on a couple of online projects at the moment which are allowing me almost complete creative control – mainly because they are in-house projects – and I thought it would be interesting to take one of them as a kind of case study, and to document the process I go through to bring it to life.  I’m going to consider my preconceptions along the way, and consider new ideas to refine my process.  I hope that the result will be a vigorous insight into my thought processes, and help me to question some of own habits.

And maybe, along the way, I’ll cause a small epiphany for someone else.

I always think of Muji as the kind of store likely to appeal to readers of early Nicholson Baker, a man who could wax lyrical for pages on the origami-like beauty of a milk carton spout. But in fact it’s cyberpunk sci-fi writer William Gibson who really nailed its appeal: “It calls up a wonderful Japan that doesn’t really exist,” Gibson wrote, “a Japan of the mind, where even toenail-clippers and plastic coat-hangers possess a Zen purity: functional, minimal, reasonably priced. I would very much like to visit the Japan that Muji evokes. I would vacation there and attain a new serenity, smooth and translucent, in perfect counterpoint to natural fabrics and unbleached cardboard.”

What does a lie sound like? How do we decide to trust? There’s a reason why you can figure out in an instant whether a mail is spam or not. It’s not a single, measurable thing, but a whole set of small, invisible variables with which you can instantly make a judgment — I do not trust this mail.

You have a complex set of analytical mental muscles that help you make critical snap emotional judgments. Whether it’s a mail, a website, or a person, your brain can instantly look at 12 imperceptible aspects of a thing to determine how you should feel.

Truth, love, or lies, human has a signature cadence.

I always place a lot of emphasis on spending time developing the language of a website – the words used aren’t incidental: the language and tone should be an integral part of the design.