One of the most important features of a good website is good visuals. It is very hard to make an attractive website using bad photographs and it’s very easy to make an attractive website using good ones. It is really important to get the photography right and not all photographers can do it.

Square Socket has a preferred supplier for photoshoots that we have worked closely with for years and they understand how to compose a photograph so that it looks good online. Regrettably a surprisingly large number of professional photographers have no experience taking photographs for websites. Photoshoots are expensive and time consuming. They require a lot of people and they require a lot of time and it’s very embarrassing for the people involved if the photographer comes back with unusable photos.

And what can be extremely frustrating is that you can hire a photographer who does great portraits, great landscapes, who is great at capturing personality, is great at depth of field, great at focusing attention, great at lighting, great at movement and great at telling a story and who still ultimately delivers unusable photographs.

The issue is that photographers want to create a great piece of artwork. They want to be able to frame their photo so it can be appreciated for its depth and composition. They want to create an experience. To do that they have to control where the eye is drawn and to do that they shoot the photo so that only the desired elements are included in shot and no more.

The most common rule for laying out a photograph is called the rule of thirds. The rule basically goes thus: points of interest in the photograph should be placed along the lines of one and two thirds horizontally and vertically. Ideally the item of greatest interest should be placed where a vertical and horizontal third intersect. Many cameras even come with the option to display those lines on the viewer.

Here is a photographer explaining that theory in more detail:

This is great if you are going to display it unobstructed and in the exact dimensions the photograph was taken. However on websites it is very rare that you get an opportunity to do so. What I am going to do here is go through the different dimensions that images are usually displayed in and show examples of the kinds of photos that can and cannot be used.

Few general considerations

1. Larger images are more engaging and convey your message clearer.
2. The dimensions of screens vary greatly but the majority are landscape.
3. Most cameras shoot photos with an aspect ratio of 3:2.
4. Responsive web design means that the site will resize images as the browser that they are in gets narrower or wider. If your design uses full width imagery then they likely have a set height. At its maximum the image could be 1920 pixels wide and 400 pixels tall. At its minimum it could be 780 pixels wide and still 400 pixels tall. Which means that the aspect ratio of the image changes from almost 5:1 to under 2:1. The image needs to be versatile enough to be displayed in both ratios. Which means that a large amount of the image will not be visible in one of the two layouts.
5. If you are using the image as a banner you will likely want to put writing over the top of it. Which means you need a large section of the image to not have any activity in it.

Types of layout:

Layout 1: the unobstructed homepage hero image

There are fashion trends in web design and one of the design trends that has been popular over the last year or so is the full width homepage hero image. If you have the right imagery it’s a really good look. It makes good use of available screen space and with newer versions of slider software there is a lot that you can do here. For this we are going to use the example of Shield Security’s mobile patrol page.

Here is the original photograph:

There is a lot going on in the photo. We want to keep the clients logo in shot and we want that to be as visible as possible. However the most important thing is that the context of the shot is clear and that it reflects the service proposition that the page focuses on, which is that the photo is about a security guard making his patrol. It is desirable to keep the client’s logo in shot, but as the page is already clearly branded this is desirable and not vital. We are going to try and keep it in shot for as long as possible but ultimately there can only be one key point of focus and that is the security guard.

So we select an exact location on the photograph that has to stay in shot and we make the banner resize in such a way to keep that location visible in all sizes.

So this is what the banner looks like on different devices:

Here the original photo with the different layouts and interesting parts marked on top of it.

However now let’s take a landscape photo that has been composed in the way that most photographers would take the shot. Here is the original:

Here is what the same shot would look like when put onto the site:

And here is the different layouts and points of interest marked on top of the original. It’s a great photo but it is unusable.

Layout 2: The hero banner image with text over the top

Another popular banner is to put text over the top of the image. When done properly this is my favourite layout. Here is an example of it done well:

The difficulty here is that the text needs to be clearly readable and for that there has to be both an area clear of clutter and a high contrast between the colour of the background and the colour of the writing. There is also the same complication that you have in layout 1. The image is going to have to work in a range of ratios so the clear area needs to be large enough to allow for this. The simplest way to layout this shot is to have one half of the photo plain, e.g. a blank wall or an empty sky, and the point of interest just to one side of the middle of the shot.

Here is a helpful diagram:

Here is an example that will work well for this:

If you can’t get these photos with these compositions you can put a background behind your text but this doesn’t look as good. Here is an example:

What I want to stress here again is that the original photo needs to be landscape and really wide. Ideally the photographer would use a wide angle lens.

It is against most photographers training to include large empty spaces in their compositions, but for websites this open area is vital.

Layout 3: The moody background image

The moody background image is another favourite of mine. It isn’t often used as it’s quite specific to high end consumer service or community sites. I have seen it best used by the slightly controversial club Killing Kittens. Here is an example from their website:

The moody background image fills up the whole screen but like with example 2 half of the page is left a single texture or colour. To make this work it really needs to fade naturally into that single colour or texture and to do that the photo needs to either be very dark or very light. Here is an example of such a fade done badly:

It is also important to note that it fades naturally on three sides. It is obvious that it needs to fade horizontally into the text area but it also needs to fade naturally both above and below. Otherwise when you scroll down to that section the image will have start with a harsh dividing line which will undermine the subtlety of the image. Here is such an example:

The moody background image doesn’t have to be as wide as other images as once it is faded to a single colour or texture that colour of texture can be extended easily in Photoshop. So this would be the images composition:

Layout 4: The half-page image

The half-page image is the most forgiving image layout. It is simply a visual used to balance out a block of text and as such it is composed in the same way as a framed image. This is exactly the kind of composition that photographers are trained to take and as such is often the default layout that web designers end up using.

Here is an example:

Layout 5: The parallax divider

Parallax is an interesting way of displaying a tall image in a narrow window. Essentially as you scroll down the image moves up (that is a simplification) and creates an effect similar to looking through a letterbox, when you are looking from down low you see up high and when you are looking from up high you see down low (before I get trolled by developers everywhere I must state that that is a gross simplification but it’ll serve for our current needs).

Here is an example of parallax:

If you have the right kind of photographs parallax can be used effectively to break up the layout of the site and add interest. However my personal feeling is that parallax is a design trend that is already waning. There are not many websites that it is appropriate for and designers are starting to cotton onto that. In the past I have used it effectively on websites for golf and private members’ clubs but not much else.

A word on portrait photographs

One of my personal bugbears is photographers who insist on taking photographs in portrait. Even if the brief includes ‘ALL PHOTOGRAPHS MUST BE LANDSCAPE’ in bold full capitals there usually ends up being a whole load of nicely touched up portrait photographs in the final batch. Usually these are the team photos. These photographs can almost never be used and this can be really painful. In one photoshoot I had to work with there were some truly brilliant portrait team photographs. It was a torment as we had to use the substandard shots all the while knowing how much better the whole website would have been if the photographer had just followed the brief and turned the camera to landscape.

On occasion if the background is opaque enough we can extend a portrait’s photographs background in Photoshop and make it landscape but it can take a lot of time to do it well.

Conclusions

1. Photographs are almost never displayed on websites in the format that they are taken
2. Always take photographs wider than you think they need to be
3. Images need to work when cut in different ratios
4. Always take photographs in landscape
5. Big empty bland spaces are actually helpful