North: website design process

I made this a while ago, but due to my slackness in updating the old blog for quite some time, it’s never made it on here.

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.

A new approach to web accessibility?

I’ve been doing a lot of thinking about web accessibility lately. A lot of that thinking has been to do with how I can improve accessibility in the work I do. I do my best to design interfaces which are logical and easy to navigate, follow accessibility guidelines where they are applicable and appropriate and make sure that I write markup which is clean and semantic. I add little accessibility flourishes wherever possible to help those who use assistive devices, and make sure that copy is written to make sense even when it’s taken out of a visual context.

Al in all, I consider myself to be a pretty responsible practitioner of web standards and web accessibility. It’s something which I consider to be of great importance and it’s become an integral part of my design and development processes. It’s not an afterthought, it’s slap-bang in the middle of every design decision: whether technical or aesthetic.

So when I came to think about what else I could do, I was at a bit of a loss. I fell like I’ve ticked all the boxes for being a responsible web practitioner, but where can I go from here?

There’s been some tremendous work carried out over the years by various working groups and researchers, to raise the bar on web accessibility. It’s great to see that good accessibility has become an example of best practice within our industry, which in turn has had a positive impact on the workflows of designers and techies alike. Some might say that accessibility has dumbed-down creativity and made the web bland – I’d argue that we just haven’t been creative enough.

I came across this note recently, from an article written by Brian Kelly, summarising a paper he has co-written:

Disability is therefore a social construct and not an attribute of an individual. In particular, resource accessibility is the matching of a resource to an individual’s needs and preferences – and is not an attribute of a resource.

That really got me thinking about our perception of accessibility, and in particular the ways in which we view the people we are trying to help.

Accessibility is generally considered to be a way of helping those members of society who have a disability. We often think of users of websites as use cases, rather than individuals: a particular demographic, in a particular geographic location, or a group who behave in a particular way or have common interests.

And it’s often quite easy to fall into the trap of thinking of someone with a disability in a similar way – as a generalised group: someone who is blind, who is deaf, who is a wheelchair user. The fact is that not every disability is the same, and the acuteness and combinations of a disability can effect people in so many different ways.

For example, it may well surprise anyone who knows me to learn that I’m registered as blind. That doesn’t mean that I have no vision, it means I have low vision. Technically, I’m referred to as “blind/severely sight impaired” – there is a point at which my clinical diagnosis puts me into a particular group and classifies me as disabled.

But I’m a web designer, I make films, I do all sorts of outdoor pursuits my doctors cringe at – how can this be? Well, the fact is that because of the complicated nature of the various eye conditions I have, although my distance sight is useless, my near vision is pretty damn good: I might not be able to see a face across a room, but when I’m working with pixels, I’m on an equal footing.

I don’t really consider myself to be disabled, because I’ve spent my whole life learning to adapt and compensate. Out of necessity and downright stubbornness, I’ve had to shape my world to make it fit my wants and needs.

And that, I think, is a good starting point for a new way of looking at web accessibility, and why Brian Kelly’s words struck home so hard.

We, as practitioners of the web, should be creating experiences which are not just accessible to all, but which are intelligently designed to be adapted to a user’s own specific preferences.

And I think this is important to start thinking about now, because the way in which we all engage and interact with the online world will continue to evolve at a rapid pace. Our experience of the web is changing: from one where we visit websites, to one where we access services and information through our personal choice of digital devices. Our experience of our online world will become ever-more personalised and ubiquitous. And if we don’t consider the wants and needs of people with disabilities, then we run the risk of marginalising huge swathes of our society.

As we develop new devices, new applications and new experiences, there’s going to be a need for a more integrated, considered and downright innovative approach to design. But by taking that leap, by daring to think about inclusiveness and allowing the design process to be informed by more than just aesthetics and one-size-fits-all usability, there might be huge benefits to be gained by everyone, able and disabled – we will all be enabled on a level footing.

If you’re sceptical about these yoghurt-knitting ideas (and yes, they’re vague, but they’re just that: ideas) then head over to the Accessibility section of Apple’s website, have a good browse around, and then ask yourself: why would one of the premiere designers of digital technology commit so much time and resource to building accessibility into their products?

North stretchy reboot prep

I’ve been working on a new design treatment for the North website. Since the project has changed so dramatically since its inception earlier this year, we’ve introduced a new logo, and in turn will be launching a reboot of the website very soon.

North is a series of events and activities taking place throughout 2009 and 2010 aimed at inspiring creative professionals to do things differently. We’ll be announcing more details, and info on how to get involved when the website launches.

While we weather the transition from the old (lacklustre, temporary) site to the new, it’s necessary for us to put up one of those really annoying “under construction” messages. I wanted to keep it brief (all efforts are on producing a fully fledged website with lots of whizz-bangs) but still pleasant to look at.

So, I ended up throwing a few web conventions out of the window and implementing a “stretchy” design. You can see the current holding page here, and if you resize your browser window, you’ll see the whole background resize with it.

“Holy heck Phil, how the devil could you conjour such wizardry, when CSS doesn’t support scaleable backgrounds?” I hear you cry. Well, lawks, it was quite easy really: I cheated.

The background is actually just a div containing an img with it’s CSS dimensions set to 100%. Backgrounds don’t stretch, but elements do, y’see.

Then I bunged in a PNG fix, so that the logo could be rendered with an opaque PNG file, set up some quite simple rules for centering everything, and there you go: a nice stretchy page which goes against some CSS conventions, but looks nice, is semantic(ish) and accessible.

here’s the CSS code for this witchcraft, if you’re interested

body {
  margin: 0;
  padding: 0;
}
#background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 0;
}
.stretch {
  width:100%;
  height:100%;
  vertical-align: middle;
}
#content {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -139px;
}

Getting hot under the collar

I was really excited to see the launch of Fever yesterday – a new web-based application from the uber-talented Shaun Inman.

Let me start by saying that this is neither a critique of Shaun or his new app. Shaun is both a very talented web designer and an innovative developer, and his work is held in high regard – and rightly so. Fever looks like a really great app which looks to be a beautifully conceived idea which opens up all sorts of new ideas.

What really struck me though was how the launch and subsequent fire-fighting played out in the public eye, and it got me thinking about the potential perils of transparency and honesty when running a small venture.

(Fire-fighting is what we used to refer to as the unpredictable period of time prior to the launch of a big website release – when you think you’ve tested thoroughly and covered all eventualities, only to realise that you haven’t. It’s a frantic time of desperately trying to patch bugs and fix overloaded systems whilst your new code is out in the wild causing mayhem.)

Shaun has been very open and honest in describing the little gremlins which crept into the system post-launch, which I think is great: much better to have an honest, human reason for a problem than the standard “technical issues”.

to everyone awaiting an Activation Key, server is getting pounded, PayPal sluggish.

what a wonderful time for a unanticipated spontaneous server configuration change.

Gah! Firefox doesn’t allow you to submit a form to an iframe and instead opens it in a new window? wtf?

also, loving the understanding and patience of early adopters as I work out the un-beta-able kinks.

These kind of insights are not only informative, they’re also an interesting look inside the workings of an app as it launches.

Here’s where I think it gets dangerous though: when this kind of dialogue becomes personalised and opinionated.

Don’t get me wrong – being personal and opinionated are great things, and are what make our global digital culture the wonderful, throbbing democracy it is. But if you’re going to use Twitter et al to self-promote a product or service, then do you need to apply a bit of a filter to your musings? Does being too transparent mean that people might get to see things you otherwise wouldn’t want them to?

As I mentioned earlier, Fever looks like a great app, and I would have absolutely considered paying out for it. My main problem is that it is a self-hosted application – you need to install and run it on a PHP/MySQL server. It’s totally up to Shaun how he packages and licenses the app – I“m not here to start criticise someone for their business model. I did post this comment on it though:

http://feedafever.com/ looks great, but doubt I can be bothered installing it on a server. Surely @shauninman is missing a trick?

Then I read this tweet from Shaun later:

To all the self-hosted app haters: People said the same thing about Mint. Different strokes and all.

That got to me a bit. I know he’s not refering to me directly, but to be refered to as part of a group of ”haters“ made me feel a bit… put off. This came across as a little bit defensive and confrontational, and probably bought on by stress and tiredness. But if there’s one thing I’ve learned about posting things when stressed or tired, and it’s that you just shouldn’t do it. You can come across as incredibly condescending and insulting without even realising.

Then it started getting a bit ugly:

Waiting for my Fever (http://www.feedafever.com) license to compare against Feedly. Hurry the fk up Inman!

.@nevercertified what a wonderful thing to wake up to. I don’t do business with people who curse at me. Expect a refund shortly.

A little shrift I thought, and a bit uncomfortable, like watching a fight at a wedding. But again, this is Shaun’s venture, so he’s perfectly entitled to do business with whomever and however he likes. But as a potential buyer, it made me think ”do I really want to give this guy my cash?“ Particularly when I read this:

I have no patience for impatient people. So we have something in common people.

So what am I trying to get at here? Well, it made me think of three things:

1. Can transparency and honesty go too far when you’re using Twitter for business? Shaun seems to be using it for three things: to post his musings, promote his products and provide product support (in the form of status updates). When personal and professional threads start to mix, it can start to get confusing from an observer’s point of view, and maybe even potentially hazardous to the reputation of you and your services.

2. I’m all for honesty and transparency, and advocate them as central virtues to the way that my own business is run. But I wonder whether honesty and transparency can give way to being casual and flippant sometimes? I guess this comes down to whether you can be open and honest whilst still maintaining a certain amount of professionalism.

3. I won’t be buying a license for Fever. Sorry Shaun, as lovely as it looks and as talented as you are, I’ve been put off.

A Poetic Film Fest Trailer with After Effects and Particular

Studio Daily have an excellent article about Pierre Michel’s process for creating the opening trailer for a French film festival, Polar dans la ville.

The whole 40 second sequence took three weeks to complete, and was created mostly in After Effects.  What’s most interesting is the approach he took to dealing with high resolution images in a short timeframe:

But still time was an issue, especially when it came to producing 2K images. “Because I work as a digital artist on films everyday I knew it would be very difficult to deliver the film on time if I worked at 1920×1080 because every second of the film was going to be VFX images,” Michel explains. “So I decided, after making some tests, to work in 1280×720 pixels and then resize all the film at the good resolution (with some sharping and graining process) and it worked pretty well. At the end nobody can tell if it is truly 1080p images or 720p streched…It just works. You can see the result on those 2k images. The second reason why I choose this format was to be able to see all the images in my 4/3 computer screen without zooming/dezooming! Everything is good to save time.

Announcing North 2009

We just launched an exciting new initiative called North. It’s going to be a creative conference taking place in South Cumbria this coming Summer, and we have some really great plans for it.

You can find outmore by visiting the website at www.north2009.com.

The main theme will be to explore innovative and creative approaches to working, using technology and new methodologies. There wonʼt be a focus on any particular discipline – instead the onus will be on exploring new ways of thinking about and developing ideas for the future.

Speakers will be sourced from a range of disciplines – from design to technology; the arts to commerce; businesspeople to academics. A particular area of interest will be people who have used their foresight to use logistical or geographical setbacks to their advantage, or who are using unconventional work methods to get things done.

Websites & Sausages – Prologue

I’ve recently experienced a web design epiphany.

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.

Muji Obsession

An intriguing little article from the New York Times, all about the design ethos of Muji (via James).

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.”

Announcement – Gridlet V0.1

I’ve been using grids in my CSS designs for quite a while now, inspired by frameworks like Blueprint CSS.  Although I don’t use Blueprint for production work (using a CSS framework starts to get a bit restrictive, and I prefer to build from scratch, rather than trying to override someone else’s default), I do use the methodology in my own CSS to create structured, grid-based layouts, and consistent typography.

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);

Fontcase

Isn’t it weird how sometimes you’re thinking about how you’re missing something in your work life – I’m talking specifically about a tool, a piece of software, maybe even a workflow? You’re sat there thinking about how much easier life would be, trying to imagine how you would go about filling the void to make life easier? And then, moments later, the exact thing you’ve been dreaming of appears before your eyes?

That happened this morning when I was thinking about organising fonts (I know – my lifestyle is sooo rock and roll).  I use fonts a lot – more so in recent years as I’ve develop a deeper appreciation of good typographical design.  So I’m always toying with new fonts, and working with lots of variations for different projects.

The built-in OS X Font Book is a very lame beast which doesn’t really do much for me – not enough intuitive font management in there.  At the other end of the scale Suitcase never really got me hooked because it just felt too over-powering and feature-driven – font management should be really simple, particularly since these programs are fiddling with system-level stuff (I remember a case a few years ago where a colleague accidentally deactivated one of his system fonts using Suitcase, which rendered his notebook useless since OS X wouldn’t boot – luckily that can’t happen in more recent versions of the OS).

For the past six months or so, I’ve been using FontExplorer X.  Although it’s not perfect, it has proven to be the best fit for me, with a good balance between simplicity and functionality.  But it’s still painful to use when you want to browse and select a set of fonts to experiment with for a particular project – the endless list of font families doesn’t tell me anything about the visual appearance of the fonts themselves – I have to sift through and endlessly click around to find something suitable.

What I want is an application which does three things.  Firstly, it should allow me to easily install and uninstall fonts – that’s a given.  Secondly, activation and deactivation should be a cinch – something FontExplorer does very well.  And thirdly, I want to be able to browse my fonts the way I want – I want to see the fonts themselves, not just a dry and meaningless list of font names.  Is that too much to ask?

Well, apparently not, because sitting in my RSS feed this morning came news of Fontcase, which is currently in beta.  And it looks like just the application I was imagining!  The UI design looks gorgeous – simple but functional – and the visual representation of each font is an absolute godsend.

I can’t wait to see the final, finished product.  And if it lives up to my (very demanding) expectations, then I’ll be eagerly adding this to my arsenal of design tools.

As a sidenote, the homepage for this app is a brilliant example of clean and intelligent design.  There’s no need for superfluous words to sell it – a picture of the interface tells you all you need to know.