Photography Tips For Natural-Looking Website Layouts

Most web designers wear multiple hats when working on design projects. These hats can include web development, SEO, marketing, identity, content writing, and even photography.

Small businesses and personal sites use photos to deliver a message to visitors. And the quality of these photos greatly impact the message being sent. That’s why I’ve organized these handy photography tips for designers working on the web.

Great photography enhances a website layout and the overall experience. Poor photography brings it down and damages the perception of the entire website. This is why photo choice plays such a crucial role in every design strategy.

Use Contextual Photos

It’s always better to use photos that actually make sense. The relevancy of a photo is crucial to the success of a piece of content.

For example a restaurant website might serve photos of the interior/exterior, or photos of people eating at the restaurant. This gives visitors an idea of the kind of food to expect and what the restaurant looks like.

A good example is Between the Flags which is a fitness/fashion photo slideshow. This shows real accessories and outfits being worn by real people.

between the flags website layout

By focusing on these photos the viewer gets into the mindset of connecting their clothes with the real world. The photos look so genuine and authentic that visitors can connect with the brand, possibly buying some clothes for themselves.

Granted the way you use photos will differ based on the content and type of website. But generally speaking you should always go for authentic photos that blend in contextually with the website.

Avoid Blank Backgrounds

Classic stock photo marketplaces usually have plain white/black backgrounds. These often look very “sales-y” like they’re made for a product page.

If you’re selling eCommerce items this might be OK, but even then try to avoid them. Visitors recognize this technique and when reading content online they’d rather see the product in action.

I think the homepage for Boar’s Head offers a great example of fullscreen photography used in a classical setting. Because the site’s background is black the photos naturally blend in.

boars head website photo

Professional photo shoots are the best way to control your stock photos with no background. It’s possible to find decent stuff on marketplaces, but I’d avoid their older photos altogether if they look too gimmicky.

For in-page photos you really need to work with more professional content. The background for Gabriel’s Gourmet Cafe is a beautiful example of an elegant pattern mixed with quality stock photography.

gabriels gourmet cafe website

It’s surprisingly difficult to grab quality food photos and still have them look good. This is why it’s often easier to pay for stock photography. Check out Expectation vs Reality to see examples of quality food photos compared to how they actually look.

Abnormal Compositions

It may be weird to understand, but centered photos are not always the best. Try to photograph items from different angles so they appear in the corners, or so they appear more towards one side.

You’ll see a lot of this on Etsy products where the creators want to showcase varying views of the products.

Another technique is to blur focus points from either close or far-away objects. This brings attention to one specific part of the photo and gives the composition more dynamism.

pearls blurred photo etsy

The point here is to avoid what you think should be overly-normal” and clean.

You know a good photo when you see it, but sometimes you can’t figure out why it’s good. This is where you need to consider composition and try playing around with focus, depth, and location of items in the shot.

Go For Wide Views

Most websites run content columns with paragraphs that span wider than longer. This is because most monitors are wider than longer, so people are used to scrolling down for more content.

With wider photos people can quickly see everything in the shot. This also leaves plenty of extra room for more content.

Taller photos can work fine but they take up more space on the monitor.

Generally speaking it’s more common for photos to fit into a landscape view than a portrait view. Check out the United Bank homepage to see an example.

united bank website photo

You should try to capture photos in this wider view because they’ll have more utility on the web. So if you have the chance to setup a photo shoot always consider the orientation before snapping the shutter.

Quality Stock Sources

If you can’t(or won’t) snap your own photos then you’ll need to find stock photos online. Many are cheesy and ridiculous but some are truly great and completely free.

I’ve added my favorite free stock photo resources below. I think these are the absolute best options for any designer who needs high-quality CC0 photos for their project.

Pexels

pexels homepage design layout

When it comes to quality stock photos I always visit Pexels first. It has an incredibly large variety of photos to choose from and it’s all insanely high quality.

Their search feature is also very handy with tags and categories for every photo. They operate under a full CC0 license so everything is completely free to download and use even on commercial projects.

Unsplash

unsplash stock photo website

Perhaps the greatest and most widely-known free stock photo resource is Unsplash. It operates by user submission so all the photos are curated by a team that runs the site.

They recently added a search feature and they’re even publishing an Unsplash Book for fans of the site. Everyone who uses Unsplash loves the content and I’d argue this may be the most prolific free photo site on the web today.

StockSnap

stocksnap photo search website

One lesser-mentioned resource is StockSnap which adds new photos every week. They have a wide variety of content much like the other sites on this list.

I really like their layout design because I feel it’s super easy to use, much easier than Unsplash. But their library isn’t as extensive. It’s still a great fallback option because their photos are all CC0 and super high quality.

These three options are all incredible and you can’t go wrong with any of them. But I know there are dozens of other similar resources, so I can’t leave you hanging without sharing some more.

If you’re looking for alternative free stock photo sites then these links should get you started.

Wrapping Up

Whether you’re able to snap your own photos or if you’re stuck with stock, these photography tips should train your eye to look for certain elements in every photo you use.

There’s no quick simple way to understand photography beyond just doing it a lot. This is why I’d highly recommend practicing on your own. But if this isn’t possible you can still grab tons of great photos online, and it’s even easier to find quality now that you know what to look for.

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.