Hello world. Are you looking to your design life a little bit? Maybe, take your image from zero to hero? Well my name is Mike Plugger, here with Vizme and I'm here to show you how to take your image to the next level using eleven visual hierarchy principles. Why does this matter you ask? Well a will effortlessly guide a reader through your image, there's no confusion, no wasted energy. Take Morgan Stanley's website for example. This is a real-life website that has applied visual hierarchy to its page and it readers where to look first. We start with this unique interesting image on the left-hand side of the page and before long, while we find the ,the biggest font that we know exactly what we're talking about. But of course, we want to learn a little bit more as we the rest of the page. Next thing you know, we're on the imagery at the bottom and we are locked in. Over the next few minutes, we'll show you some more good examples as well as some bad ones. So stick with us. Should we get started?

Size and scale

Does size matter? Absolutely! Just ask Megalodon here. Size can drive emotion, it can importance and also the greater the , the greater the . Without that tiny little scuba diver there, it’d probably just look like a normal everyday shark swimming through the water.
Here's an example of text with no visual hierarchy, it's all the exact same size, I don't know what the is and I don't know what's the most important. But here's an example of text with perfect visual hierarchy. The image of the crown is included so the audience can make the connection between hierarchy in the traditional sense of kings and queens and order of importance and hierarchy as used in design.

Perspective

Our second visual hierarchy principle is perspective. Perspective can create an illusion of which is exactly what you see here. These five people aren't actually balancing on a shoestring tied between two boots, they're just off in the distance the boots are brought much closer to the camera to make them look a lot bigger . Here's a poor example of perspective and contrast. You can hardly read the text. Does ‘Esti happy?’ translate to ‘you happy’? No I'm not happy reading this text, there is no and it's very difficult to read. But 'Esti happy' corrected themselves. They have a in this image which is called the bokeh effect and as you can see it is now a 3D image very very easy to read. Keep an eye on the color here. Colors can also create depth. colors look closer when they're on a while dark colors look closer when they're on a bright background.

Color and contrast

Earlier we discussed the importance of size when it comes to to your image but the same exact thing can be said about color in contrast. Take this Madman example. You have a strong black and white contrast but you also throw in that popping red to make your image and even draw attention to that beautiful dress in the Mad Men logo.
If you bring in this population statistic with little to no contrast I have no idea what percentage of the population that you're talking about. But if you the majority of that population, I know exactly what you're talking about and you have a clean and image,

Typography

Ah the challenge of choosing a font. What if I told you it wasn't about the , it really just all comes back to the size. Here is an example of poor typographic hierarchy. Iu Chen, he doesn't really anything, I don't know where to begin to look on his and quite frankly, I'm on to the next one. In comes John Doe, and everything is perfectly, his name is the biggest, his titles are on board and I'm cruising through this baby like a ship on the way to the Bahamas. Also don't forget the color. John applied visual hierarchy here and I'll tell you what, he has the job.

Proximity

Our fifth principle is proximity. Just like you did in high school or middle school, you want to hang around those that you are most alike, which is exactly what these guys are doing, it's exactly what you want to do in your image. Ttake this pet robots image for example. The is kind of centered over who knows what, the captions way off to the side, it's not all together. You all put it together you put the caption under the image and you have a perfect cohesive image in proximity.

Negative space

Yeah I really hope that your home or office doesn't look like this. you want to keep the clutter, you want to keep the negativity out of our lives, right? Well not in our designs. The use of is much more appealing, it's easier to which is exactly what the Lord of the Rings, the two towers did with that hand reaching down for that ring.
Here's an example of little negative space. You have everywhere, it's very difficult to read and no it's not easy to digest.
Here's an example of a better use of negative space. They everything down, just a few words to make it easier to read and easier to follow.

Alignment

The seventh principle is . Naturally our eyes like to read in an F pattern. What this means is we start at the top left-hand corner of the page before moving right, then down, right again and then down through the rest of the page. This image here doesn't exactly follow the F pattern. Here ‘today’ is too centered but if you take ‘here today’, you make it a little bit bigger and you to the left-hand side of the page you have the perfect F pattern for your readers to follow.

Rule of odd

Have you ever had a friend that joined a new relationship and they ran off just the two of them and became very very boring. That has certainly happened to me, I'm not bitter about it but it's exactly why everybody should follow the . This states that images are much more appealing when an odd number of subjects are applied.
Take this image of these products features. It's just two of them, there's not a lot of balance and quite frankly, it's pretty boring. You add one more product feature and that balance is created the image.

Repetition

Repetition, repetition, repetition. As you can see with this army here, repetition in the form of their uniform creates and . But if you bring up these slides from a presentation, you probably can't tell that they're all supposed to go together. the same fonts, none of the same icons. I'm a little confused, which brings us to these presentation slides. It's all the exact same colors, styles, fonts, etc to make you note that all of these slides go together because of repetition.

Leading lines

If you really want to , you can create movement in the form of leading lines, like right here with these French fries that are leading right up to that ketchup bottle, and all of a sudden I'm pretty hungry. But here, in this image, there's no leading lines at all, I don't really know where to look and not to mention the font is directly over the man's face. But here, if you that around, his gaze is directing you right towards ‘your business at a glance’ it's the perfect example of leading lines.

Rule of thirds

Our eleventh and final visual hierarchy principle is the . What this means is you want to take your image and divide it into a three by three grid with each of the being your focal point on the image. This image doesn't exactly follow the rule of thirds. The woman is once again right in the middle with the wording off to the side, no real balance in the image. However, if you create that and you get those four focal points, you can see in this image your woman is , so is the wording, creating that balance in the image perfectly.
That'll do it folks. That's all we have for the 11 visual hierarchy principles. make sure you get after it your next designs and make sure you subscribe to our channel, right here at Visme. For now, I'm Mike Plugger making information beautiful.