Site redesign: Alamy.com
In the latter months of 2009 Alamy.com, a stock imagery site, ran a competition to redesign their homepage.
That in itself was all well and good: throwing it open to the public and offering cash to the winner is a great way of engaging with their users and – incidentally – getting shitloads of design options created for what is essentially a fraction of the price they’d have had to pay an agency (if you were to include all their associated fees etc).
Anyway, one of the flaws of the competition – in my personal opinion – was that it insisted one use the imagery from the Alamy collection. No real problem in that, but it meant that in order to enter a design which featured imagery, one had to buy the imagery from the site.
That annoyed me, since I was quite willing to create free designs for them – but I’m damned if I’m about to be forced to pay for the privilege. As such, I abandoned the competition with literally a few hours to go ’till the closing date.
Perhaps egotistically, I thought the designs I came up with were ok…so I’ve decided to put them up here to be scrutinised, criticised, and generally pulled apart by anyone who has an opinion – and that should mean you, whoever you are.
Want to see them? Reckon it’s about time I got critique’d myself after I’ve been reviewing all these websites? Fancy an insight into what kind of twisted logic my mind goes through? Read on!
Wireframes
I decided to build the ‘new customer’ version of the homepage – one that’d include images – so to start with, I developed a bunch of wireframe versions to eek out what might work well.
#1
I wanted to make sure the site would work acceptably in 1024×768 screen resolution, so I started by creating a template that size, and dropping in the basic elements (nav, search box, footer links and header links) and seeing how they sat.
Click to enlarge
I wanted the search box to be prominent (as that is most likely to be the primary activity of a new visitor) with a big background image to capture visitor’s attention. The top header and bottom footer links weren’t negotiable according to the rules, so that’s where they stayed. This particular design wasn’t a massive departure from the existing site layout – and it kinda obscured the background image – so I felt more work was required.
#2
To differentiate a bit, and to give more space over to the background image, I moved the search box into the top-left of the main window, and reduced the size of the background image space. Not convinced, I moved the search box again, and aligned it to the right, underneath the top header box.
Click to enlarge
It felt lopsided, so finally settled for placing it in the header box itself. This way, maximum space was given to the image, whilst retaining the key functionality for new users…
#3
Click to enlarge
Now I had an idea of where things were gonna go, I started to fill in the details and work out the functionality and so on.
Mockups
The next thing to do was work out how these designs would work in larger screen resolutions (in this case, 1280×1024).
I created all the mockups with one main question in mind: will these work on a larger screen? That’s why these following screenshots have large tracts of grey in the lower half – I was seeing how they’d work. 
In order to better work out colour and functionality, I dropped a holding image into the background and fiddled a little more with the tabs. In deference to the fact that I didn’t want to buy any for this kind of freebie exercise, I decided to use the selection of free wallpapers that Microsoft provide in Windows Vista as background photograph examples.
Click to enlarge
I actually kept quite faithful to the current colourscheme of blue and white, as I felt this was quite clean, fresh and if my ideas about the background image were to come to fruition, they had to be fairly neutral so they didn’t clash horribly.
The next issue was how to deal with the interaction between these functions and the new layout. Just sticking them on wouldn’t work, as it’s look too paper-and-scissors. I decided on overlapping tab devices, as the header was looking a bit cramped with all the functions stuffed in there:
Click to enlarge
Aware that the nav could look slightly cut-out, I went for a subtle drop-shadow on the header bar, tabs and footer links section.
I still wasn’t happy with the colours, ‘cos they now felt a bit heavy – so I ditched the blue for the function bar, and went for a light blue in the search bar. I also moved away from the current Alamy logo, and instead used the one they’d supplied – but with nothing around it.
Click to enlarge
Lastly, I tweaked the colours for the header bar (including the opacity & heaviness of the fonts), and then also tried it with a few different images to make sure the background interacted ok with the nav.
The final result
Click to enlarge
So there you have it. What do you do think? All comments welcome.
Nice one, like the design, but as you say this idea of the competition is already sick, let alone forcing people to use stock imagery that they have to buy from the site. I don’t see why all these stock photo companies think it is okay to act in such a dubious manner. As if Getty Images didnt give them a bad enough rep as it is.