right notes, wrong order.
I mentioned over in the scrapbook Liberty Blue article about having all the right elements but sometimes in the wrong order. I'm not telling anyone's granny how to suck eggs, it's just a case in point.
I recently was asked to join Executive Edits as part of their 'photography staff'. It's not a paying job, I don't normally get involved in spec work, but there are some interesting people involved in the Picture Book section. It's going to remain quite small and focused, there are good opportunities for collaboration and it looks like fun with very little pressure.
Anyhow, when I visited the Picture Book section I got quite annoyed that each time I chose a new photograph, I had to pull the scroll bar down to see it. A simple slide show would solve this, but simpler still would be a rearrangement of that huge masthead. It's a whopping 450px until you hit any content. I'm all in favour of some negative space but not to the detriment of the user experience.
So here's a quick before and after. All the same elements remain, they've just been re-arranged to cut out 150px from the head and pull the crucial content up the page a bit.
The current Executive Edits home page />
This (above) is how the Picture Book page looks on my 17" iMac. Now, as much as I'd like a 27", for now I'm stuck with the 17". But with more content being viewed on laptops and iPads, especially for a site like Executive Edits, then I think it's even more important to get the content up the page faster.
A revised version of the Executive Edits home page />
I think the important elements are more focused. The identity is where it should be, top-left with the strapline pulled in underneath. The ragged right sub-navigation again pulled in close with the blurb and adverts on the side.
This is just a quick 10 minute re-shuffle and I hope/know no-one takes offense, but it shows if you put the right notes in the right order, you can have a more focused masthead and still retain a lot of white space.
Written on: July 14 2010
Filed under: design :