This is the first in a series of design reviews which take a look at pro photographers portfolio websites and review the different design elements.

We’re starting with Nick Onken’s website as he has recently updated it and put a lot of time and effort into designing the perfect website to meet his requirements. He also details a lot of the design decisions which were made in a very interesting blog post.

In his blog post, Nick highlights certain key features and explains why they were included. These features are:

• Full Screen
• Keyword Search
• Lightbox
• Easy Navigation
• Social Media
• Image Download
• Image License Request
• Video Galleries
• News, Behind the Scenes and Profile
• Blog
• Backend Content Management System (CMS)
• iPhone Website

This is a pretty comprehensive list of features, each of which has its own merits. I’ve used this list of features to produce a template which will be used when reviewing different pro photographers portfolio websites. The categories which will be reviewed are as follows:

1. Load Time
2. Branding
3. Use of Flash
4. Ease of Navigation
5. Image Size and Download Availability
6. Keyword Search
7. Lightboxes
8. Image Sales / Licensing
9. Social Media Integration
10. News
11. About
12. Video
13. Blog
14. iPhone Website
15. Conclusion

Each review will be impartial and with no hidden agenda, just my honest opinion of what I think of the site, based on the categories above and will try to suggest possible improvements.

After the review has been published I will get in contact with the person being reviewed and offer them the chance to post a follow up article giving their side of the story and explain the design decisions that were made. I do not want to find out this information before hand as it will alter my perception of their portfolio website. In the case of Nick’s site, I have already read his design decisions in his blog post and I must admit to thinking “ah, so that’s why he’s done that” at least once.

Design Review: Nick Onken

1. Load Time

Approx 3 seconds, which is quite fast for a site which is geographically located thousands of miles away and also initially loads a full screen image. When the site is loading, you are quickly presented with a nice simple preloading image which is also Nick’s logo.

2. Branding

Nick does a good job of branding his site, with a version of his logo on the pre-loader and a fixed logo which appears on the header for the site. The header is fixed to the top of the browser window ensuring that his logo is always displayed. Nick has kept his logo simple and eye catching, using only one primary colour.

Overall the branding is simple and consistent. Implementing a clean colour scheme of a white background and using red as an accent colour in key places throughout the site.

3. Use of Flash

Nick’s site uses flash for the main portfolio website and an interesting mix of html and javascript for the blog. The use of flash effects hasn’t been overdone and to be honest, it could have all been done using javascript, with the exception of full browser image resizing. Nick has chosen to display his images as large as possible to appeal to his target audience, image buyers and art directors, which to be honest is best done using flash as it reliably resizes images to fit the viewers browser size.

I find that flash is one of those technologies which is best used in moderation, people too often go over the top with fancy effects which ultimately end up distracting the viewer from the most important aspect of your portfolio website, your images. Thankfully Nick hasn’t done this and has produced a very clean and easy to use flash site.

4. Ease of Navigation

Nick has obviously put a lot of thought into how people will navigate his site and has made sure that the navigation options are always available to the user.

His main portfolio site has a simple navigation bar at the top of it which always stays at the top of the browser.

The header includes a logo, navigation to every part of the website, an image search, full screen display option and a share link. As far as headers go this is a good one, making navigation very easy. It also follows the three clicks max golden rule, meaning that the user doesn’t have to click more than 3 times to access a page.

5. Image Size and Download Availability

Nick’s site contains some 2,400+ images, which can be accessed through well categorised galleries or by using the search option on the header.

Images are displayed in a number of different styles, from a sideways sliding gallery which displays images at 690 pixels high?, to a thumbnail view which has large or small thumbnails.

The sideways sliding gallery is one of the nicest that I’ve ever seen, allowing you to navigate it by either clicking left or right on the images, clicking on one of the thumbnails at the bottom of the gallery, or even sliding the scroll bar which is displayed over the thumbnails. There is even an option to “View All” which switches to a thumbnail view.

Each image also has a download option when you hover the mouse over it, which will download a high resolution, water marked copy of the image which can be saved and used in comps by art directors. This hi-res download option is becoming more and more popular with modern portfolio websites, as photographers begin to realise that clients are either right click saving images or screen capturing images to use in comps and mock ups. Why not provide them with a simple way of using your images, while also securing it with a water mark.

6. Keyword Search

On the header bar, which is fixed to the top of the browser, there is a search box. This search box will search through over 2,400 key worded images. The search results are displayed as large thumbnails and load reasonably quickly.

You also have the option to view the results as small thumbnails or a sliding gallery.

If you select one of the thumbnail images, I would have expected to quickly view a larger version of just the selected image, possibly in a popup lightbox. However, when you select a thumbnail image, the view is switched to a sliding gallery view, with the selected image centered in the view. The gallery can then take some time to load the image, especially if the search results exceed 100+ images and I often found myself waiting over a minute for the image to load, while all of the adjacent images load first. This is however the only flaw I found with the image search.

7. Lightboxes

Any image on the site can be quickly added to a lightbox. When you hover the mouse over an image, a popup menu appears at the bottom left of the image, with an option to add the image to a lightbox. Selecting the “lightbox +” option will add the image to the lightbox and change the “+” symbol to a “-” symbol, allowing you to select the option again to remove it from the lightbox.

The header for the site has a link to the lightbox and indicates how many images are contained in the lightbox. Selecting the link will open the lightbox as a thumbnail gallery.

As with search results, you can switch to a small thumbnail view or click on an image to view the lightbox as a sliding gallery.

At the top of the lightbox there are options to Browse, Share, Clear, Create New or Help. These are all self explanatory and using the lightbox in general is very easy. If you are having difficulty using the lightbox, then selecting the Help option displays popup help text on using the lightbox.

You can also easily share the lightbox with other people by selecting the Share option at the top of the lightbox. This allows you to share the lightbox by email or via Facebook, StumbleUpon or Twitter. A pretty comprehensive list of ways to share a lightbox.

8. Image Sales / Licensing

Nick doesn’t directly sell images through his website, but has included an image license request feature into his website. When you hover the mouse over an image a popup menu appears at the bottom right of the image with a “license” option on it if the image is available to license.

Selecting the “license” option will open a new mail message in your default email client and automatically populates it with the image details allowing you to send a license request.

9. Social Media Integration

Nick has done a good job of integrating social media links into his site.

On any page you can select the “Share” option from the header, which will display popup list of options, allowing you to email a link or …

You can quickly share a single image by tweeting it, simply hold the mouse over an image and select “tweet” from the popup menu which appears at the bottom right of the image (see above). Selecting “tweet” on an image will open a new tab in your browser, open twitter and auto populate the What’s Happening field. A nice feature.

Each blog post also has a set of social media links for the most common sites.

Nicks latest tweet is also featured at the top of the blog.

All in all a pretty comprehensive social media integration, which was one of the key features which Nick wanted to include.

10. News

News can be interpreted in a number of different ways. It may be news about your upcoming workshops and assignments, or it could be a list of achievements and news articles which you have featured in. Either way, it’s a good idea to provide a simple way to keep your clients and fans up to date with your achievements and any important news.

Nick doesn’t disappoint and includes a news page in his portfolio website. It lists his recent successes and provides links to online articles which feature him.

11. About

An essential part of any portfolio website, the about page should provide the viewer with an insight into the person behind the portfolio.

Nick’s about page is well structured and split into two different sections, a Profile and a Behind the Scenes section.

The Profile section contains a well written bio and a list of clients which Nick has previously worked with.

The Behind the Scenes section contains a list behind the scenes videos from previous shoots, which gives prospective clients a chance to see how Nick works and get an idea of the kind of person he is. A lot of professional photographers are now including behind the scenes videos or show reels on their websites.

12. Video

As you can see from the previous section, Nick has included behind the scenes videos in his about page. He also has a separate Video page which showcases his Stop Motion video work.

The videos are presented in a nice clean thumbnail list and load reasonably quickly.

13. Blog

Nick has done a very good job of seamlessly integrating a blog into his flash website. The portfolio website header does disappear, however the logo from the header is kept in the same place and is snapped to the top of the browser so that it is always shown, even when you scroll down the blog. Nick has also slightly modified the logo for the blog to include the text “shoptalk” to identify what the blog is about and make it stand out slightly from the main portfolio site.

Nick has also included the latest tweet and an email subscription link on the top of his blog.

The blog has a nice wide single column layout which allows the user to focus on the content of the posts and results in a very clean looking blog.

“So where are the navigation options” I hear you saying. Well this is where Nick’s blog is Very well designed. At the bottom of the blog there is a compact floating nav bar, which is locked to the bottom of the browser at all times. It contains all of the usual navigation options which you would find on a blog.

When you click on one of the links on the nav bar, javascript is used to slide a content panel up from the nav bar. This is a very nice feature and maximises real estate on the blog.

Another nice feature of Nicks blog is the comments section. This is often an over looked feature in a blog which is a shame as I like to read the comments on blog posts and a well layed out comments section can help to encourage fans to post comments to your posts.

The comments section is clean and simple, with the comment on the left which helps with the flow of reading through the comments.

All in all a very nice blog with some ground breaking features like the docked navigation bar, which I will be considering including in my personal blog.

14. iPhone Website

With iPhone’s popularity soaring day by day, it’s impossible to ignore the fact that many creatives have an iPhone now and being able to showcase your portfolio to others while out and about is a great added bonus.

Nick hasn’t dissapointed and has produced an iPhone version of his portfolio website. The branding is consistant with the main website, however the iPhone version does not contain the same level of content, only Portfolio, Links and Contact sections.

The News, Videos and About sections are missing, all of which could easily have been included. I could understand these sections being missing if there was a link to go to the full size portfolio website.

The Photography link takes you to a list of galleries, which has been kept clean and simple, listing the available galleries and the number of sub-categories in each gallery (although at first glance it does look like there are only 4 images in the assignment gallery).

Selecting the assignment category will open a new screen with sub-categories shown, this time indicating how many images are in each sub-category.

Selecting a sub-category will display a sideways scrolling gallery of images. The images take a while to load completely as there are so many images in the gallery, but overall the size of the images and the sideways scrolling works well.

You can also rotate the iPhone to view horizontal images better. This will require you to resize the view to fill the screen correctly.

The links page provides a well layed out set of social networking links as well as a link to Nick’s Shoptalk blog.

The contact page has been kept simple as well and simply lists different ways in which Nick can be contacted.

I haven’t seen many portfolio websites with iPhone optimised versions and I must admit that this is one of the cleanest and well layed out ones that I have seen.

15. Conclusion

I am very impressed with Nick’s portfolio website, it has a nice clean layout and is packed with easy to use features.

Nick admits in his blog post about his new website that he has a background in design and that it took 7 months to create. He used 3 different design companies to produce the website, one for the main portfolio website, one for the iPhone optimised site and another for the blog. He also admited that it cost him a “pretty penny”!