How to use and combine images in your webdesign

Using images in your webdesign can be really hard. Because beginners often face the problem that the images actually makes their design looks worse than without an image, but they don’tknow why this actually happens. Or maybe you have to use two or three images on the same page, but only one images actually fits the design, and the others don’t seem to fit where they are right now. How do you solve and handle this?

There are a couple of ways you can make sure your images fit your design or how you can make sure image 1 fits image 2 and 3. Those are color, zoom-level, cropping and scene. There might be more but those are really important, and I’ll explain them to  you below.

Color

If we look at the example below, the image fits the design really well. But why?  It’s a really calm and not too busy image, so the focus is still on the content and buttons instead of the image. The bottom is a plain green area, and the top is light gray/light blue/white, which often works better compared to a really detailed and busy image (not always though). But we are talking about colors, and the colors really fit the design. But they don’t use green in the design, is what you might think? That is true, but they only used one color in their design, which is red. Let’s just say black and white are no colors for now. So all you have to do is find a color that fits red, well, green is a complementary color to red, so it works really well.You might have chosen a different tone of red in this image too, but that would have conveyed the wrong effect they wanted here. The website is obvious about driving safe, and green goes well with that subject.

 

This is also why black and white images almost always work well in a design, because they don’t contain any color and black and white goes well with everything. But it often causes another feeling/effect than you actually want to convey from your user. Think about Coca Cola, they obvious should not use black and white images in their design, because they want to create a happy feeling with their products, and certain colors surely make sure that will happen, black and white don’t of course.

You can read more about combining colors here: https://deesignre.com/how-to-choose-colors/

Zoom-level/cropping

If you have two images of two different people. You want them to fit together. If one picture is full body, and the other is shot from the shoulders to a little above the head, it might look a little weird. It will look way better if every other aspect we’ve discussed or going to discuss is used well. But overall it will look better if the zoom-level is the same. If you see an example where this is not the case, it’s probably because something else is compensating for it.  They could have done this by using the correct colors.

Scene

One last and very important thing which should not be forgotten while designing and while combining images, is that images should look like they were shot in the same place/scene. If you take a picture, and split it into two pictures, they look great together. Why? Same colors, same zoom level perhaps, and same lighting. Which makes complete sense of course because it’s actually the same picture. Take a look at the example below:

    

You can tell it’s indeed from the same picture, but if two different pictures are not from the same photo, you should make sure it will look like if it they actually are, by using Photoshop for example. Again, it might still look good without paying attention to this aspect, but we have gone over other aspects too, and if they are fulfilled, like using the right color and cropping-size, not paying attention to the “scene”, will not per se cause a terrible result. The same goes for other points we’ve gone over. So always try to fulfill the most aspects of a good combination. Sometimes you are unable to fulfill one aspect, for example the zoom level, compensate this.

 

Conclusion

So those are the beginner steps of combining images and have a good looking result in the end. If you have a design and but the images actually don’t look together, let me know and I will help you.

Examples

I also made a blog post with websites using at least 3 different images, good if you want some examples of what we’ve just gone over: https://deesignre.com/weekly-webdesign-inspiration-2-images/