Less Than 10% Of Designers Know This! – Design Principles Ep1

so here we are starting a series on graphic  design principles 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 it's great  being able to show people how a design looks   but even more impressive if they can actually  experience it too and this leads to them   understanding how it's going to behave and so  learn more about framer later in today's video and   how to show off your designs 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 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 their interest   and then delivering the message these are the  three steps a viewer will go through when viewing   an effective design and that viewer 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 hierarchy the shoe and the pink  splash across the shoe is the initial aspect 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 intriguing 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   drills 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 colour is highly important and it  is a great way to attract or to place things   in an order there is actually a chart 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 because 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 draw the viewers 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 is 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 depict 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 ten times better on a design   as opposed to everything being the same appearance  in terms of typography i'm going to leave you with   a kind of hierarchy section thoughts that i came  across not long ago a magazine can be thought of   hierarchy in of itself because the front cover is  what draws you in and then the contents inside is   the secondary and third phases but once you  actually peel back the pages and look inside   you have a double page spread that has its own  ecosystem of hierarchy you know with headings   imagery body text and so forth but even on  a small section of this double page spread   you can find little worlds of hierarchy in action  say for example a small image with a heading below   it in a bold font and then body text below that in  lighter fonts hierarchy is literally everywhere if   you go looking for it and your designs should  include hierarchy so you can allow the viewer   to understand the information and also so your  design goes through that three-stage process of   attraction intrigue and message delivery now  interactive prototyping is the best way to   communicate your app and your website designs the  sponsor of today's video framer is a no code free   to use tool making it easy for anyone to become  a prototyper so you can import your existing work   and quickly swap out your static elements for  pre-built interactive components this includes   things like sliders that actually do slide and  inputs that can be filled as well as buttons that   can actually be clicked building out a full user  flow is super simple as well you can just link   screens buttons and menu items and pretty soon you  will have a prototype that clearly communicates   your vision to whoever you want to show it to  now sign up for free by visiting framer.com   forward slash satori graphics that link is down  in the description box below so do give it a try   if you are a web or app developer and if  you do want to learn something else today   click the video on screen until next  time guys design future today peace is

Channel: Satori Graphics

Views: 351,473

Rating: 4.966754 out of 5

Keywords: graphic design principles, graphic design principles with examples, graphic design, hierarchy in graphic design, graphic design hierarchy, graphic design visual hierarchy, text hierarchy graphic design, hierarchy, design, graphic design examples, graphic design examples pictures, satori graphics, satorigraphics

Id: dGYCn9qYjUQ

Length: 6min 19sec (379 seconds)

Published: Mon Nov 09 2020