A considerable part of any website's success comes from picking up the right images and visuals to use. In this article, we will talk about which image should pick the right one for your website. A website comes down to having some texts and images to tell some story, experience, sell, teach, and convey some message.
You have to decide which style you're going to use on which kind of image genre, whether it is photography and Illustration. Understanding which genre you're going to be working.
You should know how to pick the right image within this genre.
You should know how to use it correctly inside the website in terms of layout. You should know how to compose the image and the text together.
The first step is the Genre. I have a board where I'm collecting some examples of websites that I like, and I break them down into styles. Some of the types are photography, which is very common, having some images from a camera, laying them out next to some text or using them in the background, or using some video, but this is real-life photography. Then another style would have some illustrations, whether they are kind of like vector-based computer-generated Illustrator. That looks more like a little bit of a hand made Illustration. Choosing the different types conveys a little bit of a different feel and a message to it. We have some 3d renderings, which allows for other possibilities and has a different feel.
You also collect and categorize the types of visuals that you live. It is useful at a later point to communicate with your clients or just having something to pick from when you're starting a project.
Picking the right style
So you look at these different genres, how do you know which one is the right one for you. So each one of these categories has a different feel to it. Photography is very realistic to see, and we as people connect when we see people's faces in real scenarios. So this grounds you up in reality if you want to show a product of how it looks. Suppose you're going to establish a person if you're going to tell some real story. Often, we're going to be using photography because that's ground us in reality. Using Illustration is a broad kind of genre that has a lot of subgenres within it. But that allows you to go into a more of an abstract type of place.
You can see some machine or some process that you couldn't show in one image here.
Having an illustration that kind of creates a metaphor for this. It allows us to tell a more complex story within one visual. So I would say that using Illustration is a lot of times appropriate for telling stories. You need to have a little bit of more complex information, and you want to use some metaphor. That's also Illustration and 3d are not that different in the sense that you know you can tell abstract stories. The thing about 3ds that it combines the reality of real-world rendering. So, in this case, you can see the type of a card or a phone that looks like they could have been from real life.
But you can put them in scenarios you can make them and turn them into something that you couldn't have done in real life.
The first kind of step is to think about which one should be appropriate in my case. And that depends on the subject matter or the brand that you're working on. It is something that is grounded in reality. That you need to show something or is it a little bit more complex than you would need to use some metaphor to tell that story.
Picking the right image within a style
Now let's say that you have decided to say you have decided on photography where photography is such a broad thing. How can you understand that you're using the right image?
First of all, let's talk about where do you go ahead and get those images. There are two steps here. One, you're going to go ahead and create those images yourself. Second, you can buy them from you know places that sell these types of images. Whether you should make it or buy it is usually a lot of times that comes down to budget. If you have many funds, the ideal thing would be to create a unique visual that only your website has it places you in a unique place. Because when you usually buy an asset online, many people have probably also bought it, and it kind of puts you into a place that your website might look like somebody else's website, and you usually don't want to be there, but again it comes down to budget.
When you're creating it, there are two options here. Either you do it yourself, or you hire as a professional to do it. Many different skills come down here, photography, Illustration, or 3d rendering. There's a lot of skills in general. I want to promote kind of the full stack designer mentality. If you learn as many skills as you can bring a lot of value, I like photography. So I've developed that photography, so when it comes down to building websites or a lot of time, I can take the photos myself. But when it comes down to 3d. Even though I'm really into 3d, I never took the time to develop that seal myself. So at this point, I have to hire other experts that can do that for me. However, if you have the time and willingness to build up those kinds of visual creating skills, it will be super useful whether you like Illustration or develop some 3d skills. I recommend that you familiarize yourself with these kinds of you know skills so that maybe you can create them yourself. So either you make them or hire somebody else to create them, that's in the case where you have a budget. If you have fewer accounts, usually go ahead and buy from kind of stock photography website.
The one that I usually use for most things it's called Shutterstock.
You either buy credits or subscriptions. Then you can download images, and you can see they have both images. They also have vectors here, so if I'm going to write something like a dog.
You can see that we can have things coming up that our photography but also Illustration. You can get images in a very relatively cheap place. Because you can buy an image between I think one to five dollars and then you can work with them. Even if you're working from here, you still need to think about how I pick the right image. There's a variety of quality.
I also want to show another resource called Pexels.
This is a scraper that brings images from free sources. If you would look for dogs here, these are free images that you can use.
It's a little bit more limited, but it's free, so if you're working on open projects. For example, I would check out Pexels to grab free images from here.
Putting images in context
When you're picking out the right image, you already need to consider a bit of how I'm going to use it right a lot of times. We need to use it in a context where there will be text somewhere next to it.
Let me jump here into Photoshop, for example. I want to show you how these images would come to be. Suppose we would use them on a dog-related website. Let's imagine that this is a website, and I want to put the images here, in some layout like this full screen. We also need to have some titles. Let's say, "we save dogs for a living." Let's say that this is some website for a nonprofit that saves dogs. You're going to have this title of text somewhere.
The photo from above is we can have this kind of layout. Where we have here a lot of space which is blurry. Now we have a little bit of space on the top that we can place the text from above. It looks a little bit better. So this is an image where we can work.
My takeaways from this example for you would be to think about how an image. Ensure that the image is high quality and that some layout within the image the subject is clear. You have space where you might need to position your text, make sure that there is a space, make sure that there is a contrast in the background, and simplify. There are not many details in this image where there's just so many details that you can't focus on anything. Those are some tips about picking up the right image and then using it in the context of a website. I recommend you as a first step to try to collect yourself familiarize yourself with different styles. Pick up references that you like. You can go on on websites like awwwards. or Lapa ninja, where they're showing beautiful website examples. Start to collect and familiarize yourself with the different styles. Try to find examples of "This image as the right image within that style." or "This image will be hard to work." This is a basic idea of how we're going to work with images.