Visual hierarchy: the script

Why visual hierarchy?Hello world. Are you looking to spice up your design life a little bit? Maybe take your image from zero to hero? Well, my name is Mike Ploger, here with Visme, and I'm here to show you how to take your image to the next level using eleven principles. Why does this matter, you ask? Well, a well-executed will effortlessly a reader through your image. There's no confusion, no wasted energy. Take Morgan Stanley's , for example. This is a real-life website that has applied visual hierarchy to its , and it directs readers where to look first. We start with this unique, interesting image on the of the page, and before long, what 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 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?
1. Size and scaleDoes size matter? Absolutely. Just ask Megalodon here. Size can drive , it can signify 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 . 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 is included so the audience can make the connection between hierarchy in the traditional sense of kings and queens in order of importance and hierarchy as used in design.
2. PerspectiveOur second visual hierarchy principle is . 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, while the boots are brought much closer to the to make them look a lot bigger in real life. Here's a poor example of perspective and . You can hardly read the text. This SD Happy translates to « you happy »? No, I'm not happy reading this text. There is no , and it's very difficult to read. But SD Happy corrected themselves. They have a background in this image, which is called the bokeh effect, and as you can see, it is now a 3D image, very, very easy to . Keep an eye on the color here. Colors can also create depth. colors look closer when they're on a dark , where dark colors look closer when they're on a bright background.
3. Color and contrastEarlier, we discussed the importance of size when it comes to to your image, but the same exact thing can be said about color and contrast. Take this Mad Men 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 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.

4. TypographyAh, the challenge of choosing a . What if I told you it wasn't about the ? It really just all comes back to the size. Here's an example of poor hierarchy. Yu Chen, he doesn't really anything. I don't know where to begin to look on his resume, and quite frankly, I'm on to the next one. In comes John Doe, and everything is perfectly. His name is the biggest, his are in , and I'm cruising through this baby like a ship on the way to the Bahamas. Also, don't forget the . John applied visual hierarchy here, and I'll tell you what, he has the job.
5. ProximityOur fifth principle is . 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. Take this pet robots image, for example. The 's kind of centered over who knows what, the 's way off to the side. It's not all together. You all put it together, you put the caption under the , and you have a perfect, cohesive image, sticking together in proximity.
6. Negative spaceYeah, I really hope that your home or office doesn't look like this. You want to keep the , 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 nope, it's not easy to digest. Here's an example of a better use of negative space. They everything down, just a few , to make it easier to read and easier to follow.
7. AlignmentThe seventh principle is . Naturally, our eyes like to read in an F . What this means is we start at the top left-hand 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 . But if you take « Here today », you make it a little bit , and you shift it off to the left-hand side of the page, you have the perfect F pattern for your to follow.

8. The rule of oddsHave you ever had a friend that joined a new relationship, and they ran off, just the two of them, and became very, very boring? It has certainly happened to me. I'm not bitter about it, but it's exactly why everybody should follow the rule of . This states that images are much more when an odd number of are applied. Take this image of these product . There's just two of them. There's not a lot of , and quite frankly, it's pretty boring. You add one more product feature, and that balance is created throughout the image.
9. Repetition, repetition, repetition. As you can see with this army here, repetition in the form of their uniform creates a sense of and cohesiveness. But if you bring up these from a presentation, you probably can't tell that they're all supposed to go together. None of the same , none of the same . I'm a little confused. Which brings us to these presentation slides. It's all the exact same colors, , fonts, et cetera, to make you know that all of these slides go together, because of repetition.
10. Leading linesIf you really want to a viewer's attention, you can create in the form of , 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 , and not to mention, the font is directly over the man's . But here, if you that around, his is directing you right towards « Your business at a glance ». It's the perfect example of leading lines.
11. The rule of thirdsOur eleventh and final visual hierarchy principle is the rule of . What this means is you want to take your image and divide it into a three by three , with each of the crossing 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 , with the off to the side. No real balance in the image. However, if you create that grid and you get those four focal points, you can see in this image, the woman is off to the , so is the wording, creating that balance in the image perfectly.
That'll do it, folks. That's all we have for the eleven visual hierarchy principles. Make sure you get after it in your next , and make sure you to our channel, right here at Visme. For now, I'm Mike Ploger, making information beautiful.

The red dress catches your eye. → The red .
The text is easier to read now, thanks to the blurred background. → The blurred background .
Because the boots are close to the camera, they look huge. → Being close to the camera .
Thanks to the white space, the page is clearer. → The white space .
With the same fonts on every slide, the deck looks cohesive. → Using the same fonts .
The bold titles help the recruiter find the information. → The bold titles .
Because of the clutter, the page is hard to digest. → The clutter .
His gaze sends you to the text. → His gaze .

If the scale is great, the emphasis is great. → .
If a font is big, it looks important. → .
If a page has a lot of clutter, it is hard to read. → .
If you use few words, the slide is easy to follow. → .
If the contrast is strong, the text stands out a lot. → .
If a design is simple, it is good. → .