Visuals for the Web
Or why you need to plan photos for web before you take any..
This guide is for photographers, content managers, copywriters, graphic designers and even art directors since they interface with copywriters and photographers.
Most photographers you will come across have no clue about typography and user experience or information architecture. Its not completely their fault but entirely their fault. This stems from their own egos, non–exploratory nature or even inability to judge the fast changing digital landscape. So relying on them to get the right photograph which will fit for your website is just wishful thinking.
In 2012, I was designing blog for a client in UK and I noticed most of the photographs given to me by the client were in Portrait orientation. I quickly figured from looking at the rest of the images that photographer had no idea where the photos will be displayed.
The photographs were great in itself but the portrait orientation mean I had to extend the image using clone stamp tool to make it fit for a web banner, which was supposed to have copy that was given to me by our content writer. This doesn’t always work, since other areas of image may have some texture or grain(noise) which will get smudged out. I was lucky that the photograph had shallow depth of field, which made it possible for me to clone the backgound and extend it on the right for title text.
So I have made points of consideration when you plan for photography for a website.
Images are now an interactive canvas
The way in which art was consumed back a decade ago is quite different from how it is being consumed now, for good or for bad.
And when we talk about anything digital the user habits and interactions are a lot different from most traditional medias. If it doesn’t make things easier for them or carry an incentive for them, they will find something else to focus their attention to.
And the way most photographers learn is photography books, photo–books, art schools, that still preach the old ways. So when they take photos for a website they still take it like they learned how to in 4:3 aspect . A large 4:3 aspect ratio photograph that has no place on the first fold of the web page.
A typical modern web photograph looks like these
Composition for the web
Some points to consider when composing photographs for your website.
- Composing images for the web requires designer/photographer to be thinking about what information the page is providing and how your image will supplement to that.
- The photograph will likely have overlay of graphic and some text or buttons, so while shooting photographs the subject or objects in the shot need to be positioned accordingly.
- Leave breathing space on left or right. Make sure that subject is facing in the direction of the empty breathing space.
- Use shallow depth of field. Don’t use kit lenses with f3.5 aperture, go for more wider like f2 or f1.8 and f0.95 on micro 4/3rd cameras.
- Use cinematic aspect ratios to enhance the impact of your web banners.
- Use realistic and contextual images, the overblown bright stock photographs(high key photographs) look unreal and now widely used in popup ads. Even among design agencies it is seen as work done by novice designer. If you have noticed in pop up scam pages, they all use stock photos too.
Some examples
Planning and storyboarding
Just like in the previous examples of photographs the composition was planned. Or at least keep its final use on the web in mind. Better yet do storyboarding and tell the photographer or your team how you want to have photography done.
Surprisingly this is not what you would most likely to get out of an average photographer. They are still delusional about taking photos and framing them for their walls or a gallery(to which no one ever goes to).
Photographs on the webpage layout need to be planned after the Wire-framing/Information Architecture stage. This is primarily because the photos do end up on the webpage will most like have a graphic or some copy on it.
Good work is invisible (or goes unnoticed most of the time)
At times planning and directing photography for website often goes unnoticed i.e. till someone does a bad job at that.
TL;DR Summary
- Photographs should reflect the content — Content Writers, Designers have to either do photography on their own or work with photographer to get the right shot.
- Get involved early — You should be involved looking on the camera LCD to position subject and framing the shot, because photographers don’t really think about having their photographs on wide banner (for example — width 1170px by 200px height)
- Think about the layout — Is it single column, two column or three column and how many column will the image span onto.
- Plan and storyboard for the photography with purpose of photograph in mind.
Sometimes good photographs will go unnoticed.
A quote from a world famous photographer Martin Parr, who I met in 2010.
‘There are two parts to the process: taking the picture and finding ways of using it.’ — Martin Parr
Resources to further explore these topics
Some of the books I have read on these topics.
Typography books
- The Fundamentals of Typography by Gavin Ambrose , Paul Harris
- The Elements of Typographic Style by Robert Bringhurst
Design Layout books
- Basics Design 02: Layout by Gavin Ambrose
- The Vignelli Canon by by Massimo Vignelli
Photography books
- John Hedgecoe’s Complete Guide to Photography by John Hedgcoe
- Canon EF Lens Work III by Canon
- Basics Photography 01: Composition by David Prakel
- Basics Photography 07: Exposure by David Prakel
- Usability and Web User Experience
- UX Design Process by Smashing Magazine GmbH
- Psychology Of Web Design by Smashing Magazine GmbH