{"id":938,"date":"2021-07-18T13:40:44","date_gmt":"2021-07-18T13:40:44","guid":{"rendered":"https:\/\/extendthemes.com\/?p=938"},"modified":"2023-03-02T07:28:02","modified_gmt":"2023-03-02T07:28:02","slug":"website-layout-design-ideas","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/","title":{"rendered":"19+ Website Layouts Users Won&#8217;t Forget (UPDATE 2021)"},"content":{"rendered":"<p>Plenty of websites shine with color, vivid images, and useful content. But if you rip off color, videos, images, content, what is left? You\u2019ll come down to the bare bones of a website and suddenly understand: it\u2019s the layout that really pumps brilliance into the website.<\/p>\n<h2>What is a website layout?<\/h2>\n<p>A website layout is <u>a pattern (or framework) that defines a website\u2019s structure<\/u>. It has the role of structuring the information present on a site both for the website\u2019s owner and for users. It provides <u>clear paths for navigation<\/u> within web pages and puts the<a href=\"https:\/\/www.founderjar.com\/elements-of-ecommerce-websites\/\"> most important elements of a website<\/a> front and center.<\/p>\n<p>Website layouts define the content hierarchy, regardless of whether or not you&#8217;re learning <a href=\"https:\/\/www.ryrob.com\/how-start-blog\/\">how to start a blog<\/a> or building a simple website for your small business. Content will guide visitors around the website, and it must convey your message as well as possible to them.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7126\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/build-develop-site-web-design-content-1571569-pxhere.com_.jpg\" alt=\"Website layout example\" width=\"849\" height=\"493\" \/><\/p>\n<p>To put it short,\u00a0 website layouts are critical elements that make a website a success, or a failure.<\/p>\n<h2>Why should you choose one layout over another?<\/h2>\n<p>You should carefully make a selection. This is why:<\/p>\n<ul>\n<li>A good layout keeps users on the site because it makes important information easily accessible and intuitive to find. A bad layout frustrates users which then quickly leave the site because they can\u2019t find what they are looking for.<\/li>\n<\/ul>\n<p>For this reason, it\u2019s best to take as long as you need to find a good layout because users won\u2019t give you more than a few seconds of their time.<\/p>\n<ul>\n<li>There\u2019s a <a href=\"https:\/\/blog.hubspot.com\/marketing\/compelling-stats-website-design-optimization-list\">strong relationship between the layout and the engagement<\/a> of users with the website. It determines how long they dwell on the website pages, how many pages they browse, and how often they come back to the website.<\/li>\n<\/ul>\n<p>So, besides overcoming the problem of split-second choice, a good layout comes with additional benefits. Engaging visitors can be a rewarding effort.<\/p>\n<ul>\n<li>When selecting a layout, it might be useful to also consider the <strong>Gestalt law of closure<\/strong>. It says that, even if an image shape is not complete, the human eye tends to fill in the visual gaps and recognize the image as a whole. How can this be of use to you?\n<ul>\n<li>You won\u2019t pay attention to details, rather focusing on the global view of the pages forming the website; users will find themselves the meaning path.<\/li>\n<li>You pay attention to details, using some additional seconds to grow the engagement exponentially.<\/li>\n<li>You intentionally won\u2019t pay attention to details, letting originality speak for itself; users will find themselves the meaning path, and they will keep a strong memory of your website.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<div id=\"attachment_940\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-940\" loading=\"lazy\" class=\"wp-image-940 size-medium\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/07\/gestalt-law-of-closure-min-300x293.png\" alt=\"\" width=\"300\" height=\"293\" \/><p id=\"caption-attachment-940\" class=\"wp-caption-text\">Example of how the Gestalt law of closure works<\/p><\/div>\n<h2 style=\"text-align: justify;\">Getting familiar with the layout design best practices<\/h2>\n<p>To spend a fruitful time selecting a layout design, it\u2019s important to get familiar with some basic notions related to website layouts. We\u2019ve gathered a bunch of concepts that\u2019ll help you get oriented into the abundance of predefined website layouts.<\/p>\n<h3>Visual weight and negative space<\/h3>\n<p>Visual weight is perceived by people when some objects on the website carry a stronger visual force. This visual force can be induced in specific elements through different techniques. Amongst them, negative space is the one that interests us directly here.<\/p>\n<p>Negative space (space that is devoid of any elements) drives the attention towards elements outweighing the rest through visual force concentrated on them.<\/p>\n<div id=\"attachment_941\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-941\" loading=\"lazy\" class=\"wp-image-941 size-large\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/07\/visual-weight-min-1024x576.png\" alt=\"\" width=\"1024\" height=\"576\" \/><p id=\"caption-attachment-941\" class=\"wp-caption-text\">Example of visual weight created through negative space<\/p><\/div>\n<p>The space between the black square and the white squares directs the eyes to the left-hand element. But the left-hand element is outweighed by the 4 smaller white squares. The black square carries a stronger visual force.<\/p>\n<h3>Balanced website layouts<\/h3>\n<p>In balanced web design, the elements that make up the layout are supporting one another so that the user sees the text content with equal importance. In addition, the elements are easily scannable in a layout that efficiently presents them all. The design gives the impression of stability, and it feels really pleasing, from the aesthetic point of view.<\/p>\n<p>One of the most popular balanced designs is symmetrical balance, where, similar to a mirror image, a visual element will look the same on either side of the center. <a href=\"https:\/\/science.howstuffworks.com\/why-do-get-so-much-pleasure-from-symmetry.htm\">Symmetry e<\/a>vokes balance, elegance, and pleasure. You&#8217;ve probably felt it too when looking at the architecture of some buildings, gardens, and even at the wings of a butterfly.<\/p>\n<h3>Sections for specific audiences or features<\/h3>\n<p>Arrangements of elements that can be changed meaning that users can easily switch to other website sections. To help you figure out how this is possible, we suggest you think about fashion websites addressing both men and women.<\/p>\n<p>The layout supports 2 distinctive sections within the website, one dedicated to apparel for men, the other dedicated to apparel for women. The layout split serves functional content, highly useful for the 2 distinctive target audiences.<\/p>\n<h3>Go outside the standard layouts<\/h3>\n<p>Whereas some layouts follow the traditional path, with an aim at serving functionality at its best, other layouts use daring designs and structures, with the purpose of making an impact on the user. Breaking the mold means unexpected arrangements of the elements within the web page, and the experiences it triggers stand out in a sea of standard websites, that a user can&#8217;t help but remember your website.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7128\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/Schweppes-website.jpg\" alt=\"Schweppes website\" width=\"849\" height=\"376\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: Schweppes.ca<\/em><\/p>\n<p>Remember though that UX beats design. Always think of the end-user. Make tests before releasing anything.<\/p>\n<p>&nbsp;<\/p>\n<h3>Create Visual Tension for Eye-Catching Stimulating Layouts<\/h3>\n<p>In web design, visual tension strains the users\u2019 attention by focusing it on key points of the website. Visual tension comes out by contrasts of space, color or luminosity, and it is easily noticeable if interwoven in a perfect overall balance of elements.<\/p>\n<p>Its role is to visually stimulate the users to break off the web surfer routine and process the information on the website in a brand-new light.<\/p>\n<div id=\"attachment_945\" style=\"width: 806px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-945\" loading=\"lazy\" class=\"wp-image-945 size-full\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/07\/visual-tension-min.png\" alt=\"\" width=\"796\" height=\"436\" \/><p id=\"caption-attachment-945\" class=\"wp-caption-text\">Visual tension in a website layout, through the unexpected placement of some elements &#8211; Source: Stripe<\/p><\/div>\n<h3 style=\"text-align: justify;\">Use focal points to draw attention to certain elements<\/h3>\n<p>A <a href=\"https:\/\/databox.com\/how-to-write-call-to-action\">call-to-action<\/a> button can be a focal point. An image can be a focal point. Headings can also be focal points. It all depends on how they integrate into the website layout, so they become the biggest points of interest on a website, that capture a user\u2019s attention.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7150\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/Dominant-elements-in-focal-poiunt-design-layouts.jpg\" alt=\"Dominant elements in focal-point design layouts\" width=\"800\" height=\"435\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: Tesla.com<\/em><\/p>\n<p>Due to focal points, you\u2019ll have your users half-way to conversion (whatever \u201cconversion\u201d might be for your particular website) \u2013 users will concentrate their attention on those focal points and are more inclined to take the action you want them to take.<\/p>\n<h3>Design layouts that accomplish website goals<\/h3>\n<p>It\u2019s a best practice that, before starting to design a layout\/to browse through layout templates, you should define <strong>what the website goals are<\/strong>. They might be to sell products, gather traffic, or simply enchant users with some piece of art. The website layout should be chosen based on the website goals. It will trigger certain users\u2019 behaviors that lead to completing those goals.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7133\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/landing-page-design.jpg\" alt=\"landing page design\" width=\"840\" height=\"656\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: Unbounce<\/em><\/p>\n<h3 style=\"text-align: justify;\">Layouts that tell a story<\/h3>\n<p>Design the layout\/search for a layout so that it molds onto the message you have to transmit.\u00a0Section areas should come together to tell a complete story.\u00a0Each element in this chain is another chapter in your story.<\/p>\n<div id=\"attachment_948\" style=\"width: 610px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-948\" loading=\"lazy\" class=\"wp-image-948 size-full\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/07\/layout-to-transmit-a-statement-min.jpg\" alt=\"\" width=\"600\" height=\"378\" \/><p id=\"caption-attachment-948\" class=\"wp-caption-text\">Layout made up of features sections, saying much about the app\u2019s value<\/p><\/div>\n<h2 id=\"Best-Website-Layouts-with-Proven-Success\">Best Website Layouts with Proven Success<\/h2>\n<p>Below you&#8217;ll find the most popular and effective website layouts that designers the world over use to make their websites.<\/p>\n<h3 id=\"The-Zig-Zag-Layout\">1. The Zig-Zag Layout<\/h3>\n<p>Research revealed how users use to scan a webpage content: the eyes move along the page following a Z-letter direction.<\/p>\n<ul>\n<li>First, the eye goes from left to right<\/li>\n<li>Next, the eye goes down, and to the left<\/li>\n<li>Last, their eyes move back across to the right again<\/li>\n<\/ul>\n<p><u>As it is intricately connected to some common web surfer behavior, the zig-zag layout is applicable to a wide range of websites, in different activity areas.<\/u><\/p>\n<div id=\"attachment_1728\" style=\"width: 706px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-1728\" loading=\"lazy\" class=\"wp-image-1728 size-large\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/07\/z-layout-696x1024.jpg\" alt=\"\" width=\"696\" height=\"1024\" \/><p id=\"caption-attachment-1728\" class=\"wp-caption-text\">Restaurant Website Demo &#8211; created with <a href=\"https:\/\/extendthemes.com\/mesmerize\/free\/?utm_source=weblayouts&amp;utm_medium=blog\">Mesmerize Theme<\/a><\/p><\/div>\n<h3 id=\"The-F-Layout\">2. The F Layout<\/h3>\n<p>The F-shape layout follows another widely-known scanning behavior, where the eyes move across a page in an F-letter pattern.<br \/>\n<u>Due to its connection with a widely known user behavior, this layout is suitable for a wide range of websites, from e-commerce websites to portfolio websites. <\/u><br \/>\n<img loading=\"lazy\" class=\"aligncenter wp-image-7146\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/F-shaped-design.jpg\" alt=\"F shaped design\" width=\"800\" height=\"334\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: Patagonia.com<\/em><\/p>\n<h3 id=\"Full-Screen-Photo\">3. Full-Screen Photo<\/h3>\n<p>In this case, the layout implies spreading up content upon a full-screen photo\/image. Thus, text sections or menu sections are there to support the \u201cliving\u201d image. <u>Good to use for websites that want to immediately anchor the subject of a site in the mind of a visitor.\u00a0<\/u><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7136\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/full-width-header-design.jpg\" alt=\"full-width header design\" width=\"840\" height=\"396\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: Netflix<\/em><\/p>\n<h3 id=\"Grid-Layout\">4. Grid Layout<\/h3>\n<p>Information is organized into grids, making it easy to browse., and people can stop to specific topics of interest. <a href=\"https:\/\/www.mockplus.com\/blog\/post\/ui-grid-layout-design\">Grid layouts<\/a> allow for an equal distribution of text, photos, videos onto the webpages, letting users decide upon the importance of each unit. <u>Good to use for newspapers, vlogs, etc.<\/u><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7137\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/Ikea-grid-design.jpg\" alt=\"Ikea grid design\" width=\"840\" height=\"399\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: Ikea<\/em><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7138\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/Grid-wbsite-layout.jpg\" alt=\"Grid website layout\" width=\"800\" height=\"481\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: iHeartRadio<\/em><\/p>\n<h3 id=\"One-Column-Layout\">5. One-Column Layout<\/h3>\n<p>This layout organizes information into one single column, and it\u2019s one of the simplest layouts to put in place. The content (text, photos, videos) is easy to follow, and the need to scan is nothing more than identifying key points of interest into that single column. <u>Good to use for research papers and long-form articles.<\/u><\/p>\n<p>Also, single-column layouts are a perfect match for mobile experiences.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7139\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/Medium-one-column-layout.jpg\" alt=\"Medium one column layout\" width=\"400\" height=\"464\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: Medium<\/em><\/p>\n<h3 id=\"Featured-Image-Layout\">6. Featured Image Layout<\/h3>\n<p>One of the most frequent layouts nowadays implies setting up a featured image representative of each page in the website. The image serves to concentrate attention and interest to a focal point expressive of the page topic. Also, the image stands as the source of meaning that radiates from this very focal point. <u>Good to use for niche blogs, freelancers and professionals.\u00a0<\/u><\/p>\n<div id=\"attachment_1730\" style=\"width: 1034px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-1730\" loading=\"lazy\" class=\"wp-image-1730 size-large\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/07\/featured-image-layout--1024x546.jpg\" alt=\"\" width=\"1024\" height=\"546\" \/><p id=\"caption-attachment-1730\" class=\"wp-caption-text\">Designer Portfolio Website Demo &#8211; created with <a href=\"https:\/\/extendthemes.com\/mesmerize\/free\/?utm_source=weblayouts&amp;utm_medium=blog\">Mesmerize Theme<\/a><\/p><\/div>\n<h3 id=\"Asymmetrical-Layout\">7. Asymmetrical Layout<\/h3>\n<p>The asymmetrical layout plays with the rules of symmetry to the point of bending them in favour of a unique promise: there is more we have to offer than perfection. The trick is to create active space, and to make white space livelier.<\/p>\n<p><u>Good to use for this very category of web design websites, for unusual portfolio presentations, and innovative business websites. <\/u><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7141\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/Asymmetric-design.jpg\" alt=\"Asymmetric design\" width=\"850\" height=\"319\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: Kiwi.com<\/em><\/p>\n<h3 id=\"Split-Screen-Layout\">8. Split Screen Layout<\/h3>\n<p>This type of layout refers both to vertical split-screen and to horizontal split-screen. Generally, a vertical split-screen plays a major role in conveying dual importance to 2 or more distinct areas. The purpose here is to favor quick choices, for better engagement with the website right off the bat.<\/p>\n<p>The example below is somehow different, in that it contains both vertical split and horizontal split, on one and the same page. Looking only at the vertical split, it does not invite to making a choice, but rather to enhance one experience through the other.<\/p>\n<p><u>The split-screen layout is recommended for online stores (e.g. selling to men &amp; women), or creative websites \u201cselling wellness\u201d all through the web presentations (like in the case below).<\/u><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7145\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/spli-screen-wbsite-layout.jpg\" alt=\"split screen website layout\" width=\"800\" height=\"366\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: RedLight.dev<\/em><\/p>\n<h3 id=\"Headline-and-Thumbnails-Gallery-Layout\">9. Headline and Thumbnails Gallery Layout<\/h3>\n<p>In a more and more visually-focused online world, this layout may work wonders. It is made up of image miniatures leading to full descriptions of those topics, and headlines (+ short presentations) that serve as a guide through the image album.<\/p>\n<p><u>Suitable for travel websites, blogs, and magazines.<\/u><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7143\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/Thumbnail-gallery-design-layout.jpg\" alt=\"Thumbnail gallery design layout\" width=\"562\" height=\"609\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: wepresent.wetransfer.com<\/em><\/p>\n<h3 id=\"Modular-Layout\">10. Modular Layout (also known as Card Layout \/ Block Layout)<\/h3>\n<p>This layout is tightly related to Material Design, the design protocol launched by Google. It\u2019s becoming increasingly popular, due to its flexibility and <a href=\"https:\/\/blog.101domain.com\/marketing-strategy\/responsive-website-design-flexible-fit-brand\">responsiveness<\/a>. The modular layout means each unit of content (text, images, videos, buttons) is included in a card, or module, having its own dedicated space.<\/p>\n<p>When applying modular layouts to websites, the effect is a streamlined look and a highly coherent composition of items in a webpage.<\/p>\n<p><u>Good to use for business websites, where clear and coherent presentations are fundamental to a professional online presence. <\/u><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-7144\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/card-layout-design.jpg\" alt=\"card layout design\" width=\"955\" height=\"792\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: UXPin<\/em><\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-7148\" src=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/card-layout-design-2.jpg\" alt=\"card layout design - 2\" width=\"850\" height=\"341\" \/><\/p>\n<p style=\"text-align: center;\"><em>Source: thefutur.com<\/em><\/p>\n<h3 id=\"Magazine-Layout\">11. Magazine Layout<\/h3>\n<p>The magazine layout, as it is encountered nowadays, tends to be a mishmash of some other layouts, all serving to give a splendor aura to the news.<br \/>\nThe example below combines headline + thumbnail gallery layout, and featured image layout, plus a solid F-shaped layout, to keep the glamour of the magazine up to par.<br \/>\n<img loading=\"lazy\" class=\"aligncenter wp-image-960 size-full\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/07\/magazine-layout-min.png\" alt=\"\" width=\"885\" height=\"986\" \/><\/p>\n<p>Such combinations are good for, but not limited to, online magazines.<\/p>\n<h3 id=\"Single-Page-Layouts\">12. Single Page Layout<\/h3>\n<p>Although not so widely spread among common website layouts, we wanted to list this layout here due to its fairly interesting characteristics. It combines multiple actions into one page (e.g. Gmail). Content is loaded dynamically, using JavaScript. And it is built so that it generates unique URLs for each viewpoint.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter wp-image-1590 size-large\" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/07\/gmail_layout-1024x570.png\" alt=\"\" width=\"1024\" height=\"570\" \/><\/p>\n<h3 id=\"Radial-Symmetry-Layout\">13. Radial Symmetry Layout<\/h3>\n<p>Another less common layout type refers to radial symmetry. There\u2019s a central point from which radiate correlated items, in a rounded form:<img loading=\"lazy\" class=\"aligncenter wp-image-961 \" src=\"https:\/\/extendthemes.com\/wp-content\/uploads\/2018\/07\/radial-symmetry-layout-min.png\" alt=\"\" width=\"946\" height=\"716\" \/><\/p>\n<h2>It\u2019s a wrap<\/h2>\n<p>Now, that you\u2019ve got familiarized with the different website layouts, it\u2019s time you consider what particular layout is the best fit for your website. Is it a multi-purpose layout, or a layout adapted to a certain niche?<\/p>\n<p>To do this, you should know your audience, their behavior, needs, and expectations, and built the appropriate message that molds perfectly on a layout. The layout will have the role to let the message shine and be so convincing for the users, that they cannot but accept it.<\/p>\n<p>[sibwp_form id=1]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Plenty of websites shine with color, vivid images, and useful content. But if you rip off color, videos, images, content, what is left? You\u2019ll come down to the bare bones of a website and suddenly understand: it\u2019s the layout that really pumps brilliance into the website. What is a website layout? A website layout is&hellip; <br \/> <a class=\"read-more\" href=\"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":7183,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[71,141],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>19 Website layouts that will make your users come back for more<\/title>\n<meta name=\"description\" content=\"The right website layout can help your users find info easily on your site, but also increases conversion rates. More on the Colibri blog!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"19 Website layouts that will make your users come back for more\" \/>\n<meta property=\"og:description\" content=\"The right website layout can help your users find info easily on your site, but also increases conversion rates. More on the Colibri blog!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/\" \/>\n<meta property=\"og:site_name\" content=\"ColibriWP Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-18T13:40:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-03-02T07:28:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/banner-redimensionat.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"894\" \/>\n\t<meta property=\"og:image:height\" content=\"490\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"iulian\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\",\"url\":\"https:\/\/colibriwp.com\/blog\/\",\"name\":\"ColibriWP Blog\",\"description\":\"WordPress know-how to boost your design skills\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/colibriwp.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/banner-redimensionat.jpg\",\"contentUrl\":\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/banner-redimensionat.jpg\",\"width\":894,\"height\":490,\"caption\":\"website layouts\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/#webpage\",\"url\":\"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/\",\"name\":\"19 Website layouts that will make your users come back for more\",\"isPartOf\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/#primaryimage\"},\"datePublished\":\"2021-07-18T13:40:44+00:00\",\"dateModified\":\"2023-03-02T07:28:02+00:00\",\"author\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e\"},\"description\":\"The right website layout can help your users find info easily on your site, but also increases conversion rates. More on the Colibri blog!\",\"breadcrumb\":{\"@id\":\"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/colibriwp.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"19+ Website Layouts Users Won&#8217;t Forget (UPDATE 2021)\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e\",\"name\":\"iulian\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/colibriwp.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g\",\"caption\":\"iulian\"},\"url\":\"https:\/\/colibriwp.com\/blog\/author\/iulian\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"19 Website layouts that will make your users come back for more","description":"The right website layout can help your users find info easily on your site, but also increases conversion rates. More on the Colibri blog!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/","og_locale":"en_US","og_type":"article","og_title":"19 Website layouts that will make your users come back for more","og_description":"The right website layout can help your users find info easily on your site, but also increases conversion rates. More on the Colibri blog!","og_url":"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/","og_site_name":"ColibriWP Blog","article_published_time":"2021-07-18T13:40:44+00:00","article_modified_time":"2023-03-02T07:28:02+00:00","og_image":[{"width":894,"height":490,"url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/banner-redimensionat.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"iulian","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/colibriwp.com\/blog\/#website","url":"https:\/\/colibriwp.com\/blog\/","name":"ColibriWP Blog","description":"WordPress know-how to boost your design skills","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/colibriwp.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/#primaryimage","inLanguage":"en-US","url":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/banner-redimensionat.jpg","contentUrl":"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/07\/banner-redimensionat.jpg","width":894,"height":490,"caption":"website layouts"},{"@type":"WebPage","@id":"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/#webpage","url":"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/","name":"19 Website layouts that will make your users come back for more","isPartOf":{"@id":"https:\/\/colibriwp.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/#primaryimage"},"datePublished":"2021-07-18T13:40:44+00:00","dateModified":"2023-03-02T07:28:02+00:00","author":{"@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e"},"description":"The right website layout can help your users find info easily on your site, but also increases conversion rates. More on the Colibri blog!","breadcrumb":{"@id":"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/colibriwp.com\/blog\/website-layout-design-ideas\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/colibriwp.com\/blog\/"},{"@type":"ListItem","position":2,"name":"19+ Website Layouts Users Won&#8217;t Forget (UPDATE 2021)"}]},{"@type":"Person","@id":"https:\/\/colibriwp.com\/blog\/#\/schema\/person\/120982e06c8218e6f4a5d83020751c1e","name":"iulian","image":{"@type":"ImageObject","@id":"https:\/\/colibriwp.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a1002ce001e8e8537800f38c05d827cf?s=96&d=mm&r=g","caption":"iulian"},"url":"https:\/\/colibriwp.com\/blog\/author\/iulian\/"}]}},"_links":{"self":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/938"}],"collection":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/comments?post=938"}],"version-history":[{"count":25,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/938\/revisions"}],"predecessor-version":[{"id":11783,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/posts\/938\/revisions\/11783"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media\/7183"}],"wp:attachment":[{"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/media?parent=938"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/categories?post=938"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/colibriwp.com\/blog\/wp-json\/wp\/v2\/tags?post=938"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}