Photos are paramount in modern web design. They provide visual appeal, intrigue, and information, and are truly worth 1000+ words when used properly. If you’ve ever tried taking your own website photos you may have already found out that photographing for a website design can be tricky. As you can imagine, not just any photo will do… Even if it’s a great photo. You can have a photo that’s awesome in every way, and that photo can be absolutely useless for a website. So what makes a good website photo? Well, the answer is dependent on … It is unique to the project you are working on and that message you are attempting to get across with that photo. This is where creativity will come into play. Outside of that, here are some general tips that we’ve found to be the most helpful when planning out your website photography shoots or when selecting the right stock images.
Horizontal is King
Thanks to the horizontal nature of computer screens and the emergence of full-screen web desing layouts, wide, landscape-style images work best for web design. Generally speaking, horizontal images are more versitile when it comes to image scaling and responsive website layouts. Responsive websites adjusts to the size of the screen it’s on. These causes pictures, content, and everything in between to shift. A wide shot can suddenly become a lot narrower. It can even turn vertical altogether. This is important considering the majority of web traffic consists of tablets or mobile devices.
Another thing to consider, is that most likely the photos on your website are going to have things overtop of them. Whether it’s a headline, paragraph text, calls to action, or even contact forms, the picture is rarely the sole focus. Because of this, the picture shouldn’t be too focused in on something that will take all of the attention, nor should the subject of your image exceed over 1/2 of the overall image, and ideally the rule of thirds should be followed. A simple rule of thumb is to always keep margins wide. You can always crop a photo to narrow the focus, but you can’t add in more negative space.
In the stock picture above, we have the swimmer, the water, and the water droplets, and that’s about it. However, the pic still says a lot. It puts off an elite-level swim training vibe with a touch of class. It suggests that this swimmer is serious about swimming and most-likely is pretty good at it. But there’s really nothing more there to keep your attention for too long… but put a few words over top of it, and viola:
The moral of the story here is to give equal focus on the Negative Space in your photos.
Website photos are a great chance to test out your skills with negative space or indirect focus. Sometimes the right photo won’t require a true focus, and so to a degree, the negative space becomes that focus. Make sense?
Just try to keep a certain degree of breath-ability in your pictures. Keep the margins wide and subjects away from the edges. you can always crop a photo to narrow the focus, but you can’t add more negative space to a photo, atleast not very easily 🙂
Contextually Identifiable Images
While obscurity often works well with website photos, they should ultimately be identifiable within the context of the overall brand message. You don’t want your visitors sitting there, trying to figure out what something is or how it applies to what they are looking for. You want the viewer to be able to place it, then forget about it and move onto your calls for action.
Faces are Distracting, ESPECIALLY in Groups
Generally speaking, we don’t want to see many faces in website photos, unless the subject’s face or facial expression is directly associated with the message at play. Humans by nature are drwan to faces, expecially in photographs. A face here or there is fine, but most of the time they will be distrating the visitor from your overall goal of proceeding to your message. Also, when you have a group of people in the photo, it is best to add a layer of blur to the crowd so that they reamin just that, a crowd, not a group of individuals.
Like this public speaker here
The image was used to promote a series of live public speaking events. Notice there are lots of people, but no identifiable faces. The vistor sees a person talking to group, and not much else, and that’s exatcly what we want.
Still Not Confident?
One of the best things you can do is to look to others for inspiration. Check out websites that you view regularly and take note of how their photos are displayed and proportioned. Notice the subtlties, notice the implied perception, and visual cues, and then apply those same concepts to your own imagery.
It is often beneficial to see what other photographers are doing, but you should follow your own instincts too. After all, its you’re story that you are telling, So tell it through your eyes!