Using photography in web design

Nothing commands the eye like great photography, especially in web design. In an industry where there are far too many impersonal ‘stock jobs’, employing some real photography in your company website will set you apart from the rest of the pool.


Photography plays a huge importance in our modern social understanding. It is an intimate look into a world elsewhere; a visual stimulant that allows our senses to experience somewhere else in a closer sense and helps to break down the borders that separate two different places.


When you take into account that your website is your one asset that communicates with all of your potential customers, you need to show them the real experience that you will offer them, the people who will deliver a service and the real you (or ‘yous’). What better way to do this than actually letting them take a peek into your company through real photography on your website?


To help you understand the importance of using real photography in your web design and how to go about doing it properly, here at Kalexiko we have put together this article, guiding you into how photography can be used in your design properly.


Using photography as design

When designing a website, especially a content driven one that relies on imagery, photography is almost always your best bet. Sometimes (especially in corporate sites) illustrations or graphic imagery lacks the professionalism that photography yields. Needless to say, this isn’t always the case, and often illustrations can capture a website perfectly; given the industry you are in and audience you are aiming for.


The perfect photograph can elevate a design from good to great, it can fill the void and give your site that little piece that is missing. So, let’s take a look at some of the things that you will need to bear in mind when using photography on your website properly.



Usability is at the forefront of every website’s purpose, therefore you need to ensure that the photo that you integrate into your design takes into account the layers you will be adding on top of it with the right kind of contrast.


More than likely, you will be adding several other layers, such as text on top of the image, so you have ensure that these layers can be made out clearly by a user. To begin with, start with the obvious; if you are working with a dark image, then use lighter elements on top, and of course vice versa. If you are working with a light text on top of a light background, then put something a bit darker in between to separate the text and the background; a subtle drop shadow usually works perfectly.


Take the Clouds Over Cuba site for instance. The balance between the dark background image contrasts beautifully with the light text on top; providing clear clarity and easy to read text.



When choosing an image for your website, you need to think what kind of impression it will cast on a client. Obviously you want them to believe that you will be providing them a quality service, therefore you should always aim to use extremely sharp high quality images for your site.


How would you feel if you encountered a company website which featured a shaky, low-resolution, unprofessional looking shot of the company building or the team? You wouldn’t exactly be impressed or have the most faith in the quality of the service they will provide you, given the quality of their website.


If you don’t have access to high quality photos or the company that you are designing a site for, and you can’t seem to convince them to get a professional photographer to take some high quality photos, then try to steer clear of any photography altogether. Not many things can let down a great design quite as well as poor quality photographs; convince them that flat design is the way forward instead…


Image relevance

This is fairly logical. A picture can express a thousands words, but when the words aren’t relevant then the meaning gets completely lost. It goes without saying that the photos that you use should be relevant to what you’re trying to sell. For example, if you were designing a website for a high end architects firm, then you would want photos of the actual business, their portfolio and buildings. Kinda like the one we did for One Creative Environments.


In competitive industries, using some good quality images of an actual company will provide the edge that will set a business apart from the rest; it will demonstrate to a user the individual experience that a company will provide that its competitors wont.


On the other hand, for companies offering a slightly less tangible service, like a solicitor or insurance firm, then you may be able to get away with things that are a bit more loosely connected. Bearing this in mind, you will still need to ensure that the images are recognisable by the user as being attributable to your company or the service you provide.



The size of the images that you use is something that you will also need to take into consideration. It seems that a tried and tested way of working is that bigger images will tend to have a bigger impact: which again is pretty logical.


One thing that you will need to bear in mind is that if you are going to use larger images for your website then you absolutely need to ensure that the images are of a high quality, low quality images will look terrible when expanded on a big space.


One website that captures the use of big photography perfectly is Pi’s Epic Journey. You scroll through large photo after large photo of jaw dropping imagery. Yo can’t deny that your eyes are not completely fixated when you are greeted by a huge tiger staring at you from your screen.


Using photography as content

As well as adding the perfect finishing touches to a website, photography can also be implemented to make great content, especially when they are used in conjunction with non-visual content such as audio or text. Like all elements in web design, you will need to think carefully about the purpose your images will serve in your design.


Catching the eye

Eye-catching imagery can be great for representing an article or a page, especially if you need to drive the audience towards certain content in a way that text can’t. When we are confronted with large pages of text, our brain tends to start skimming over it, rather than reading it in detail, meaning that directions to important site content can be easily missed.


Photos are also a great way to break up visual monotony on a page, so use them to guide a user through pages that they may be interested in. Always remember that good imagery will never fail to make people stop and pay attention, so exploit this as much as possible.


Establishing context

Photos are a great way of setting the context for a user on a text heavy page. You can use many different types of images to set visual context to spice up your site; a picture of an author, a picture of a place or service mentioned in the text, anything that holds any relevance to the text.


A few more things to keep in mind

As well as the points above, there are a few more smaller, but nevertheless important things that you will need to keep in mind when using photography in your web design.



If a photo doesn’t belong to you or the client then you have to make sure that you have permission to use it. When getting permissions to use photography then try and obtain it in writing if possible and always ensure that you credit and link back to the photographer. While this may sound like an arduous nuisance, it really isn’t and the consequences of not gaining permissions can be severe.


Stock photos

If you can avoid using stock imagery then you really should. If you find that you’re in a situation where you can only use stock imagery then you need to choose between free stock libraries or paid ones.


There are some decent stock sites out there where you can get images that will cost you nothing. Though, if you are planning on using stock photography in your web design, then you may want to take a look into stock libraries that charge. Obviously, there are pros and cons for each;


Free Stock photos- Pros:

  • They are free.
  • There are a large selection of them out there.


Free stock photos- Cons:

  • There are so many bad ones out there, you will have to search to find the best ones.
  • If you are looking for something very specific it can be extremely difficult to find.
  • Permissions vary and can be complicated, for example many ‘free’ stock sites require you to provide an attribution link, which doesn’t look great in web design.


Paid stock photos- Pros:

  • If you purchase a photo, you will usually have all the permissions you require.
  • More of a varied and specific supply of photos.


Paid stock photos- Cons:

  • The cost!


When using photos of people

Using photos of people in web design can often be a really tricky one as it can even make or break a design. One word of warning is never ever opt for stock photography featuring people, there is absolutely no feeling of authenticity to them and you can be certain that a thousand other sites out there have opted for the same image.


When using photos of real people always make sure that you use the people behind the product or service, and show them at work or providing the service if possible, or if the product is meant to be worn, then show a model wearing it.


Always ensure that if you are using photography of people in your web design that they are relevant to the product or service advertised. It demonstrates transparency and honesty. It’s amazing how a customer recognising you from your website can break down provider to consumer walls and create a more personal service; which is always a winner.


Take for instance the website that we designed for Sales-i. We went to their office and took photos of the team at work, just to ensure that the personal element was there.


In conclusion

Using photography in your website can really elevate it. Some of the greatest looking sites out there look so good because of brilliant use of photography. Though always bear in mind that it isn’t always easy to pull off photography in web design and settling for anything less than the best quality can be very detrimental to a design.