A picture is worth a thousand words.
We've all heard that old chestnut a thousand times before, right? In web design images are as important if not more than your actual copy.
While there's no doubting the precision that clear writing can bring to an idea, images have the ability to bypass the high-level, analytical brain and speak straight to us on an emotional level. Do we need another goofy cat Youtube video to prove that imagery can turn normal, intelligent discerning humans into giggling, retweeting fools?
There are three types of readers your site encounters. You have:
- The Reader : an individual that reads every line
- The Scanner : an individual who “scans” or “skims” through your content to find the interesting bits
- The Bottom Feeder : an individual who reads the first few sentences and then cuts to the summary paragraphs
Do bear in mind, the same user could take on any of these roles, possibly even within the same browsing session.
The majority of readers fall under the scanner category, which makes it even more important to make emotionally impactful choices in regards to your visual content. Regardless of what type of readers you encounter there is one thing that you must always remember, you’re dealing with humans and humans are influenced by emotional triggers.
Film Cues
I find that the easiest way to explain and illustrate examples and techniques is to use common links. In this article I'm going to be borrowing from the world of film.
Most of us have films we relate to. We laughed or cried, we cheered for a hero, and we feared for a character's safety. Each film used a clever combination of image and sound to manipulate the way we felt. And we probably loved it.
Aside from entertaining us and creating a visual masterpiece with a strong story, directors aim to trigger some form of emotional reaction -- and if you reacted, even for a second, then they did their job.
This should be the way your approach your website imagery choices. Trigger an emotion and capture your audience.
Logic Doesn’t Dictate
Let's take a photo of a smiling face and animated body language. There's every chance that your three year old niece could tell you that the smiling person is happy.
While our logical brain can justify why the image might communicate happiness, it isn't part of the process that evokes the emotion for the viewer. Often our 'gut' reaction to an image comes first, and our logical brain is given the task of explaining our reasoning later.
Of the following two images, the left image may be more scientifically useful in understanding precisely what a frog is. But it's probably the right image that we engage with.
Two frog images -- which one engages you?This is why, as designers, we should always favour emphasizing “feelings over logic”. It's more impactful and will do a better job making your visitors 'connect'.
To help this, we can employ some subtle techniques of adjusting the frame, manipulating the color and focal points we can craft the emotional message, in the same way we might craft written copy.
Key Techniques
While there are numerous ways to generate and evoke emotion the easiest and quickest results come from appropriate framing and lighting. These two methods help create atmosphere.
Consider the hard hitting moments in film. The parts where you are really made to feel. These are crafted thanks to the work of the cinematographer.
Below I’ll show you examples of how both framing and lighting choices can motivate the emotions needed for your site. Note that each image has gone undergone a very quick 5 minute edit to work as examples.
Framing
Framing is an important aspect whether you’re making movies or shooting photos. The proper angle and distance from the lens are just those small little changes that can create a “wow” effect for your viewers.
Let’s look at the two examples below to see how a good crop or tighter frame can change the overall mood of an image.
Example 1 
At first glance this image is of a good quality and has captured emotion. Upon second glance and if you are looking to place this on your website, say for the header/slider the image is fairly neutral.
Yes, the people appear happy but that’s because logic is telling you “smiling means happy”. Crowd shots are tricky when eliciting emotions.
Continue reading %Image Tricks to Make Users Feel Rather Than Think%
by Gabrielle Gosha via SitePoint
