Visual Design Principles – Learn 5 Things to Create Stand-Out Visual Content

To communicate visually, you have to understand how humans absorb visual information. A problem with visually designed content is that people too often create visuals for the camera and not for humans.

 

In this episode, I’m going to show you key visual design principles on how to establish your focal point for the reader, how to differentiate between areas of importance along with a few other tips that will help you to create persuasive visual content for your audience.

 

Hey everybody, Payman here again. And today I want to talk to you about 5 things you need to know to create stand-out visual content. Now, before I get into the actual lessons, what I want to show you, a little bit more from a scientific approach is the understanding of how human perception works. Because when you create content, you are communicating with humans. And so to communicate visually, you have to also understand how we, as humans absorb and understand and translate visual information to actual, you know, content through our brains.

 

So the way it works is that… The way it doesn’t work is we don’t process images like a camera. Alright? We are not cameras. So your brain versus the camera. The camera has a very wide field of clear vision but the brain has a very narrow field of vision. So it’s only about 2 degrees for your brain versus with the camera which is about a hundred and eighty degrees. So it’s much wider on the camera and your brain is much shorter. And that’s one of the big problems, people often create content that is really for a camera.

 

A camera absorbs and catches information and it grabs information in one piece. Now your aperture on your camera maybe just a few moments, it might be you know, 30 of a second or longer but at the end of the day it is going to get all that information, all those pixelations, millions of them in one round. The human brain doesn’t work like that. Alright, so does a human brain work? The way that we process the same photo is a little bit different and here’s how it works.

 

Rapid eye movement call saccades. Alright. And so the way it works is that your eye is very quickly moving for different places that it’s looking in the environment and is very quickly grabbing little bits of pieces of information and so the way that your brain thinks it’s seeing is an actual image, but you’re just absorbing little pieces of it. Right now you are looking at me and you don’t realize that you’re applying the same thing. Very quickly you’re eyes are going to different places. Probably looking at my hair and arms and so on. And so the same principle goes when you’re creating content. Static or interactive, alright? So you have to be able to understand that to apply it when you create content for human consumption, alright?

 

So in terms of creating content for human consumption, there’s one more thing that you want to understand. And that is the pre-attentive attributes. That is basically where subconsciously your brain is accumulating a certain amount of information concerning the environment. So, here’s an example.

 

Here there’s a foreground versus a background all as a silhouette. They’re all the same colour. And you’re trying to understand what is being shown here. However, what’s happening is you’re trying to… Your brain is working very hard, working and looking through different areas to try to understand what is seen. Now if you look at this one, you got a buck, and you got for some reason, a polar bear running after a buck, I don’t know why but very quickly in a matter of seconds, you’re able to understand what is being presented to you.

 

So it’s extremely important when you create content to put this crucial tool to use and it’s contrast. Contrast, contrast, contrast. Whenever you create content, you design content, for whatever type of media it is, make sure that the content that you’re putting together, concerning the background such as imagery, the foreground, the text and icon and so on, there’s a certain balance and respect of contrast against each other. Alright.

 

So let’s take a look at it and let’s do a real exercise in terms of contrast. Right now, I’m standing right here in front of you and I’m taking and I’ve got you know, white background right behind me. And in just a matter of moment, I’m gonna take away the contrast and see how it works. So I’m gonna go into a dark background and I’m going to stop moving and I’m gonna stop talking just a matter of a second. And Mr Producer, go ahead and turn off the lights. So it’s very quiet, it’s very dark, very little contrast and you can’t see me.

 

Now, it’s very bright again. And what happens now is there is this contrast between me who’s wearing dark versus a background that’s very light. So you can see me versus the background. You want to apply the same principle to the content that you create. Alright. Let’s do a real exercise.

 

Now, back to where we started. It’s Visual Design Principles,  5 things I want you to know to create stand-out visual content. We’re gonna do a very simple exercise. And so here we have an image in the background, it’s a polar bear, floating in the water.

 

This is about The Greenhouse Effect is Real, and the reason I’m saying the greenhouse effect, a lot of people still don’t believe that global warming is real. That’s a separate argument for the sake of making everybody happy. The Greenhouse Effect is Real, there’s some content here and then there is a contrast, very little contrast against the background. The problem here is, it’s very hard for your brain to absorb and understand this information. It also doesn’t look very pretty.

 

1). Establish your focal point.

So the first thing you want to do is establish your focal point. The important element in this design that you see here, the title of course is one of the important focal points. So we want to make the title stand out. Therefore what we do is, give some emphasis to the title. Make it larger, space it out a little bit more, and actually to the left there’s a tiny little shape that makes it pop a little more versus the content underneath it, so there’s a little bit of separation.

 

2). Differentiate.

Number 2. You want to differentiate the content. So with differentiation, what you want to do is again, we have the title, and the size of the font is smaller underneath it. So there’s some differentiation. And so in this case what we also want to do is to apply some contrast from the foreground to the background.

 

So what we’re gonna do is add a little box underneath, and that dark box is going to give some contrast versus the background. And the text is now white over a dark, somewhat translucent background, shape and there’s the image behind it. So now you have fairly clear text that you can easily read and the title.

 

3). Patterns are your friends.

Now the next thing is patterns. Alright, so in the real world, dogs are your best friends and in the digital world patterns are your friends. You can use the for or you can use them against you. So in this case we have a pattern with a series of boxes. The colour is very similar and also there’s one that’s popping out. You can use that as a sticking point or you can use the pattern as a way to relay and organize your information.

 

So in the example going back to what we had, we had the title and we have the text that’s kinda centered in the middle. Everything on the top of the title is left, centred, left justified. We wanna do the same thing with the text underneath it. So what you end up with is left justified text, left justified body text underneath it. And so you have a little more of an organization.

 

 

The next thing you want to do is to also separate the boxes. So I’m using the pattern of having squares and I’m following that through to these two boxes underneath. So I’m separating the content from the three, I guess I should say bullet points at this point.

 

4). Simplify to improve focus.

Now the next thing is that you want to simplify to improve the focus. We have a little bit of a text, 3 bullet points that are pretty text heavy. So you want to always try to work hard to minimize the amount of content that you have. Try to speak visually and reduce the amount of text. So in this case, what we’re gonna do is to reduce the amount of text in the bullet points and use visual cues, alright.

 

So we have 3 bullet points and in this case, we’re talking about a 20% decline in the sea ice. And then we also have you know, 66% of the polar bears are going to unfortunately, you know, vanish by the year 2050. And so by using icons to shorten the text, we end up with a better representation and simpler way of the content.

 

You can do the same thing by applying that again through the patterns and also by using the patterns and separating additional boxes. So each bullet points get its compartment and essence. So your eye can easily navigate through and better absorb and understand information.

 

And last but not least has to do with the photo. So it’s pretty important that you wanna concentrate on grabbing high-quality photos. These days there are tons of photos out there that you can use and so, in this case, you can look at the before, the photo is kind of dull and has a little bit of colour correction. It’s a little bit brighter and you know, better quality.

 

  1. Creating interactivity.

And last but not least, number 5 is creating interactivity. So when interactivity, again you can always do this if you’re creating something for print, for a magazine and so on, you can’t have interactivity in your image, right? So however in the case of web content, visual content, you can apply interactivity animations through your designs. So in this case what we’ve done is… By the way, you can do this in PowerPoint, or Prezi, or you can do this in Visme, our tool that allows you to do animations.

 

You can take little subtle areas and apply short animations. So we have to be very careful. And the example that I’m gonna show you is kinda subtle, you don’t even want it too much. You want to apply 2-inch animation because then you take away from the focal points. So in this case we have the title and we have the other elements in just a matter of a second, coming together. Because we have a subtle kind of emphasis and everything comes together.

 

So that’s kind of the 5 points I want to tell you about, the 5 things you need to know to create stand-out visual content. Put them to work, practice them and I will see you next time.

Here’s the slide deck used in the video lesson