Archive for the ‘Web’ Category

Bike blog – anatomy of a logo design

About a year ago I decided my cycling blog Legs Feeling No Pressure needed a spruce-up. Since I started writing it I had always planned to design it properly, and was inspired by some nice-looking US-based bike sites, Velodramatic and Half Acre Cycling. Somehow UK-based cycling-related websites tend towards the less visually dynamic end of the spectrum, and I wanted to buck that trend.

The starting point was a visual identity for the blog. Legs Feeling No Pressure isn’t a brand as such – it’s just a slightly cryptic statement about what I get out of cycling – but as a name it needed a design that somehow communicated more than the name itself could do.

David Hardy, who is our LCF graphic designer and similarly a bike-nut (he’s into scooters), agreed to help me out, and we started knocking around some ideas. In a nutshell, here was my brief:

  • bold, sans-serif typeface (although I do like some serifs used in the bike world’s, notably Rapha’s)
  • no need to include cycling-related imagery like wheels (old hat)
  • maybe a colour
  • I like fancy Italian bikes but I also ride around town on a filthy hack (style vs grittiness?)

David got his head down, and a few thousand furious mouse-clicks later he supplied a suite of 18 draft logos.

LFNP-DRAFTS v1-1

Logo design drafts #1 sheet 1

Logo design drafts #1 sheet 2

Logo design drafts #1 sheet 2

Logo design draft batch #1 sheet 3

Logo design drafts #1 sheet 3

I emailed the designs around a few friends to see what they thought. Perhaps predictably, this wasn’t a very useful step in deciding on an initial direction; some preferred N (the C-shaped design on sheet 2), but equally, others liked the tag styles, and quite a few actually liked the distressed font (B on sheet 1, which I instantly dismissed).

At this point we rejected a few, and moved forward with some others, exploring further the tag style as well as adding in a cheeky wrench-head / Pacman design (N, below):

Logo design drafts #2

Logo design drafts #2

Personally, I was leaning more towards version I – a rounded, surfy, retro tag with a mixture of bold sans-serif and ‘classic’ serif that I thought echoed the masterful pairing of typefaces in the Rapha Condor logo. However, as so often happens with logo design, hours of close examination had made the words ‘Legs Feeling No Pressure’  themselves practically incomprehensible as a phrase. We needed some distance.

A couple of days later we arrived at a final three:

Draft #3 option 1

Draft #3 option 1

Draft # option 2

Draft #3 option 2

Draft # option 3

Draft #3 option 3

It was David who swayed me towards option 1: he reasoned that a) I took cycling quite seriously, so I ought to have a solid, bold logo, instead of a tag more at home on a pair of board shorts; and b) that the crisp edges of option 1 would look better in a blog header anyway.

The next question was that of colour. David prepared a fourth suite of options, which introduced a red element, and also offered some variations on the solid serif, just to make absolutely sure we had the right one:

Draft #4 sheet 1

Draft #4 sheet 1

Draft #4 sheet 2

Draft #4 sheet 2

One final touch was the addition of the tagline ‘What I think about when I think about cycling’, which I borrowed from Haruki Murakami’s book What I Talk About When I Talk About Running. Now I could see that our original bold serif was still working really well, and that it was now perfectly finished by the red ‘No’, with the patterned gradient within it suggesting all kinds of training-related things like hills, heart rate, and precision.

We had it – the finished logo:

LFNP+tag

The finished logo, including tagline.

GQ redesign

GQ.com gets a makeover.

GQ.com gets a makeover.

Girls gallery page.

Girls gallery page.

There are a lot of things to like about the new GQ web design:

  • great black, white and gold colour scheme (with yellow highlights)
  • a well-ordered grid
  • elegant, uncluttered navigation
  • chunky footer
  • plenty of whitespace and breathing room around the text

One thing – and leaving aside the xbox ad currently turning the home page background into a sea of green bubbles:

I’d be interested to know the rationale behind not using a similar jQuery carousel on the individual feature pages as implemented on the section pages. A fresh page-load for every image just feels so clunky these days, and there are surely AJAX solutions to allow a more fluid browsing experience whilst maintaining reasonable loading times.

So what’s the reason? Extra pages for serving extra ads? Image bookmarking? Concern about presenting high-quality images without a performance hit, especially on slower connections?

Finally – the typographical double act of Georgia and Arial is undoubtedly a classic combo (used by the Guardian and many, many others). But my guess is that with the gradual evolution of web typography, embracing the potential of the @font-face CSS rule and of Cufón, sites that use this staple set of traditional web-safe fonts will begin to look dated over the next few years.

Wanted – Gumtree’s map view

Having flat-hunted previously, lately I’ve been flatmate-hunting: searching for a replacement tenant for my room in Highgate, north London. As a rule, during the 5 years I’ve lived in the city, I’ve found finding new flatmates fairly easy; but, since I’ve ended up moving out in the quiet month of January, I’ve been encouraged to get the most out of a few key websites.

Gumtree

Gumtree, ‘the UK’s biggest website for local community classifieds’, has changed a fair bit since I first started using it. I really admired the major redesign that happened (I guess) at some point in 2008: the familiar colour scheme and branding were incorporated into a much smoother experience, preserving the community feel whilst making everything a whole lot easier for the individual – whether posting, buying or selling. As I write it looks like the ‘classic’ Gumtree is again being superseded by a sexier incarnation.

gumtree

The clean and effective Gumtree UI.

Is Gumtree the last word in classifieds? Sure: you post, the customers/tenants come running. But this time my response rate has been quite low – 2 physical viewings from 300+ hits on the website. Aside from the fact that this is January and the coldest winter for 30 years, and my room doesn’t have a radiator, what could it be?

Map view

I blame the gradual demise of the map view for property searches. Formerly on Gumtree, you could view a Google map displaying as many properties as your search terms allowed, with a little red tree marking each house, flat or garage. You could type in ‘London’ and get literally everything on offer. Admittedly, it used to make Safari go wonky, but it was more useable than not.

[Gumtree should correct me if I'm wrong here, but this is my hunch.] In the redesign, with the advent of monetised customer interactions (like paying £4 to have your ad ‘bumped’ up the listings), the universal map view was replaced by a map that only showed 30 properties per page (by default the top ones in whichever list), leaving the user to click to the next set. Clearly, this privileged the newer posts and incentivised posters to pay that £4 in order to get more hits.

The new Gumtree map view.

The new Gumtree map view - now with green blobs.

I would like to see Gumtree reinstate the global, un-paged map – because I think it allows greater flexibility of search. Let’s say I wanted to view all properties, however recently posted, in a small area near Hampstead Heath. Instead of being able to zoom the map in and see every property, I would now need to page through 10 or more pages of results before a green blob popped up where I wanted it to. Not only that, but every time I load a new result set, the map zooms right out to accommodate all blobs – from Walthamstow to White City.

Sure, I could make my search terms more precise, but the beauty of the global catch-all map is that you don’t have to refine anything and thus risk missing somewhere that falls just outside of your terms – you just browse.

Globrix

If Globrix did flatshare, they would be my first choice. Theirs is the best property search interface bar none:

  • awesomely granular search filters
  • global map search (properties pop up as you drag the map)
  • draggable price slider

Not to mention an abundance of stats and graphs on individual property pages, which display everything from median house prices in the area to typical crime rates.

globrix

Globrix's property map interface - with sliders!

The only problem with Globrix is the trade’s apparent lack of confidence in it. Being a search aggregator, it inevitably takes longer to update than estate agents’ own websites.

Visualising empires’ decline

Visualizing empires decline from Pedro M Cruz on Vimeo.

I really enjoyed this project by Pedro M Cruz. Its mix of factual information and history with striking visual design captures all the things I like about data visualisation. Discovered on datavisualisation.ch – and best viewed full screen!

Curzon Cinemas website redesign

New look Curzon Cinemas website.

New look Curzon Cinemas website.

A couple of years ago I blogged about the Curzon Cinemas website, which I criticised for its unnecessary use of Flash. Well, I’m not sure how long ago it happened, but Curzon got a redesign, and it looks great:

  • Classy, unfussy typography and black and white core styling
  • Nice colour-coding for the 5 different cinemas
  • Nice, logical 3-column layout: listings on the left, description and video in the middle, stuff to catch your eye in the far right
  • Cufón custom font replacement
  • Stacks of javascript for Flash-like fade effects, AJAX-loading and showing/hiding elements

I also love the fact that each new release has a trailer embedded in the page. Excellent stuff.

Project management tools: the to-do list

Having used both Basecamp and Assembla as project management tools for over a year now, I’m come to see pros and cons in each system. Basecamp is the one I prefer for my freelance projects; Assembla is used by the University web team as a ticketing system. I think on balance these are suitable tools for the job in both settings: Basecamp is very user-friendly and even my least techy clients take to using it over email, while Assembla has more functionality, and offers the granularity a bigger team needs, perhaps at the expense of some usability.

Right now I want to focus on one particular element: the to-do, or task, list.

Basecamp: plenty to do...

Basecamp: plenty to do...

Assembla ticketing.

Assembla ticketing.

Ever since Basecamp introduced the ability to comment on to-do items, I’ve found that a lot of the action in terms of managing and assigning tasks (with the attendant queries and clarifications) tends to happen in the to-do lists. But there’s one particular area of functionality that I’d like to see Basecamp include: the variable to-do status.

Let’s say you are assigned a to-do item by a client: ‘My blog posts aren’t going live on schedule’ for instance. Let’s say there’s a protracted to-and-fro pinpointing exactly what is to be fixed and why it broke in the first place. Useful information is very often added to discussions on to-dos, which is why when you check them off, Basecamp doesn’t delete them – there’s a ‘Done’ list for you to refer back to later.

But let’s say the problem isn’t a pressing one, or the justification for assigning the to-do in the first place (i.e. the demand for scheduling) is no longer relevant. In this case, I don’t want to mark the point as ‘Done’, because I didn’t fix anything, and I don’t want to delete it, because I’d lose all that useful discussion info associated with it. I need what Assembla offers: the ability to close as invalid.

Ticket status in Assembla.

Ticket status in Assembla.

This way, if we ever try to schedule blog posting again, we can refer back to the task and the related discussion, and investigate.

Perhaps a spot of colour-coding is what’s required to bring some of Assembla’s versatile ticketing technology to the Basecamp to-do list?

The Politics in the Room

politics_grab

This week saw the launch of The Politics in the Room, a video website presenting a collaborative project by members of the Lux Associate Artists’ Programme. A full project write-up will follow, but for now you can read some background info on the credits page, then browse the latest films.

How interesting?

interesting grab from flickr

I love Flickr. It’s quite possibly my favourite website. Here’s how deep I’m in there:

  • flickr.com is my homepage in multiple browsers on multiple computers.
  • I have a pro account with 229 items (still a tiny number by some standards). 
  • I run a group called Pigeons & Peacocks, which is mainly work-related but a lot of fun.
  • I regularly check my stats to see how many people have viewed my images. 
  • It totally makes my day when someone ‘faves’ my work (i.e. marks one of my images as a favourite) or leaves a comment.

But sometimes I’m mystified by the stuff that becomes popular on Flickr.

Flickr has a feature called ‘interestingness‘, a secret algorithm that ranks images from the millions uploaded every day based on (among other factors) the number of times they are viewed, and the number of times they are ‘faved’ or commented on. I browse ‘interesting’ photos a lot, and have unearthed some fantastic images, many of which have made it into my favourites. Today I stumbled upon this one, by a user called ‘Jerri Johnson (So little time, sorry!)’. It irked me a little.

For me, it’s a really phoney image. It started as unremarkable, and by applying some filters and colour tweaks and watermarking in Photoshop it just got gaudy. But some people like this stuff – HDR photography, which deliberately exaggerates colours to an unreal degree, is all the rage at the moment. HDR-type images (or bad approximations of the style) appear regularly in Flickr’s ‘most interesting’ lists. 

Anyway, back to that image – ‘The House of Lifesavers’. It has actually only been viewed 167 times, fewer times than my image of the Bullet girls. However, it has been ‘faved’ 47 times, and has a whole page of comments. Jerri has 881 contacts, and that’s a lot of people being notified when she posts an image, so this isn’t surprising.

But the comments list is a bit suspicious: I can see a dozen people who have commented multiple times, often with invitations to many different groups, with names like ‘The Golden Touch‘. The image has also been invited to some of the same groups multiple times, often by groups that have a policy requiring people who submit images to nominate one or more images by different users.

There’s obviously a bit of sour groups grapes here, since to my knowledge none of my photos has ever made it into the most interesting charts. However it’s clear that some users with a relatively small circle of proactive contacts can push certain images up the interesting scale by effectively fave- and comment-spamming. And I think Flickr’s interestingness algorithm should protect against this, if it doesn’t already. Sure, there’s no accounting for taste, but come on. Come on.

Charlie Campbell Photography

charlie

I’m very pleased to announce the launch of www.charliecampbell.co.uk, a portfolio website for my photographer friend Charlie Campbell. Charlie and I started the project back in October, and have worked together to create a minimal website design to showcase her collection of portraits, personal photography and documentary work. The site looks simple, but there’s a fair bit of complexity under the hood. Full project outline to follow. In the meantime, enjoy.

Soundcloud

Screengrab from soundcloud.com

Screengrab from soundcloud.com

I had a great online experience recently with Soundcloud. It provides a beautiful solution for quick and easy music distribution.

Problem: I’d asked my DJ friend Chris to spin some tunes at my birthday. We sort of discussed what I liked, and what he tended to play, but sharing a mixed playlist of tunes that he might play on the night was something that involved either burning discs, or using an FTP dropbox – and I couldn’t be bothered with either.

Solution: Soundcloud. Chris recorded an hour-long mix, and uploaded it to Soundcloud. He then invited me to listen and comment – not just a single comment on the whole thing, but multiple comments attached to different points in the music. I created an account on Soundcloud, so now I can follow other users’ uploads, and return to listen again whenever I like.

The whole site worked really well – it was a totally surprising and seamless 15 minutes on the internet.