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.
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.
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.
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.
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.
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.
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.
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.