Web Design Trends 2016: 7 Ways to Use HD Photography

Not only does the art of photography itself go through trends every few years, how it’s applied to web design also changes with tastes. Lately, photography has been playing bigger and bigger roles on the internet, furthering web design as a visual and artistic medium.

We’ve isolated the 7 most popular and most useful trends for web photography, and explain them below.

Photo credit: http://wedgeandlever.com/

1. Hero

Full-screen images, usually with a hero header, are a big trend in 2015, and they don’t appear to be leaving anytime soon. As described in the free e-book Web Design Trends 2015 & 2016, they create an immersive experience right away, then guide the eyes to the hero header and/or call-to-action.

Photo credit: http://www.cookiesound.com/

Above, Cookiesound, speaks volumes with a single photo. Rustic nature, snow-capped mountains, and of course the long open road: these are all images — and feelings — a travel blog wants to convey.

2. Objects in a Natural Environment

A popular strategy for ecommerce sites, showing objects in context is a proven sales strategy, considering that such photos boost conversion rates. The ones that do it best give the image an artistic twist, like an extreme closeup or alternative angle — head-on shots can feel contrived.

Photo credit: https://edwin-europe.com/

Clothing brand Edwin avoids the cliché of smiling children modeling clothes and goes for a more realistic and artistic photo to showcase their products. The hero background shows the shirt in a possible real-life situation, a child playing baseball. With the shirt large in the foreground and no head to distract from it (faces are natural attention grabbers), the product is displayed creatively and efficiently.

3. Black and White

Black-and-white photographs are the shortcut to professionalism and sophistication. If that’s what your site is going for, the classic aesthetic is always a safe bet. To see what we mean, check out designer Chris Spooner’s gallery of 20 black-and-white sites.

Photo credit: http://goltzgroup.com/

The site for Goltz Group combines the first two strategies we described with black and white to create an air of refinement. We can also see another latent advantage of black-and-white photos: they accent any color near them. This makes smaller call-to-actions or other colored elements far more noticeable.

4. Color Overlays

Color overlays modify images to suit more specific goals such as brand identity (using the brand’s characteristic color) or emotional response (for instance, a red overlay might give an otherwise calm photo a sense of urgency). While they do require a bit of editing, there are tutorials for creating them in CSS or in Photoshop.

Somewhat 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, i.e., the right contrasting pairs. For more on the emotional responses of individual colors and how to find a color’s natural contrast, check out Color Theory in Web UI Design.

Photo credit: http://www.knucklesindustries.com/

The tinted background of the site for Knuckles Industries creates a unique visual hierarchy that highlights the heading text and top navigational menu, despite the attention-grabbing image. The overlay also creates the perfect vintage atmosphere for a company that prides itself on all-American workmanship and industrial skills.

Grab design ebooks created by best designers

All for free

Download Download Download DownloadDo you want to know more about UI Design?

Download 'Flat Design Trends 2016' FOR FREE!

Download e-book for freeClose
5. Multiple Smaller Images

Perhaps as a backlash to the hero image trend (though not nearly as prevalent), or perhaps to coincide with the popularity of cards, smaller photos are gaining steam as a web trend in the near future. To state the obvious, smaller images allow sites to showcase more content on the screen.

In order to make the most out of this trend, we usually see it paired with card-style collages or carousels.

Photo credit: http://theportraitmachine.co.uk/

The Portrait Machine — an event portrait artist for-hire — uses a slider of smaller images to illustrate what she brings to an event by showing context (another trend we explained above). Because her service is a bit experimental, she needs to display more than one image to clearly show why people should hire her.

6. Photo Manipulation

The availability of better photo-editing equipment naturally means better photo manipulation. While techniques like color overlays are still pretty basic, more complex trends will become more common as more people figure out how to use these programs.

Photo manipulation can also do wonders in personalizing stock photos while minimizing costs.

Photo credit: https://beth-emily.com/

Beth-Emily doesn’t let minimalism stop her creative photo manipulation. Some of the graphics behind the shelf have been fabricated to add a little something extra to the image.

7. Paired with Custom Typography

Typography, like photography, enhances and even single-handedly creates your brand’s personality. A classic design technique is combining a well-chosen photograph with stylized typography. The style or message of the text influences how the user interprets the photo, and vice-versa.

Photo credit: http://metaversemodsquad.com/

Just look at Metaverse Mod Squad — the immediate image communicates so much about the brand’s personality. The faux-sloppy painted font draws out the rebelliousness of the scooter gang, while the photo ensures the right interpretation of the typography.

Conclusion

A lot of the strategy in using web photography has to do with the art of photography itself. Aspects like composition, color, focus, etc. are still important in web photography, if not more-so, considering that web photography serves more goals than simply artistic value.

To start creating visually stunning mockups and prototypes without code, feel free to start a free trial in UXPin. The collaborative design app comes loaded with 1000+ popular elements and dozens of UI libraries to speed up the high-definition design process.

Reimagining the way you design.A new version of UXPin is coming.Sign up for a trial and be the first to know about the new UXPin.Your e-mailGet free trial now!

The post Web Design Trends 2016: 7 Ways to Use HD Photography appeared first on Studio by UXPin.