fbpx

WordPress Website Design Checklist

This is the ultimate WordPress website design checklist.

I wish I had this before starting my first website years ago.

Hundreds of hours, trials, and errors have resulted in this definite checklist.

Build your website like a brand agency, without the agency costs!

Follow these steps, and you’ll have not only a kickass, fast, and fully optimized site.

You’ll also have a real asset that turns visitors into leads for your small business.

Contents

Step 1: Establish The Goal

I’ll be straight up honest with you.

Focusing only on making your website look cool, pretty, and clever is a waste of time.

This probably hurts to hear, and I’ve made the same mistake.

But this time, we’re building a real website, a brand, and it all starts with a goal.

What is the #1 goal of your site?

Websites have become modern-day business cards in many ways.

But having a beautiful business card won’t land you any more clients in real life.

That is exactly what website builders like Wix and Squarespace don’t want you to know.

What gets you more clients is converting prospects (website visitors) into customers, which requires more planning and work.

And you only have to do the work once, as we are building a great website and a system that works for you around the clock.

And since we are building a system, we need to define the #1 goal of the website clearly, like Apple for example.

Their sole purpose is to sell you an iPhone and get you into their ecosystem.

If you are a service-based business, then it might be booking a call or booking an appointment with you; go with that.

Or it might be guiding visitors to an irresistible offer that you are selling.

Or it might be collecting signups for your free online course and selling them on coaching later.

Whatever it is, ask yourself what the #1 thing you want a potential customer to do once they are on your site?

Step 2: Tips for brainstorming site names

Here is a shocking fact:

Each and every minute, 380 websites are created globally. Every. Minute.

No wonder it’s so hard to find a name for your site that’s still available.

But don’t worry, we’ll get you sorted in this chapter.

What makes a good site name?

Clarity sells, and that is also true for your domain name.

Take for example the following extremely successful sites with massive organic traffic:

cleverhiker.com – Clever + Hiker

pcpartpicker.com – PC Part + Picker

bestreviews.com – Best + Reviews

The commonality between them is that they include the niche that the site is about + an attribute that represents the brand.

You instantly know the niche, and you easily remember the site by the attribute.

“I like hiking, oh that site that was great what was it again? They were all about being clever when hiking… cleverhiker.com now I remember”.

The issue with these names? It’s tough to find a name that’s available and stands out from the competition.

But if you find one that sounds great, is memorable, and instantly clear, you better buy that domain name immediately!

Remember that 380 websites are created every minute; that’s 547.200 websites every day.

Don’t pigeonhole yourself

An issue occurs when you base your brand around a domain name that’s niched down too far.

If the niche only has a small population of potential customers, the topic becomes unpopular in the future or is not evergreen, etc., you pigeonhole yourself.

It becomes tough to diversify, and jumping to another niche with the same domain usually doesn’t turn out any good.

An example of this would be bestgarbagedisposalunits.com, averaging below 2k visitors/month.

There is just not enough people searching for or interesting in specific garbage disposal units, and it doesen’t make sense to start writing about the best coffee makers.

So if you stand in a decision between names, always try to pick a broader niche that contains several sub-niches, like an umbrella topic.

An example of this would be pcpartpickers.com.

PC parts can be anything from graphic cards, chassis, processors to accessories like LED lamps, keyboards, etc. The niche is HUGE.

Consider being a personal brand

Personal brands are exploding right now, and there are several advantages to it.

Using your name as the domain name has an inbuilt moat for niche selection. Any time you want to switch a niche, it’s possible to do so.

Choosing a domain name also becomes much easier since it is a unique combination of you and not a niche.

Take my domain name starkexpand.com for example; it’s a combination of personal branding + an attribute.

Stark is my last name, + expand is what my site is all about. Now, this can cover anything from self-development, growing a business, developing skills, etc.

There is no right and wrong with a personal brand, and feel free to combine it with a broader niche you want to be known for extra clarity.

If your personal name (first and last name) is very long, consider shortening it as shorter domains are easier to remember and type.

And lastly, with a personal brand and with pictures of yourself on your site, you’re more likely to be accountable than a no-name no-face brand.

Step 3: Secure your domain with hosting

Now that you’ve spent some time figuring out what your site will be about, it’s time to take action.

.com names are the king of the internet, and there is no real reason to pick anything else.

People automatically default to .com for any site they think about.

Get the domain for free with hosting

Use the domain checker tool below and start going through your domain name ideas to see what is available.

Once you find a name that you like, click next to claim your domain name for free while getting hosting at the same time.

Hosting is where your new site will live on the internet, and you can’t have a website without hosting.

Clicking next will take you to Hostinger, an excellent hosting company that I use for my site and thoroughly recommend.

They are inexpensive, super-fast, and optimized for WordPress, which is everything you need!

Why Hostinger?

You can get hosting for your site for as low as $0.99/month, but I recommend the business shared hosting for a few reasons:

  1. A very fast website (Free CDN + WordPress acceleration + pick in what region your server is located = a very fast website)
  2. Unlimited bandwidth for website visits (we plan to scale our business, right?)

If you feel that these two things don’t matter to you, then Hostingers 80% hosting promotion will be just fine.

It includes your free domain, free business emails, and unlimited websites.

If you want to know more then check our honest, in-depth review and comparison articles.

Step 4: Plan your site design

So far, we have gone over what your #1 goal is, figured out a domain name, and secured it with hosting; great!

Now it’s time to plan and engineer your site design before even touching WordPress.

The more you plan in this step, the smoother and faster it will be to make the website, as you’ll know exactly what you need.

This step can honestly speed up the entire process of making a website by 10x, so don’t skimp on this one.

Clarity over Cleverness (in 3-5 seconds)

Clarity sells, and this is for several reasons.

If your messaging, what you do, and what your site is about are not apparent in the first 3-5 seconds, a visitor will leave.

They won’t put in the effort of trying to figure out what your site is about. It’s much easier to leave and check out the next site instead.

And if a visitor leaves fast, Google will notice this in their “bounce rate” metric, which hurts your site big time.

Google is always looking to serve their customers (someone that’s “googling”) with the best user experience and correct information.

If they don’t find what they are looking for immediately, they bounce, and Google downgrades your site in favor of competitors.

Always prioritize being crystal clear over being clever; less is more when it comes to websites.

This is what brand agencies hone in on, and you should too.

Designing the Hero section

A hero section is essentially the first thing you see when you land on a website, and it is right here that a visitor, in seconds, will decide if it’s for them or not.

That is why the hero section needs to be uncluttered, extremely clear on what you do, what’s in it for them (benefits), and what should be the next step.

This is made by having a sizeable bold headline, a subheadline that develops the benefits, and a CTA or call to action. Let’s unpack each below.

Proven headline formulas

Your hero section’s headline should directly speak to your customer’s desire that you can solve for them.

What is it that they want? And how can you provide it for them?

1. Tell them the transformation you’re promising

An easy way (and the most powerful) headline is to express the transformation or the after state the customer can expect to achieve when working with you or your brand.

A great example is a headline for Shopify.

“Turn what you love into what you sell” – instantly clear, you know immediately what the site is about and what they help you achieve.

Or another one from thedbmethod.com.

“Get your Dream Butt in just 10 minutes a day” – talking about the after state, the promised transformation that speaks to a desire.

2. Tell them the problem you solve

Tell them about the problem you solve, and make it easy for them.

This is great for more actionable products or services. It still talks about an after state but more catered towards solving a problem.

The one thing with this headline, although powerful, is how your product or service is better than any other service that offers the same solution.

You’ll have to nail the benefits in the subheadline to stand out.

3. Tell them what you do and why it’s important

The last proven headline formula is to tell a visitor exactly what you do, as clear as day, and what that does for them (the one big benefit).

This formula can also work as:

What you do… + “So you can” + Benefit

An example would be:

“Get a Home Alarm System Installed in 30 Minutes, So You Can Feel at Ease”.

Subheadlines – “What’s in it for me?”

Always think about benefits over features, as no one cares about features.

For example: “how much horsepower a car has..” vs. “is the car insanely fast?”

See the difference?

Focusing on two/three clear benefits is perfectly placed in a subheadline below your primary headline copy.

The subheadline can also expand on your headline just to expand a bit more on what you do, what problem you solve, or why they should consider you over anyone else.

The CTA

The last part of nailing a Hero section is a Call to Action or CTA below your subheadline, and it’s crucial.

Imagine that the ideal customer lands on your site; they resonate with your headline, and love your subheadline benefits.

Now you immediately want to show them how they can take the next step to get what you’re promising.

The CTA can be either:

  • Booking a consultation with you
  • Sign up for a service
  • Sign up for an offer
  • Buy a specific product, etc.

A common mistake is to give way to many CTA’s, forcing a visitor to decide on the spot what to do.

Focus on your #1 goal here that we established in Step 1, one crystal clear call to action.

The rest of your website will back up your claims for this specific goal if a visitor needs more information regarding your product or services.

Essential sections below the Hero

The rest of your homepage’s entire purpose should be to reinforce your core message and #1 goal in the Hero section.

In practice, this means building trust and overcoming potential objections to your main offer.

The following sections are recommended to include for the reasons above:

About Us section

Build know, like, and trust with your visitors. It proves that you are a real person, brand, or business that cares about their transformation.

Real Testimonials section

Nothing builds trust and authority faster than real social proof from other similar customers.

FAQ section

Answer customer’s questions, overcome objections and inform them on autopilot.

Pricing section

Being transparent upfront builds trust and immediately qualifies if a visitor is your ideal customer.

Next Step section

Ties into your main offer way up in the Hero section. This can usually be an appointment calendar, email optin, or booking a consultation.

What about all the other pages on a usual website?

Since you established the #1 goal that your site should accomplish, we want potential customers to stay on track and take action.

Having many other pages will just distract a visitor and take them off the path to your amazing offer or service.

You gain more on keeping it clean and minimal, but there are some basic pages that you need in your header navigation:

  • About Us page:
    • This page is about expanding more on what you and your brand can do for the customer. Make it about them and what benefits you bring to them.
  • Services:
    • If you have several services or products aside from your main one, these need to be in your header as well.
  • CTA:
    • Having a button or link to your CTA in the header is an excellent place to remind a visitor about your offer continually.
  • Blog/Contact/Tools/…
    • These can favourably be placed at the bottom of your website in the footer section to keep things clear and straightforward.

Step 5: Branding colors and Logo

Deciding on your branding colors before building your website will speed up the process as well.

A neat trick is to set your global color scheme in WordPress to your main branding colors.

This way, getting the look and feel will be a breeze.

And if you want to play around with other colors or decide to change your branding, setting this up saves you hours of future modification.

Guidelines for branding colors

So what colors to pick?

It all depends on what you want your brand to represent, but to make it easy for your website design, a few helpful guidelines are:

Pick 2 main colors that represent your brand. Will it be blue for competence? Or Red for power? Use the chart above.

Pick 1 accent color that complements your 2 main colors, something in between

Pick 1 color in stark contrast to your main colors, something that stands out

Pick 1 very neutral color that fits into the whole color scheme; think grey, dark black, cream white, etc.

This will get you a total of 5 colors except for white and black that you’ll also use.

I highly suggest using the free tool Coolors.co to get your branding colors and the corresponding color codes for each one.

This tool does the entire leg work for you; it’s as easy as just hitting backspace on your keyboard and letting it randomly generate color schemes for you until you find something you like.

The color in stark contrast to everything else will be used in one place only, and that is for the CTA for your main offer (usually in the Hero and Header).

Get a logo design going for your brand

There are several ways to get a logo done for your site.

If you just need something quick, head over to Renderforest.com, and create a free logo over there.

Don’t worry about exporting it in high quality, the low quality is good enough for now in the header.

Watch the video below on how to make a logo, step-by-step:

Once you’ve figured out your branding a bit more, consider ordering a professional logo from 48hourlogo.com.

Make a contest with a prize of around $99-$120 and you’ll get a ton of freelancers making logos for you, I got 191 entries for my order.

Pick the one you like, refine it with your choosen designer, and you have your custom made logo in high quality.

Step 6: Prepare WordPress & Plugins

WordPress is out of the box, a very simple and barebone platform with some default settings.

With the help of free plugins or apps, WordPress supercharges into one of the leading Content Management System platforms on the internet.

41% of the entire internet (!) is powered through WordPress websites; New York Times is one of them.

In this chapter, you’ll find everything you need to supercharge WordPress.

Install WordPress with 1-click

To begin, if you don’t already have WordPress installed on your domain, log in to your Hostinger account and navigate to Auto Installer for your selected domain, click install WordPress.

Basic Hostinger settings

These settings will enable all of the goodies that come with Hostinger to speed up your site and make it lightning fast:

Activate WebArx(Patchstack), LiteSpeed, SSL, Cloudflare
Activate automatic cache

Basic WordPress settings

These basic settings are needed for correct pathways to your blog posts, homepage, etc.

Install the Blocksy Theme

It’s lightweight, free, fast, and easily the best when it comes to customization for a clean design.

The best plugins that supercharge WordPress

There are over 50.000+ plugins to choose from in WordPress. The following list is the cream of the crop, and all 100% free.

Search for the following plugins under plugins -> add new:

  • Blocksy Companion
    • Needed to unlock all settings in the theme builder.
  • Elementor
    • Unlocks the point and click website design builder.
  • Stackable – Gutenberg Blocks
  • Unlocks the features of elementor right into blocks instead. Building in blocks speeds up your site considerably.
  • Compress JPEG & PNG images
    • Reduce the file size of images, the primary source of slow websites, and automatically resizes images when you upload them to a post.
  • Aweber
    • An email marketing tool that we send all our email signups too.
  • Optimonk
    • Lead generation tool with exit-intent popups. Not to be confused with Optimonster, which is bloated, pricey, and upsells you constantly.
  • Nitropack
    • The best cache plugin to speed up your website includes CDN, image compression, and page optimization all in one.
  • Calendly
    • Easy to use booking calendar system for appointments.
  • Yoast SEO
    • The only plugin you need to write SEO-optimized blog posts.
  • Header Footer Code Manager
    • Easily insert tracking code without slowing down your site with more plugins, like Facebook pixel and Google Tag Manager codes.
  • Pretty Links
    • Free and easy link management and tracking of your link clicks, URL shortener.
  • Lazy Load for Videos
    • Embedding YouTube videos slow down your site; this plugin speeds it up by replacing it with a static thumbnail instead.

Step 7: How to make a WordPress website

WordPress can be confusing if it’s the first time for you.

And there are countless tutorial videos on YouTube that are several hours long.

That’s why I decided to make a tutorial that not only educates you step-by-step but also keeps it under 40 minutes.

Watch the tutorial video

It’s easier to show than tell, so watch the tutorial video below on how to make a WordPress website step-by-step.

Step 8: Lead generation

Most people that visit your website are “just browsing” for a few seconds, and the chances are that they won’t ever return.

That’s why it’s so crucial to “capture” visitors from the very first second.

It is also why we focus so much on your #1 goal, the Hero section, the copy of your headline, and what you offer.

This chapter will set up your website to take the incoming traffic and turn them into leads.

Setup email optin in crucial areas

You’ll want to collect a visitor’s email address in a few strategic locations on your website.

A potential customer’s email address is one of the most valuable assets you can own as you have a straight line of communication to them, and you own that list.

The first place will be your CTA in the Hero section.

It can either be:

  • A button that triggers a popup for a signup
  • A button that redirects to a separate optin-page
  • Or an email signup field that’s embedded straight on the hero

Next, you’ll also want the same optin offer as a button or link in your header.

The advantage of this is that no matter where a visitor is on your website, the offer will always be visible (just make sure your header is “sticky”).

You’ll also want the optin offer at the bottom of your website, as people often skim through a website from top to bottom.

Lastly, if you’re writing blog posts (which you should if you want organic traffic), you’ll want to sprinkle in the optin once or twice in a blog post.

Setup exit-intent popup

One of the most powerful times to ask for a visitor’s email is just when they are about to leave your page.

Hitting them with an unbeatable offer just as they are about to leave is proven to generate most optins.

Set this up with the plugin Optimonk: Create a free account on their site, sync up with the WordPress plugin, create a form, and you have an exit-intent popup ready to go.

Lead magnets that work right now

So why would anyone want to give you their email address? You offer an irresistible free lead magnet in exchange for their email.

A lead magnet is something that a visitor would gladly want to trade their email address to receive, something packed with value.

Just to give you idéas of what lead magnets that work right now are:

  • Checklists! People love checklists because it’s easy to consume, the work is done for you, and they can follow it step-by-step.
  • Resource list: A compilation of your best stuff neatly organized into one downloadable PDF, or even better, a comprehensive blog post like what you are reading right now!
  • An exclusive Video or Audio file: This is great as you are not just educating them on something, but you build massive trust simultaneously as they get to know you, a real human.

Step 9: Email automation

One big mistake I made in the past was to build my email lists without doing anything with them.

This resulted in the lists going “cold” meaning once I sent an email to them months later, the response was nonexistent, and the open rates terrible.

The best way to keep in touch with your email subscribers and nurture the relationship is to automate it.

This is called email automation, and it’s the final piece of the puzzle.

Nurture your leads on autopilot

Email marketing is something that has withstood the test of time. No matter what kind of marketing fad comes and goes, email remains.

So how do you nurture your email list that’s growing by the day? You automate it!

We do this with an email sequence, a carefully crafted series of emails sent out regularly.

These emails should provide even more value to the customer, educate them, and occasional pitch products or service that benefits them.

Try keeping an 80/20 split of value/promotion, because let’s face it, no-one likes to be spammed with promotion emails.

Create a basic 3-day email sequence using Aweber

Below I’ll show you how to set up a basic 3-day email sequence. A recommendation is to send two value emails and one promotion email in the series.

Go to messages -> Campaigns, and click Create Campaign
Select “Welcome Series”
Edit the emails in the automation sequence (campaign), save and activate

Where you put the promo email is up to you, it can be at the end or in the middle as well.

Bonus: Make Google Love Your Site Speed

At some point, you’ll have to drive traffic to your website to grow, whether it be through paid ads or organic traffic with SEO, preferably both.

How fast your website is will soon have a big impact on Google’s ranking algorithm, especially on mobile devices.

In this bonus chapter, we’ll dive into what you need to know and practical tips to make Google love your site speed!

What influences website speed?

One can do many things to increase the site speed, but in my own experience, I found 20% of things that affect 80% of the results.

The host of your website

You can optimize a site however you want, install caching plugins, reducing file size, and whatnot, but it’s a dead-end if your hosting is slow.

Bluehost is notorious for having slow server response times, and that’s a mistake I made in the past.

Luckily Hostinger solves this issue well in relation to the price, and if you followed this guide from the start, you’re already sorted!

Compress images

The larger the images on your site, the slower it loads. Compressing images will be your main focus to speed up your site.

Especially if you have large blog posts with dozens of images in them.

But don’t worry, as I got you covered here as well!

Get the plugin TinyPNG and roll with their free plan, it will compress the images you upload automatically! Use the settings below and you’re all set:

Consider Gutenberg vs. Elementor

I discovered a shocking fact when it comes to page speeds, especially on mobile.

Elementor slows down your pages! The tradeoff you get for easier website design is paid for with website speed, unfortunately.

Now, this is not a major deal for your main homepage, as it’s not the one that’s going to get all the traffic.

But with the increased weight Google puts on website speed across your entire domain, consider making everything in Gutenberg. So to balance this up, read the next step below.

CDN/Cache

Once you’ve gone through the essentials from hosting, image size, and the way your site is built, it’s time to shift to deliverability.

A caching plugin helps compress your site’s CSS, JS, and HTML to reduce the actual code’s size that needs to be displayed when opening your website.

A CDN is a Content Delivery Network that will send over the website and its content the fastest possible route close to your (and your customers) location wherever you are.

This speeds up everything as well, and it’s included in the plugins LiteSpeed or Nitropack (only use 1 Cache plugin, or they will collide).

Nitropack settings for amazing scores

The following settings will set everything up for you to achieve amazing page speed scores using Nitropack, just like my website.

Check your score before and after the settings with Google Pagespeed Insights and see the difference :).

Nitropack Settings -> Use Ludicrous + Improve Server response time + Minify HTML

Make sure to check your website after CSS/JS/HTML optimization, so everything looks good.

Just turn everything on, and if something is weird, turn off one thing at a time to find the one setting that’s not working for your site.

Leave a Reply