Tips for Captivating Photography in Web Design

Web designers are considered artists just as much as photographers and painters. It takes a lot of hard work and creative ingenuity to organize websites that pop and function properly. When I approbate a certain website layouts it’s often for the little details. Although I am a big proponent of simple user experience, the little details are often why I stick around and continue to browse.

I’ll provide a few tips and resources for putting together the best quality photographs for your websites. Not every layout will require photos but they can always be used to spruce up insipid-looking page content. Unfortunately the world of photography is vast and it’s easy to end up with bad photos bringing down the whole design. But if you have an eye for quality then you’ll have no problem staying focused on the eventual composition.

Arrangement & Positioning

Perhaps one of the most understated ideas in web photography is the placement. A composition is only as good as its parts. Those individual parts need to have some balance and unity to form a bigger picture that makes sense.

Photographs are often used to enhance content or clarify a message. When visitors first land on your page they might associate with a background photo of a company’s office or studio. This gives a more personal touch to the website. Conversely you might instead place smaller thumbnails deeper into the page accentuating bits of content.

In my opinion there are only a few choices you can make with positioning. Whatever is going to look “the best” tends to change based on the needs of each project. My advice is to check out other similar examples of websites that you enjoy. Find a site that looks great even if it doesn’t match the same category as your current project.

By studying what other designers have created you’ll be able to take control of your own work. Combining ideas and restructuring them with your own twist is how you should birth great design. Learn from the work that inspires you and only take away what’s valuable to the current project – everything else is a distraction.

Headings & Heroes

In the past I’ve written on the subject of large header images for design inspiration. This trend has been around for years but has only recently entered the forefront of popularity. Now that more designers recognize the significance of photography it’s become a serious talking point. But I consider some of the most flattering usage to be within headers and hero banners.

Put simply, a hero image is a large-scale photograph or illustration often placed somewhere near the header. This is meant to convey a direct sense of information to the visitor about the website, its purpose, and even subtext behind the content. Responsive image techniques allow hero images to scale nicely on all browsers and screen sizes.

So how could you incorporate large header images into your own work? First I think it’s important to recognize the types of websites that benefit from this style. Creative agencies and freelancers often use custom photographs to display a sense of personalization. eCommerce websites incorporate product displays into hero images to entice visitors to check out their stuff.

Heroes and large headings should primarily be used to expand upon existing content. If a website’s page layout is confusing you might use image(s) to explain things further. It never hurts to spend time contemplating the options before deciding on a final photograph.

Finding the Right Sources

If possible I would highly recommend taking photos yourself. Quality will be much more specific and this process can be quite relieving. Unfortunately this requires a pretty nice camera, some photography skills, and a direct connection to the client’s business or location.

Learning how to snap a photo is all about practice – just like digital design or development. Once you get the hang of it photography can be a lot of fun! But I do understand that it’s not for everyone, so there are a few alternatives.

First you could hire a professional photographer to snap photos of the business, office, or person. Every site is built around something whether it’s a piece of software or a company. Photos enhance content visually and provide a deeper story to the visitor. I would always recommend getting custom photos above anything else.

If you can’t take the photos yourself and can’t shell out for a photographer, the last option would be acquiring stock photography. But nothing steams me like a vegetable more than puerile stock photos of models in a staged room smiling as if they’re on ecstasy. Avoid cheesy stock photos like the plague. Instead, opt for professional-looking stock photographs that relate to the website’s content.

If I had to offer a recommendation for good free stock photography my first suggestion would be Pexels. The website is simply a phenomenal resource for anyone who needs some free photos. Everything is released under a Creative Commons zero license which means it’s completely free on all project work.

The search form works great so you should be able to find relatable high-quality photos. Other sites I might suggest are Gratisography or Unsplash. Both are a little difficult to navigate and I prefer Pexels. But they’re all great and worthy of a bookmark.

Photos & Photo Editing

Anyone who wants to actually learn photography should just go out and start. There’s no harm starting with a little point-and-shoot camera because you’ll learn a lot about composition and framing. But once you achieve some confidence it would really be a good idea to pick up a cheap DSLR.

Acquiring the ability to snap photos is just one serious addition to your toolbelt. The length of time required to achieve some basic proficiency doesn’t take as long as you might think – and it’s completely worth the effort.

Beyond just practicing photography it also helps to study Photoshop. It is the most powerful photo editing suite on the market and you can build almost anything imaginable with the right knowledge. A good place to start is learning how to render out elements from their background. This comes in handy when you need a person or object fitted into a website layout.

Just recently I published a Photoshop pen tool tutorial covering the basics of this rendering method. The pen tool is just one example of a dozen various techniques worth learning. Even if you don’t want to handle an expensive camera and snap photos of bar stools, you should still be able to edit those photos so they blends nicely into a website.

Closing

Don’t be too pensive during the design process. It’s more useful to get out of your head and just do something. Try using 15 different photos to see which ones you can blend seamlessly into a website. Or go through some Photoshop tutorials to learn new photo editing techniques. There is always more to learn and if you just keep practicing then great things will eventually happen.