WP Design Masterclass

Extreme
Makeover
Website
Edition
Neel Sarode
Conversion Designer

www.wpdesignmasterclass.com
I like to call this
"Extreme Makeover:
Website Edition"
My name is Neel Sarode. I'm the lead designer at Bank Account Builders, where
we've designed websites for large scale companies and influencers.

This is an eBook we took the time out of our schedule to write to show people
just like you how to design websites that grab attention, generate interest, and
convert your leads into customers.

Why is this important?

Whether you're someone who uses Wordpress to help other businesses market
their services or even the owner of a business trying to use Wordpress to grow
your business, it's imperative that your site is designed to grab attention,
generate interest, and convert customers.

This guide will show and teach you exactly what you need to do to make sure that
your pages don't blend in with the thousands of ugly web pages that people are
using to market their services, but rather have a unique, polished, and modern
look that tells your story to the viewer in a clear, easy to digest yet enticing way.

In this guide we will cover the following 2 topics:

1. Layout Principles to create a high-converting pages

2. Design Principles to generate interest, grab attention, and convert
#1 - Layout
Over everything, layout is one of the most important things to consider when
designing your landing page.

You want to consider the physical layout ( how many columns / rows etc ) and the
informational layout, which considers what messages in what order are being
shown to the user.

At our agency, we follow a simple yet extremely effective system that we’ve found
increases conversions across the board: The EPC Method. (Educate, Proof,
Community).

EPC Method (Educate,

Proof, Community
The EPC Method is a rule of
guidelines you should follow while
designing your landing pages to
ensure your message is clear and
convincing. It describes the ideal
order and structure for your
landing pages that will optimize
the chance of a lead converting to
a customer.

Educate

The first letter stands for Educate. This is where you educate the visitor on exactly
what you do and what you sell / offer.

Checkout the graphic on the next page to see how I leveraged different pieces of
content on the page to educate the visitor on what was being offered:
 Educate the visitor on
what exactly it is you do
You can use things like the benefits of
the product / service, the processes
behind it, and other sections similar to
those to explain to your visitor exactly
Screenshot of first part what you do.

of a landing page
The #1 goal of a landing page is
always so the visitor knows EXACTLY
what they’re looking at within 3-5
seconds of landing on the page!
That’s why it’s important to keep the E
(educate) at the beginning of the
page, to avoid any confusion.

Proof

The second part of the EPC

Method is Proof. Proof can be
done by leveraging things like
statistics and social proof logos
(for example associations that Screenshot of Press
your business is a part of, places Logo Bar (Secret Knock)
you've been featured, etc) to
establish credibility for your
product / offer.

See to the right how I leveraged

Proof to edify the page more and
give the user more assurance that
what they’re viewing is worth their
time and trust worthy.
Community

Lastly, but definitely not least is Community.

When it comes down to it, everyone yearns to be a part of a group, and be a

part of a community with people similar to them. Showing reviews, video
testimonial, and social media posts from your customers can be seen as the key
to unlocking your customer’s buying threshold. 

At this point, the visitor has been educated on exactly what your product /
service is, and if they were interested they continued and came across proof on
your website that you’re trustworthy and your brand knows what it’s talking
about. 

The last confirmation these visitors need is to see that they’re not the first to
have tried your product/service. When you put testimonials and reviews on the
page with FACES*** (make sure you include pictures of the person - increases
conversions drastically), it gives the visitor a sense of community and ensures
them “I’m not the first - other’s like me have tried this product and loved it. Why
shouldn’t I?”

Screenshot Clusters
A great way to accomplish community is
using a screenshot cluster of reviews and
messages from customers on your other
platforms (like instagram, facebook, and
even email) and almost in a way “shoving
them all in the visitors face!”

Since community is the key to the lock, at

the end it’s good to show them an almost
overwhelming amount of social proof,
pushing them closer to full certainty that
you’re product / service is worth buying.
Wireframing / Planning Layout
Before you even consider designing your websites landing/home page, it’s
extremely important to get your thoughts written out  clearly where the ideas
stay consistent, on paper.

Planning - What makes your offer convert?

A great way to make sure your landing page has the correct information it needs
is to answer the following questions on a piece of paper:

What is my product/service? (1-2 sentences)

What does my product/service do for the customer? (1-2 sentences)
What are the main 3-4 benefits of my product / service?
What sets my product/service apart from the competitors? (1-4
sentences)
What well-known brands / associations is my company affiliated with
that I can leverage?
Do I have any statistics I can use to edify the claims my business
makes?
Do I have any social media posts from past customer’s I can leverage
to put on page?
Do I have reviews / testimonials I can put on the page?

After getting all that information WRITTEN DOWN, you now have all the
informational assets you need to build the structure of your page.

(See next page for a general guideline for structuring your landing pages)
General Structure
Below you can find my general
structure for laying out your landing
pages to convert:

Header
What my product does for customers

Social Proof Logos

Credible logos / associations

Product Intro
What product does for customer
(extended)

Product Deep Dive

What exactly does product do / what
it's made of / specifications / what sets
it apart from competitors

Statistics for Edification

Credible statistics / numbers that you
can leverage to give your product
more credibility

(CONTINUED ON NEXT PAGE)

 Social Media Posts
Leverage customer reviews /
comments from actual social media to
show authenticity

Customer Reviews
Show more reviews and testimonials
(can never have enough social proof!)

Final Call to Action

Ask customer to purchase your
product / service once more

Footer
Final part of your page with no distraction
but your logo / privacy policy / terms pages

Gather your tools & assets

Second, you need to figure out what your site is going to look like. For example, if I
needed to design a site for selling snowboards, I’d want lots of imagery with snow and
snowboarders. Pretty self-explanatory, right?
 PRO TIP: The website pngtree.com has lots of transparent png images
that already have the background cut out of them that you can leverage
for quicker and cleaner design - one of my go to’s! (paid service)

www.pngtree.com www.unsplash.com

You're all set.

You can now use these assets
you’ve gathered as inspiration and
components when you sketch out
your website.

next step: sketching your funnel

Sketching out your funnel
I know what you’re probably thinking. “Do we really need to sketch out a design on
paper? Can’t I just make it on the fly?”

Simple answer. YES! We do need to sketch it out!

Rest easy knowing I spend a maximum of 5 to 10

minutes sketching out my designs
Checkout the sketch → landing page below: (The sketch took me around 3 minutes to
do and in turn sped up the process of creating the landing page exponentially)

The Process

I like to start with just a long rectangle

on a piece of paper, so when I’m
sketching out the page I’m not putting
in too much detail at all, just getting a
general shape of what’s going where. 

I also don’t write the copy in when

sketching it out, but put little
placeholder scribbles and just draw an
arrow off the side showing WHAT that
section should be about. You can
worry about the copy later, getting the
structure down is the very important
step to be done prior.
 Know your capabilities
*Make sure when sketching that you keep in mind
the capabilities of what you can do when
designing your page. Sometimes if you want
something to look very specific, you will need to
implement custom CSS which isn’t difficult, but
takes time to learn if you didn’t learn coding prior.

Want to learn how to design

World-Class websites using
Elementor?
If you'd like to learn how to use Elementor
and Wordpress to build beautiful,
optimized pages like this, join my WP
Design Masterclass where I cover
everything from A -> Z on how I build
pages that break the web design norm.

I Want to Learn How to Revolutionize my Websites

Time to get started building!

Now you’re all set to start building out your site! Now that you know how to get your
initial structure down, the next section will cover exactly what things you need to keep
in mind when designing and building your site now so that your site look better, grabs
more attention, and converts more visitors to customers.
#2 - Design Principles
When designing a website, understanding and implementing visual hierarchy is
extremely important.

Visual Hierarchy is basically a set of rules that directs the user on where they should
look first, as well as what messages should be digested and understood first.

Visual hierarchy takes form across many facets, from the thickness of your font to the
contrast of an image.

Textual Hierarchy
When designing a landing page, it’s very important to have your text visually signal
the user on what to look at and scan first, in the most easy and convenient matter.

We accomplish this on Wordpress pretty simply: Using Headline, Subheadlines, and

Text.

An important rule to remember is your Subheadlines, Headlines, and Text should all
be very visually distinct from one another, but consistent across your whole page. 

The conventional way (and the way I personally recommend - users are always most
accustomed to whats conventional) is to have your headlines the biggest,
subheadlines medium sized, and your paragraph text small.
You should keep the size of all your headlines, all your subheadlines, and all your
paragraph texts across your design exactly the same to increase conformity,
conventionality, and to keep it as easy as possible for the user to know what level of
importance the information they’re reading is.

Headlines
Your headlines should be the largest of all 3 text formats and shouldn’t be used too
much on your site. You need to save this largest type text for your most important
messages on the page, which you believe the user should see before ANYTHING else.

Generally, you want to keep this text format for the headline in your header, the first
text the user reads. I suggest you use it in 2 ways:

1. Using the Headline Format for ONLY your header - This allows for you to get the full
impact of what your header has to offer, as this will be the only text of it’s size on the
entire page.

2. Using the Headline Format for your major sections - Using your headline format for
your major sections (sections with smaller sections inside) and increasing the size of
font even further for your header (to keep distinction between header and major
section headlines)

Subheadlines
Your subheadline format should be used for the headlines in your sub sections and
should be visually smaller than your headlines.

These should be used as headlines to smaller sections within other sections, as shown
in the diagram. These are very important because they give the viewer a context of
what they're looking at and what they're reading

Subheadlines also allow you to visually space out your text into small, manageable
chunks so your viewer doesn’t get overwhelmed with all the text on the page!
Paragraph Text
Your paragraph text should be the smallest of all the text on your page, and it’s
important to create a visual contrast between it and the headlines / subheadlines.

One of my favorite ways to accomplish this is to have the paragraph text a lighter
shade than the subheadline text - just like this eBook (except with a black / colored
background, I recommend leaving it full white to increase readability)

The text doesn't muddle up the

message the subheadline is trying to
convey, but still displays itself nicely
in a clean manner so the user has an
easy time reading it.

Visual Hierarchy
Checkout these two images below. What are your initial thoughts when you see
these images?
My thoughts are..
I see that image #1 draws your eyes towards a very specific object in the image, while
#2 mixes everything together, creating a muddled message on whats the main focus.

The reason your eyes are drawn in on image #1 is because of the visual contrast
between the object and the surroundings.

You can create visual contrast in many ways:

Contrast
Saturation (color)
Blur (Depth perception)
Size
Border/Stroke (outline)

When you design your page, always consider that

whatever the main focus is, you have the colors and
contrast much brighter and visually distinct than
whats behind / around.

This will give the visitors eyes a path to follow and

hotspots to look to digest your message quicker,
reducing the chance of a drop off.

Checkout a landing page I designed to the left.

You can see that I made sure that the subjects of

attention were much more visually distinct than their
surroundings, drawing the user's eyes towards what I
want them to see first

I used the color red to draw eyes towards pleasing

graphics and important text, and used green to draw
them towards the call to action.
 Color Theme
The next topic I want to talk to you about is
choosing your colors correctly, and using
them to drive your message home.

Checkout this personal trainer template I

created  ->

As you can tell, it has a very simple yet

enticing and attention-grabbing color
theme.

I accomplished this by sticking to two colors

(red and black), and utilized the indigo
color for my CTA's so that they stand out on
the page and are the first thing the user's
eyes are drawn towards.

A great way to get inspiration on what kind of colors to use is searching on Google for
things like the following: (fill in your industry in the blank)
Best ______ landing page designs
Best _______ websites
Top _______ industry websites
Best colors for _________

For example, “best personal trainer landing page designs”

It’s important to be able to distinct which type of color theme works better for what
you’re trying to accomplish:
For example, for this personal trainer funnel the goal was to give a more “extreme”,
“hardcore” feeling that would make people feel as if this is the place they’ll be pushed
to their limits

Try to stick with one CTA color (must stand out), one main color (for backgrounds and
such), and one or two accent colors (used for text highlighting / main color in
graphics)
 Spacing & Readability
Checkout the following two sections, both
containing the same content but vastly different in
spacing:

Digital Marketing
Digital Marketing Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
consectetur adipiscing elit, sed do eiusmod tempor
sed do eiusmod tempor Buy Now

Buy Now

It should be clear as day to tell which is the better one, but I’ll break it down.

The image with more space between the lines of text and button is much more
effective at driving it’s message across because of the space it puts between.

It doesn't muddle everything together like the other image, making the message
trying to be driven across very unclear. They don’t know what to read first and
have strain on the eyes trying to read when things are squished together!

Always remember to keep adequate spacing between your seperate sections as

well as your headlines and text, which will give the visitor a visual hierarchy on
where to follow and what messages to read in what order.
Visual over Textual, always
If there’s any message that you can
drive across with a graphic instead of
a lengthy paragraph of text, DO IT.

Look at this graphic I created to the

left for one of our CBD clients ->

The point I wanted to drive across

was all the different cannabinoids
that come into play in CBD and how
they work together to create the
“Entourage Effect”. 

Initially, I wrote out a long paragraph of text explaining how many there were, listing out a
few of them, etc etc

All I ended up with was a big paragraph of lots of text that was almost overwhelming to
look at.

All I did was take all the cannabinoids, lay it over a leaf, and add a grey box in the
background

By doing that, I was able to take out SO MUCH TEXT from the paragraph while having a
graphic that conveyed the message and ALSO added to the aesthetic value of the page.

Whenever it’s possible, try to utilize graphics instead of long paragraphs of text! Don’t be
afraid to put labels and texts in your graphic like I did for the CBD client - things like that
are easy for the eyes to scan compared to a giant muddled paragraph of text.
And THAT IS IT, MY FRIEND!
You are officially finished with this ebook. I truly hope you got value from this book,
and I hope it helps you become a better web designer over the long term.

I would absolutely love to hear any feedback you have on this ebook (whether you
hate it or love it) so I can keep on improving it to give as much value as possible!

Want to discover 5 Design Tools

that will completely revolutionize
how you design websites?
Sign up for my FREE 5 Day Email Course where I
show you 5 secret tools I've discovered over the past
year to revolutionize your web design.

Click to Sign up for FREE

Join our Website Design

Facebook Community!
Did you know we have an awesome FREE Facebook
group where we share design hacks, tips, and tricks
to up your web design game? Join today to be a
part of the Web Design Revolution!

Click to Join the FB Group!