Episode 2: 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.

Length: 9:47 Level: Beginner

Video Transcript

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 the 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 us, as humans absorb and understands 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 big problems, people often creating 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 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 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. Very quickly you’re eyes are going 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 be able to understand that to apply it to 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 preattentive attributes. That is basically where subconsciously your brain is accumulating certain amount of information with respect to the environment. So, here’s an example.

Here there’s a foreground versus a background all as a silhouette. They’re all the same color. And you’re trying to understand what is actually 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 actually 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 quick in a matter of second, 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 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, with respect to the background such as imagery, and 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 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 a 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 clearly 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 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 don’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 and that makes it pop a little more versus  is the content underneath of 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, the size of the font is smaller underneath of 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 of 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 color 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 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 centered in the middle. Everything on the top of the title is left, centered, left justify. We wanna do the same thing with the text underneath of it. So what you end up with is left justified text, left justified body text underneath of 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 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 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 actually use visual cues, alright.

So we have 3 bullet points and in this case we’re talking about 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 icon 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 separate additional boxes. So each bullet points get its own compartment and essence. So you’re eye can easily navigate through and better absorb and understand an 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’s 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 a dull and in this case little bit of color correction. It’s a little bit brighter and you know, better quality.

5. 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? So however in case of web content, visual content, you can actually apply interactivity animations through your designs. 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 gonna 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 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





  • Ivan Podnar

    Great presentation, using Visme slides and, may I ask, what software to compose video and slides together?

    • Hi Ivan. Thank you for the comment. The slides are all created in Visme including animation effects, etc.. They are then put behind me in post production (we use Adobe premier for the post production but can be done with pretty much any video editor).

  • Karen Wager-Smith

    Thanks for this video. I would have benefited from some more real examples of each type of mistake and more examples of what those designs would look like with the mistakes corrected. With just the one example you showed for each mistake, I’m not sure I really absorbed it.

  • Jane Gilmore

    Just wanted to add that another mistake that people make is to have
    misspellings in their presentation text. For example, on Slide 31, you
    have misspelled “consistent”.

  • Bethany Bovard

    Thank you. It was very helpful to see the 5 examples put into practice. It would be great to see you develop an area of your site where you could post a slide or flyer or other info piece that needs work and have people submit their revised, more visually effective and appealing examples (similar to what you did in this video) using Visme (of course!). It could be like a weekly (or monthly) challenge that focuses on a specific visual / graphic design tip/strategy. You could follow up by show casing some of the effective examples submitted.

    • Welcome Bethany. that’s a pretty neat idea. I will discuss this with Visme team. take care.

  • Mark Shepard

    Definitely helpful. thank you!

    • Mark; I’m glad it was helpful 🙂 welcome.

  • Peter Breach

    Some good points in this and the previous presentation. I would be more than happy to point students this way!
    I am a bit worried about the black box with white text over the ice-flow image. The image is part of the message. Will you be looking at adjusting images in future presentations so that the text has sufficient contrast to be read across the whole image? Maybe even fading it down (adjusting transparency) in the presentation?
    Liked the bullet icons

    • Peter thanks for your feedback. I do agree ice-flow image was not the best example. I will look into doing that in future. thx

  • John Dobson

    Not always sure about ice flow images. Sometimes I find the text unreadable through lack of contrast (e.g. slide 17/35) and I’m not sure whether the unreadability is intentional or not. Adjusting transparency as already suggested is a good idea. When I was teaching the same sort of thing a decade ago I found that a very useful trick. Designers, being young, do not always realise that older people’s visual acuity decreases markedly with age, as mine has. What you say is right, though I think not always reinforced by your slides. I agree with Peter Breach.

Related articles

90% of all information transmitted to our brains is visual.
People remember...
Become a more effective visual communicator. With Visme, you can create, share or download your visuals with no design training. It's free! Take a tour.
360 Shares
+1
Tweet
Share283
Share77
Pin