Doorgaan naar hoofdcontent

Visual Design - Pictures

Part 4 of my summer blogs on visual design: pictures. Pictures to me are photographs, but also infographics, video and such. Because photography is the biggest thing related to pictures, my focus will mainly be the photography.

Emotion


A photograph captures emotion. Many of the pictures we know well capture an emotion. During my research the picture below appeared to be the most famous photo. I always thought it would be the lunchtime on a skyscraper (Charles C. Ebbets, 1932) or the napalm attack (Nick Ut, 1972) - but it appears to be this picture of an Afghan girl by Steve McCurry taken in 1985. Before you read below the image, picture an emotion with this photo and then read on to find out if it was captured as you felt it was.



This is Sharbat Gula, 13 years old at the time of the picture. Her parents had died in the Soviet bombing of Afghanistan and she was living in a refugee camp in Pakistan. Doesn't matter if you got it right or not - you can most certainly see that this girl has seen horrible things and has probably seen more at 13 years old than most of us would in a lifetime.



The image above is another example of emotion. The dog on the left clearly gives us a different feeling than the dog on the right...


Brand Recognition

I once wrote a blog post on photography before, so I won't repeat that information in this post. If you need some tips on your photograpy I suggest you read the previous post. In this post I'd like to show what photography can do to your brand. Great brands make sure their photography is consistent. One of the best examples is SuitSupply.



SuitSupply uses women in its campaigns as props. They are there to serve man. You most certainly are free to have an opinion of the images, but you can't say SuitSupply isn't very consistent in its photography. Its now something you'd expect of SuitSupply and you'll immediately recognize their style.

This won't work all over the world by the way. Remember the blog-post that started these summer posts? I talked about cultural differences in color. Same goes for photography. These types of photo's won't be allowed in many countries. In the USA for instance the left one would be edgy, but the right one would be a no-go unless the woman would be blurred more. The country with the biggest porn-industry is quite restrained on showing a boob in public.

On the web


Looking at webdesign, photography is very important for a designer. These days the big visual to start a website (carrousels too - though thankfully that trend is over) is very popular. Thats fine, though often it doesn't fit in the flow of the page, but it also means there's one visual to set the atmosphere and create an emotion.When its a 16:9 photo, it will be the only thing people see when opening your site!

Very often we tend to put some text with it. Could be a brand message or anything else we add to give the image some meaning. Most of the times its hard to read the text as the image and text don't add value to one another. Designers have to think about where the text can be read, how to use the photo and most certainly what happens responsive. And think hard whether you feel that big whopping image suits your website...


Guidance


A designer has the power to use images to his or her advantage. Photography could help in selling things or making sure people want to read on. I've made an example to show what I mean.



Here we have a banner or newsitem on a website. In the left one Obama looks at the text and button. You can see by the look on his face its been 8 difficult years, but his look and the text could help people finding the button and reading on. In the right image Obama is looking away. Because of the look on his face and him looking away it almost indicates "nothing to read here".

So using photography to your advantage is really important. Often there's an editiorial team working on big websites. When I just started in the business I always felt they didn't add much - but the truth is that they can add great value by using great photography.

Wireframes


The most thankful job for a visual designer is to "color" wireframes. An interaction or UX designer will often have made wireframes which you have to bring to life. In an agile environment he may have made them together with you (praise that man or woman if he/she did! You've got a gem there!), most often wireframes are made before a visual designer is introduced into the project (yet it is still called agile...).

Adding the right photo's, colors, shapes and all other things we've discussed so far is the best job there is. You really can add so much value to the wireframes during the visual design. Using stockphoto's isn't bad. In an ideal world every company would make its own photo's - but not every company has that luxury. Just make sure to pick photo's that support and add to the message and don't choose the ones everyone has already used...

The responsive web


As I mentioned in the other posts it is important to realize when and how to use pictures. You HAVE to think about the responsive mechanics, loading, resolution and consistency. Make sure your photo's don't take ages to load, won't fill up the entire user screen and make sure they work responsive. I am always a big fan of a similar experience on my mobile phone and desktop.

Summary


Be sure to take the time to create (or find) brilliant pictures for your website. Add value by adding human emotion to the message. Pictures are a big part of how people look at your website. Again, if you need tips on photography read my former blog on content. I hope this post gives you a little insight in the importance of using great pictures.

So far we've taken a look at color, typography, shapes and pictures. Next week the final installment of these summer blogs: motion.

All the best,
Corné

Labels

Labels:

Reacties

Een reactie posten

Populaire posts van deze blog

Embracing Design Principles

In this post I'd like to dive into Design Principles. To me, they are one of the best things ever in this line of business. What are Design Principles? Design Principles are a set of rules you define with your client. They provide direction in your design process. They give the design process a clear and shared vision and help in making decisions. Finally, they describe the meaning of your product or service to the customer. I myself mostly use them for the clear and shared vision and as an aid in making decisions. Principles first! It's important to write the Design Principles before starting the webdesign. You need everyone to agree to the Design Principles before you start your design task. There's a simple reason behind this: think first, act after. If you're developing the Design Principles during the design phase you'll most likely write them so they match what you're doing in the design. Example: I always have a Design Principle stating "Cu...
2 reacties
Meer lezen

Visual Design - Typography

In my previous blog-post I explained I am blogging all through the summer about Visual (Web)Design. This is part 2, where we'll focus on typography. Typography According to Wikipedia typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. I feel typography is not often valued correctly. Typograpy is one of the key aspects to Visual Design. It helps in setting an emotion, when done well it helps in brand recognition. Looking at webdesign there are more things to take into consideration. Emotion Typography sets an emotion. Often people frown when I say this, but showing one particular font helps explain my message. Yes, I am using Comic Sans in this blog post! Which of the two words above looks more important? When you're using Comic Sans for the word 'help' I wonder how many people see the urgency of your request. When using the Impact font (especially in all-caps) it looks mo...
3 reacties
Meer lezen

Visual Design - Color

This summer I want to bring you a set of blog posts about Visual Webdesign. Recently I started noticing basic design knowledge is lost in the digital world. In the responsive era many webdesigns have become... well... kinda boring. Its all colored boxes. Many sites look quite similar. The only difference between the wireframes and the design is color. And I think Visual Webdesigners can do better. We've become lazy. This series is intended to stop designers for a single moment to realize we can do better. Visual Design is so impressive and so valuable to every project - that you need to get the basics right. Visual Webdesign I think there are 5 elements to visual webdesign: color, typography, shapes, pictures and motion. I want to dive into these elements one by one. My aim is to put a blog online weekly for the next 5 weeks - diving into one of the elements every week. This week we'll start with Color. Color There are many aspects to color. Did you kn...
Een reactie posten
Meer lezen