so we're going to take that before and after concept one step further
in today's video with some advanced thinking but first a quick word from today's sponsor
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 design and it's trying to raise
awareness of plastic pollution in our oceans it's a great pools but it's a bad design unfortunately
and we're soon going to see why but firstly what does the design do correctly i'm going to be frank
the pros for this design are quite few before i start i really like the concept if you couldn't
tell we actually have an image of plastic or rubbish made to look like sushi rolls this design
is a classic example of an amazing design concept which has been carried out with poor execution i
absolutely love love love this concept and soon we're going to build a design around it together
but yeah i guess we could also say the design is quite minimal with lots of
negative space or shall i say it's kind of minimal but anyway let's build a new design
from the ground up we essentially have a blank canvas and i've kept the original design off
to the right as a kind of reference point thinking about this design where would you personally start
now i think i want to make a focal point and a good choice here would be the concept that
being the image of the pollution or rubbish sushi rolls down below the next step is going to dictate
the entire design and so the choices you make need to be grounded firmly looking at the image
of that sushi roll pollution what feelings do you get is it a dainty kind of comforting image
no it's not it's a very dirty a very harsh and a blunt impacting kind of image with that in mind
the typography in the original design simply doesn't match the original design uses playful
kind of informal non-impacting fonts and this is a clear mismatch or disconnect within the
message we want to create typography that is blunt and hard hitting so here are my choices
and for now let's just disregard color i've gone for yes you've guessed it a bold sans-serif font
for the upper two lines and then a more rugged looking font for the goes into you section i've
made sure to keep the sizing pretty much equal to the image below just for visual harmony sake
the first color i'm going to add is blue and this can be seen in the middle of those
plastic sushi rolls connecting color like this throughout the design is a great hack and more
about that later in today's video the typeface i chose here was han cf that's h-a-n-s-i-e-f
and that typeface does come with a normal choice of font but also as you can see here
a textured font i feel like this textured option really adds to that kind of rugged and polluted
sense you get from the sushi rolls and i think it just complements it
you always want to be thinking in this kind of way when designing something you want to try
and grasp the message or the tone of the message and then make design choices around that notion
so i've then gone ahead and made the now section red so it really stands out from the design
notice how i haven't used dark gray or black for the other areas of typography this was done on
purpose and i did try to use a darker choice for the typography but it kind of overpowered the
blue type and also it tried to compete with the focal point below being that main image
i then finally went ahead and added their logo in the bottom corner
and this is just a minor addition that's not really that important
but yeah side by side here is the before and after design and i'm pretty happy with how
this message and the concept was delivered in the revision but let's move on to the next one
here is our second design today which is kind of a social media marketing design for spotify and yes
every design you see today in this video is how i personally came across them and found them online
so instead of looking at the pros for this one let's take a look at some cons what did
this design do badly using your eye for design what do you think is wrong here with this final
outcome for today's video it was quite difficult finding bad design and actually that was one of
the longest aspects of making this video was just finding bad design that top brands are putting out
anyway i think the orange color really does not work well on this specific background
the two colors cause a kind of disharmony when put together and the text just comes across as
really jarring also every bit of typography uses the same color even the logo and the website down
below now this renders the design boring and it kind of lacks focus those are the two main
issues i have with this design and that's what i'm going to aim to resolve with my revisions we are
again starting with an almost blank canvas i've left the focal point as it is but yeah i noticed
the hand has white painted nails and a lot of the phone itself is actually white so i think matching
that white color into the text is a great move i decided to keep the orange on one of the words
of the main heading just for some interest and visual attention grabbing factor for the next
section of the text i did continue with white and actually on my adobe illustrator screen it looks
just fine however looking at it now after a video render it is pretty difficult to read now i'm
not sure if that would be the case when viewing this design online and not in a video but anyway
i decided to go for black just to increase that legibility notice the style of the sentence casing
on the main heading it uses capital letters just at the beginning of the sentence and the rest are
in a lower case now this works because this part of the text is almost like a message or a quote
it's literally somebody speaking to you through the design below the typography we have the
twitter icon and for this i wanted to really really hit home the visual connotations of twitter
and so i chose the iconic blue logo to really get into the minds of the people about twitter
i also think it just looks neater and it continues that theme of hierarchy from a color perspective
and then to finish off the design i use more white with the second and also the last section of
orange you can really see how the first design was overloaded with that orange color when it's set
side by side with my design the new design looks fresher and it's just easier going on the eyes i
did keep the layout the same because i feel like it's pretty well balanced and the choice of fonts
was on the money as well so the third design in today's video is a landing page for a vr headset
and right off the bat you should be considering just that the vr headset it's a tech niche and
so you want to base your decisions around that niche sector and also the kind of people who
are in that niche but what does this design do wrong well it's not a terrible design at
all but there are some things i personally would change for a start this by now section isn't
attention grabbing considering the main point of this design is to get somebody to buy the product
this design choice is pretty bad the next point is more subjective and i don't like how far apart the
leading has been set on the main text the leading is the spacing between each line of text in case
you didn't know the layout is good enough because it has balance on two sides with the focal point
image dividing them down the middle but i personally want to change things up a tiny
bit so i'm just going to fast forward and show you the changes for this one and you can see
i've tightened the leading on the main text i have really made the buy now option visually
attention seeking again my tried and tested method of linking colors has been used and that's
by grabbing that deep vibrant pink and making use of it in different areas of the design the design
now has balance in a different way because i've enlarged the focal point and then i've shifted
all text content onto one side but yeah again this is subjective and for me it personally
looks better this way and you might or you might not agree when seeing both designs side by side
lastly the typeface i chose for the main typography is more futuristic and more
modern looking and i think that appeals to the niche viewer of this design a whole lot more
so last week i gave you guys a headphone poster to redesign and you came up with some really really
interesting designs there are so many awesome ones so if you don't see your design in today's video
don't think it's because it was bad it's just i had to choose three out of about like 70 or 80.
the first design i chose was by hassnain and i really liked this design because the layout and
the typography choices were really good i would have maybe like to see the studio 2.0 and the
beats by dre horizontal and i know the designer did this on purpose but i'm just curious to see
how it look also the two-year warranty motif is pretty cool too the next design was by olio
and i absolutely love the layout composition on this design it looks so clean and it just
works really well together this was a great way to elevate the original design for sure
the third and final design choice was by penchant mind and again i really like the
simplicity and the layouts maybe the headphones could have been placed slightly differently
but all in all it's a really great design i didn't have time to set up a new kind of project for you
guys to work on but in the next video that is before and after style based i will do just that
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 a video on screen until next time design your future today peace