Tips for Powerful Photography in Web Design Mockups

Arguably one of the most important stages of a website design is the mockup phase. Building upon a general wireframe is quite detailed because you need to think about composition and specific user interface elements. Including photographs in a website mockup is one way to encapsulate a specific tone or style of content. When done properly it looks outstanding; When done improperly it looks puerile and inefficacious.

canon dslr camera shot equipment

In this post I’d like to share a few tips for composing websites with the use of stunning photography. While the quality of a photo itself is exceptionally important you must also consider placement and direction. Photography in web design should add to the overall company image or add to some pieces of content on the page. Along with these tips browse through some related photography websites to get ideas for your own mockups.

Homepage Designs

It seems natural that photographs would perform very well on homepages. Once a user lands on your website they typically want to understand what it’s all about. While there are many different ways to draw people further into a site, photos are quick visual cues to explain things in a jiffy.

The use of big oversized photography has become a colossal trend unto itself. Large background photos placed in the header section of a webpage can do a lot to explain the purpose of a site. Companies and small businesses use this technique to feature photographs of their studio or office space.

Many personal websites for entertainers or artists tend to have a direct focus on the person. Photographs are the best way to show off how a person looks, what they do, or a certain aspect of their personality. Remember that the homepage will directly impact each visitor’s impression of the website. Photos on the homepage, especially above-the-fold, need to tell the story quickly and effectively.

Product Shots

Another use of photography in web design is the addition of product shots. eCommerce websites are the typical assumption but consider other products like mobile apps, video games, or new startups. Even a simple edited photo like the example on Gridbooks can go a long way towards marketing and selling a product.

gridbooks homepage website grid notebooks

However we’re primarily familiar with product shots that directly relate to items for sale. These could be platters of food, clothing, computers, or anything else. Restaurants primarily to use product shots to help sell dishes from their online menu.

Much like other types of photography you really need to understand the fundamentals to capture great product shots. Thankfully photographers often publish helpful tips related to product photography. Although you can hire a professional photographer to help with the process you can earn some extra money and save time by capturing the pictures yourself.

Taking Snapshots

It should go without saying that photography is a long process. It may be related to other creative fields like drawing or graphic design, but only in the general sense. To physically pick up a camera and take beautiful shots will require practice and some in-depth research.

photographer professional camera photo

I point this out because it’s not mission impossible – in fact it’s mission oh-so-probable. People face difficulty with the concepts because of the split between composing/aiming a shot and physically taking the shot.

While it is a lot of work the payoff is fantastic. All the photos you take are your own creative property and you have free reign to edit, restyle, composite, or do pretty much anything with them. You might be surprised to learn there are dozens of helpful sites online to educate yourself about photography.

One resource I would recommend is the Photography Tuts+ blog. Posts range from DSLR camera techniques to Photoshop editing and many other subjects in-between. I’ll admit that photography is not for everyone so if you don’t have an interest then stick to alternatives. But if you are curious to learn the only way to do it is to get started.

Sources for Photography

Aside from learning to snap the shutter yourself there are free resources online for the many photography-impaired designers. Obviously Flickr is a classic choice which publishes both Creative Commons and copyrighted works. If you know how to use the advanced search feature you might find a couple gems.

pexels free stock photographs resource

Otherwise check out Pexels which is a free high-quality photography resource. The photos are submitted by professional photographers who capture the shots and share them online for free. This means everything is released into the public domain so you can modify, crop, edit, or even reuse the shots in your website mockups.

Pexels is a curated resource which pulls from other websites like Unsplash. Every photo is usually published at a very high quality which offers designers plenty of freedom. Granted these sites may not help if you need to use specific photographs of a person or location. But for general-purpose mockup design I would highly recommend these resources to every web designer.


I hope this article can provide a solid foundation for web designers getting started with photography. Although from the outside it seems like a complicated subject it will become clearer once you get your hands dirty. Websites were created to be purveyors of content and photos are a big slice of the delicious content pie. Crafting mockups with cleverly-placed photographs does take time but with practice it will become another handy tool in your toolbelt.

Jake is a researcher and writer on many design & digital art websites. He frequently writes on topics including UX design, content marketing, and project management. You can find more work on his portfolio and follow his latest tweets @jakerocheleau.
  1. January 13, 2015

    I would suggest that photography and crafting mockups should be a permanent and vital set of skills in a professional web designer. Clients prefer to see a sample visual that closely depicts their final live site before signing on the project. So if you want to satisfy your clients then better have these set of skills in your armory.

  2. Tobias
    May 26, 2015

    Thanks for share. it’s also a great site for free public domain images.

Leave a Reply

Your email address will not be published. Required fields are marked *

Next Post

JotForm Online Form Builder- An Essential Tool for Web Designers