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.

One of the clever things that Blueprint introduced was the idea of displaying the grid while you’re working – this proves to be an invaluable aid as you try to refine CSS rules.  But I’ve found that – as good as the theory is – it has a few drawbacks:

1. Because it uses a background-image CSS property, it overrides any beautiful background design you might have implemented.
2. Because it uses images, if you change your grid size, you have to generate a new custom image – a bit of a faff.
3. You have to tweak your CSS every time you want to turn the grid on or off.

Since I work with grids more and more often, I decided to have a stab at coming up with a solution which refines the Blueprint idea, adds a dash of jQuery to produce something which is a little more flexible and user-friendly.

What I’ve come up with is a jQuery plugin called Gridlet.  Instead of using pure CSS, the plugin generates a grid on-the-fly, and it’s an improvement in the following ways:

1. It doesn’t use images – instead it dynamically generates a grid on top of your page, so your design remains intact.
2. Changing your grid size is as simple as changing a setting – no need to generate images.
3. You, er, have to tweak your JS to turn it on or off (this is something I’m going to work on improving – it’s early days).

It’s also worth noting that this first version only produces horizontal grids – that’s all I need at the moment  No doubt I’lla dd vertical grid spacing as and when it’s needed.  Any comments or suggestions are appreciated.

You can download version 0.1 of Gridlet here.  I’ve only tested in Safari 3 and Firefox 3 so far.

Implementing it is really easy – you just do something like this:

$(document).ready(function() {
  $("body").gridlet();
});

If you want to override the default grid height or colour, just pass in the settings like this:

$(document).ready(function() {
  $("body").gridlet({
    height: 18,
    background: "#fcc"
  });
});

And finally, for your curiosity, here’s the source code:

(function($) {
  jQuery.fn.gridlet = function(options) {

    var opts = $.extend({}, $.fn.gridlet.defaults, options);
    var line_position = 0;
    $("<div/>").attr("id", "grid_container").appendTo("body").css({
      position: "absolute",
      top: 0,
      left: 0,
      height: "100px",
      width: "100%",
    })

    while(line_position < $("body").height())
    {
      line_position += opts.height;
      $("<div/>").css({
        position: "absolute",
        top: line_position,
        left: 0,
        height: 1,
        width: "100%",
        background: opts.background
      }).appendTo("div#grid_container")
    }

    return this;

  };

  jQuery.fn.gridlet.defaults = {
    height: 24,
    width: 24,
    background: "#ddf"
  };

})(jQuery);

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.