Transform a Boring Template Into a Memorable Design – Monday Masterclass

in this Monday masterclass we’re going
to transform a generic and boring
landing page template into a spectacular
iconic design that people are sure to
remember behind this lecture is
world-renowned designer lecturer and
typographer Oded essa who was recently a
guest in our podcast Oded take it from
here thanks Simon I’m sure that this is
true for most of us when we hear the
words I Love New York and the first
image that comes to mind is this this is
iconic design what makes something
iconic is how well the visual
representation connects to that idea so
that it is intrinsic the image and the
idea are unmistakably connected this
should be our goal when we sit down to
design a webpage to creating a design
that our audience will always remember
and link to the ideas and content of the
page
in this week’s Monday masterclass we’ll
be taking this generic landing page for
a ballet school and transform it into
something worth bookmarking sharing and
talking about let’s start by taking a
good look at the area above the fold at
the very top of this page try to give it
a good squint and let it sink in now
we’ll close our eyes with our eyes
closed which elements do you remember
most is it the dancer is it that big
yellow circle now the next question we
need to ask is does this circle help us
convey the idea of our landing page when
we think of a dance school a circle is
hardly among the first things that come
to mind so it’s safe to say that this
circle isn’t really doing anything for
this dance school and if it’s not
promoting the main idea it doesn’t
belong let’s analyze the elements we
have here besides the circle we have the
lead dancer a headline a logo some text
a menu a background as well as a few
smaller circular elements floating
around we need to
identify our main visual narrative and
use it as a foundation to work on the
most memorable element in this top
section as you’ll probably agree is the
dancers magnificent movement and the way
that her dress flows with her movement
another strong aspect is the headline a
series of uniform letters made up of an
unremarkable San serif perhaps
stationary or rigid if we think about it
the contrast of these two concepts
flowing motion and solid rigidness
actually works very well with the idea
we are looking to convey the ballet
school the strict training and rigid
practice required of ballet students and
the contrasting freedom and flowing
movement in their dance you can also
appreciate a similar contrast occurring
between the uniform and rigid tempo of
the music and the irregular free-flowing
movements of the dancers so now we have
our design concept flow versus
consistency let’s move on to my favorite
part
removing the visual noise visual noise
is made up of all the elements that
don’t really have conceptual or formal
justification so getting rid of these
elements will clear up our composition
making a stronger impression on our
users in this design we have a purple
background that doesn’t really say flow
or consistency actually even if we
change the background to a different
color it still wouldn’t relate so we can
remove it completely and give the dancer
the freedom she needs the next thing we
see here is the yellow circle do we
really need it well in the beginning it
was a technical solution we needed a
background to contrast our dancer
against the purple background now since
we took the purple out there is no need
for the yellow circle so after removing
all the elements that acted as visual
noise we start our drill down and refine
our concept let’s talk about the letters
in the headline we can see here letters
that are tall and wide short and wide
tall and narrow the consistency here is
only partial so we can confidence
changed the letter-case to capital
letters and make the space between them
wider and even in order to get the
consistent look we are after we can also
work on a menu menus are usually taken
for granted disregarded like and also we
don’t give it proper attention since we
just need it for navigation like it’s
not part of the story but of course it
is our menu looks okay it’s kind of
connected to our consistent concept but
if we examine it a bit closer we see
that again we have regular letters as
well as pipes that makes for uneven
space between each word we can change
all the letters case to capital delete
the pipes and give the words equal space
between each word we can even take it
one step further and change the search
icon to a square one if we keep doing
that throughout the whole first section
what began like this now looks like this
moving on to our next section now that
we have such a strong and clear concept
flow versus consistency we can implement
the same principles on the other
sections we have two images that are not
consistent nor flowing so this time we
can switch the rows and change the
headline font to a more flowing one
while making the images more consistent
and the result this helped us to show
the difference between the two sections
while using the same visual principle we
see that everything works well together
and the concept is still clear and
strong moving on to the third section so
because the first and second section
worked so well together let’s do it
again
repetition helps us base our iconic
design in the third section we have our
lead answer we can see that again she
was placed in a circle that does not
contribute to our concept so we should
break the constraints of our circle and
give the dancer the freedom to dance and
look at the difference it makes our
fourth section is the call to action
section here again we can switch roles
and make the text flowing and images
consistent we can
add a sign-up button to make it more
actionable let’s have a quick look at
the new design from top to bottom you
can see the tremendous difference that
has been made we even added motion
effects in order to make our concept
even stronger and help our elements move
and dance
just imagine the impression a user
arriving from an ad campaign gets when
they see this the dance is coming to
life on the page
to recap we first analyzed the most
remembered elements in the page asked
ourselves if they fit the purpose of the
page then found our pages main concept
of flow versus consistency cleaned off
all the visual noise heighten the
contrast between the flowing image and
the consistent text switched it around
for the second section making the text
flowing and images consistent and
finally rinsed and repeated for the
third and fourth paragraph so next time
that you are creating a landing page try
to run through the same process we did
today and make sure you create something
worth remembering
speaking of remembering if you enjoyed
this masterclass and we hope that you
found it inspiring and helpful be sure
to click the subscribe button and tap
that bell so you don’t miss another
masterclass full of tips and tricks for
designers and developers working in a
WordPress environment and of course we
always appreciate any comments or
criticism that you may have and
obviously any helpful tips that you
could help other users with please by
all means leave your comments below
thanks for watching Cheers