Using photographic composition techniques to start to art direct on the template-driven web.
Think back to last night. There you are, settled down in front of the TV, watching your favourite soap opera, with nice hot cup of tea in hand. Did you notice – whilst engrossed in the latest love-triangle – that the cameraman has worked very hard to support your eye’s natural movement on-screen? He’s carefully framed individual shots to create balance.
Think back to last week. There you were, sat with your mates watching the big match. Did you notice that the cameraman frames the shot to go with the direction of play? A player moving right will always be framed so that he is on the far left, with plenty of ‘room’ to run into.
Both of these cameramen use a technique called Looking Room, sometimes called Lead Room. Looking Room is the space between the subject (be it a football, or a face), and the edge of the screen. Specifically, Looking Room is the negative space on the side the subject is looking or moving. The great thing is, it’s not just limited to photography, film or television; we can use it in web design too.
Basic Framing
Before we get into Looking Room, and how it applies to web, we need to have a look at some basics of photographic composition.
Many web sites use imagery, or photographs, to enhance the content. But even with professionally shot photographs, without a basic understanding of framing or composition, you can damage how the image is perceived.
A simple, easy way to make photographs more interesting is to fill the frame.
Take this rather mundane photograph of a horse:
A typical point and click affair. But, we can work with this.
By closely cropping, and filling the frame, we can instantly change the mood of the shot.
I’ve also added Looking Room on the right of the horse. This is space that the horse would be walking into. It gives the photograph movement.
Subject, Space, and Movement
Generally speaking, a portrait photograph will have a subject and space around them. Visual interest in portrait photography can come from movement; how the eye moves around the shot. To get the eye moving, the photographer modifies the space around the subject.
Look at this portrait:
The photography has framed the subject on the right, allowing for whitespace, or Looking Room, in the direction the subject is looking. The framing of the subject (1), with the space to the left (2) – the Looking Room – creates movement, shown by the arrow (3).
Note the subject is not framed centrally (shown by the lighter dotted line).
If the photographer had framed the subject with equal space either side, the resulting composition is static, like our horse.
If the photographer framed the subject way over on the left, as she is looking that way, the resulting whitespace on the right leads a very uncomfortable composition.
The root of this discomfort is what the framing is telling our eye to do. The subject, looking to the left, suggests to us that we should do the same. However, the Looking Room on the right is telling our eye to occupy this space. The result is a confusing back and forth.
How Looking Room applies to the web
We can apply the same theory to laying out a web page or application. Taking the three same elements – Subject, Space, and resulting Movement – we can guide a user’s eye to the elements we need to. As designers, or content editors, framing photographs correctly can have a subtle but important effect on how a page is visually scanned. Take this example:
The BBC homepage uses great photography as a way of promoting content. Here, they have cropped the main photograph to guide the user’s eye into the content.
By applying the same theory, the designer or content editor has applied considerable Looking Room (2) to the photograph to create balance with the overall page design, but also to create movement of the user’s eye toward the content (1)
If the image was flipped horizontally. The Looking Room is now on the right. The subject of the photograph is looking off the page, drawing the user’s eye away from the content. Once again, this results in a confusing back and forth as your eye fights its way over to the left of the page.
A little bit of Art Direction
Art Direction can be described as the act or process of managing the visual presentation of content. Art Direction is difficult to do on the web, because content and presentation are, more often than not, separated. But where there are images, and when we know the templates that those images will populate, we can go a little way to bridging the gap between content and presentation.
By understanding the value of framing and Looking Room, and the fact that it extends beyond just a good looking photograph, we can start to see photography playing more of an integral role in the communication of content.
We won’t just be populating templates. We’ll be art directing.
Comments
05/12/2008
Good read! Never heard the term looking room, but was familiar with the concept.
Thanks, Mark!
05/12/2008
Very nice! I really like the merging of the two topics (photography and web design). :)
05/12/2008
Wow I just loved and enjoyed this post! Great job thats all I can say.
05/12/2008
Haha, the explanation on the motion of the gaze reminded me a lot of our recent physics lecture on the Center of mass. Great explanation by the way.
05/12/2008
Thanks, Mark. Thoughtful and informative.
05/12/2008
I guess context in which an image is used is important as well but I actually think the cropped picture of the horse looks less interesting with the bright blue of the sky cropped out.
05/12/2008
Great article, Mark. I never could really put my finger on the visual confusion sometimes inherent in photographic design elements, but you’ve succinctly pointed out the issues—issues that I’ll now be able to prevent in future designs. Pat yourself on the back and go grab a good cuppa.
Cheers,
Nick
05/12/2008
Nice post. I am impressed to the BBC example : )
05/12/2008
Bloody awesome Mark! This is truly something that has been overlooked a lot in my opinion, and now that I have been “educated” it explains a lot!
05/12/2008
Hi Mark,
I enjoyed that short but informative article!
Also never heard of the term “Looking room”, never the less I have been aware of the concept for a while and have always implemented it unknowingly. but that probably comes from my background in photography before moving into design. It has how ever pointed out to me that I haven’t always used it in my illustration work. So I am thankfull for the reminder and explanation of how it can be associated with design work.
We often forget what we have learned from one visual art can be appled to another.
Thanks for the reminder!
05/12/2008
Superb approach to working with imagery on the web. Thanks a lot for the insightful post. Note for ’09: “Must pay more attention to the focus of images”.
05/12/2008
Brilliant article Mark, such a simple technique with a great result.
05/12/2008
Every day’s a school day!
Great article Mark. Never heard of the term “Looking Room” before but will definitely bare this in mind and apply it where & when I can.
05/12/2008
This reminds me of an article I once read (in Dutch, scroll down on that page to see the pictures) about how we are inclined to follow the direction a photographs’s subject is looking into. And how that can be used to guide the user. It shows two versions of a banner. In one the subject is looking at you, in the second at the banner text. In the second one, your eyes are immediately drawn to the text.
image #1, looking at you
image #2, looking at the text
05/12/2008
Nicely explained Mark and the BBC site is a perfect example. Really is a fundamental of good photography and great to see it being used in relation to web design.
05/12/2008
Mark,
excellent article – very insightful and beautifully written.
Thanks for the inspiration :-)
05/12/2008
Another enjoyable one, thanks Mark and 24ways.
What a fantastic example you found in the BBC. Refreshing to see such a clear, practical demonstration of what could be rather an abstract concept for some.
05/12/2008
Great article. Handing it over to customers who are updating their own website through a cms might help them handle images in a better way in the future.
05/12/2008
This is a fantastic read. My favourite 24 ways article of the year so far. These tips will (hopefully!) help me to take better photographs, as well as implement photography better on my websites.
I often notice images flipped in move trailers. I wonder if this is to do with creating the right looking room in relation to the rest of the trailer?
05/12/2008
Using the “The Rule of Thirds” for photography is very cool. And for web design moving the visual focus away from the center is real challenge. Great article!
06/12/2008
Very interesting, and my favorite 24ways article so far this year. As a designer, cropping photos in such a way that they lead back to the content is often something that I do without thinking about it, but it’s very nice to be reminded about the reasoning behind it. I hadn’t heard about the “Looking room” idea, so I’ll keep that in mind for the future.
08/12/2008
Really interesting read. Not really seen this subject covered on the web before so it was a nice breath of fresh air.
Cheers!
22/12/2008
Nice article on a subject I’ve not seen covered before. The BBC example perfectly illustrates your point.
26/12/2008
I had a generalized ‘feel’ of this concept, but I didn’t properly understand the reasoning & psychology of looking room until now.
31/12/2008
Have to agree with Christopher… the BBC example made it clear as day. Interesting stuff.
01/04/2009
Hey,
Enjoyable read, I do like the clear and concise way you explain things.
Being a camera operator i’d hope I use the technique without really thinking about it when I do web design but looking at some of my designs i’m not so sure.
Good tip, cheers.
11/05/2009
Excellent explanation and examples. This article has certainly helped me grasp the concept.
Commenting is closed for this article.