and in today's video you're going to learn
what hierarchy is how it's used as an expert designer and also you're going to learn some
Secrets along the way now hierarchy is one of the main fundamental design principles and
as a designer hierarchy is so important as it creates order of importance within the design
elements and it also directs attention whilst making information easy to understand by the
viewer and don't worry I'm going to explain everything in detail so you understand fully
what hierarchy is and why you should be using it so the three-stage process of marketing hierarchy
is as follows attract which is bringing in the viewer Intrigue which is spiking the interest
and then delivering the message these are the three steps a viewer will go through when viewing
an effective design and that viewer is probably won't even be aware that it's happening
but let's take a look at an example that explains this process this Adidas poster is a
prime example of this Triad of marketing High the shoe and the paint splash across the shoe is
the initial aspects that will grab the attention of most viewers this is the thing that will draw
them into the design secondly the quote time to change up will create some kind of intrigue
and interest in that person and this is going to hold them long enough so they want to read on
in the design and then below we have the message delivery the design is literally a visual trap
in some aspects because it draws you in makes you interested and then you've read the message
the designer wanted you to read all because of hierarchy when using hierarchy on your designs
you will probably use several different versions of it on one single design here are a few of
the main ways to use hierarchy so firstly color is highly important and it is a great way to
attract or to place things in an order there is actually a cards that places color in order
from the ones that are most attention grabbing all the way down to the ones that are less
attention seeking Now red is a color at the front of this chart cuz it's the color your eyes
will go to first and foremost this is the reason for notifications and alerts often being red
or orange on app design now you can drill the viewer's attention to a specific area through
color alone one common tactic is to have a dull even grayscale design with one single element
in color as you can see here another common but essential hierarchy method is to leverage the
use of size the larger something is on a design the more important it's going to appear it's
also the first thing the eye will actually see and view when someone's looking at your work
and so it can be used as the first part of a hierarchy process that we spoke about earlier
and that is the attract phase you will often see this in advertising campaigns for say cell
phones or watches that to pick their product as a huge part of the design a kind of focal point
and this is often where the consumer will begin their Journey whilst viewing the design size is
also very important when concerning hierarchy of typography you will see this on magazines
advertising campaigns posters and even website design main headings will be large and often
just a couple of words or a short sentence this can be the attraction phase then we have the
secondary heading that might cause the intrigue and then the smaller text which is often the
body text or the message so as you can see typography fits nicely into this three-stage
process of marketing hierarchy and I'm sure you've seen it pretty much everywhere color of
typography is also a great method as seen here in this Nike advert having text different sizes
and also weights would also look 10 times better on a design as opposed to everything being
the same appearance in terms of typography [Music] now a lack of visual hierarchy is a big one
now sometimes designers fail to establish a clear visual hierarchy on their layout and again
just a design that is too cramped almost as if you're trying to suffocate the viewer with no
white space and come on we don't want to commit design homicide now do we no instead here's
how you can Rectify these issues with ease so yeah first establish clear hierarchy organize
content elements in an order of hierarchy and that's easier said than done right but actually
it's not that difficult just think of the most important information on your design and then give
that prominence use visual cues like size color and topography to guide the viewer's attention and
indicate the relative importance of each element but then you want to create visual Pathways so
design the layout to create a natural visual pathway that leads a viewer's eye through
the content in a logical and intuitive manner arrange your elements sequentially
following the natural reading order and use visual cues like lines or directional elements
to connect related content and then you want to simplify navigation keep navigation elements
simple and intuitive and this ensures that viewers can easily navigate through your
layouts without confusion use Clear lay and use consistent placement for navigation
buttons or links and avoid cluttering the layouts with unnecessary navigation options
you can even use subtle cues like an arm pointing or a bird spreading its wings in
a direction to the next Port of Call and so on so we have a nice blank canvas and let's add
in some buildings right here now according to basic hierarchy bigger objects are noticed first
and thus more important and yes yes if we add in some text here that is true but here there
is a cool hierarchy based trick at play so when you have your most dominant visual assets
you can sometimes use leading lines to point to the next important visual asset as you can see
these buildings pointing right up to the text and then here on this design the depth of fied
lines draw the viewer right into the secondary hierarchy asset now it doesn't look too shabby but
the typography on the back Lacks hierarch the tip here is that you should remember that hierarchy
of typography is super super important and often it can completely make or break a design here we
used hierarchy of color and size and we kept the alignment to the left and then this design is
slightly different again I think I prefer the former but yeah always bring hierarchy to your
text if in doubt think of hierarchy in terms of three layers of importance so here we have the
main focal point as one the second secondary section of hierarchy as two and then the third one
here we can also break down the single page into its own three layers of importance when you think
about hierarchy in these three layers you start to see in a lot of designs pretty much everywhere
and you can see that here on these Pinterest ads on this poster the Moon is totally unique in color
from anything else it's a focal point and then the first moon word is orange which then we naturally
move downwards to the bottom section where there's more orange hierarchy of color is a great way to
guide your viewers and also organize the design this illustration has five objects the focal
point the largest and five is an odd number but if you drop down to four objects the composition
then becomes a lot more difficult to make appear visually appealing even if we make a different
layout things just don't look as good as having an odd number of objects this rule works really
well with a single dominant object of hierarchy the first golden technique will actually lay the
foundation for making your next project totally awesome so when you have your Design Concepts
and your ideas finalized in your mind it's probably time to think about the three flow
rule the three components of the three flow rule that you need to ask yourself are one where
are the viewer's eyes initially going to land on your design two where is the likely second place
the viewer eye will actually move two and three where will the viewer's eye finally finish
up seems pretty simple right it is yeah but it's a really fundamental way to make good and
effective designs each and every time this pet play feed poster starts the journey with the
Bold white topography for the starting point then the parrot for the secondary stop off and
then the information to the left for the final end to the viewer's journey will every single
person view this design in this way no of course not but it's actually a streamlined Avenue that
most viewers will be able to use and a way they can obtain information from your design easily
and this leads me nicely onto the next technique in today's video the vast majority of designs will
Loosely use one of two techniques to form a basis of hierarchy especially in the Western World the
F pattern suggests viewers start their journey in the top left of a design because that's a natural
way that a lot of people tend to read a book left to right then they move over to the right and
then below that most content will be aligned to the left and extend out towards the right
the second method is the Zed or the Z pattern depending on where you're from again we start in
the top left then we move over to the right but this time we go diagonally down to the bottom left
and then finally over to the bottom right this is the instinctive way that most people will View and
actually look at a design and so by knowing this alone you can then apply hierarchy to your designs
accordingly which we're going to look at right now now you could have absolutely nothing in the top
left or top right but have a focal point in the very center and then the viewer will scan from
the top left and then move down into the middle then perhaps move to the bottom left and then
finish in the bottom right where maybe a link or a contact might be this still follows both of
these patterns if you actually think about it of course these are just templates to keep in mind
when you're designing something they're actually just there for you to use in conjunction with
hierarchy to build a framework of your designs and speaking of more techniques what about something
that people think is so obvious and so easy to do but which they often don't apply properly in
graphic design size is probably the easiest way to achieve hierarchy right simply because the viewer
will notice it in a millisecond and it just stands out so easily but here's a really good way for
structuring that hierarchy in terms of size and all you have to do is think of these three levels
so we have one the hook two the secondary detail and three The Finisher if your design is about a
product then the hero of the design will actually be that product itself as you can see here the
drink is the focal point and it's the largest on the design it's that initial hook however if we
look here the focal point is more of an artistic visual Hook and the important information would
be the dates and the location of this event so try and make the hook on your design the largest
and it doesn't have to be the most important thing but a lot of the time it will be then
secondary detail is second largest and finally the smaller sections are where you want the viewer
to finish and actually take in crucial information this would also be where your ctas go so once a
viewer is actually hooked onto your design from afar then they start to go on that journey across
your design then they should finish the important information this logic works really well when you
combine it with the Zed and the F patterns from earlier so there's actually a really neat trick
that you can use with hierarchy when you have grouped objects on your design now if you place
one of the objects larger and in the center of a group with then equal sets of other objects
either side then automatically stands out and creates hierarchy however if we arrange the
objects differently the level of hierarchy will be diminished now one mistake I see time and
time again relates to the next Golden technique of visual hierarchy so when thinking about topography
on your designs in regard to hierarchy it's actually a really good idea to think about that
three level rule we spoke about earlier the hook the secondary detail and then the finisher so here
the topographic Hook is the future big gun section and then just below that the secondary text and
then finally the book of visit call to action in the upper right I don't necessarily think this
is a particularly good CTA your designs don't need to strict follow this technique but they are
great to keep in mind as a basis when implementing hierarchy on your designs now if I was to ask you
what is the best friend of hierarchy in graphic design what would you say this design uses it and
so does this design right here hierarchy literally cannot survive or work without white space or
even just proper use of white space the space allows distinctions to be made by the viewer
so hierarchy can actually be identified subcon iously but why is hierarchy important why is it
such a fundamental part of graphic design as you can see here we have a long paragraph of text each
line uses the same font the same color and the same style if we're reading this in say a magazine
there is no clear importance to us as a viewer the act of gathering information from it becomes
more difficult and more tedious however if we use hierarchy we can make the title larger Bolder
and a different color and then the subheadings different to the body text now the design doesn't
only look more interesting and more appealing but the reader can interact with it a lot easier
so this landing page on the Apple website is a nice clean example of what we're talking about
let's first focus on the bottom section of this design here the image of the iPhone and also the
work iPhone are the first level of hierarchy on this design cleverly the iPhone is also even
directing your eye to the text these are the largest and the brightest aspects on this design
in this area but the second level is the quote lots of love less to spend and then the third
level is the power graph below but in the upper section of the design we only really have the
second and third levels of hierarchy the blue b symbol and the Apple logo are the second
level whereas the rest is just considered to be third level main content hierarchy it is
a good technique to divide Your Design up into different areas like this as you can see on this
brochure the design has split up the work into different sections and each section has at least
two or three levels of hierarchy headings and Main imagery being level one level two are subtitles
and other graphics and then three being the body text and small details so when you figured out
what aspects of your design should be level one two or three hierarchy and also when you figured
out how many areas you're going to use possibly by using grids it's then time to choose what kind
of hierarchy you want to use almost every design uses multiple different versions of hierarchy all
at once and here is your super duper hierarchy list weight this is obviously the weight of the
fonts you use important areas often using Bolder wids size is a very common technique to use
the more important something is the bigger it should be on your design making a design asset
and obviously different color from the rest of your design or design elements makes it stand out
more orientation you can arrange your text and your assets in a certain way so maybe an isometric
angle where the lower left goes up to the upper right and then you can have something opposing the
angle Direction the next technique is one that a lot of designers forget if you give an object
a lot of white space on your design it then has room to breathe and it becomes more obvious to the
reader and thus more important and then finally using a different style of font if your body text
is serif then consider using a sand serif for the heading and bingo you have some hierarchy so
yeah maybe now you better understand how to use hierarchy on your designs and you know exactly
what it is if you want to learn more about graphic design do click a video on screen and until next
time guys design your future today peace [Music] [Music]