AMATEUR VS PRO: Freepik Designs Improved!! (Before & After Examples)

Videos By Dal

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