Designing Online Images part 2: The Rule of Odds

Designs, Projects
Continuing on from where we left off with The Rule of Thirds, let’s now go through the Rule of Odds for designing online images.  

The Rule

The Rule of Odds is defined in Wiki as follows:

The “rule of odds” states that by framing the object of interest with an even number of surrounding objects, it becomes more comforting to the eye, thus creates a feeling of ease and pleasure. It is based on the assumption that humans tend to find visual images that reflect their own preferences/wishes in life more pleasing and attractive.

The “rule of odds” suggests that an odd number of subjects in an image is more interesting than an even number. Thus, if you have more than one subject in your picture, the suggestion is to choose an arrangement with at least three subjects. An even number of subjects produces symmetries in the image, which can appear less natural for a naturalistic, informal composition.

An image of a person surrounded/framed by two other persons, for instance, where the person in the center is the object of interest in that image/artwork, is more likely to be perceived as friendly and comforting by the viewer, than an image of a single person with no significant surroundings.

The technique is more commonly used in digital photography:

Photo Credit: Paul Hippau Photography

Photo Credit: Travel on Vacation


The composition rule is of course not limited to just digital photography; it can also be extended to designing online images.

Online images – why bother?

As mentioned in the prior post, the end result can be used as a sales tool (an advert, an intro to a post in social media channel or your own website) or it can be simply used to show off your design skills while building up your portfolio.animat-pencil-color

And of course, it is quite nice to use an existing image that you have taken and spruce it up a little.

You might just be able to show off your own photos to an entirely new audience.

The Layout

Using a hypothetical canvas, our objects could be laid out like so:

Note: The page is broken up using the Rule of Thirds canvas once again. While it is not mandatory to do so, it still serves as a good guide for placement.

Designing online images could therefore look something like this:

Overlaying designs on photographs

What a few websites and posts on social media channels tend to do is design over existing photos. 

In this example, I have taken a few of my own images and designed over them using the Rule of Odds.

This slideshow requires JavaScript.

Using photography in the background makes the entire design a little bit more interesting and helps frame the foreground design objects. It is of course not compulsory to use a picture as the background, but I do find that it helps set out the context for the person consuming the design.

These mocks were created inside 30 minutes – a little bit longer than my previous effort and due to the icons involved. And of course, there was a bit of experimentation and playtime involved. Once you lose that sense of fun and the process becomes a drag, you really have to ask yourself ‘why am I doing this?

It still is a relatively quick process (relative to creating a full-blown ad from scratch) which once again highlights the ease and simplicity of the process. 

Parting shot

Have you followed this pattern in your design process?

Feel free to share your thoughts below.


About this post

PC halved

All images above are my own, taken from Instagram and Flickr. The process of dressing up my images was a whole lot of fun.

I use Sketch as my design tool of choice and I’ll have a more detailed process in an upcoming Skillshare course.

Up Next: The Rule of Space.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s