Design Archive

14 Sep 2012

I don't really do web design so much any more - I firmly have a marketing hat on these days (and it's a pretty snazzy hat, let me tell you...).

Below is an archive of previous sites I've worked on.


A couple of weeks back – it’s been a little too busy recently to keep up with blogging, as you may have noticed – at work we launched a new site for Vampire Weekend:

I’m happy with the way it’s turned out, which is fortunate as it’s liable to be the last artist site I do for a good while. Such is the way these things go I’m now no longer in the position where I do any actual design or development anymore. Not to say I’m not involved with all that – I certainly am – but the pixels are no longer pushed by my own hand. I’m sure I’ll keep on doing the odd job on the side (I’m not just going to stop designing, perish the thought) but certainly I’ll be doing it a lot less. Hopefully that doesn’t mean I’ll start redesigning this place even more though…

With being my swan song then, I thought I should try and make it a good one.

My favourite element is the homepage with it’s fullscreen scroll-y carousel, and particularly the ‘Contra’ page within it, which you can drag around like a google map to reveal the lyrics to all the songs, and listen to them as well. That whole home page section is hopefully enhanced by being fully fluid, so each of the different featured bits of content you can flip through all size themselves to fit the browser fullscreen (including the headings on the Contra page, which is super complicated considering you can then drag it around).

Other things of note include the gig listings, which use Flickr machine tags so that you can make your photos of a gig that you’ve posted onto Flickr appear on the site and the photos page which similarly pulls in from the bands Flickr group. Also, I’m quite proud of the article pages which all line up to a baseline grid (if you’re in the right browser – it’s not exactly the same in all of them… as no site should be) and keep the line lengths all nice and readable as well.

My only real regret is that due to Yahoo!‘s pre-historic webhosting, and the inability for assorted reasons to move to a better host, it has to roll with nasty “?s=news” style URLs instead of nice “/news” ones, which will bug me forever.

URL picky-ness aside, I hope you like it.


Last week – after several stolen weekends beavering away hunched over my laptop – I launched a site that’s one of the favourite ones I’ve worked on for a while; the new Steve Lamacq site ‘Going Deaf For A Living’:

Unlike in the US, oddly on this side of the pond we seem to be a little lacking in decent music blogs. Sure, there are a few but none that really elevate themselves above the pack and even fewer that focus on writing as opposed to the traditional “cool photo, paragraph of text, MP3 download link” style that seems to be prevalent.

Hopefully GDFAL can counter some of that, even in a small way – more opinions and less ‘just listen to it, yeah?’. Journalism. That kind of thing.

From a technical point of view there’s a couple of things I’d like to highlight. First up is the liberal usage of the lovely League Gothic, which is a great free alternative to Trade Gothic and can be used in all current browsers via the excellent @font-face kits that Font Squirrel provide.

While we’re on type, I also had a go at using the currently WebKit only -webkit-background-clip: text; CSS rules, which let you use a background image within text and can be seen in the header tag line and also the navigation links. I hit 2 problems with it though – firstly, in browsers that don’t support it you see the background image over the whole element, which is almost certainly exactly what you don’t want (and solved by using a bit of Modernizr-style feature detection). Secondly, in the shipping version of Safari at least, it seems to have a bunch of bugs in where in some cases it only renders background in the first line of text (sometimes), which is why it’s not used for post headings. Ho hum.

Other then the now customary use of -webkit-transitions, -webkit-transformss, -webkit-box-shadows and the like, the other thing of interest may be the BBC iPlayer integration. Steve has two shows on the radio – one on Radio 2 once a week and one on weekdays on 6 Music, and using ‘magic’ the latest episode of each is automatically brought onto the website (just click the ‘Listen Again’ links in the sidebar).

Of course, when I say ‘magic’ I really mean ‘BBC APIs and a bit of PHP’ but that’s similar, right? Handily the BBC publish XML feeds of all the programmes that they do (here’s an example), so then it’s a relatively straight forward process to grab that every 5 minutes and feed that into an embeded iPlayer widget. Magic.

Anyway, hope you like it – don’t forget to add the RSS to your feed reader…

Jack Penate

5 June 2009 / 0 Comments

This is actually the second full site we’ve done for Jack – you can read up on the first version here. This one – as in keeping with the progression Jack has made as an artist – is almost completely different; out goes the doodles and hand-made-ish feel and in comes a more mature look combined with some really interesting splashes of colour.

It’s these splashes of colour – in the form of collage – that provide the main interest (obviously other then the content) for the site. We took the original collages – which appear in the album’s booklet – and took them apart (as you can see here), so that we could then add a sense of depth and motion by animating them on the site. That animation is all done via the jParallax Javascript library which makes it very easy to accomplish this kind of thing.

It also has – as ever – the full cornucopia of Textpattern based sections (news, tour dates, blog, videos etc etc) as well as a bit of Twitter and Flickr integration (although nothing too fancy).

Jarvis Cocker

13 May 2009 / 0 Comments

I’m in the somewhat fortunate (and often slightly-amazingly-crazy) position of getting to work with some amazing acts, and Jarvis Cocker is no doubt one of them. Previously – and slightly incredibly – he didn’t have a website, so we were starting from scratch and tried to build something that would cater to all the different facets of Jarvis, whether it be music, art or other public appearances.

Pride of place has to go the header at the top of the page, which features assorted different scenes of Jarvis larking about that we filmed especially for the site a few months back. A couple of the sections have special ones specially suited to them as well, which are worth looking out for.

Also, to join in with the ongoing web typography discussion it uses a bit of a hybrid method for advanced typography. It utilises Rockwell for headings, which is included with recent versions of Microsoft Office so quite a few people have it. However, plenty don’t so it checks if it’s available (using fontAvailable) and if not you get it via sIFR instead. It seems to work very well, and was very easy to implement – just put all the sIFR code in a if(!$.fontAvailable('font_name')) block and bob’s your uncle.

One other little thing – for the music player in the sidebar we use the nifty new 360 UI for the wonderful Soundmanager JS audio library which rocks quite frankly.

This is YATS (Yet-Another-Textpattern-Site), of course. Also, in the week leading up to the site launch we did a fun little live webcast – Jarvis took over a gallery space in Paris and spent the week rehearsing with his band, playing with special guests and generally entertaining – you can see the footage here.


God Help The Girl is Stuart from Belle & Sebastian’s new project, and it’s really rather lovely. The new site features a cornucopia of interesting content – diary’s, Q&A’s with Stuart, videos and all that jazz.

It also features a bit of a novel subscription feature, where you can pay £35 and get everything that’s released for the rest of the year (including the album, several 7“s and an EP) and a load of extras. I’ve been going on about this sort of thing for quite a while now (that’s from March 2006, by the way) so it’s good to see it actually happen.

From a web-dev point of view, the site has a few tricks up its sleeve; for a start it uses CSS 3 column-count liberally to easily wrap text into two columns, which works in all major browsers other then IE which gets one column instead (which works nicely anyway). column-count is a great tool in your arsenal you can use right now, although watch that you don’t use it on long bits of text as if you have to scroll to read both columns of text it’s a right pain.

In a similar fashion it also uses -webkit-transitions coupled with some -webkit-translations as well for little touches of animation. I couldn’t justify spending the time on implementing them in javascript, but one line of CSS that works for 20% of visitors to the site (which is the Safari % share for seems worthwhile.

Textpattern based, as ever…

The Big Pink

17 April 2009 / 0 Comments

The Big Pink are one of the newest signings to 4AD and when I approached designing their website I really wanted to capture some of that v23 aesthetic. So, this meant going down a layered texture route – the background uses 4 different overlaid semi-transparent layers which are all scaled independently – coupled with some nice typography (although no sIFR this time).

The main concept the band came to us with was this idea of a photostrip running down the page which could contain ‘found’ images that they could upload, as well as photos from on tour and photos found by fans (which are pulled in from the Flickr Group). We were originally going to make it animate so that the photos would scroll past automatically, but this proved to be really annoying if you tried to read the text on the site so we made it drag-able instead which seems to work out nicely (at some point I want to add iPhone-style momentum to it as well…). The photostrip really defined the layout of the rest of the page, as it left little room for navigation so that went vertically instead.

As ever with our full band sites, this site is powered by Textpattern – it’s perfect for this sort of site.

The Horrors

16 March 2009 / 0 Comments

The Horrors was an easy project to work on, quite frankly, as they’d delivered what is – for me, so far – one of the albums of the year. Working with good material makes everything else so much easier.

To play on that we went for a big splash to kick everything off. First, we put up a simple countdown which utilised some of the new artwork coupled with a little teaser of the first new track. When the countdown finished it was that track – ‘Sea Within A Sea’ – that got unleashed on the world, both as a fullscreen video on their site and also as a free high quality MP3 download if you signed up to their mailing list.

This was most definitely a case of less is more; instead of rolling out a full proper site we decided just to focus on the video (which we then changed to ‘Who Can Say’ when that video came out) and relegated all the info into an overlay accessed by clicking the logo. Not every project suits a full site at every point in its campaign, and this simple approach proved very successful (although we’ll be moving to a proper full site soon).


For the Super Furry Animals we ran a month long campaign building up to the release of the their new album – ‘Dark Days / Light Years’ – direct from their website. Each day we put up a new video episode that they shot from their studio while they were recording – these weren’t throw-away little clips, as most were 15-20mins long and featured little snippets of the new tracks as they were recorded.

The culmination of the build-up was the simultaneous direct digital release of the album (you could buy MP3s or a bundle of MP3s combined with a pre-order of the CD which came out 3 weeks later) with a live streamed gig where they performed the whole album start to finish from their studio.

From a web-dev point of view the site was relatively simple, although it did feature a couple of interesting bits of polish – the day-by-day videos were scaled (via the power of JavaScript) so that they would keep their aspect ratio but be as large as possible on the screen, with the other page elements (navigation, countdown to the album release and a couple of other things) shifting to fit. Also, the band wanted the day-by-day videos streaming on a loop – we didn’t really want to do them as ‘real’ streaming as that would be too costly, so we faked it using on demand flash video and time-stamps so that everyone who went to the page at the same time would pick up the episode at the same point.

Rough Trade Records

6 October 2008 / 1 Comments

When we started working with Rough Trade their site was in a pretty sorry state; it was all frame based, with no CMS underpinning it so updates took far to much work – it was in dire need of a complete overhaul. One of the side effects of having such an old site was that their wasn’t really anything for us to work from – no coherent ‘look’ or branding short of the iconic logo, so it was clean-sheet-of-paper time.

We quickly focused in on the key things that are important about Rough Trade – records and artists. It sounds pretty obvious, but with some labels you find focus elsewhere – the label often has a brand and look of its own that transcends the individual artist or record, but this isn’t the case here. To represent the records properly, and to provide some kind of aesthetic bedrock, we decide to use the artwork as large as we could get away with – hence the jQuery based carousel at the top of the page.

To represent artists we had a go at doing something I’ve been itching to do for ages – individually art-worked pages. Each different artist has their own ‘look’ and imagery, and we felt that trying to squeeze that into a generic layout just wouldn’t work for Rough Trade. Hence, each one looks different – check out Antony’s page, Jarvis’ page or Miracle Fortress’ page for a demonstration of what I mean.

Other things I’d like to highlight include the Live dates page, which features a full page background Google Map, and the audio player which features streaming and downloadable MP3s which you can then embed on your site if you want:

Technically this is – as ever – all based on Textpattern, quite admittedly pushing it to the limit and utilising several plugins (including some hand-written ones) as well as a CakePHP-based admin system for looking after Artists (they’re just a little too custom to fit into Textpattern’s normal article-based content). Otherwise I guess it’s all fairly straight forward…


Damaged Goods Records are a proper little genuine independent record label, and have released records by people like Holly Golightly, Billy Childish, Pete Molinari and even the Manic Street Preachers (they put out their first single). Needless to say it’s been great fun working on their site, although it was a little bit of an exercise in biting off more then I can chew, and digging myself many, many holes of which I had to haul myself out of.

For a start, I decided that to properly try and achieve that ‘punk fanzine’ feel I was going for I would need to do a full page design comp, print it out, staple it together, photograph it and use that as the basis for the final design. From a ‘making it easy to edit, move things and generally make a website’ perspective this was maybe a bad idea…

To rub salt in this self-created wound I had also decided that diagonal lines would be a bit of a focus and – as is probably obvious by the amount of sites that don’t use diagonals – that made everything just that little bit harder. Oh, and did I mention that I wanted to keep everything within a pink/yellow/black colour scheme? Including images?

Yeah, that was a real smart idea.

Images – like the ones you can see on the home page – are uploaded as normal, rectangular full-color photos. I then run them through a GD images-based PHP script that first scales and crops them to the right size, then turns them pink and then finally composes them with the correct diagonal-yellow-background mask. It wasn’t actually that hard but did take a bit of fiddling about with – when I get a chance I’ll do a detailed how-to on how it actually works; I think image manipulation in PHP can really achieve some interesting results so it would be good to get it in more widespread use.

The whole site is – of course – based on Textpattern, and it really pushes it to the limit. The artist pages all rely on the category system, which means that to add a new artist to the site is as simple as adding a new category. However, I did hit up against a few hard walls which means that this site uses a few custom plugins as well (to do things like display the correct artist image on an artist page, based on category).

And yes, the site isn’t fluid width. Sometimes, it’s just not going to be possible – those times mostly being when your design is actually a photo of a website…

7 June 2008 / 0 Comments

This is the second phase of the Adele site, which up until now consisted solely of large video. We’ve kept that, and extended it with all sorts of extra content – news, tour dates, discography info, photos, links and more. Although it looks relatively straight forward, it’s actually got all sorts of interesting bits dotted about.

For a start, it’s got microformats all over the place. The gigs use vcalendars, the main news feed is in hAtom (as is the blog) and the music page marks up the releases using hAudio (which I used here for the first time – not sure I really see the point of it as yet but it took no time to implement so why not!). In the same spirit it’s also got a .ics feed of tour dates so you can easily add them into iCal or another .ics compatible calendar app.

It’s also got all sorts of vaguely ‘social’ aspects – for want of a better term. Comments are enabled all over the place, the photos section pulls in photos from a Flickr group and in place of a traditional forum we’ve set up a Ning page instead. I’m interested to see how this does as we’ve had mixed success with mini-social networks – they seem to be a bit superfluous as they’re never going to replace Facebook et al, but do seem to contain more potential value then a normal bulletin board.

It is – of course! – all based on Textpattern, with a modification of the code we use on the XL site pulling in the blog from the MySpace site. It’s also all nicely fluid width as well, and there’s a nice surprise if you’re running Safari 3.1 and you select a different video on any page other then the home page…


1 April 2008 / 0 Comments

It has obviously been a huge privilege to get to work on something for Radiohead, and I’m really happy with the way the site has turned out. From a technical perspective there isn’t really anything too clever going on; it uses sIFR all over the place for text, which wasn’t quite as hard as it normally is to get running.

The code to power the remixes is all custom PHP (luckily not written by me, but adapted from another project) so there isn’t anything I can point you towards on that front – hopefully it will hold up ok with the battering it will probably get today! I couldn’t see many opportunities for Microformats – I guess it could have used some hCards for remix authors and maybe hAtom for the remixes but they seemed slightly superfluous considering we only publish peoples names and no other contact details. It does, however, have an RSS feed so you can keep track of new mixes as they get uploaded.

Obviously you should all go out and have a go at making a mix yourself, but if you can’t be bothered it’s well worth checking out the Holy Fuck mix, embedded here using the natty widget we got made for the site (for that authentic viral feel):

XL Recordings

13 March 2008 / 0 Comments

XL is possibly the most important independent record label today, and has an awesome roster including such acts as Radiohead, The White Stripes, Adele, The Raconteurs, M.I.A., Dizzee Rascal, Vampire Weekend and many more. When we sat down and tried to figure out what to do with their website we had a long hard think about what a label with such an extensive and diverse set of artists really needs with a website, and why someone would go there versus visiting an artist website or myspace.

It quickly became apparent that there was almost no way we could keep up with the amount of news and information that sprung up on a daily basis for all these artists without employing people whose sole responsibility it was to keep the site up-to-date, and that didn’t seem like it really made sense. After all, all this info was going onto the internet somewhere, so why do we need to duplicate it?

Hence the concept of a ‘tumblestream’ – halfway between a tumblelog and a lifestream; an aggregator for news from artist sites, myspaces and news sites, photos from Flickr groups and users and videos from YouTube.

Gone are the always out of date news sections you always see on label sites. Gone are things like tour dates, which you can always find somewhere else (more accurately). Gone are artist biographies that are cribbed from press releases that don’t really ‘mean’ anything.

In their place is a single stream of information, updated once every 10 minutes. If you don’t care about all of the artists, you can filter it to only show one (complete with an RSS feed).

I hope you like it – I’m very pleased with the way we’ve been able to go from high concept to reality without loosing anything in the transition.

From a technical perspective, the site is split into two chunks. The front-end is – surprise, surprise! – powered by Textpattern. It’s very good at managing content and pages, so is perfectly suited to a very content heavy site (it’s been running hidden for about 3 months and already has amassed over 2500 posts). However, obviously it doesn’t have any built in way of aggregating content from outside sources so we built a custom back-end for the site in CakePHP.

The CakePHP back-end is basically a RSS reader – based on SimplePie – that keeps track of a list of feeds for each artist; one from their website, one from their myspace, one from their Flickr account or a Flickr group and one from their YouTube account. It also keeps track of a couple of artist specific things – like their website address, and their colour on the site (I’m totally into colour coding at the moment…) – that we couldn’t really hack into Textpattern.

This back-end then checks its feeds every 10 minutes, and if it finds items that haven’t been saved already it injects them into the Textpattern database. We also made a couple of Textpattern plugins to make the artist list at the top of the page (which shows the 15 artist that have the most recent content) and to show the correct artist website link on the right pages. All in all, it was pretty easy to use Textpattern as the front-end page server which was powered by a more complicated content server.

Tapes 'n Tapes

15 February 2008 / 0 Comments

This was actually a fairly simple re-skin – we moved Tapes ‘n Tapes over to Textpattern about 2 years ago so they could update the site more easily, but we decided not to update the look at the same time; the first Tapes site had a lot of history, as it was made by Josh (the singer and guitarist) and was one of the focal points for the band in their early days.

However, further down the road and nearing album number 2 (‘Walk It Off’ – which is very, very good I must add) it seemed appropriate to polish it a little and get it in sync with the new album artwork. Build time: 6 hours, from a blank Photoshop document to pissing about trying to get sIFR to work to having something done. Nice to know that I’ve still got the skills…


11 December 2007 / 0 Comments

This time the design isn’t really mine – I guess I art directed to a point, but all the pixels were pushed by James (who I’d link to but he still doesn’t have a site); and lovely pixels they are too. Instead, it fell to me to do the html and back-end work, so I had a bit of fun.

The key bit that is probably the most fun and also the bit that lead to the slightly late nights working on it is the fluidness. The wonderful design that James turned in on first glance didn’t look like it wanted to be fluid, but – quite frankly – that wasn’t going to stop me. I’m particularly proud of the footer section – have a go play around with the window width; all the elements down there are positioned independently based on percentages, so they all move at slightly different speeds.

The other key thing I wanted to highlight was the use of microformats. Normally I either end up doing the design, or both the design and the code but this time as I was only really doing the html I wanted to make sure it was pretty good html. To this end, we’re using the hAtom microformat for both news items and blog posts, and the hCalendar microformat for gig listings. Both of these were really pretty easy to implement, as they only required a little more code then I would have written anyway.

Other fun things are that you can subscribe to the live dates page as an iCal calendar (very easy to put together if you’re using Textpattern, which we are (of course) for the Foals site); we pull in the contents of the Foals flickr group into the site all over the place, which is a simple way of doing easy fan interaction – we also have comments turned on for almost everything, which achieves the same thing (woo for comments!).

Nominated for ‘Best Blog’ in the 2008 NME Awards

Update: For reasons beyond my control, the Foals site has been redone by someone else behind the scenes so none of the code is mine anymore. All of fun features above have been removed sadly, and it’s now fixed width (and looks a bit rubbish). Ah well…

British Sea Power

21 November 2007 / 0 Comments

I’m really quite happy with the way this one has turned out – it’s a real privilege being able to work on a band of BSPs stature. I’m much more used to working on people right at the start of things, which comes with its own benefits – seeing Jack Peñate rise from a virtual unknown a year ago to having a top 10 album in October has been a lot of fun (and very rewarding) – but it’s nice to be able to have such involvement with someone that a lot of people hold so dear.

As ever it’s all based on Textpattern, which is still just about serving all the needs nicely (although it could do with an admin interface overhaul). It’s nice that by using Textpattern we can get features like having commenting open on tour dates without having to do any work; my mindset is currently that the full on “social network within your own site” thing is far too much work for the reward you get (which is very little), but encouraging a community and adding simple levels of interaction can be very useful.

I’m also pretty happy the way the look and CSS have come together. It’s a fluid width, grid based site and I think it may be the first time I’ve done 3 equal width fluid columns. I particularly like the way it handles different content spanning different column widths – with the news at the top needing 2 columns, but the photos spanning all of them, for example. At one point all the baselines lined up as well, but that seems to have got slightly broken in the run up to launching it – ah well.

Incidentally, for anyone that has been following the comments on this old post about fluid width sites – which was very kindly linked to by Jeremy which sparked a bit of debate – this is exactly the kind of thing I’m aiming for when I design a site; designs that truly adapt to almost any reasonable window width without too many compromises.

Hopefully I’ve achieved that this time round.


11 October 2007 / 0 Comments

Adele is – quite simply – an utterly stunning vocalist, and pretty much the moment you see her perform live you get hooked in. With that in mind, and having footage from her performing on Later With Jools Holland, we decided to go simple with the first version of Adele’s site using large, almost full screen video. I’m really quite happy with the way it’s turned out.

Kid Harpoon

15 September 2007 / 0 Comments

We’ve just put the finishing touches to the new site for upcoming solo artist Kid Harpoon. This one is a bit different then most of the sites we do for two main reasons: firstly, the whole site is locked out to almost everybody. The only way in is by having a code, which are printed on wristbands given away at gigs.

The whole reasoning behind this is that Tom, who is Kid Harpoon, wants to use the site as I way of properly interacting with his fans be posting up demos, new songs etc – not something everyone should see, only the true fans that have gone to see him.

The second big difference is that instead of being based on Textpattern, are normal CMS choice, it uses ExpressionEngine as we needed something that has advanced user management. I’ll be honest, I’ve not been particularly impressed with it – it seems over complicated, with a huge amount of table-based templates you need to customise and a not-brilliantly-thought-out UI. It’s a real shame, as the feature list is very good, but I don’t think we’ll use it again – the search for a good CMS that handles simple social network style features continues…

Again, design and thinking down to me, coding and frustrating template customisation by someone else (who still hasn’t got a blog to link to).


15 August 2007 / 0 Comments

The new site for the ever popular iLiKETRAiNS has just launched. It is, as ever, based on Textpattern and covers all the normal things you’d look for in an artist site – news, tour dates, mp3s, videos, shop etc. It also has a rather nifty members area that you can signup to and receive a real, made-of-plastic railcard.

To My Boy

10 May 2007 / 1 Comments

I’m really happy with the way it’s turned out; we went for a rather unconventional horizontal layout, which I have to say turned into a massive headache but we managed to get there in the end with some creative CSS-ing. It’s augmented by a rather nifty javascript based dragging system – you can drag the pages around left and right like a Google Map!

The main content – news, tour dates, videos etc – is all powered by Textpattern, which is still very much our lightweight CMS of choice. On top of that we’ve layered two separate things; firstly, we bring in – via their superb API – photos from Flickr, which I think is by far the best way of getting photos on a website.

Secondly, we’ve got something we call “the Grid”. The Grid is, in its simplest form, a social network for To My Boy fans. You can sign yourself up, get your self a page on the site (and a place on the home page) and start talking to other fans. It’s something we’ve developed from scratch in-house – we couldn’t find anything off the shelf that would do quite what we wanted – and we very much want to add more features to it as time goes on, including things like RSS (which we only have on news at the moment), microformats maybe even Twitter integration (which is working out nicely for Jack Penate).

We also made use of sIFR (version 3 to be exact) for Flash replacement of assorted text all over the site, as To My Boy use Bauhaus all over their artwork and we wanted to keep the same feel. To round out our Flash usage, we also use a javascript audio player that uses Flash on the back-end to play the audio – exactly the kind of thing I was talking about yesterday. Audio playing in this way is probably the perfect example of PPJ as you quite often want it to integrate with a pre-existing HTML page (a track listing in this case) and you don’t get any of the UI differences or have any problem fitting perfectly in with the existing content.

Did I mention that this site only took us two weeks, start to finish?

And that’s only with 2 people working on it as well, and one of them very much only part time (that would be me, ducking in and out doing the design and general guidance).