Design Review: Free Pixels
22
In this review, we’re going to work through a website (FreePixels.com) as a case study, looking at its design and seeing what we can learn from it and what we could improve on.
So to start off, let’s take a look at Free Pixels. They offer almost 4000 extremely high quality images, for free. All you have to do is leave the small watermark in the corner, or create your own link back.
That makes it a very handy site for bloggers! Now load up the site in a new tab, and let’s start our case study!
The very first thing I look for is the logo and slogan. The logo is right where you’d expect it, but no slogan. The strange part is that a near-ideal slogan, “Download Free Stock Photos and Images” is sitting just further down the home page.
My first step would be to move that line up into the header, so it will be helpful for people who arrive on inner pages (instead of just the home page, like we did).
It will also clear up a little space around the main intro image, which we’ll be talking more about next!
Some Clutter We Can Remove?
Now that we’ve removed one title, I’d also think about removing the “Random free photos” title from the homepage. Most users will assume that if they want the image in the thumbnail, they should click it. And we can always add it back in later if we change our minds.
Continuing on our homepage clutter cut-down, my next victim would be the navigation controls on the image slider. The slider is a great idea as it shows a number of photos at a viewable size, but the animation speed is more than fast enough for the controls to be unnecessary, and if they want to pause it, users can click the image to see it in full.
The reason I would definitely take these out is that you work so hard to define a focal point in your images. Those controls are made to be easily noticeable (They’d be pointless if they weren’t), but when the purpose of the slider is to show off photos, we want no distractions to those photos.
On the individual image pages (e.g. here), we could space out the text around the image, i.e. have more space between the breadcrumb navigation, the image, and the text under it.
Another option for that page would be to make the mid-sized photo a direct link to the full-sized photo. That could even let you remove the dark “Download full sized image” button (Or even just make it slightly less grabbing, as a lot of users may well just try to click the photo).
One easy way to test the theory would be to sign up for one month ($9) at Crazy Egg. Then, add their tracking code to a few of your most popular images. At the end of the month, you’ll be able to see if people like me have been trying to click the image directly. If so, it would be worth adding the link for them.
How Do We Find Photos?
There are nearly 4000 images and a limited amount of text on the site, so navigation definitely isn’t simple. The core method of browsing at the minute is through the categories table on the homepage, or the popular tags cloud.
The categories table is a cool feature because it gives some interesting stats (e.g. The photos have had nearly 5 million views; clearly it’s not a small site!). The only thing I’d work on with the table is the category link styles. Could we find a way to highlight the main categories slightly more than the sub-categories? (e.g. Make the main links a darker shade of grey, or remove the underlines on sub-categories).
The trouble with this table is that it’s on the homepage, and would probably be too large for individual pages. The breadcrumb navigation on inner pages does help with this a lot, but some further options wouldn’t hurt.
And the trouble with the tag cloud is that although it’s on every page, the tags it shows are exactly the same on every page. That means that photos which aren’t covered by those specific tags are being left out.
I would do two things to help with navigation:
- Make the search bar more prominent – There already is a search bar set up (at the very bottom of the page), or we could swap to a Google search bar if it’s been of poor quality. With 4000 photos, all well tagged and named, a lot of queries are going to find photos.
If you have trouble with a lot of searches returning empty results (Because it can only search the tags, there’s no other textual content), we could even try suggesting on the page that users use more general terms.
- Related images thumbnails – Underneath each image on its individual image page, I’d display thumbnails to related images (Exactly like on the homepage). This means that if a user clicks on, say, an image of a beach, they’ll instantly see other options as well without the hassle of having to look for them.
In terms of how to set this up, you could do it all via the tags. Just pull in images with at least one tag in common (preferably more).
Licensing
When hunting for images for a commercial project, licensing is an extremely important issue. You can’t risk using an image you aren’t certain you’re allowed to use.
The home page says the images are free, but the footer says “Copyright © 2005-2010 FreePixels.com – Download Free Photos & Images. All Rights Reserved.”
“All Rights Reserved” isn’t something you’d expect to see on a free photo. Because I’ve been reviewing the website, I came across the Terms of Use link in the top right, but a lot of users will miss that because there are a lot of links up there, they’re overshadowed by the Google ones below, and they aren’t very easy to read.
Even after finding that page though, it’s still a lot of information to read through. Now, if someone was really set on using an image, you’d expect them to go to the effort, but a lot of people won’t (And I’m sure plenty will just take the image and hope for the best!)
But to help encourage people to download, I’d do 3 things:
- State the license which applies to the photo, on every photo’s page (Just build it into the template, no need to add it manually each time). That solves the confusion with the footer line.
- Summarize the license (possibly under each photo as well!), e.g. “You may use this photo for personal or commercial use, but must retain a credit notice”
- Are there any better known licenses that suit your purposes? After a quick read through the TOU, it seems like a Creative Commons license would do the exact same thing. By using a CC license, you take away all license worries for any user who has heard of them before (Quite a large number of users by now, particularly amongst an audience who would be looking for photos), and you get the added bonus of being seen as very unrestrictive.
Possible Branding Changes?
Everything I’ve talked about above has been tweaks for the current site to get even more out of it. There are two large changes I would consider making, or at least experimenting with:
- Color scheme – There is a lot of green on the site. The header, borders around the page, and all sub-headings and links are green. On a normal site, that’s no problem, but on a photography site it could be an issue.
On the web, a photo can’t be viewed just by itself. It’s viewed in the context of the whole webpage (and monitor!). That means that the green on the rest of the page is impacting each of the photos. In effect, would you hang all of these photos in a green frame?
I’d look into taking out a lot of the color (not necessarily all of it though!), and letting the images provide the colorful aspects of the page. Neutral backgrounds will allow this much better.
The reason I say that I would “experiment” with it is that it will require a lot of design changes (e.g. headings will need a new way to stand out), and if Free Pixels has been using that green for a long time, loyal readers will identify the site with it.
One way around this would be to do it in steps, and to keep some of the green, e.g. instead of the whole header being green, why not have the “freepixels” logo in a green box of its own, and the rest on the white background?
- Commenting and Twitter – These really depend on how much time you have to put into the site. Comments on the photos allow a community to build, but also to see what photos are the most popular with users. Honestly though, the real reason I would add them is that the photos are great and it’s nice to hear what people think of your work!
As for Twitter, the attraction there is that Facebook is already set up to publish regular links to your site. That misses out on a lot of the social attraction of these sites, but it does make for a decent way to subscribe to updates. Twitter could be set up to work in the exact same way with no extra effort to maintain. It would give users another option to subscribe to the site by.
Conclusion
To sum up, I think the contents of the site are fantastic. The images are top quality and it’s great that anyone can use them free of charge!
The functionality of the site is cool too (like the statistics), and there are a lot of nice touches I haven’t focused on too much in the post, like the hover thumbnails in the sidebar.
With some core changes to the website, particularly the navigation and possibly even the color scheme, it could really be great.
Now it’s up to the readers, you’ve all heard my thoughts on the website. Do you agree? How would you approach things if you were in charge of Free Pixels?
Enjoy this post? You should follow me on Twitter!
Nice review & the design of Freepixel looks great. Thanks.
Thanks Zico, glad you like the site :)
First thing I noticed – the spacing between the main menu items is too little. The spacing between ‘latest’ and ‘photos’ isn’t much more than the spacing between items!
Definitely agree with you there. It kind of all blurs together into one white string of text. :(
Hi Mike
Super review of a great looking and useful site… added Free Pixels to my list of free photo sites – Flickr still my favourite!
Your comment “hang all of these photos in a green frame” (great analogy by the way) is something that I’ve been aware of on my site.
My site has strong colours and I’ve tried to pick photos that go with the colours.
That’s really impressive Keith. I love the theme on your site, but it hadn’t struck me about your photos until you mentioned it. And do take that as a complement; you know a design touch is working perfectly if people don’t even realize it’s there!
Thanks for the compliment Mike.
It gives me hope LOL
I think navigation is certainly on area Freepix ls could improve upon. The current navigation is not very prominent to say the least. The menu at the top is hardly sufficient. Perhaps the tag cloud could be moved to the top somewhere
Good idea, the tag cloud could definitely be one step towards solving the issues :)
The navigation is really horrible. You would expect the search bar to be more obvious and somewhere on the top.
I also find making ur Adsense ads to blend with ur design, kinda lame, since the purpose of that is mostly more clicks, instead of fitting in.
That’s true about the ads Mitko, but blending them in helps them to get more clicks. The idea is that if they don’t look like ads, people might actually look at them.
As a web dev though, I find it near impossible to imagine how anyone could not recognize a set of Google ads by now, but apparently it’s true! xD
I feel like the website is almost backwards. When I look at it I feel like if someone stuck the logo at the bottom of the site it would look like it belonged there. Only reason i feel that way is because i have just become so used to having all of my main tools somewhere readily available preferably organized towards the top. Definitely place the search closer to the top, also I’d find a way to keep the stats while completely redesigning the navigation bar. And the tag cloud is definitely a great way to improve searching for items. One thing about it though, i haven’t gone through there images really, is depending on the images there or any new ones that are added, perhaps more descriptive uses of the tags should be used, also id perhaps add some more tags to the list, and then if laid out well, you could use it as a main focal point, next to the images, for navigating through the site, especially if its used in combination with something else and done well.
I have visited the site to test the loading time of it because I want to know if will load fast event it has large pictures. Surprisingly, it loads fast even there are pictures on it. Great job.
It is really helpful .
Case study is the best way for me, thanks.
Really great post, good to see how other people review websites!
Thanks for sharing.
Looks great, free pixels could improve my website’s design a lot. I surly gonna give it a try.
I’m glad I found this article, I completely forgot about this site. Unfortunately, they’re down at the moment. Not sure if this is a permanent thing or not. I hope not because free image databases really help with web design by making things look more appealing.
Really helpful!!
Nice review & the design of Freepixel looks great. Thanks.
Oh, that was a great case study and I am happy that I did not miss this one, so well done with the case study.
Nice review. I think navigation is on area Free Pixels could improve upon.
Great! i use it.