Visual Design Principles – Learn 5 Things to Create StandOut Visual Content
To communicate visually, 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 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 standout visual content. Now, before I get into the actual lessons, what I want to show you, a little more from a scientific approach, is the understanding of how human perception works. Because when you create content, you are basically communicating with humans. And so in order 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 actually 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 enormous 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 it is going to get all that information,all those pixilations, millions of them in one round. The human brain doesn’t work like that. Alright, so does a human a human brain work? How we process the same photo is a little different and here’s how it works.
Rapid eye movement call saccades. Alright. And so the way it works is that your eye is quickly moving for different places that it’s looking in the environment and is quickly grabbing little bits of pieces of information and so how your brain thinks it’s seeing is an actual image, but you’re really just absorbing little pieces of it. Right now you are looking at me and you don’t realize that you’re actually applying the same thing. Quickly your 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 actually understand that to apply it when you create content for human consumption, alright?
So 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 regarding the environment. So, here’s an example.
Here there’s a foreground versus background, all as a silhouette. They’re all the same colour. And you’re trying to understand what is actually being shown here. However, what’s happening is you’re trying to… Your brain works very hard, working and looking through different areas to understand what we actually see. Now if you look at this one, you got a buck, and you got a polar bear running after a buck, I don’t know why, but quick 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 basically, it’s in contrast. Contrast, contrast, contrast. Whenever you create content, your design content, for whatever type of media it is, make sure that the content that you’re putting together, regarding 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 look at and let’s do a proper exercise in terms of contrast. Right now, I’m standing right here in front of you and I’m taking and I’ve got a know, white background right behind me. And in just a matter of moment, I’m going to take away the contrast and see how it works. So I’m going to go into a dark background and I’m going to stop moving and I’m going to stop talking just a matter of a second. And Mr. Producer, turn off the lights. So it’s silent, it’s very dark, very little contrast and you can’t see me.
Now, it’s dazzling 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 clearly see me versus the background. You want to apply the same principle to the content that you create. Alright. Let’s do a proper exercise.
Now, back to where we started. It’s Visual Design Principles, 5 things I want you to know to create standout visual content. We’re going to 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, many 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 beautiful.
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 the 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 more, and actually to the left there’s a tiny little shape, and that makes it pop a little more versus is the content underneath of it, so there’s a brief 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 going to do is add a little box underneath, and that dark box is going to give some contrast to the background. And the text is now white over a dark, somewhat translucent background shape and there’s the image behind of it. So now you have fairly clear text 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 form 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 to actually 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 centred in the middle. Everything on the top of the title is left, centred, and left justified. We want to 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 a square 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 brief text, and 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 going to do is to reduce the amount of text in the bullet points and actually 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 actually separating additional boxes. So each bullet points get its own 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 want to concentrate on grabbing high quality photos. These days there’re tons of photos out there that you can use and so in this case you can look at them before. The photo is kind of dull and in this case little of color correction. It’s a little brighter and, you know, better quality.
- 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 magazine and so on, you can’t really have interactivity in your image, right? You can apply interactivity animations through your designs with web content and visual content. So in this case, what we’ve done is… By the way, you can do this in PowerPoint, Prezi, or you can do this in Visme, our own tool that allows you to do animations.
You can take little subtle areas and actually apply short animations. So that we have to be very careful. And the example that I’m going to show you is kinda subtle. You really don’t even want it too much. You want to apply 2-inch animation because then you actually 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 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 standout 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: