If you’ve ever looked at a website and thought it looks beautiful, but you couldn’t quite work out why, it might be worth looking at how it uses images. Something I’ve noticed is that a lot of designers tend to slice off a chunk of their images so they look incomplete. But not just any old chunk.

While much of the time the shape and space available to you in a webpage will dictate what size your image should be, it doesn’t necessarily dictate the content or composition. Let’s look at some examples.

gingermonkeydesign.com portfolio

The Ginger Monkey Design portfolio uses cropped thumbnails for every item of work. Such is the level of detail in each piece, it only needs to show a small area to entice users to click through.

Jesse Bennett-Chamberlain's homepage

Jesse Bennet Chamberlain‘s homepage displays some of his recent work using a porthole type effect. Combined with a slight inner shadow it really gives an illusion of depth and layering. This is an example of circular cropping. Not as common as regular square or rectangular cropping, but it’s a very nice effect all the same.

What makes a well composed image attractive?

If you can find the focal point(s) of an image, you can crop it to a dimension that will really impact on the viewer. It can be quite difficult to get the proportions right to begin with, but with practice you’ll begin to pick out these focal points and see exactly what shape and size the image should be before you start work on it.

When cropping your images you want to capture the most interesting part of the image and zoom in on it. But make sure your focal point isn’t directly in the centre, unless the image you’re using is very symmetrical. Also, don’t be afraid to cut off an area of the image that doesn’t add anything. Having an image slightly to one side and cut off hints at more outside the picture tempting the viewer to click through or continue browsing your site. It can really add interest to otherwise boring images.

Before

This is a photo of a little ginger guy I snapped on my iPhone while he was snoozing in the shade in a hotel in Cyprus. He’s cute, but he image itself is not particularly inspiring and it’s a little bit boring.

After

Taking his face and that upturned paw as the focal points, I’ve zoomed in on the image and moved his head (the primary focal point) off centre and to one side. You can see more detail in his face and although we’ve chopped off a large section of his slumped body, you still get a sense of all that laziness. This is miles better.

Banneton wood fired breads

The Banneton website uses close-up shots of the bread they make. Rather than showing whole loaves, they simply zoom in. From a user perspective, it shows the company has a genuine confidence in what they offer and it is therefore presented front and centre. If you look closely, every one of the slider images on the homepage is cropped and focused. None of them include a complete loaf of bread, cup or bowl.

Apple website uses plenty of cropped and incomplete images

Apple are known for producing beautiful, aesthetically pleasing products. But their presentation through the Apple website is also consistently appealing. They use plenty of zoomed in and close-up shots to give viewers a real sense of quality and luxury. Take a minute to click through the site and look at how many places incomplete images are used or cropping is used to focus the eye on a particular detail of a product.

What you might also notice is that images are rarely cropped at a 50-50 scale. As in, they are rarely cut directly in half or only show exactly half of the product/subject. The idea of the rule of thirds is regularly applied – something I intend to write a separate post on, as it is beyond the scope of this one.

Using ‘incomplete’ images to break the grid

Grid-based layouts are very popular across the web design industry. They provide a starting point at the beginning of a project and a reference point throughout. While many consider it to be a standard practice, not everyone wants their website to look ‘rigid’ or ‘boring’ as can happen if careful thought is not applied. One way designers get round this potential boxy appearance is by using large images that sprawl across the background of the page, seemingly transcending the grid. Normally they are quite subtle so as not to distract from the main content, but they are also sometimes used for impact.

The beautiful Love For Japan website has trees in the background that point inwards to help focus the eye on the main content. It still uses a 960 grid.

Another method that I’ve seen used is to rotate an image so it’s at an angle. This helps to break the grid visually without actually affecting the layout. A sort of ordered chaos.

The Promise Me Chocolate website uses angled, nicely cropped images. The focal point of the image (the faces) are also off-center, obeying the rule of thirds

Wrapping up

The point of this post is not to argue that every image should be chopped up and presented in the same way. It’s more to point out that you don’t have to use an image in its entirety. If it’s too long or too wide for a particular space on your site, don’t be afraid to open it up in an image editor and play around with cropping it to different dimensions. You might be surprised at what you can find. Sometimes the perfect detail or the perfect focal point is sitting right in front of you. You just need to find it.

Keep an eye out while you browse the web today. I guarantee you’ll see examples of this everywhere.

Click image to enlarge

Pretty damn cold at the moment so I thought I’d create a vector and bitmap combined image to represent the season. The background image came free from here and I used a combination of Illustrator and Photoshop. Just to finish it off I thought I’d slap the WHD slogan across it :D

A fantasy styled composition of clouds, stars and a rainbow.

Click image to enlarge

This was our first logo created using a combination of Illustrator and Photoshop. We were aiming for a sort of cutout, layered look using gradients and drop-shadows.

Click image to enlarge

This is my boy drawn in vector. And the original image I used below.

Click image to enlarge

Experiment using some grungy brushes and patterns. Kinda reminds us of the Top Gun logo.

Click image to enlarge

We used to use this image to indicate a lack of work in certain areas of our old site. Thankfully we no longer have a use for it :)

Click image to enlarge

Vector illustration of some friends using Adobe Illustrator.

Click image to enlarge

A vivid, lively neon effect created using a mixture of colours, lines and differing opacities. Inspired by the Color Charge website and using elements of the ‘Bokeh‘ effect.