Web & App Development

How To Effectively Put Photos in Your Website Design

Web designers know the importance of using great images alongside strong layouts and design elements to engage users, but how can you make sure that you choose the right images for each project, and where to keep that images go with a perfection!

These are the best and creative web designing companies having the awesome images and deep effects of it in their websites as followed under:

  • LAUREN WICKWARE
  • SIGNES DU QUOTIDIEN
  • HABIB FADEL
  • MELANIE F
  • SZTAFETA POKOLEN

01. Source the perfect hero image

As monitor displays get sharper and more high-res and broadband accelerates, the impact of a stunning large-format hero image at the heart of a landing page can’t be underestimated.

Selection of this all-important asset is absolutely crucial, as it can make or break a user’s emotional connection with the brand. Make sure it bears strong relevance to the actual subject matter wherever possible. If you don’t have the time or budget to art direct something bespoke, fear not – provided the brief is suitable, quality stock imagery can actually be ideal for this purpose.

Effectively Put Photos in Your Website Design

Avoid clichés like the plague, however. You need to build an association with the individual brand in question, and an image that feels too generic or ‘bought in’ will detach users from the experience and undermine the site’s authenticity. The hero image fills the homepage with a mouth-watering extreme close-up of the nuts in question. Sure, it looks like a commissioned shoot, but a carefully sourced, quality stock image could be just as effective for a similar purpose.

Also read: 11 Best Web Design Tips for a Faster Website

02. Consider different crop sizes and ratios

Once you’ve selected the right images, cropping them is a design skill in itself. Care should be taken to draw the user’s attention to the main focus of the image, without leaving too much unnecessary dead space.

It’s a careful balancing act, however. Fully-responsive websites can play havoc with images if they’re not properly planned to cater to different screen formats and aspect ratios, shifting that focus in unexpected ways when viewed on mobile or tablet, for instance.

03. Curate assets to populate an online shop

While the first two examples could easily make use of stock imagery, when it comes to E-COMMERCE, assets will often need to be bespoke – and usually supplied by the client, although any chance you can get to input into the art direction is worthwhile.

The very best storefronts feature studio-shot photography, where lighting, size and angle can be kept consistent, and products can be shown from multiple angles, as well as zoomed-in with macro detail shots where appropriate. Avoid inflated file-sizes for each image, however, to keep the page’s load-time down.

Also read: 5 Best Practices For Website Design And Development

Wallet brand BELLROY is a great example, using a selection of eight shots of the product from different angles, showing off particular details, with a final ‘hero’ shot demonstrating at a glance what you can fit inside it.

All of this presumes the website you’re building is selling the client’s own range, of course. If the online shop you’re building is populated with third-party items, you’ll need to source the best imagery you can with the above criteria in mind.

04. Choose images for UI elements and icons

Stock vector graphics can make excellent sources of UI elements and icons for app and website design, especially if you tweak and customize them in ADOBE ILLUSTRATOR to suit the look and feel of the individual site.

While using stock photography is all about striving for originality and unique relevance to the brand you’re designing for – avoiding cliches – icons are to some extent the polar opposite. In order to keep the user experience smooth, inbuilt visual associations with particular symbols can be used to your advantage.

If the function communicated by the icon is immediately clear, you can keep the UI clean and simple without the need for text labels. These are known as universal icons and include, for instance, a house for the ‘home’ button, a magnifying glass to search, and a shopping cart.

Relatively few universal icons exist, unfortunately. Some familiar images have different meanings depending on the context, such as the widely-used heart and star symbols – and are therefore known as conflicting icons. Choose carefully, and add text labels where necessary for smoother UX.

05. Find contextual editorial images for pages

Depending on the website you’re creating, images may be required to illustrate particular sub-pages, or stories, or blog posts – although the latter will likely be the client’s responsibility once you’ve handed them the keys to the CMS.

Again, selecting the right visuals for the job is all about context. Bespoke imagery, when you have it in the right quantity and quality, is ideal – but again stock images may be necessary. As with your hero image, however, always consider their appropriateness for the subject matter.

A classic example where shooting bespoke imagery would be prohibitively expensive and time-consuming is a website that uses travel images of particular locations, such as social travel platform TRIPOTO.

Popular travel destinations will have been captured countless times in stock image libraries, but if you need a whole batch of them, take the time to research a selection with a similar mood or style of art direction to ensure as much consistency as possible in the design.

| About the Guest Author:

Guest Author

Hermit Chawla is a Marketing Manager at Sprak Design. He would love to share thoughts on Website design services, Lifestyle Design, Branding Firm, Exhibition design, etc.

Leave a Reply

1 − 1 =