blog traffic and income report march

Designing a Simple Home Page for Better User Experience

Erik Entrepreneurship, Side Hustle, Thoughts of a Mastermind Leave a Comment

THIS POST MAY CONTAIN PAID AND/OR AFFILIATE LINKS.

Whenever you go to a website for the first time, it’s just like meeting someone for the first time.

First impressions matter, and in the world of short attention spans and thousands of things to get done, they arguably matter even more.

When I go to a new web page these days, the first thing I say to myself is, “what does the site owner want me to do? What’s important here?” “Why should I care?”

Over the last 20 months of side hustling, I’ve learned a ton about web design and how to design a website that sells and has better user experience. I’m not an expert yet on the topic, but think I understand what it takes to design a simple, yet effective, web page to attract visitors to stick around and interact with content.

This post will be a little bit more how-to’y and I will be talking about how to go about designing a simple home page for better user experience. With this knowledge, you should be able to take your existing page and turn it into something that will hopefully provide new visitors (and old) an easier way to interact with your content.

First though, let’s look at this site’s home pages over the last 20 months and how they have evolved.

The History of The Mastermind Within Home Pages

On this blog, I’ve gone through 3 major changes to creating a simple, yet engaging, home page for my visitors.

Back when I started, it looked bad. The home page was a wall of links:

Lots of Links!

After talking with a digital marketing friend, and having him join the team and help out in March 2017, we changed the layout to a 3×2 grid.

The last iteration was what we currently have with a big section up top with a header with a few navigation buttons, some text, and 2 buttons.

simple web design

Simplicity for Success

Have you ever heard the phrase, “keep it simple stupid?” I’m a smart guy, but I hate to make things more complicated than they need to be.

Look at first and second home page images vs. the new home page image. The new home page only has 7 places where you can theoretically click. It’s clear what the site’s content is, a blog and podcast, and if you want to learn more, or subscribe, there are buttons to accomplish this.

Honestly, the first one looks like crap. The second one had potential, but was disorganized and the header had way too many links.

These changes have occurred as I’ve continued to learn HTML, CSS, and Javascript over the past year. (I learned this through action, but also used Code Academy) I’m learning more about design and elements of creating a visually appealing website and think this stuff is really interesting.

In addition to simplicity though, a good website should be set up for some sort of conversion: be it sale, email address collection, or viewing more content.

Creating a Site which is Clean and Conversion Friendly

Back to the redesign of The Mastermind Within: one of my goals with this blog is to provide value through my freebies and build a community.

This is in accordance with The Mastermind Within Mission Statement:

The Mastermind Within hopes to build a collaborative community where ideas can flow openly, and readers can build knowledge and experience amazing personal growth.

If my goals are to provide value through my freebies, then I need to be explicit and give the user many spots where they can subscribe to the site and get instant access to these freebies.

In digital marketing speak, a conversion is the successful completion of a goal by the user for the website owner. This goal could be a purchase, viewing a certain page, putting their email into a specific form, click on an ad or link, or whatever the website owner wants it to be.

My goal is to provide value through my freebies. To do so, I’ve taken steps to optimize my site for more subscribers opting in to my email list for these freebies.

At the end of every post and page, there is a freebie offer form. In addition, at the top of the window, there is an offer for my freebies as well.

As a website owner, if you have a goal, then it’s crucial to make sure there are many spots a user can interact with this goal (just remember, there’s a fine line here, and it’s important also to not be spammy and over the top with your offers!).

A Simple 4 Section Blueprint for a Home Page with Better User Experience

In this section, let me provide you with a simple 4 section blueprint for a home page with better user experience.

The 4 section blueprint is as follows:

  1. A big section on top with some creative copy (text describing your website) and a button to learn more
  2. A section with images pointing to category pages (however you define that on your site)
  3. A section with an opt-in form (to collect an email)
  4. And finally, a section with recent posts

At this point, you are probably thinking, “Okay Erik, the problem is… I’m not a web developer.”

Have no fear! I’m going to get into how to actually do some of this!

Depending on the WordPress theme you are using (or maybe you have a Shopify website or some other ecommerce site), usually, you should be able to create a full width blank template (a web page which is full width and has no side bar). If you don’t already have a full width page template, then you may have to create a child theme and create the template yourself. This is a little bit tricky, but can be done with a little reading.

Next, it’s time to get to work on the code.

Coding our Simple 4 Section Blueprint

First, let’s talk about how a web page is structured. The HTML is the skeleton and the CSS is the muscles that make the skeleton look like a human.

One CSS library that is incredibly powerful is Bootstrap. Bootstrap makes web design very easy with intuitive row and column definitions.

Here’s a sample of what our first main section might look like in HTML (I’ll touch on what this actually means after the code):

<div id="home-entry" class="row">
   <div class="col-sm-6 col-sm-offset-3 col-xs-12">
      <h2>Hello World! This is my blog!</h2>
      <input type="button" value="Learn more" />
   </div>
</div>

With Bootstrap, the screen is separated into 12 sub-columns. In the code above, we just created a column which takes up half of the space on desktop/laptop computer screen (6/12 = 1/2) and is offset by a quarter (3/12 = 1/4).

This bit of code looks something like this (this is on the website HackToFI – a new blog I helped do a little design work for, great people and great content coming from them soon!):

It’s possible you’d like to have a little bit wider content for your main copy and button divider. To do this, you can play around with the numbers above. To make it a little wider, you could do col-sm-8 and col-sm-offset-2, or even col-sm-10 and col-sm-offset-1.

With this HTML structure and programming thought, it’s pretty easy to go about the rest of the sections.

Finishing out your main section

One thing I didn’t mention is how to get the image in there (and also colors, but this should be set by default through your base CSS and can be edited there.)

You’ll notice in the code above, there’s an “id” attribute in the first line of code. This “id” is the identifier for that divider section.

You can set the background image for the “id” by putting something similar to this in your style.css file:

#home-entry {
background-image: url(your image url here);
background-repeat: no-repeat;
background-size: cover;
}

This will set the background image to whatever you want. You’ll have to play around with this, as well as look at padding and margin to make sure it all looks to your liking.

Finishing up the Remaining Sections

As I mentioned above, once you understand the general HTML and CSS structure that Boostrap allows you to use, the rest can be performed in a pretty straightforward manner.

For an embedded opt-in form, you would have something similar to what we had above, but with the embedded opt-in form code from your email marketing software:

<div id="email-collection" class="row">
   <div class="col-sm-6 col-sm-offset-3 col-xs-12">
      ** PUT EMBED CODE HERE **
   </div>
</div>

For the recent posts, this might get a little tricky. Some themes have short codes for recent posts. Other themes, you may need to write a post query and create a new page template. For my theme, I have a shortcode. For most of the free themes I’ve seen, there aren’t short codes, but there’s always an exception to the rule.

Here, depending on how you want your grid to look, you could have something like the following:

<div id="recent-posts" class="row">
   <div class="col-sm-3 col-xs-12">
      ** PUT POST FEATURED IMAGE AND TITLE INFO HERE FROM SHORTCODE OR LOOP **
   </div>
   <div class="col-sm-3 col-xs-12">
      ** PUT POST FEATURED IMAGE AND TITLE INFO HERE FROM SHORTCODE OR LOOP **
   </div>
   <div class="col-sm-3 col-xs-12">
      ** PUT POST FEATURED IMAGE AND TITLE INFO HERE FROM SHORTCODE OR LOOP **
   </div>
   <div class="col-sm-3 col-xs-12">
      ** PUT POST FEATURED IMAGE AND TITLE INFO HERE FROM SHORTCODE OR LOOP **
   </div>
</div>

Finally, the last section that might make sense for your website is some copy around categories or copy in general explaining your website’s mission some more.

Depending on how many categories you have, this can be done by simply adjusting the number of divs and column widths above.

Of course, for these sections, you’ll want to add custom CSS here to make it look the way you want it to look. Remember: HTML is the skeleton, but CSS is the style!

The final result will be something similar to my home page. It’s simple and allows the user to hit areas which they might be interested in hitting in a way which is not pushy but is easy to navigate!

Concluding Thoughts On Designing a Simple and Visually Appealing Home Page

Creating a website that is visually appealing for your website visitors isn’t too difficult. If you are looking for a simple 4 section home page, I’ve provided this above.

For many blogs and websites, a first impression is a great way to start off a new relationship with a potential longtime reader the right way.

Web design doesn’t need to be hard, but if you have no idea where to start, it can be an uphill battle. I hope that this post has given you some direction towards creating a better looking home page.

Finally, if you’d like help on your website, I’d love to help. Part of my mission is to help others reach their goals and even if it’s just to chat, I’m always open to it!

Readers: if you have a website, does this guide help? Am I missing anything here that you wish I would have touched on?

Erik

Share this awesome post:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.