Rodolphe Maurel
Vanessa
11 Visual Hierarchy Design Principles - Learn How to Improve and Create Beautiful Graphic Designs
7
11 Visual Hierarchy Design Principles - Learn How to Improve and Create Beautiful Graphic Designs
600
0
<div id="content_left_yt"><iframe width="560" height="315" src="https://www.youtube.com/embed/ZXItTIjC0Wk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="virtualpage">
Hello world. Are you looking to spice up1 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 well-executed design1 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 directs1 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 font1 ,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 scroll down1 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?</div><div class="virtualpage">
Does size matter? Absolutely! Just ask Megalodon here. Size can drive emotion, it can signify1 importance and also the greater the scale1, the greater the emphasis1. Without that tiny little <abbr title="plongeur">scuba diver</abbr> 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 focal point1 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. </div><div class="virtualpage">
Our second visual hierarchy principle is perspective. Perspective can create an illusion of depth1 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 while1 the boots are brought much closer to the camera to make them look a lot bigger in real life1. Here's a poor example of perspective and contrast. You can <abbr title="à peine">hardly</abbr> read the text. Does ‘Esti happy?’ translate to ‘you happy’? No I'm not happy reading this text, there is no depth of field1 and it's very difficult to read. But 'Esti happy' corrected themselves. They have a blurred background1 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. Bright1 colors look closer when they're on a dark background1 while dark colors look closer when they're on a bright background.</div><div class="virtualpage">
Earlier we discussed the importance of size when it comes to drawing attention1 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 stand out1 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 dim1 the majority of that population, I know exactly what you're talking about and you have a clean and cohesive1 image,</div><div class="virtualpage">
Ah the challenge of choosing a font. What if I told you it wasn't about the curves1, it really just all comes back to the size. Here is an example of poor typographic hierarchy. Iu Chen, he doesn't really emphasize1 anything, I don't know where to begin to look on his resume1 and quite frankly, I'm on to the next one. In comes John Doe, and everything is laid out1 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.</div><div class="virtualpage">
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 headline1 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 sticking together1 in proximity.</div><div class="virtualpage">
Yeah I really hope that your home or office doesn't look like this. you want to keep the <abbr title="pagaille, désordre">clutter</abbr>, you want to keep the negativity out of our lives, right? Well not in our designs. The use of negative space1 is much more <abbr title="attrayant">appealing</abbr>, it's easier to digest1 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 font1 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 condensed1 everything down, just a few words to make it easier to read and easier to follow.</div><div class="virtualpage">
The seventh principle is alignment1. Naturally our eyes like to read in an F <abbr title="schéma, motif, disposition">pattern</abbr>. 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 shift it off1 to the left-hand side of the page you have the perfect F pattern for your readers to follow.</div><div class="virtualpage">
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 rule of odds1. 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 throughout1 the image.</div><div class="virtualpage">
Repetition, repetition, repetition. As you can see with this army here, repetition in the form of their uniform creates a sense of unity1 and cohesiveness1. But if you bring up these slides from a presentation, you probably can't tell that they're all supposed to go together. None of1 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.</div><div class="virtualpage">
If you really want to grab a viewer’s attention1, 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 flip1 that around, his gaze is directing you right towards ‘your business at a glance’ it's the perfect example of leading lines.</div><div class="virtualpage">
Our eleventh and final visual hierarchy principle is the rule of thirds1. What this means is you want to take your image and divide it into a three by three grid with each of the crossing points1 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 grid1 and you get those four focal points, you can see in this image your woman is off to the side1, 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.</div>
Correct! Well done.
Some of your answers are incorrect. Incorrect answers have been left in place for you to change.
The next correct letter has been added to the answer.
0
0
0
0
6
visual_hierarchy2.htm
0
0
0
0
Your time is over!
Check
OK
Help
[?]
0
0
Your score is
=> Next
<=
Index
1
0
0
../situations/situations.htm
../situations/situations.htm
Geneva,Arial,sans-serif
small
#ffffff
#ff8000
#ffffff
#000000
#00ff00
#ff0000
#ff8000
../../../sequane.php
you@yourserver.com
Please enter your name:
avoid*spreading*contaminants
1
1
<link href="../css/jcloze.css" rel="stylesheet" type="text/css"/>