How Do I Design The Perfect Website Layout?

15-design-powers-blog-design-website-layout.jpg

When a visitor comes to your website it takes them less than a second to form an opinion of you, your company and whether or not they’ll hand over their money to you.

If they don’t like the look of your website then the chances are they’re going to click away and into the arms of your competitor.

Color choices and eye-catching images definitely contribute to the overall appeal of your website but having a stunning piece of artwork as your website won’t mean anything if your visitors can’t find what they’re looking for.

When it comes to a website’s success, a good layout is essential. It may not be sexy, it may not be fun, but your site’s layout serves the most important role when it comes to giving your visitors a user-friendly experience.

Benefits of a good website layout

Before we get into how to develop the perfect website layout, we should go over why you need a good website layout in the first place.

In 2019 there were over 1.94 billion websites on the internet.

Of these, only 400 million are currently active.

The online world is saturated (by the time you’ve finished reading this blog, there’ll be a few more thousand websites launched to add to those stats up there!)

What does that have to do with your site’s layout exactly? Everything. Your potential customers don’t have to settle for a company with a mediocre website that doesn’t even load on their phone.

People want quick, easy access to the info they searched for.

Web design is all about the user experience – and a huge part of creating a positive user experience on your website is giving them what they want when they want it.

If you’re trying to sell your self-help book online, don’t make your site’s visitors click through four pages of convoluted sales pitch text before they can click that magical ‘Buy Now’ button. Make it simple and quick for people to sign up for your services, buy your products or schedule an appointment.

You need your website to solve the problems of your visitors quickly and efficiently.

In return, visitors will reward you for solving their problems by becoming paying customers. If your website is easy to navigate then they’re more likely to make a purchase or sign-up for your offer.

Effective website layouts are:

  • Simple - No fancy fluff needed. Your website can look great but it needs to function first and foremost (and that’s coming from a team of designers!)

  • Predictable - Don’t make people work for what they’re looking for. Generally speaking, websites have a logo in the top left of the navigation, a menu to the right, a header image underneath with simple text explaining what you do and how it will solve your site’s visitor’s problems.

  • Intuitive - Have one service that’s more popular than your others? Put a link to that page on your home page, front, and center. You know your customers better than anyone - so give them what they want!

We know what you’re thinking, a predictable layout doesn’t seem fun at all. You want something that is unique, creative and sparks joy to your visitors every time they click on your page.

As great as that sounds, it might not get you what you want.

The most effective, customer-friendly websites always have little to no clutter.

White space isn’t scary – use it to your advantage! It makes your website easier to read and it’s more easygoing on the eyes.

Essential themes of a great website layout:

  • Goal-oriented - Great website layouts are clear and get to the point quickly. It shows the visitor where to go and what to do with prominent CTAs (calls to action).

  • Designed for skimmers - People don’t take in a lot of information and tend to skim pages of text. Don’t clutter your website with large blocks of text. Make your headings big and in an easy to read font.

  • Mobile Friendliness - The best websites cater to users on any kind of device. Make sure yours is responsive on mobile, tablet and desktop to keep all of your visitors happy.

Here’s how you can work towards the perfect website layout in four easy steps

Step 1: Set Your Goals

A website isn’t so much a collection of pages but more like a funnel to lead your visitor into becoming a paying customer.

Before you can even consider your site’s layout, you have to think about your visitors. Really get into their shoes.

  • What are they looking for?

  • What do they care about?

  • What do they like? What do they hate?

  • What keeps them awake at night?

  • Who do they look up to?

  • What problem do you solve for them? How does that make their life better?

  • Why would they choose you over your closest competitors?

Before you start navigating your potential clients towards an end goal, you need to know what that end goal is (and why they should care).

Step 2: Map Out Your Content

Once you understand what your visitor needs and how you can give it to them, you can start mapping out your content.

The golden rule of websites: your website is not for you.

Your website isn’t somewhere to boast about all of your achievements.

It’s your 24/7 salesperson and it needs to speak directly to your customers. Address their problems, show them how good life will be when those problems are solved.

How do they solve those problems? They hire you. They buy your products. They book in for a consultation. You get the idea.

Your content is what’s going to communicate this for you.

Ask yourself what information your ideal customer is looking for and how best you can get that to them.

Content is king and it will become the foundation for your website layout. Keep the customer journey in mind.

When a visitor lands on your site they need to be able to get to what they want in as few steps as possible. There isn’t any point in having a beautifully designed website if your customers can’t find what they’re looking for.

Keep your sitemap (the hierarchy of your website’s pages) as simple as possible. It shouldn’t be a treasure hunt to find the content they want - which is why it’s important to map out your content prior to choosing a site layout and implementing a design.

Step 3: Site Maps and Wireframes are Your Friend

Before getting hung up on how your site should look design-wise, decide how you want your layout to go by sketching it out on paper or using wireframe-friendly software. Decide what pages you’re going to have and where the content on each page is going to go.

Sitemaps and wireframes will save you some serious time in the copywriting phase and design phase of your website.

Example of a rough wireframe sketch.

Example of a rough wireframe sketch.

Step 4: Keep It Functional

OK, so you’ve figured out what your website’s going to say and where it’s going to say it, but now you have to figure out how it’s all going to fit together.

When it comes to functionality, and website design in general, less is more.

If you’re selling online, keep your checkout process to one page. Try to keep the details you ask customers to fill out as minimal and essential as possible. Nothing puts off a buying customer quicker than having to fill out their life story before paying.

Have an online scheduler? Integrate it with your site for seamless user experience.

You don’t want to overload your visitors - keep it simple, keep it easy. One of the reasons why we recommend Squarespace for small businesses is because the platform has all the functionalities a small business needs all in one place.

 

Download our homepage website template

Download our guide on how to create an effective home page design layout that increases engagement and sales.

 
DP-Freebies-Home-Page-Template.jpg
 

 

There’s so much that goes into a website’s layout, it’s hard to squeeze it all into one blog post! Your audience, your goals, and your niche will dictate how your website needs to function and how it should look.

If you think your website isn’t performing how it should do, we’ve created the Power Plan to help emerging entrepreneurs and expanding small businesses figure out exactly what their business needs and create an actionable plan to get started.

Did you find this website layout guide helpful? Do you think we missed something important? Let us know in the comments and share this with a friend! Need help with your website? Contact us!

 

SUBSCRIBE TO OUR BLOG POWER PLAY


Previous
Previous

Why A Good Logo Is Important For Your Small Business

Next
Next

Should You DIY Your Website or Hire a Pro?