so i've taken designs and enhanced them with small little changes and you can follow along in today's
video and test yourself to see how many points you can get right out of 23 and this is to see if you
fully know amateur between professional graphic design it's really great being able to show how
a design looks but it's even more impressive if they can actually experience the design itself
as well as understand how it feels and how it behaves learn more about framer
later in today's video so here is the first before and after design the left being the before and the
right are the changes that i've made the first question i have for you is this circled here
is a call to action button and basically that's just where a designer wants the end user to click
but on my changes what two main reasons can you give as to why it's better than the first example
so we're looking for two main reasons why the second option on the right
is more effective than the design on the left just specifically the call to action button
okay so first of all two points to the first answer and that's obviously the color
having it in a bright pinky red makes it stand out compared to it being in black as before and thus
it's more visible and more clickable so if you guessed that right give yourself two points but
what about the second answer now if you notice the isometric design is very square and very straight
edged and that also the call to action and the original design is also a square shape then you're
on the right track and so on the revised design the call to action button is a circle and this
makes it stand out geometrically speaking from the rest of the design and in standing out we create
some contrast which again makes it more visible and more clickable so for those two correct
answers you can have four points in total or just two points if you have one correct do keep track
of your scores as we move through today's video and see how many you get at the very end so for
the next two point answer in today's video i want you to look at these areas circled in pink now
i've made some changes to the typography obviously but what graphic design principle has been used
in the new changes now if you do watch my videos often then this one should be pretty easy
so for two points the answer is of course hierarchy because we have some visual hierarchy
going on in color and size in this new change design though thinking about it some people
might also say contrast or even emphasis was used and so if you did guess these two instead
of hierarchy give yourself just one point but yeah i was looking for hierarchy for two points
okay so the next answer is worth three points so really get your thinking caps
on and try and figure this one out so there is a specific connection with the isometric design
the illustration section with the call-to-action button and it's something that ensures the viewer
sees the call-to-action button but can you work out what that might be
looking at the isometric illustration and then the call to action button
what ensures you finally do end up noticing that button
so yeah this one might be a bit tricky but the answer i'm looking for is flow and in this
instance notice how the direction of all the lines in the illustration lead to that button
those angled 45 degree whatever degree they are lines do drag you in that direction this is a
subtle but a very effective method designers use and it does work well but yeah that one
was worth three points if you got it correct and that was the last question on this first design
so moving on we have here a poster design and it's not looking that awesome at the moment now
i'm going to make two changes to the design that are based around contrast and it's solely going to
be on the typography and nothing else so if you can work out what changes based on contrast i'm
going to make you can grab yourself four points total each correct answer being worth two points
so have a quick think about contrast and this design
okay so the first change in terms of contrast is size we can make the main heading larger and
then the lower text smaller which is just simply a contrast of size and it does look more visually
appealing so that's the first two points answer right there but have you gotten the second one
well i've taken a color from the poster's edge on the right and i've added it onto the 2021
to create some color contrast and again this just elevates that design visually speaking
so there was a quick four points in total before we move on to the next design
so on this design i want you to focus on the orange section over on the far left in this
area there are two key or two main problems i need fixing take a closer look at the design
over there on the left and ask yourself what could be done better
so yeah the first answer for two points is that the design is just too busy so if you said the
design is too busy too cluttered or too much is going on give yourself two points the next
answer however is for three points because i feel this is slightly more difficult to see so
the problem here is the design doesn't take advantage of proximity which is a design
principle and if we look at the revised version on the right we can see that proximity has been used
because the elements that are linked together are just closer together in one group and this just
seems to work so much more visually speaking to allow for the design to be less busy i increased
the size of the orange zone to make more room and then i lowered the outline text to shop graphic
downward remember that negative space is your friend most of the time as a designer so yeah
there's a total of five points on that one and i also decided to make the promo graphics stand
out a bit more with some white text and that's nothing to do with the questions and answers
that was just me wanting to change it so here we have a text heavy design and again we have
two changes that you need to try and work out before i show you the results both changes are
typographic in nature and one change is worth two points and the last change is worth three points
so taking a good look at this typography what do you feel needs to be changed and worked on
so the two points answer change relates to the lower block of text at the bottom the leading
is simply just too tightly packed together and so we need to increase that to make it more legible
and if you got that right that's two points right there but what about the three point question
so take a look at this top block of text here if you said the layout needs to be changed because we
have the word trusted by itself on one line then you're correct this isn't suitable for a title
and changing things up will just work better for the design we could also have just had put your
faith in a trusted all in one single line but the fact is the original layout needed to be changed
so interactive prototyping is the best way to communicate your app or your website's idea the
sponsor of today's video framer is a no code free to use tool making it easy for anyone to become a
prototyper you can insert pre-built interactive components in seconds sliders that actually
slide and inputs that can be filled as well as buttons that can actually be clicked or of course
you can create your own complete with every state and variation you need and that's all completely
code free thanks to the new smart components release sign up to framer today at framer.com
forward slash satori and that link is going to be down in the description box below and if you want
to see more content just click the video on screen until next time design your future today peace