so welcome back to satori graphics and today we have more interactive content that you can follow
along with and try to work out what changes are going to be made and of course you know learn
something along the way and for today's video i'm going up against free pick and if you don't
know already free pick is a place where you can download free templates vectors and so forth and
hashtag not sponsored i just thought it'd be interesting to download things from freepik
and then kind of improve them using graphic design principles 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 the first example today is a fashion
kind of web page or landing page or website and this is pretty much how it was downloaded from
free pick apart from there was no actual model or woman on the downloadable version i had to source
that myself which i did from pixabay so i'm going to make a whole lot of changes to this design and
as we've done before in this format a video what would you change looking at this design right here
what kind of graphic design principles would you apply and what stands out is just being wrong from
a design perspective the first thing that i really want to change right off the bat is the typography
on the left hand side here now a set of fonts can look good when we're talking about fashion
but for this style of design and also concerning the lettering of the bags that she's holding
i think a sans serif font would actually do a lot better here and it would be more modern and
more up-to-date but as i said serif fonts can actually work when we're talking about fashion
and kind of high-end brands and then i'm going to give this typography a kind of splash of color
and i'm going to take hues from the focal point which is the woman herself so black and red
so you've got some nice contrast in color on this typography and also the fact that the
sale is in red really highlights to that part of the design this is also called emphasis and also
you could say it's hierarchy as well yes sometimes graphic design principles do merge into each other
and then lastly for the typography section i'm going to also put this lower part of the text into
black as well that just ties everything together on the left here pretty nicely okay so what else
can we do to this design to really elevate it to that kind of expert or a professional level
we do have some call to actions here where it says shop now and also home
and they are kind of in a muted brown nasty kind of color so let's give that a spot of red as well
yeah that looks a lot better and it does emphasize that these are some points of interest on the
design the shop now is definitely a call to action and also the button at the top is just telling us
what page we're on on the website and lastly there was an aspect of the design background but i just
wanted to change up a tiny bit and that is to remove the white area on the left here because
i thought it was too busy i think when i removed it it emphasizes the text kind of box here on the
left this area of typography it's really really emphasized and it's just a lot neater to the eye
and so here is the satori version of the design and here is the original version of the design
from freepik there are probably more changes that could be made and so forth but i just quickly went
through today's designs to make this video so the next design is a poster and this one is going to
be somewhat subjective and it is a pretty neat poster to be honest in the first place
but there are a few things that i personally would do to change this but what would you
do to change the design what would you address to elevate it to different heights
so firstly i've gone ahead and i've increased the space between each of these symbols these
geometric symbols i did think they were too tightly packed together and so i've given them
more room to breeze and i've also decreased the overall size of this part of the design
furthermore i've changed the font because the original was a condescended sans serif font much
like biebus and i do like bebis but i don't think it worked in this situation so i changed that
up to a custom font that i've actually made and that is going to be on sale at some point in 2021
but i've also added some hierarchy to the text on the right i have the subheading which is in a
bold and a bit larger font and then below we have the body text which is thinner and also smaller
and then here i moved the top subheading over to the left and i've aligned everything
i just think this looks neater at the moment it has more room to breathe and it's not so
kind of busy on the eyes if that makes sense so what would you do next to this design or do you
think it's fine as it is and to be honest it does look alright as it is now but there's something
that i personally wanted to do something i thought when i first glanced at this design
and that is i wanted to add some color but i wanted to do it in a kind of intelligent way
and as you can see i've just added one shape in the top right corner with orange and then i've
linked that down with the main typography in the bottom left now i think this poster looks
a lot more interesting now and it also looks neater and then when we set it side by side to
the original you can make up your own mind but for me personally i do prefer my layout and my design
but again this kind of design where it's more of a kind of artistic poster is going to be subjective
the third design again is a poster and this free pick download was actually pretty good as it was
i'm not going to change anything here because i'm just going to illustrate something to you
which is a fundamental graph design principle that we are going to look at later in the video
on this poster the top left section of typography here the area that i've highlighted with this pink
box there is a graphic design principle going on here where there actually are many graphic design
principles and we're not talking about hierarchy we're not talking about contrast we're not talking
about emphasis but there is something else here that is going on i know it's not alignment
either can you work out what this is it is a very important aspect of graphic design it's something
many designers actually overlook or they just do it subconsciously without even realizing it
and that is proximity this primarily is just a technique of organization by grouping elements
of information that belong together and then separating them from those that are not associated
you can provide a logical system of organization that lets your audience understand and locate
parts of your design that actually matter to them it's not only visually appealing but it's just
organized and allows the reader to navigate around your design properly
so if i exaggerate the fact that there's no proximity being used on this second design
you can see how disjointed everything looks and yet this is an exaggerated example
but when you're designing something you do want to consider proximity and what elements of your
design actually go together as a kind of a family or a group and what kind of relations do they
have together and so with proximity in mind let's move on to the next design which is an infographic
this is exactly how i downloaded the infographic from freepik can your eye for design
work out what's going on here and what's wrong and what would you change to this design
the first thing i did was to change the background color to a more of a darker navy
blue i just thought the previous blue was too bright and it didn't allow the elements on the
design to actually stand out properly so that was the very first thing that i did i'm just
jumping ahead i'm going to show you pretty much all of the changes that i've made so
when regarding proximity one of the best tips that you could apply is to use negative space
in using negative space you allow the groups room to breathe that are associated with each other as
an example the bottom left when i have that one two three four there are smaller now but they have
more room and more space to actually be linked as one group and then their data on the bottom
right is together and then all the information in the top right and top left as well i also
made some changes with the actual style of the data on the right and i've used some hierarchy
in the top left and top right with the white and also light blue colors finally setting them side
by side and with a few more changes here is my design and here is a design from free pick
yes i could work on this design more so but these are some fundamental changes that did need to be
made if you can see on the right everything is just cramped together and it just looks
too busy and overwhelming an infographic needs to have the information displayed efficiently
and so the viewer can just easily move to one space to another so when regarding an
infographic proximity is probably one of the most important things that you're going to consider
as well as of course other graphic design principles now i know many of you guys
are really digging this kind of content and i enjoy making it because it allows me to express
how graphic design should be undertaken using this basic fundamental principles
but so far the videos have been more broad they haven't been narrowed down to a specific topic
if you would like to see a specific topic undertaken in this kind of format
do drop a comment down below 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
satori 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 and until next time design your future today peace
yes