Style Guide

Images

Qualities of effective photos include:

Gaze direction: should the people in the photos be looking towards other elements on the page or is it more appropriate for them to be looking back at the user? Service related websites benefit from eye contact with users, whereas product sites may benefit from gaze being diverted towards specific offers or buy buttons.

Prompting an action: is the photo designed to prompt action such as to donate to a worthy cause? Do the contents of the photo encourage this behaviour? Does the photo encourage users to buy or to make a decision?

Changing opinions: will the photo help to change our point of view?

Creating desire: does the photo make its contents (and thereby the site’s products and services) desirable?

Sharing with others: will the photo encourage the sharing of content with others?

Perception: will the user attribute a particular quality to a brand having seen the image, such as quality, craftsmanship and heritage?

Message: does the photo communicate the message to people that is intended?

Many photos are completely ineffective. They are often just place fillers that mislead and distract the user. They do nothing to help, inform, educate, persuade or entertain.

I think that the most usable and effective photos communicate something clearly to the user, are useful, are in keeping with the brand, evoke an emotional response, and influence the user in the way that the designer intended.

Highlights from A Pocket Guide to Usability of web photos

Landscape Orientation

imagesample

4:3. 1024x768, 768x576, 600x450, 480x360, 300x225. Point and shoot camera. 1.33:1 or 4x3.

imagesample

16:9. 1024x576, 640x360, 600x338, 300x169. 16:9 high def video. 1.78:1

imagesample

3:2. 1024x683, 600x400, 300x200. 16:9 high def video. 1.78:1

imagesample

Deprecated: 3x1. 1024x480, 768x432, 600x281, 640x300. Do Not Use.

Portrait Orientation

imagesample

4:5. 1024x1279, 768x959, 600x740, 480x600, 300x375. Crop from 3:4.

imagesample

3:4. 1024x1365, 768x1024, 600x800, 480x640, 300x400. Point and shoot camera. no crop.

Square

imagesample

Square 1:1

About aspect ratios

The aspect ratio of a digital photograph is the relationship between the width and height of the photograph. There are two common aspect ratios produced by digital cameras: 3:2 and 4:3.

There are other aspect ratios besided the two mentioned here, but they are less common. Some examples of other aspect ratios are 5:4, 16:9 and 1:1 (a square image).

Learn more about aspect ratios on wikipedia or here

Image CSS Options

class img-rounded

imagesample

class img-polaroid

imagesample

class img-circle

imagesample imagesample

HTML:

<figure>
   <img src="http://www.placehold.it/300x150" alt="" />
   <figcaption>Make me as long as you like</figcaption>
</figure>​

CSS:

figure {
   background-color: #fff;
   padding: 5px;
   font-size: .875em;
   display: table;
}

figure img {
    display: block;
    max-width: 100%;
}

figcaption {
    display: table-caption;
    caption-side: bottom;
    background: #fff;
    padding: 0 5px 5px;
}​

This ensures the figcaption does not exceed the width of the figure, whilst allowing you to keep max-width on the image. Works in all good browsers and IE8+.