Introduction – Why Making Images Match Your Website Colors Is Important
This seems to be one of the MOST overlooked topics on web design. This article is going to uncover 5 hidden secrets that you can use to make your images become part of a killer website design.
There are so many websites that have great potential but just get slaughtered by pictures that don’t belong there. Just using images with the right colors alone can make an ugly website into a beautiful one.
Here’s the reality: 80% of what makes a website look good is the pictures.
Take for example the following mockup of a carpet cleaning company:
Everything is the same aside from the pictures, but they are in completely different ballparks.
Pictures take up a huge portion of your website design. If you’re going for a good color scheme, your pictures MUST be part of that color scheme.
A Tip Before We Begin – Stock Images
Unless you hire a professional photographer, use stock Images. Any information telling you to not use stock images is complete nonsense.
There are times when you do need to use your own images, like a portfolio, but for most other scenarios, stock images are the way to go. You can find high-quality images that match your website colors much better than you can do yourself.
- Adobe Stock – Paid (By FAR the best way to go)
- Shutterstock – Paid
- Pexels – Free
- Pixabay – Free
- Unsplash – Free
1) Match the image color scheme to your website color scheme
A good way to make a design look great is to have the pictures closely match the website design. This is especially noticeable when the picture has the same accent color as the website.
The picture below is the Adobe XD file of the carpet cleaning company design. The colors on the left are the colors used throughout the website. I have removed the light blue overlay to better show the color matching.
in this example, we have a light picture with whites and silvers with accents of the blue and black, just as the website does.
You don’t have to match every picture exactly, but they should be close, considering the pictures take up a good portion of the website layout and color scheme.
This isn’t to say that you shouldn’t have images that aren’t in your color scheme, but it is good to follow this rule for the majority of your images that take up a lot of space. This will define your color scheme.
2) Edit Images To Include Accents
It is not realistic to make all of your images match your color scheme exactly, in which case it is helpful to include accents of your color.
For example, If you have an about section and want to put a picture of your employees on there, you could have them wear a shirt that matches your website. More realistically, if you’re using stock images, you should edit the photo to fit your design.
This is an example we used on our web design page:
The picture on the left would not fit with a dark blue color scheme. Although the color scheme doesn’t include skin color or the brown on his pants, the picture on the right still fits great after changing the color of the shirt to the same blue on the website.
3) Use Overlays
This is a very quick but effective way to make a photo fit your website. Although this doesn’t change the image color, it gives a hint of your website color.
Overlays are very useful when used on background images not just because it helps fit the website color scheme, but because it makes it easy to read text on top of it. There are many ways of doing this but an easy way to make all the background images match while being able to read text on them is to take the darkest (or one of the darkest) colors from your website color scheme and using that as the overlay.
4) Make Background Images Similar In Color
This is best done by using images that already have similar color profiles, and doing some edits in photoshop to nail them down. The background images are the most prominent on the website, and really define the color scheme. If you don’t have consistent colors here, your color scheme will not be consistent.
5) Use Similar lighting & Contrast
First, use high-quality images with good lighting & contrast. Dull images can quickly make a website look bad.
Second, If your website has matte colors, use matte colors in your images. you don’t want to have a vivid color in your image with a matte website. Make it fit the same lighting and contrast levels and you will have a much better fit.
This will apply more to your main content images and less to your background images. Your background images should be a closer match to your website color scheme while the foreground images can still look good with similar texture and hints of your color scheme.
Conclusion
There is no single way to make your website images look great and fit your design, but if you follow these tips, your website designs can quickly go from newbie to pro. Don’t be part of the majority and just slap any photo on your website that has some relevant content without considering the overall design.
If you found this article helpful, please help support us by liking our facebook page! Thanks 😀
