Trends in Modern Web Photography

Trends in Modern Web Photography

Lately, photography has been playing bigger and bigger roles on the internet, furthering web design as a visual medium. As stunning photography continues as a timeless technique, especially as HD screens become more affordable.

In this article, we’ll take a look at 6 most popular trends for web photography.

Eye-Catching Hero Images

Full-width above the scroll images are one of the most popular trends in website design. Their value lies in creating an immersive experience right away: since vision is the strongest human sense, HD hero images are one of the fastest ways to grab a user’s attention. They draw the user in immediately give users a sense of what to expect from the rest of the site.

An image is the first thing on a page that gets all user’s attention.
![](/content/images/2017/02/1-p1NrjkQz_bCT6ocVqtzd5Q.png)
Hero images are the perfect container for one bit of information.
**Tips:**
  • Use only HD images for the hero area. Nothing is worse than a large, low quality photo. The image is everything if you’re going to use this trend.
  • If you are planning to use a text-on-image design, ensure that the main part of the image is visible and understandable when text is placed.

Showing Objects in a Natural Environment

Showing objects in context is a popular strategy for ecommerce sites. It’s a proven fact that such photos boost conversion rates. For example, the GorillaPod shown below. The hero background shows the device in a possible real-life situation. With the tripod large in the focus and no head to distract from it, the product is displayed creatively and efficiently.

You can make your products come alive via excellent photography. Credits: joby
Juliana Bicycles is another site that uses a photo of the product in action. ![](/content/images/2017/02/1-rNRhGkxOYz9eL5SYUzqLXQ.png) #Black And White Photos Compared to colorful design where catchy colors help the design to stand out, in black and white designs the ability to stand out depends only on its *ability to communicate* rather than on its appealing visual presentation. Modern black and white photography at it’s best is art, and many photographers regard it as the purest form of photography. ![](/content/images/2017/02/1-GOS7DJ8b9LsZ0Fwu3V5EeQ.png)
Credits: switzerlandinc
But why does black and white photography command such acclaim?  >One reason is that color is a distraction

Color takes attention away from the visual building blocks of a the photo itself; and it also takes attention away from other important elements on the page such as CTA buttons.

Tip: If you have black and white photo as a background, you can use a bright color to drive user attention towards the CTAs. As you can see in example below, a black-and-white photo background amplifies colorful accents.

Color Overlays

Color overlay is a cover for the image with a semi-transparent colored box. This technique can modify images to suit more specific goals such as brand identity (using a brand’s color scheme) or emotional response (for instance, a sepia overlay might give a neutral photo a sense of old).

Color overlays enhance the impact of a photograph.
Similar to black and white backgrounds, color overlays can also intensify the power of colorful accents. However, this only works well if the colors are chosen correctly. ![](/content/images/2017/02/1-wH2cR4R3o5d_dvYiiCh8jQ.jpeg) **Tips:**
  • It’s fairly easy to add the effect for your image, here are tutorials for creating color overlay in Photoshop or CSS.
  • When using a single color as an overlay, think about the degree of transparency of the color. Heavier color combinations (less transparent) put more focus on the color itself than the image behind it. More subtle combinations put more focus on the image.

Photo Paired with Dramatic Typography

Custom typography can enhance your brand’s personality. When combined with custom photo, the effects can multiply. The style or message of the text influences how the user interprets the photo.

Mixing type and photos doesn’t have to be an uphill battle. Credit: Peugeot
![](/content/images/2017/02/1-2AXnSovCiTVa9LCGyUw72Q.png)
Text copy may be small in terms of word count, but has a powerful impact. This one is just fun. Credits: allbirds
**Tips:** 
  • Dramatic typography can act as a visual element in its own right, but it shouldn’t compete with images.
  • Because legibility may be an issue, try limiting the use of dramatic typography to big titles overlaid across images. And don’t forget to check color-contrast rate.
  • Dramatic doesn’t mean complex. Dramatic typography and simple typography are not mutually exclusive. If possible try to use simple typefaces, because they are easier to read and better for loading.

Asymmetrical Layouts

Asymmetrical layout is a popular choice among many web desiners. It helps designers create a visual flow that matches the user’s scanning patterns: this technique helps to direct the eye around the page in a smooth, logical way.

You can create asymmetry by shifting either text or visuals to a certain side of the page. While the composition may be the same, the visual weight is equal on both sides of the screen. For example, one large element balanced by several smaller elements. As you can see below, the large visual on the left is balanced by the copy and CTA button on the right.

Asymmetry works well as long as it’s visually balanced. Credits: nikoskoulis
#Conclusion Design trends keep on changing with time, but the basic idea of providing a pleasant user experience remains the same. As long as your photography are high quality, interesting to look at and works well with your content, they are a great option for you design.

Thank you!

Subscribe to Nick Babich

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe