If used properly, the picture of the effect will be very good to play, it will aim to quickly convey information to the user. However, using the wrong picture will mislead the user, reducing the user’s experience. How do we choose the right pictures?
Web design use images
In website design, we will note its various aspects: details, color, typography, hierarchy, information architecture, etc., the picture should get as much attention, especially in terms of availability and all the user experience on your site aspects.
On the site of the photo processing depends on the designer to understand and use, so this article will point you in the right direction and tell you to take your picture before you choose to use images in your next Web project.
It should be noted when using the big picture
It will be based on past experience and expectations browsing screen. The most common is to start with the upper left corner of the user’s eye looks, of course, this also depends on the cultivation of personal reading mode. Then if you use a big picture on the page will immediately grab their attention and pull them away from their usual reading.
Pictures also need content
I’m sure when I tell you, the picture can be considered the content of the page, you will not debate with me, but when you do it yourself website, really is doing it? Did you just think of it as an additional part of the fill or good? Did you take into account all aspects of the content of this image? Before you use a picture that you have not properly evaluated this image? Have you considered the user’s mental model and the reaction when they see a picture of? The images provide valuable information to the user yet? On the user’s current task of help it? These are the questions before you are ready to use the picture on the page, you need to consider.
Pictures are not only used to “decorate” the page. I’ve seen a lot of designers just put a nice full-screen picture on the page, and then a loud shout slogans or appeal, which announced that it has completed. In many cases, the photos have not yet assessed the designer to do so just go with the flow. Let’s look at how to assess your photos before you use it on your website.
Choose the perfect photo
When you decide to use images in your design, you have a few things to consider. I assume you already know how to evaluate some of the basics of the picture, they are: the quality, size, composition and exposure. Resolution requirements in terms of quality, select the appropriate location cropped pictures, effectively cutting off the picture more attractive to the user’s attention, the picture must implied subject of the page.
Once this is done, the picture has already passed the basic test, we continue to explore the purpose of your use of this picture.
Mike – Parkinson once said: Our brain processing speed of the visual images 60,000 times faster than text.
It is useful to you?
All photos must be useful. Although the use of photographs as a placeholder for a page to add color or fill up some space, or do a web page background. But what is useful, beneficial, thought-provoking picture is need our special attention. Useful photos should
help us to better understand some of the things
Teach us how to use something
Tell us how these things are done
Regarding how to choose a web design useful picture, there is a nice example.
As can be seen, this image is the result of a professional picture taken (see the hands and nails). The most important is that it directly demonstrates how the product is easy to use. It is a very useful and educational picture.
There are similar following this site.
With the above example, this picture shows what it is the product (pen), and where and how to use (iPad applications).
Full use of the photos to explain the product. Obviously, their products are used to enhance the performance of your Mac, the picture at the same time showing the convenient USB interface.
Showcase their products in a full-screen set background image. It is obvious that the products they produce high-end wooden office supplies. Image useful, particularly attractive. Through the pictures we were soon infected by their atmosphere.
By the above example, you will find all the photos express the intention is clear, is not self-evident, they convey the purpose of the message is also very good. You do not need to see the contents of those long product / service / website presentation. This is a useful picture in web design with the characteristics.
It is valid?
It is a valid photo transmission of information to the user, to stimulate some kind of user behavior. A good, effective product photos can encourage users to buy these products. Our earlier example of the pictures are effective because they see a picture of my door would want to buy his house products impulses. When we see the picture, this can trigger our behavior can say that it is a valid image.
Cherry red headphones are not particularly attractive, hurry to buy it now!
The company is known for its innovative doctrine, but also requires them to do everything perfect. This product as we can see from the iPhone landing page, look beautiful, simple and elegant desktop, giving the user a feeling that you deserve to have it.
We want to cite another example Tsptr website.
Please note that the photos man eyes looking down, here are things you need to explore it? The answer is Yes! Pull down the page there is a surprise. (Official website has changed, but still can see)
This service is not only the site with pictures convey the emotion, but also very clever sight direction by the figure figures to guide the user to see the focus of the page – the download link on the left.
POCO People The website design is very interesting, it makes full use of color, lighting as well as display the entire page in the article, when you point the mouse to every text area, the figure corresponding items will shine, these interesting design can stimulate the user to look at this site to think what to do in the end.
Sites on the web using a large picture to show the contents of their work (see his hand paint murals and wall), and how they do these things (look to the right of the man). The most interesting is the photo on the left passing pedestrians. They look very excited, they, as the audience is witnessing this beautiful mural to complete the process, which makes the whole picture becomes very attractive and more effectively convey information to the user.
It is emational?
An emotional photograph should be able to drive the user’s mood. It is, or beautiful, or calm, or disturbing, or funny, entertaining, or attractive and so on. Either way, as long as we can in some way and achieve resonance emotional appeal, it will give us very big shocking.
Characteristics of the site, the site is a study for the Federal Emergency Management Agency and disaster management case. There main map, plus a charismatic slogan can be very effective in conveying the full richness of emotion. It tells a story, although we were not there, but it can feel dangerous, like the ground.
Site main figure is very quiet. Its slogan is very well written, the figure that woman eyes closed, enjoying the gentle breathing, note: Here are the button, “breathing.” Such sites are not very able to drive the user’s mood?
This site focuses on the main map of a great story, the protagonist is Sean Groves. It conveys happiness, trust, hope, friendship and look forward to, no matter who see this chart, it would have touched it.
This site focuses on practical, can be seen from the face of the woman’s expression of joy on the left and right, they love their work, and all the food is natural, the woman’s facial expressions are natural, and the food is a natural i.e. natural consistent.
There are seven (or eight) basic emotions: joy sadness fear disgust surprise angry contempt
These expressions are very common, mostly expressed through facial expressions and body posture. If you want to use the pictures and users in order to convey the purpose of the exchange of information, then you have to observe that the information conveyed by facial expression, and then decide what kind of look you in the end use to impress your target audience. Closeup able to grab the user’s attention immediately, helping to trigger the user’s mood, which prompted them to become a powerful design elements.
Just now we have cited many examples, but we need to explore them further.
Web site used in the photo of a woman, but this did not show any pictures of their products in relation to us, it is the role of rapid eye candy. If only the phone goes below the picture, there is no such woman, certainly not achieve this effect now.
If you decide to use a large portraits on your personal site, I will give you a point of praise. But you have to be careful! A tiny facial expressions can make a huge difference in your communication of information. Website do well, will be his perfect show in front of the user, his facial expressions showed that confidence, calm and trust.
9/11 Tribute Center
Everyone knows what happened in the WTC. This site is dedicated to recording ever happened in the story there. Pictures of people watching us, invited us to join them in this social topic.
Site will be covered in the text of the character’s face close-up, the effect is good, very characteristic. Figure Kayapo man photo information express authority, courage and appreciation.
Save the Children
As Susan said, put the charity’s website is a close-up photographs of the most convincing, this is true. This website is doing, a child of a close-up photo of a fully aligned with the slogan and theme of the site, but also to see what? Right, children’s sight: donation button. Tap it, they need you.
How Web Design “No” to use these images
Although we have seen the use of photographs in web design a good example, but images can easily be abused. So I will tell you how not to use photographs and how to avoid abuse.
Unrelated photo – a web design studio to do, have to be able to express themselves to provide professional design, so with the Tailored-made (tailor) extended meaning, knowing very well with the metaphor. But the wrong color spools with pictures, at first glance would think this is a tailor shop, a wood there? This expression is too obscure.
For this figure we have a solution here is to use a solid color or a team photo. In addition, digital products can not be customized.
The following mag.io site is a team collaboration software provides, but with a job in showing concern this expression of a woman’s picture. This will give people a kind of impression: this woman worried. This will affect the software promotion in the network. So we can solve, using a real shot to put a product or are using their products, but also the expression of a woman’s cheeky happy picture.
The figure below is an example of and unrelated to the content of the picture. Although the “handmade” message and the “workshop” can be associated to the picture itself, but it does not express the true meaning of the site. Brand Bat is about creating brand strategy, these wood picture, not a good message to convey them to want to express.
Blurred background image
This diagram is used to decorate a placeholder figure. There is no information on the site, users can not understand this site. My advice is to avoid using a blurred background picture, unless you can do well.
Choose the wrong picture
when you see this picture, what is your first impression? Two happy people standing in a coffee shop, they will help your online business a success, right? No, a full-service web design company should put their customers happy and successful in the picture. Such a mistake is that we should avoid.
they almost never convey any useful information. Why is there a little boy wearing glasses, naked thumbs? He is the developer of a PHP coding services provided? Clearly not.
A national website really should not use this picture to convey the message. First, the pictures and topics unrelated woman biting her nails seem (we all know this is a psychological disorder), and her tablet screen is blurred. This photograph shows the anxiety, tension and emotional stress, I really think this picture should not be placed on the national website.
Most examples in this article use a large map in the site, but there are many ways to use the picture, if used properly, will be able to attract users. Before you design a program you want to think about the picture you want to use. If you made the right choice, I congratulate you that you have enough insight. (Via shejipai)