The relationship between a client and a website designer is one of the most celebrated things on the Internet. You can find numerous posts describing the designers’ agony. BoredPanda has a collection of such posts where clients’ unique demands are converted into epic posters.
Choosing correct visuals for your website is a job best left to the professionals. While it’s important that you take all efforts to describe your brand identity and set guidelines in advance, micro-managing is unlikely to produce any great results.
On the other hand, if you constantly need to update your website, you might want to do it in-house. In this article, we will discuss how to choose great visuals while building your website.
It is well known that a picture can depict a lot more in an instant than a thousand words. Images are the best medium to convey messages on the Internet where people have developed a habit of skimming through the pages. However, if your website was developed using a template long ago, then it is likely that it will give you less freedom to use large sized images. In those days, website design had to face a constraint of lower bandwidth, which restricted template designers to include large images. Further, these older websites also look weird on smartphones. In such cases, making your website appear more contemporary will require re-investment in development as changing images won’t make a huge difference.
Identifying your brand’s personality
Once you have made sure that the website is mobile friendly (responsive), you can get down to the real task of choosing the correct visuals. The first major exercise comes down to identifying your brand’s personality – is it playful or mindful. In his famous Ted talk, Morgan Spurlock has explained these two major personality types with examples. You can watch the video here.
A website like Colorlib has not hang-ups or misconceived notions about the image it wants to present to the outside world. It offers WordPress themes and wants to focus on the themes and nothing else. Therefore, the website is clean, with the core focus on theme images.
On the other hand, playful brands are those who have a friendly approach to their marketing, website copy and advertisements. The use of flashy bright colors, unconventional fonts, slangs, and smileys are commonly seen throughout their website design. On the other hand, Mindful brands adopt a more sophisticated approach, examples are banking & insurance websites, e-learning portals etc. The exercise of identifying your brand personality will help you narrow down your focus to a certain set of images/visuals. This is critical for maintaining coherence.
Photos vs. Vector Icons vs. Illustration
You might have to select all three for your website. There is no rule, but maintain consistency in selecting illustrations. Take into account the color palate of your website in the selection of your images. Further, sometimes you will not get good quality stock images for your website offering. This is especially a challenge for those in the ‘services’ domain. In such cases designing a banner using vector icons can offer a way forward. In any case, avoid using boring stock images.
How to choose interesting images
Consider the following hypothetical headline for a mobile application development company.
Mobile Application Development
Develop Apps that Score High on Customer Experience
Here is what you will get from searching the keyword “Mobile Application Development”
Image via: Pexels
Image via: Pixabay
If you go a step further and search the term “Customer Experience”, you will again get a whole range of boring images:
Image via: Wikimedia
However, there is an alternative approach to finding the image. Think about what the writer has tried to convey in the sub-headline – Develop Apps that Score High on Customer Experience. If it comes down to “Experience” – think about the extremes – happiness, enjoyment. Doesn’t the thought of a theme park come to your mind? What about a roller-coaster ride?
It is important to note here that searching the exact keywords will most likely give you unimpressive images. On the other hand, by using a little imagination and searching for the central thought, you can come up with unique and catchy images for your website.
There is yet another tactic used by News Websites, which you can also use in your website banners and blog images. Here are some examples found on Business Insider:
In the above examples, at one glance you will observe that the news headlines have little or no relation to the images. However, observing closely you will find that the images are linked with the central word (if not the idea) in the headlines:
The “chaos” is represented by a Formula that 1 car amidst a crash
“worrying” is shown by a worried guy holding a phone receiver (as if receiving a shocking news from the other side)
“Splitting” of stocks is represented by a figure skating performer doing a split
In this way, Business Insider constantly gets a higher number of clicks on its Finance related news articles, which otherwise don’t get any attention from the majority. By using tangentially related images for your website banners and blogs, you can also improve engagement on your website pages.
‘About Us’ and ‘Contact Us’ Sections
These are the sections where choosing stock images will not help. You need to invest in a photo shoot to get good quality images of your office and staff. These images are essential to creating a connect with your customers. By introducing them to the people and the workplaces supporting your organization you will make them feel welcome, a task unlikely to be accomplished by use of stock images. If you are not hiring a photographer, take help from some of you friends who have a photography experience. While lighting equipment might not be required, knowledge of the three-point lighting system is essential for every photographer. You can check out numerous blogs and videos on the same as this will help you in your photo-shoots.
The Human Connect
As discussed above – human connect is likely to help you throughout your website. You can use quotations from your CEO and Customer Testimonials throughout your website. Here is an example from IBM Design:
Another one from IBM Design Careers Section:
In photography, looking room refers to the space between the subject and the edge of the screen. For better aesthetics, photographers tend to keep a larger space ahead of a person’s gaze or object orientation. You can use this looking space for better attention to your website CTAs and copy. See the example below:
By using the above basic tips you can bring in a huge difference to the selection of images for your website. For more design related inputs, you can perhaps start following thought leaders like Guy Kawasaki. Design is large space…happy exploring!