How to Design a Website Layout That Converts in 10 Simple Steps

how-to-design -website-layout-introduction

In addition to having a site that loads quickly, it helps to know how to design a website layout that converts if you hope to have the most success online.

When it comes to design, one that works well is more than just “pretty” or easy to use.

The average visitor will decide whether or not they like your site in less than half a second. If you want an edge in your field, your design should be based on the science of conversion.

Here’s what that means.

The ins and outs of designing a website layout Make It Work

Step 1: Think Simple

Hicks’ Law states that the more choices you give people, the longer it takes them to decide on a selection. While spending more time on the site can be good for business, too many options can frustrate visitors, which is the opposite of what you’re looking for.

The lesson is to make your design intuitive. The menu should include common terms, such as About or About Us, Contact or Contact Us, and Blog, FAQs, and Services, for example.

The wrong way to list your menu is to call your blog “Musings” and your services, “Our Bread & Butter.” A cryptic site never converts well.

Instead, use menu items and general language on your site that your visitors will quickly and easily understand.

Step 2: Use Negative Space

Part of simplifying your site design is making heavy use of negative space.

This doesn’t just mean leaving white space between images and paragraphs, which of course is important. It also means using negative space to direct visitors in the direction you expect, such as your call to action.

A fitting illustration of negative space used well is on the Google home page. . Here it is very clear what visitors are expected to do and there is no clutter to confuse them.


It can’t get any simpler than that. By not adding more images, text and other elements to your home page, visitors know exactly how to proceed to the next step, which of course is conversion.

Step 3: Realize Colors Matter

85% of shoppers say color is a major contributor to their purchasing decisions. The psychology of colors is important to marketers, particularly when it comes to design and web design.

We encourage you to research and test the color schemes that your audience might respond to best. The right colors can evoke certain emotions. Also, things like demographics can affect how your visitors perceive your site.

To find a color scheme that works, use the color wheel and look for complementary colors (those that are opposite each other on the wheel) or analogous colors (those that are next to each other on the wheel). .

These color schemes can add depth to your site’s design and make it appear more interesting, keeping people on your site long enough to make a positive buying decision.

how-design-website -layout-step-3/p>

Step 4: Format Persuasive Copy Properly

As a web designer, you may prefer to leave web copy to an actual copywriter. However, you still need to know where your text should be placed for maximum conversions, even if it’s temporary lorem ipsum.

A headline is paramount and should be placed center stage on the home page to communicate the value proposition of the brand. Each subsequent page should contain a title that speaks to the relevance of the content on that page.

After the headline, research shows that placing your text in an “F” layout works best, as that tends to be the way people read content online.

See Also:  3 steps to create beautiful and engaging emails with Google Docs

how-design- website-layout-step-4

If you’re going to have a lot of text on your website, parse the content into boxes and format for skimmers to make reading light and easy for everyone site visitors.

Notice how State Farm decided to break their content into nice little sections to make finding what you want easier on the eyes and mind.

how-design-website-layout-step -4-state-farm

Step 5: Be clear about the outcome

A high-converting web design is one that focuses on the actions you want your visitors to take.

The best designs really manage to guide their visitors through the process. Your calls to action should be prominently displayed so that they stand out and get noticed without much effort.

Whether you want your visitors to make a phone call, fill out a form, or share your content on social media, your design should act as a roadmap that gets visitors from point A to point A. B, with point B of course being the last conversion.

Step 6: Don’t be afraid to borrow

Instead of learning all the nuances of how to design a website layout, take a look at other websites that work on the same space. This way, you can take advantage of all the research and testing your competitors may have gotten themselves into.

If you like their designs, you’re probably looking at some pretty successful sites. Copy those layouts to make your layout even more predictive and intuitive to use.

Step 7: Embrace Responsiveness

Your website visitors are five times more likely to bounce if your site isn’t optimized for mobile devices. As people switch devices regularly, it becomes important to offer a smooth experience across all internet-based devices.

The key is to eliminate as much scrolling and clicking and swiping as necessary. Put the most critical information on the fold but create opportunities for visitors who want to learn more.

Watch how Dropbox leaves little doubt about what it expects you to do. You can sign up on the right, click the simple two-step navigation menu, or scroll down to learn more. Even on mobile, there’s no reason to scroll or swipe. Just make your selection.


Make sure your site offers the same experience on all devices, just like CrazyEgg does. From the desktop to the smallest screen, visitors are offered the same simple options and eye-pleasing design.


Step 8: Highlight your offers and smiling faces

Studies show that larger, more engaging images lead to higher conversion rates.

In addition to size and quality, the images you choose to compose your site design should have a purpose. They should showcase your products or services in the best light and all people with smiling faces in warm and positive environments.

Step 9: Strategically Place Trust Badges and Social Proof Elements

Visitors to your website want to know that your organization can be trusted with their cookie information, as well like personal details and credit card information, for example.

You can reinforce trust by including trust badges and elements of social proof.

Trust Badges include logos of popular brands that use their services or products. Social proof examples can include customer logos, comments from satisfied customers, links to customer case studies, and customer story videos.

The Asana productivity platform includes testimonials from satisfied customers and prominent brand logos, improving the trust factor with all site visitors.

how-design-website-layout-step-9- asana

Grammarly content analyzer is another brand that tells its visitors they’re in the best of company by providing testimonials from satisfied users right on its home page.

See Also:  How to create a website like craigslist for free


Use these examples to improve the trust factor you convey to your audience, and you could see a nice increase in subscriptions and purchases .

Step 10: Keep testing!

No matter how much research you do, only your audience can tell you which design they prefer.

When you want more conversions, your job is to constantly test every element of your site. Simply changing your call-to-action buttons could cause a huge increase in subscriptions or purchases, for example.

Hubspot found that changing a page’s CTAs from green to red resulted in a 21% increased conversion rate. Those results would not have been possible without proper testing.

Pay attention and always test using the latest tools and processes.

Good and Simple Website Design Examples

Here are a couple of websites that achieved a simple and user-friendly layout design.

Unbounce uses complementary colors (orange and blue). The site uses empty space to draw attention to the title. And site visitors have two main options. Or, they can click on the clearly marked call to action in the top right corner.

There are other options, but they are for those who want to look for them. And when they search, those items won’t be hard to find.It’s clear what visitors need to do, and the site certainly experiences a lot of in-kind conversions.


Shopify’s ecommerce platform also provides a simple menu and uses a lot of empty space to drive visitors to the conversion. The images are large and high quality and the calls to action stand out and get noticed.


We also recommend that you click on your other websites favorites. In the meantime, think about how those sites are designed and how you can take examples to add to your own design.

Ten Website Design Tips and Ideas for a More Attractive Site

You don’t have to revamp your website to make it more attractive. To wrap up the post, here are ten simple tricks of the trade for a more attractive design that is designed to convert.

Use real people

Swap generic or stock photos with photos of real people, especially when it comes to implementing trust badges like testimonials and case studies.

Visitors to your site will identify more with real people than with photographs of a generic nature.

Simplify Your Menu

If you think your menu is too complex, reduce it.

Add submenus to create a hierarchy of topics, like putting all your products under one “Products” heading, or services under one “Services” heading, for example. Only the most critical menu items should be visible, but even deep pages should be easy to find.

As a side note, include a search option to make it even easier for visitors to find the right content they are looking for. after.

Remove Extra Options

Never create more than one call-to-action on a page if you can help it. The fewer options, the faster and more likely your visitors will take action. If you currently offer too many options, remove some of them to make it clear what you expect your audience to do.

Remove and Enlarge Images

If you have too many images, your site can look overwhelming. Consider cutting some of them to make it easier to navigate the page.

If you have images, make them larger so they’re easier to view on any size screen.

Change their color scheme

Use the scroll wheel to colors and play around with various color schemes, taking into account the preferences of your visitors and constantly testing various color schemes to find the one that works best.

See Also:  How to create multiple pages on a website using wordpress

Consider visitor intent

People who visit your website likely have only one action in mind.

They want to learn more or buy, for example. Keep those motivations in mind when deciding on your site’s design. If they want information, the very details they’re looking for should be front and center the moment they click on that particular page.

Add Trust Badges

Gather positive testimonials and add images and videos of those people to your website. Create case studies and include logos of those you do business with and other business partners.

These can improve conversions by making people feel safe browsing, subscribing, and buying.

Clarify how to get in touch

Visitors should never have to search for ways to contact your organization, especially if they need help. Consider adding a chatbot to help visitors even when no one is available to answer important questions.

Drive Conversions with Content Hierarchy

Think like one of your visitors, visit your home page and search your website to find what they need. Is it easy to find the information you are looking for, or are you clicking too many times to get to the deeper pages of your site?

These types of role-play exercises will help you hone the design of your website . into one that leads your customers to the information they are looking for and then, ultimately, to conversion.

Get Feedback from Your Visitors

If you want to know how to design a website design that converts, why not get the feedback directly from your visitors?

Here are a couple of ways you can do just that.

How to Tell if Visitors Like Your Website Design

Pay Attention to High-Level Site Metrics

Google Analytics provides information about how many new and repeat visitors you have, how much time they spend on a given landing page, and how often they bounce after visiting just one page. to see how your visitors interact with your website as it happens. After signing up for the 30-day free trial, you will be able to analyze your website using heat maps.

Heatmaps show you where your site visitors hover over, click on your site, and what forms they’re filling out.

A/B Test Different Design Elements

Based on your observations of user behavior, you can easily test various site elements, such as text placement, image sizes and titles, without having to know an ounce of code.

After you’ve put the above tips into practice, keep testing your site, and then stick with those same elements that drive conversions.

Eventually, you’ll have on your hands a supersite that combines all the best elements for maximum success.


Site designers and marketers alike need to know how to design a website layout for maximum conversions.

This means learning about your audience and what they want. It means figuring out how to deliver critical information naturally and intuitively. Above all, it means going simple without a lot of clutter.

If you think your website isn’t up to the task right now, don’t worry. Start making small adjustments to your site based on actual customer behavior, and you can still get ahead.

If you believe that simply updating your website to reflect a more modern design can improve conversions by up to 33%, taking just one action can help.

So, keep adding and testing elements to your website design to make your site even more user friendly.

In turn, you’ll be sure to experience a huge boost in conversions for your site.


Leave a Reply

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