AMATEUR VS PRO: Advanced Design Examples (Before & After)

Videos By Dal

so you guys really love the last video where
i made different designs and showed you before   and after alterations and today we're going
to look at some more designs but this time   around it's going to be slightly more advanced
so let's get into it 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   and so we have a pretty basic poster design
here on the screen if we then make one crucial   change to this poster as you can see here what
would you say has been done to this new design   what graphic design principle has actually been
implemented into the second design on the right   and so if you're not aware of all the graphic
design principles i do suggest that you look   back at my older videos or just check elsewhere on
the internet and do familiarize yourself with all   of the graphic design principles if you can master
those principles they will elevate your designs to   new heights okay so the hand and the light bulb
on the design on the right is actually using   flow it's going to lead the viewer's eye upwards
towards the top left like so flow is all about the   movement and direction that you lead the viewer's
eye around your graphic design and it just makes   the composition look really neat and effective
so you can see here that the viewer will see   the focal point of the hand and the light bulb
and their eye will be ushered up to the top left   it also makes a nice clear diagonal divide across
the design and this also creates a nicer focal   point because it's slightly larger and it's just
a lot neater than the focal point beforehand and   also some bonus tips who knows what graphic design
principle is in use in the text in the top left   of course this is hierarchy but it also could
be seen as contrast so let's move on to the   next design which could be seen as a app screen
or it could just be like a banner or a poster   so this artwork is going to be around finance
and we need to add some text onto this artwork   and i know many people stumble when it
comes to choosing fonts and using typography   in their graphic designs so let's try and
clear that confusion up so i'm going to have   a title that reads easy finance and then
i want a tagline saying save money easily   so i've told you before about how to choose
typography for your designs you want to look   at the design and see what kind of vibes it gives
off what kind of personality does the design have   and what does the message evoke we can see that
we have very bold colors and a very bold kind of   illustration and the design looks kind of playful
it's not really serious and it's not really kind   of corporate in a sense so you want to be pulling
out all of these words these keywords that relate   back to the design and then relate that back to
a typeface style so you want to be thinking are   you going to be choosing a sans serif is it going
to be upper or lowercase you might even go for a   serif or even a slab serif and also of course what
about a tagline what are you going to use when it   comes to the font choices the financial sector
is serious but the artwork doesn't look serious   it looks kind of playful and cartoony so for my
design i went to a bold application serif and then   for the tagline below i used a thinner sans serif
and of course i aligned everything to the left   so it just looks neater this way and then for a
nice final touch let's add in some color contrast   so when you need to add typography onto
your designs just remember what is the   design evoking to the viewer in terms of how it
looks and then you can adapt your font choices to   those keywords so the third design today is
going to focus on something that is quite   subtle in many respects but it is pretty crucial
and it is a slightly advanced topic as well we're   actually going to be focusing on these call to
action social media icons at the bottom so there   are two different things that we could change
to this section here to make it more effective   as a graphic design so i want you guys to
think what could we possibly change to this   area to make it more effective to the viewer
and as a design solution what would you do here okay so the first thing i've done is that
i've actually made every icon a circle   now you might be asking tom why did you do that
they were perfectly fine being a square there's   actually quite an interesting reason behind it
and i'm curious to know if you know why i did that   sure they would work as a square but they actually
are more functional as a circle and here's why   so if you notice on my design there actually
are quite a lot of circles in the cucumber and   the illustrations running down the middle having
the icons as a circular shapes creates repetition   now repetition is a great way to reinforce an
idea through a design and it just ties everything   together in a neat visual harmony setting sure you
could have them as squares and that would create   contrast but you might want to create harmony
and using circular options here would be useful   and yes there are going to be some people who say
oh squares give off contrast and that makes it   more visible it does come down to the designer's
subjective choice at the end of the day but i'm   just using this as an example to show you what
you might want to consider in your graphic designs   and so the second thing that you might want
to change is actually the color of the icons   because these are call to actions these need to
stand out and these are the things that you want a   viewer to click on or to notice and so have
them as green yeah it does tighten the design   together but they won't stand out as much as a
orangey red as you can see here and again this   is just a small design subjective choice that
you might want to be making on your designs   so we've been looking at some contrasts we've
looked at hierarchy flow repetition and now   we're going to be looking at balance would you
say this web page design has a degree of balance   do you think this is a balanced graphic design i would suggest that it's probably not balanced
no if we look at a revision we can see that we now   have the content on the left in a nice group and
then the text content and the call to action on   the right is a similar size that creates a
symmetrical balance this again just creates   visual harmony and it doesn't cause a jarring
response in the viewer we know the information   and the call to action is on the right and then
like the visual candy so to speak is on the left   so this is symmetrical balance but how would
asymmetrical balance look on such a design as this   but as you can see we now have the call
to action and also the text content   slightly smaller than the illustrations on the
left and this would be considered as asymmetrical   balance an asymmetrical balance is when we have
a larger kind of group and in a smaller group   as you can see with these pink lines but did you
also notice how i've aligned the text content both   horizontally with the illustrations and then
also aligned with the home button at the top   so these are the kind of things that you do
want to consider when you're designing something   for any kind of purpose like i said at the
start of the video those graphic design   principles are going to be fundamental and
the building blocks to your graphic designs   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 also click a video on screen if   you want to learn something else today but until
next time guys design your future today peace you