A picture is worth a thousand words
The visuals featured on your service website play a big role in how visitors perceive your brand and how they connect with it
As highlighted in this previous post, most website owners don’t give this topic a lot of thought and pick generic, low quality images that vaguely relate with the message they are trying to convey to their audience.
On top of having a website looking unprofessional, unoriginal and (worse of all in today’s world) boring, they are also missing a great opportunity to create an immediate emotional connection with their visitors (last cognitive studies show that humans tend to make decisions based on emotions and rationalize them a posteriori with logic and fact)
By taking the time to choose high-quality, visually interesting visuals that accurately represent your brand, you can easily improve your website's perception and ultimately drive more business.
Follow the guide…
Choosing the style
| Photographs
The most common types of visuals you can use to add a personality and some human touch to your service website as long as you follow these rules:
Avoid generic stock photos database & “cliche”
Using these images is the fastest way to tell your visitors you don’t care enough to give them a good & unique navigation experience. My personal blacklist: people shaking hands (often featured on contact page), writing on a board / notebook, holding signs…
Pick images that enhance your message and fit your brand visually
Let me illustrate this with 2 examples
One of my client, Origeen Investissements is a wealth management company: they accompany their clients to build their future through investments with a long term vision. To describe their activity, they use words like “foundations”, “building, “structure”, “future”, “stable”, “regulations” that are borrowed from architecture. When you know that they are based in Paris, it makes sense that we used images of Paris historical buildings to create a unique look & feel for their website
Second example is this website: you may have notice on the home page this photo:
I have picked it carefully with for this reason: my mission as a Web designer is to help your service company to stand out from your competition, in other words to take you from the “shadows” to the “shining light” *. That implies a transformation and that can be scary
According to Wikipedia, the number 11:11 is associated with chance and coincidence. Others believe that it is a signal from your angels, as they're letting you know they're close by. However, in other cases, 11:11 is seen as a new beginning or that you are on the right path going in the right direction. That you reach this image as you scroll is a way to tell you that you are on the right track!
Finding great images doesn’t have to be costly
Here are some of favorite designer resources where you can find great pictures (free to use as long as you credit the author):
Create your own to be unique
If you have the budget, you can also work with a photographer to produce unique images for you website, like Confluences did: all the images on their website are of real people in their team, and real places (office, co-working space, garden). In particular, the team gallery images have been taken in their garden
These visuals create a look & feel that is really unique and part of their trademark, and they don’t have to worry about copyright
| Illustrations
Photographs are very powerful but they are not ideal to convey complex messages and explain things in an explicit matters.
For these situations, you can think about using illustrations (as long as it matches with your branding) to:
Explain how your product works
For example, a software company can use a set of illustrations to explain all the steps to sign up and use their product, an e-commerce can use illustrations to showcase their product customization options..
Give a fun & engaging vibe
Education companies often use illustration to gamify their products and create retention and make learning fun
Illustrate complex concepts
Very useful for service companies: illustrations can be used to illustrate complex concepts like moral values (trust, caring, respect…) that are hard to capture with an image
Comfort, reinsure, tune down anxiety
Illustrations are lighter than images. Medical companies will rather use an illustration than real images to explain a disease. So will insurances companies
For inspiration, here are some examples of famous companies that uses illustrations (I am personally a big fan of Dropbox visual universe):
Dropbox uses illustrations to represent the different features and benefits of their service. They use simple, clean illustrations to create a modern and professional look on their website.
Mailchimp uses illustrations to create a fun and playful feel on their website. They use custom illustrations to represent different aspects of their service, such as the different types of email campaigns you can create.
Duolingo uses illustrations to create a fun and engaging feel on their website. They use custom illustrations to represent different aspects of their language learning service, such as the different languages you can learn.
Slack uses illustrations to create a modern and professional look on their website. They use simple, clean illustrations to represent the different features and benefits of their service.
Spotify uses illustrations to create a unique and engaging feel on their website. They use custom illustrations to represent different aspects of their music streaming service, such as different genres of music.
| Animations
Animations are especially great to:
- Grab attention
- Create a sense of interactivity & immersion
- Explain complex concepts (step by step guide)
- Simplify understanding (information is delivered little by little)
- Give a personal touch
Lottie is the largest platform for animations ready to be integrated in Websites & apps. It is the place to start looking for lightweight animations
Giphy is also a popular choices to find animated gifs (lightweight animations)
Here are some examples of companies using animations:
Google Design's website uses animations to showcase their design principles and to create a sense of interactivity. They use animations to demonstrate the different aspects of their design process and to create a sense of movement and energy on their website.
Dropbox's website uses animations to represent the different features and benefits of their service. They use simple, clean animations to create a modern and professional look on their website.
Airbnb's website uses animations to create a sense of movement and energy on their website. They use animations to showcase different aspects of their service, such as the different types of accommodation they offer.
Behance's website uses animations to showcase their portfolio of creative work. They use animations to create a sense of movement and energy on their website and to create a sense of interactivity on their website.
UpLabs's website uses animations to showcase their collection of design resources, they use animations to create a sense of movement and energy on their website and to create a sense of interactivity on their website.
These are just a few examples, there are many other websites that use animations to create an engaging and dynamic experience for visitors.
| Videos
Using videos on your website can be a powerful tool for engaging visitors and conveying information. Here are some situations when it's recommended to use a video on your website:
Tell stories
Videos can be used to tell a story about your company, your products or services, or your customers. They can be used to create an emotional connection with visitors and to build trust and credibility.
Videos of customers testimonials are particularly impacting as they allow visitor to see real people talking about you and your services
Give Instructions or tutorials
Videos can be used to provide instructions or tutorials on how to use a product or service. They can be used to make complex information more accessible and easier to understand.
Inform
Videos can be used to increase conversions by providing visitors with more information about your products or services and by creating a more engaging and interactive experience.
Boost your SEO
Videos can be used to improve SEO by increasing the time visitors spend on your website and by encouraging them to share the video on social media.
Create an emotional connection
Videos can be used to create an emotional connection with visitors by telling a story or showcasing the human side of your business , especially when they feature the people behind the company, the working environment, the culture and the values
Here is an example of a recruitment website with Video I created for one of my client in the software industry
Background video: a special case
It is a short video loop (10 sec max) playing automatically in the background (in mute) to create an ambiance and set a mood. In this great example from an architecture firm, the leafs moving in the wind create peace and serenity
Constraints with Videos
Using videos also come with limitations:
- Larger file size that can slow down the site
- Browser compatibility - Videos can have different formats, some not supported by the browsers (ever heard of the .ogg video format?)
- Sound & Autoplay - can be disruptive to visitors, especially if they're viewing your website in a public place or at work.
- Accessibility - Videos can be difficult for some visitors to access, such as those with visual or auditory impairments
Integrating visuals in a website layout
Now that you know of the most common styles, you need to learn how to use them efficiently in your website layout
| Hero images
In Web design, the hero image is the first thing you see when you land on a site. In other words, that is what your visitors will based their first impression on
It takes just 50 ms for users to form an option about a website. To put this into context, an average human blink takes about 100-400 ms
You understand now why picking the right hero visual is crucial. Depending on your context, you can pick any of these strategies to choose here image for your service company website:
Emotion-focused hero image
Focus on amplifying an emotion that you want your visitor to feel. Maybe peace of mind like for this insurance company
Founder focused hero image
Works when the business and the founder are hard to dissociate and when the founder has some notoriety
Behind the scenes
Shows the making of the product. Works great with artisans & craftman
Marou is a chocolate maker in Vietnam tell their story and show visuals of their fabrications process
Action shot
Unique shots that capture user’s attention. Landrover Australia shows one of its vehicle crossing a river at full speed
Benefits focused
Illustrate the benefits for your users like having a beautiful skin for this company
Abstract
The image doesn’t have a special meaning but conveys a mood
Regardless the direction you choose, the image you pick should be:
- Visually Interesting / eye catching
- Aligned with your brand (values conveyed, feelings…)
- with a good composition : not to crowded with empty space for headings
- High quality, at least 1200 pixels wide and optimized for Web (< 100 Kb)
Bonus: here is a link to all the Hero Images I have used on this website
| Feature / Product images
These are smaller images that appear throughout a website, such as on blog posts or product pages. They should be at least 600 pixels wide and optimized for the web, with a file size of less than 100KB.
| Gallery
These are images that appear in a gallery or slideshow on a website. They should be at least 800 pixels wide and optimized for the web, with a file size of less than 100KB.
| Icons
These are small, simple graphics that are used to represent different concepts or actions. They should be at least 64 pixels wide and saved in a vector format (such as SVG) so that they can be resized without losing quality.
Not sure where your current website stands ? You can check this post to know if a redesign is in order for you service company website
