![\"how-design-website-layout-introduction\"](\"https:\/\/s3.amazonaws.com\/ceblog\/wp-content\/uploads\/2018\/11\/07083656\/how-design-website-layout-1.jpg\")
<\/p>\n<\/p>\n
Aside from having a site that loads quickly, it helps to know how to design a website layout that converts if you hope to find the most success online. <\/span><\/p>\n When it comes to layout, one that works well is more than just \u201cpretty\u201d or easy to use. <\/span><\/p>\n The average visitor will decide if they like your site or not in <\/span>less than half a second<\/span><\/a>. If you want an edge in your field, your layout should be based on conversion science.<\/span><\/p>\n Here\u2019s what that means.<\/span><\/p>\n Hicks Law<\/span><\/a> states that the more choices you give people, the longer they\u2019ll take to decide on a selection. While longer time on site can be good for business, too many options can frustrate visitors, which is the opposite of what you\u2019re after. <\/span><\/p>\n The lesson is to make your layout intuitive. The menu should include common terms, such as About or About Us, Contact or Contact Us, and Blog, FAQ, and Services, for instance. <\/span><\/p>\n The wrong way to list your menu is to call your blog \u201cMusings\u201d and your services, \u201cOur Bread & Butter.\u201d A cryptic site never converts well. <\/span><\/p>\n Instead, use menu items and overall language on your site that your visitors will quickly and easily understand. <\/span><\/p>\n Part of making your site\u2019s layout simple is to make heavy use of negative space. <\/span><\/p>\n This doesn\u2019t just mean to leave white space between images and paragraphs, which of course is important. It also means to use negative space to drive visitors in the direction you expect, such as your call-to-action.<\/span><\/p>\n An apt illustration of negative space put to good use is on <\/span>Google\u2019s homepage<\/span><\/a>. Here it\u2019s very clear what visitors are expected to do, and there\u2019s no clutter to confuse them.<\/span><\/p>\n You can\u2019t get any simpler than that. By not adding more images, text, and other elements to their home page, visitors know exactly how to proceed to the next step, which of course is the conversion. <\/span><\/p>\n 85% of shoppers cite that <\/span>color majorly contributes to their buying decisions<\/span><\/a>. The psychology of colors matters for marketers, particular when it comes to web design and layout. <\/span><\/p>\n You are encouraged to <\/span>research and test the color schemes that your audience might respond to most<\/span><\/a>. The right colors can evoke certain emotions. Furthermore, things like demographics can affect the way your visitors perceive your site. <\/span><\/p>\n To find a color scheme that works, use the color wheel and search for complementary colors (those that are opposites on the wheel) or analogous colors (those that are next to one another on the wheel). <\/span><\/p>\n These color schemes can give your site layout depth and make it appear more interesting, keeping people on site long enough to make a positive buying decision.<\/span><\/p>\n As a web designer, you might prefer to leave the web copy to an actual copywriter. However, you should still know where the text should be placed for maximum conversions, even if it\u2019s temporarily lorem ipsum.<\/span><\/p>\n A headline is paramount and should be placed center-stage on the home page so as to communicate the brand\u2019s value proposition. Each subsequent page should then contain a headline that speaks to the relevance of that page\u2019s content. <\/span><\/p>\n After the headline, research shows that placing text in an \u201cF\u201d design works best, as that tends to be the way people read content online.<\/span><\/p>\n If you\u2019re going to have an abundance of text on your website, parse the content into boxes and format for skimmers to keep reading light and easy for all site visitors.<\/span><\/p>\n Notice how <\/span>State Farm<\/span><\/a> decided to break their content up into nice little sections to make finding what you want simpler on the eyes and mind.<\/span><\/p>\n A highly-converting web layout is one that focuses on the actions you want your visitors to take. <\/span><\/p>\n The best layouts actually manage to walk your visitors through the process. Your calls-to-action should be prominently displayed so that they stick out and get noticed without much effort.<\/span><\/p>\n Whether you want your visitors to make a phone call, complete a form, or share your content over social media, your layout should act like a road map that leads visitors from point A to point B, with point B, of course, being the ultimate conversion. <\/span><\/p>\n Instead of learning all the nuances of how to design a website layout, take a look at other websites operating in the same space. This way, you can manage to take advantage of all the research and testing your competitors may have engaged in. <\/span><\/p>\n If you like their layouts, chances are you\u2019re looking at fairly successful sites. Copy those designs to make your layout even more predictive and intuitive to use. <\/span><\/p>\n Visitors to your website are <\/span>five-times more likely to bounce<\/span><\/a> if your site isn\u2019t optimized for mobile devices. With people <\/span>switching between devices with regularity<\/span><\/a>, it becomes important to offer a seamless experience on all Internet-based devices. <\/span><\/p>\n The key is to remove as much need to scroll and click and swipe as necessary. Put the most critical information about the fold but create opportunities for visitors who want to learn more. <\/span><\/p>\n Notice how <\/span>Dropbox<\/span><\/a> leaves little question as to what it expects you to do. You can either sign up on the right, click the simple two-step navigation menu, or scroll down to learn more. Even on mobile, there\u2019s no reason to scroll or swipe. You simply make your selection.<\/span><\/p>\n Make sure your site offers the same experience on all devices, just as <\/span>CrazyEgg<\/span><\/a> does. From desktop to the tiniest of screens, visitors are offered the same simple choices and easy-on-the-eyes design.<\/span><\/p>\n Studies show that <\/span>larger and more appealing images<\/span><\/a> lead to higher conversion rates. <\/span><\/p>\n Aside from size and quality, the images you choose to comprise your site\u2019s layout should be purposeful. They should showcase your products or services in the best light and all people with smiling faces in warm and positive environments. <\/span><\/p>\n Visitors to your website want to know that your organization can be trusted, with their cookie information, as well as personal details and credit card information, for instance. <\/span><\/p>\n You can bolster trust by including trust emblems and social proof elements. <\/span><\/p>\n Trust emblems include logos of popular brands that use your services or products. Examples of social proof can include client logos, feedback from satisfied clients, links to client case studies, and client story videos. <\/span><\/p>\n Productivity platform <\/span>Asana<\/span><\/a> includes both testimonials from satisfied customers and prominent brand logos, improving the trust factor with all site visitors.<\/span><\/p>\n Content analyzer <\/span>Grammarly<\/span><\/a> is another brand that tells its visitors they\u2019ll be in the best company by providing satisfied user testimonials right on their homepage. <\/span><\/p>\n Use these examples to improve the trust factor you convey to your audience, and you could see a nice boost in subs and buys. <\/span><\/p>\n No matter how much research you conduct, only your audience can tell you which layout they prefer. <\/span><\/p>\n When you want more conversions, your task is to consistently test every element of your site. The simple act of changing your call-to-action buttons could cause a major bump in signups or buys, for example. <\/span><\/p>\n Hubspot found that <\/span>changing a page\u2019s CTAs from green to red<\/span><\/a> resulted in a 21% conversion rate boost. Those results wouldn\u2019t have been possible without adequate testing. <\/span><\/p>\n Take heed and <\/span>always be testing<\/span><\/i> using the latest tools and processes. <\/span><\/p>\n Here are a couple of websites that nailed the simple and user-friendly layout design. <\/span><\/p>\n Unbounce uses complementary colors (orange and blue). The site uses empty space to drive the eye to the headline. And site visitors are given two primary choices. Or, they can click the clearly-marked call-to-action in the upper righthand corner. <\/span><\/p>\n There are other options, but they\u2019re for those who may want to look for them. And when they search, those elements won\u2019t be hard to find. It\u2019s clear what visitors should do, and the site undoubtedly experiences plenty of conversions in kind. <\/span><\/p>\n Ecommerce platform Shopify also provides a simple menu and employs plenty of empty space to drive visitors to the conversion. The imagery is large and high-quality and the calls-to-action stick out and get noticed.<\/span><\/p>\n You are also encouraged to click around to your other favorite websites. All the while, think about how those sites are designed, and how you can take examples to add to your own layout. <\/span><\/p>\n There\u2019s no need to overhaul your website in order to make your site more attractive. To recap the post, here are ten simple tricks-of-the-trade for a more engaging layout that\u2019s designed to convert. <\/span><\/p>\n Trade out any generic or stock photos with those of real individuals, especially when it comes to implementing trust emblems like testimonials and case studies. <\/span><\/p>\n Visitors to your site will empathize with real people more than they do with photos of a generic nature. \u00a0<\/span><\/p>\n If you feel your menu is too complex, shorten it. <\/span><\/p>\n Add submenus to create a topic hierarchy, such as putting all of your products under a \u201cProducts\u201d header, or services under a \u201cServices\u201d heading, for example. Only the most critical menu items should be visible, but even deep pages should be easy to find.<\/span><\/p>\n As a side note, include a search option to make it even easier for visitors to find the content they\u2019re after. \u00a0<\/span><\/p>\n Never create more than one call-to-action on a page, if you can help it. The less options, the quicker and more likely your visitors are to act. If you currently offer too many options, purge some of them to make it clear what you expect your audience to do. <\/span><\/p>\n If you have too many images, your site may be overwhelming to the eye. Consider cutting some of them out for easier page browsing. <\/span><\/p>\n If you have images, make them larger to make them easier to view on any sized screen.<\/span><\/p>\n Use the color wheel and play around with various color schemes, taking into account your visitors\u2019 preferences and consistently testing various color schemes to find the one that works best. <\/span><\/p>\n People visiting your website likely have a single action on their mind. <\/span><\/p>\n They want to learn more or buy, for example. Take those motivations into account when deciding your site\u2019s layout. If they want information, the very details they\u2019re searching for should be front and center the moment they click-through to that particular page. <\/span><\/p>\n Gather positive testimonials and add images and videos of those individuals to your website. Create case studies and include logos from those you do business with, and other business partners. <\/span><\/p>\n These can improve conversions by making people feel safe about browsing, subscribing, and buying. <\/span><\/p>\n Visitors should never have to search for ways to contact your organization, particularly if they need help. Consider <\/span>adding a chatbot<\/span><\/a> to help visitors even when no one is available to answer important queries. <\/span><\/p>\n Think like one of your visitors, visit your homepage, and search through your website to find what you 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?<\/span><\/p>\n These types of role-playing exercises will help you whittle your website\u2019s layout down into one that drives your customers to the information they seek and then, ultimately, to the conversion. <\/span><\/p>\n If you want to know how to design a website layout that converts, why not get the information straight from your visitors? <\/span><\/p>\n Here are a couple ways you can do just that. <\/span><\/p>\n Google Analytics offers insights into how many new vs. repeat visitors you have, how much time they spend on any given landing page, and how frequently they bounce after visiting just one page.. <\/span><\/p>\nThe Ins and Outs of How to Design a Website Layout That Works <\/span><\/h2>\n
Step 1: Think Simple<\/span><\/h3>\n
Step 2: Utilize Negative Space<\/span><\/h3>\n
![\"how-design-website-layout-step-2\"](\"https:\/\/s3.amazonaws.com\/ceblog\/wp-content\/uploads\/2018\/11\/07083658\/how-design-website-layout-2.png\")
<\/p>\nStep 3: Realize that Colors Matter<\/span><\/h2>\n
![\"how-design-website-layout-step-3\"](\"https:\/\/s3.amazonaws.com\/ceblog\/wp-content\/uploads\/2018\/11\/07083706\/how-design-website-layout-5.png\")
<\/p>\nStep 4: Format Persuasive Copy Properly<\/span><\/h3>\n
![\"how-design-website-layout-step-4\"](\"https:\/\/s3.amazonaws.com\/ceblog\/wp-content\/uploads\/2018\/11\/07083702\/how-design-website-layout-4.jpg\")
<\/p>\n![\"how-design-website-layout-step-4-state-farm\"](\"https:\/\/s3.amazonaws.com\/ceblog\/wp-content\/uploads\/2018\/11\/07083710\/how-design-website-layout-7.png\")
<\/p>\nStep 5: Be Clear About Outcome<\/span><\/h3>\n
Step 6: Don\u2019t Be Afraid to Borrow<\/span><\/h3>\n
Step 7: Go Responsive <\/span><\/h3>\n
![\"how-design-website-layout-step-7-dropbox\"](\"https:\/\/s3.amazonaws.com\/ceblog\/wp-content\/uploads\/2018\/11\/07083708\/how-design-website-layout-6.png\")
<\/p>\n![\"how-design-website-layout-step-7-crazy-egg\"](\"https:\/\/s3.amazonaws.com\/ceblog\/wp-content\/uploads\/2018\/11\/07083715\/how-design-website-layout-9.png\")
<\/p>\nStep 8: Feature Your Offerings & Smiling Faces<\/span><\/h3>\n
Step 9: Strategically Place Trust Emblems & Social Proof Elements<\/span><\/h3>\n
![\"how-design-website-layout-step-9-asana\"](\"https:\/\/s3.amazonaws.com\/ceblog\/wp-content\/uploads\/2018\/11\/07083713\/how-design-website-layout-8.png\")
<\/p>\n![\"how-design-website-layout-step-9-grammarly\"](\"https:\/\/s3.amazonaws.com\/ceblog\/wp-content\/uploads\/2018\/11\/07083726\/how-design-website-layout-12.png\")
<\/p>\nStep 10: Keep Testing! <\/span><\/h3>\n
Good & Simple Website Layout Examples<\/span><\/h2>\n
![\"how-design-website-layout-unbounce\"](\"https:\/\/s3.amazonaws.com\/ceblog\/wp-content\/uploads\/2018\/11\/07083719\/how-design-website-layout-10.png\")
<\/p>\n![\"how-design-website-layout-shopify\"](\"https:\/\/s3.amazonaws.com\/ceblog\/wp-content\/uploads\/2018\/11\/07083723\/how-design-website-layout-11.png\")
<\/p>\n10 Website Layout Tips and Ideas to a More Attractive Site<\/span><\/h2>\n
Use Real People<\/span><\/h3>\n
Simplify Your Menu<\/span><\/h3>\n
Remove Additional Options <\/span><\/h3>\n
Remove and Enlarge Images<\/span><\/h3>\n
Change Your Color Scheme<\/span><\/h3>\n
Consider Visitor Intent<\/span><\/h3>\n
Add Trust Emblems<\/span><\/h3>\n
Make it Clear How to Get in Touch <\/span><\/h3>\n
Drive Conversions with Content Hierarchy<\/span><\/h3>\n
Get Your Visitors\u2019 Opinions<\/span><\/h3>\n
How to Know if Visitors Like Your Website Layout<\/span><\/h2>\n
Pay attention to high-level site metrics <\/span><\/h3>\n
Start watching your user navigation <\/span><\/h3>\n