{"id":27542,"date":"2018-09-14T16:43:52","date_gmt":"2018-09-14T08:43:52","guid":{"rendered":"https:\/\/www.crazyleafdesign.com\/blog\/?p=27542"},"modified":"2018-09-18T02:46:12","modified_gmt":"2018-09-17T18:46:12","slug":"website-structure-and-navigation-basic-web-design-rules","status":"publish","type":"post","link":"https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/","title":{"rendered":"Website Structure and Navigation: Basic Web Design Rules"},"content":{"rendered":"<p class=\"p1\"><span class=\"s1\">In this article, we are going to discuss the structure and <a href=\"https:\/\/www.crazyleafdesign.com\/blog\/user-friendly-website-navigation\/\">navigation of websites<\/a>.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">This article is intended to readers who are new to <a href=\"https:\/\/www.crazyleafdesign.com\/blog\/minimalism-in-web-design-trends-and-techniques\/\">web design<\/a> and is trying to learn the basic website structure.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Let\u2019s begin with website Structure.<\/span><\/p>\n<h2 class=\"p2\"><span class=\"s1\"><b>Structure of a Website<\/b><\/span><\/h2>\n<p class=\"p1\"><span class=\"s1\">Let me consider that you are new to the idea of website structure, and start from the beginning.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Here we will discuss the following things,<\/span><\/p>\n<ul class=\"ul1\">\n<li class=\"li3\"><span class=\"s1\">What is a website structure?<\/span><\/li>\n<li class=\"li3\"><span class=\"s1\">Why do your website need a structure?<\/span><\/li>\n<li class=\"li1\"><span class=\"s1\">How a website structure is implemented?<\/span><\/li>\n<\/ul>\n<p class=\"p1\"><span class=\"s1\">If you are already familiar with the concept, bear with me so that the newbie\u2019s could catch up.<\/span><\/p>\n<h2 class=\"p4\"><span class=\"s1\"><b>Basic Structures in Web Design<\/b><\/span><\/h2>\n<p class=\"p1\"><span class=\"s1\">When it comes to structure in web design, there are 3 major categories.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"s1\"><b>Linear\/Sequence Structure<\/b><\/span><\/h3>\n<p class=\"p1\"><span class=\"s1\">This structure is not commonly used and it\u2019s generally used when website is very small in size, like 4 \u2013 5 pages.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">For example,\u00a0<\/span><span class=\"s1\">If you are creating a website exclusively for a particular event that is being held on a particular date, then the linear structure will be ideal. <\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">This would entail 3-4 pages and you would take your users through a funnel intended from page 1 to 4.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">In this case, you will take users first to a landing page, page 1, which would talk about the even in general. Then you would take the users to a 2<\/span><span class=\"s3\"><sup>nd<\/sup><\/span><span class=\"s1\"> page which include detailed content about the event, like who is attending the event or who are the speakers of the event. Then you may take them to a 3<\/span><span class=\"s3\"><sup>rd<\/sup><\/span><span class=\"s1\"> page which talks about the prices and how to purchase the tickets for this event, this page might probably contain a form. <\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">This linear structure of websites is generally not very common, and this linear structure is intended for only small websites.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Let\u2019s move on to the 2<\/span><span class=\"s3\"><sup>nd<\/sup><\/span><span class=\"s1\"> type of web design structure.<\/span><\/p>\n<h3 class=\"p1\"><b>Hierarchical Structure<\/b><\/h3>\n<p class=\"p1\"><span class=\"s1\">The hierarchical structure is the most important among web design structures. <\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">It follows the structure of a tree, where you will have a main branch which leads into sub-branches. <\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">We will talk in detail about the hierarchical structure later in this article.<\/span><\/p>\n<h3 class=\"p1\"><b>Matrix\/Web Structure<\/b><\/h3>\n<p class=\"p3\"><span class=\"s1\">This structure is not common for websites.<span class=\"Apple-converted-space\">\u00a0 <\/span>This is not a structure to implement in your website as it is a concept mainly for search engines to identify how your website is connected to other websites. So, Matrix\/Web structure is not an internal website structure, but an external website linking structure. It is the random linking structure of your website with other websites.<\/span><\/p>\n<p class=\"p3\"><span class=\"s1\">In this article, we are going to discuss more about the hierarchical structure as, it is the only important structure that matters to web designers. <\/span><\/p>\n<h2 class=\"p8\"><span class=\"s1\"><b>Hierarchical Web Design Structure<\/b><\/span><\/h2>\n<p class=\"p9\"><span class=\"s1\">In general, every websites starts with a landing page which will often be your Homepage. <\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">From Homepage, you go to the main sections of your website. These main sections of your websites are often called sitelinks. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-expand=\"600\" class=\"lazyload alignnone size-full wp-image-27543\" src=\"data:image\/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 493 199'%2F%3E\" data-src=\"https:\/\/www.crazyleafdesign.com\/blog\/wp-content\/uploads\/2018\/09\/Hierarchical-Web-Design-Structure.png\" alt=\"Hierarchical Web Design Structure\" width=\"493\" height=\"199\" \/><\/p>\n<p>&nbsp;<\/p>\n<p class=\"p1\"><span class=\"s1\">When you Google any major website, you could see that there are links to other main sections of that website in their search result. This is what sitelinks are about. <\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">For Example, the main sections of your website might be News, Events or Blogs. From these sections users will be able to explore contents belonging to a particular type.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">From the main sections of your website, you can dig a level deeper to show the sub-sections. This will be where the individual pages of your website live, or this could indeed be a sub-section of your main section.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">For Example, sports, politics, sub-section of News section or a sub-section for different regions or topics for your event section.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-expand=\"600\" class=\"lazyload alignnone size-full wp-image-27544\" src=\"data:image\/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 636 367'%2F%3E\" data-src=\"https:\/\/www.crazyleafdesign.com\/blog\/wp-content\/uploads\/2018\/09\/sub-section-of-News-section.png\" alt=\"sub-section of News section\" width=\"636\" height=\"367\" \/><\/p>\n<p>&nbsp;<\/p>\n<p class=\"p1\"><span class=\"s1\">Typically, it is advised to include individual pages in your sub-section as any pages far from 4 or more clicks away from the homepage is not a good user friendly sign. More the hierarchy you have in your website, more complex the navigation becomes. <\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">So try to include all you pages in at least 3 clicks away from your homepage. This will also give you an added benefit if you are doing search engine optimization (SEO) for your website.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">This is how a hierarchical structure is basically laid out. <\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Now let\u2019s see why we need a web design structure to begin with.<\/span><\/p>\n<h2 class=\"p2\"><span class=\"s1\"><b>Why do you need a web design structure?<\/b><\/span><\/h2>\n<p class=\"p1\"><span class=\"s1\">The first and foremost reason for having a well laid out website structure is that it makes your user interface (UI) much better and deliver the best user experience (UX). A good \u00a0<a href=\"https:\/\/www.globalmediainsight.com\/blog\/importance-uiux-website-development\/\"><span class=\"s2\">UI\/UX <\/span><\/a>is extremely important in the success of your website. <\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">A good web design structure will make it super easy for your audience to find what they are looking for in your website. This in turn will increase the user engagement and the performance of your website. <\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">A well-structured website can even increase your revenue if your business is very much depended on the online audience. <\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Another important advantage of having a great website structure is that it will be as easy for search engines to crawl and index your website as easy it is for users to navigate through your website.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Good website structure will indeed boost your SEO and chances to rank better in Google search results.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Finally, it will be way easier for the people who manages your website to navigate to the pages they want and guess the location and url of a web page or to implement a site-wide url modification etc.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">So, let\u2019s sum up some of the great benefits of having a good website structure.<\/span><\/p>\n<ul class=\"ul1\">\n<li class=\"li3\"><span class=\"s1\">Better user experience<\/span><\/li>\n<li class=\"li3\"><span class=\"s1\">Proper Site-links \/ Sitemap<\/span><\/li>\n<li class=\"li3\"><span class=\"s1\">Faster Search Engine crawling<\/span><\/li>\n<li class=\"li3\"><span class=\"s1\">Optimized Results in SEO<\/span><\/li>\n<li class=\"li1\"><span class=\"s1\">Easier to manage web pages<\/span><\/li>\n<\/ul>\n<p class=\"p1\"><span class=\"s1\">Now, let\u2019s look at how should we implement a website structure.<\/span><\/p>\n<p class=\"p2\"><span class=\"s1\"><b>How to plan and implement a website structure?<\/b><\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Now that we know what a website structure is, let\u2019s see how we should implement it in a website.<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">To implement a web design structure, first you need to come up with a plan. This plan should be implemented right from the early stage of design process. <\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">You should consider the following things while you are planning a website structure.<\/span><\/p>\n<ul class=\"ul1\">\n<li class=\"li3\"><span class=\"s1\">Use at least <b>2 to 8 main sections<\/b>. Anything less than 2 main sections is too low for a website and websites with more than 8 main sections is too complicated.<\/span><\/li>\n<li class=\"li3\"><span class=\"s1\">Think from your user\u2019s perspective and think about the tasks you want them to accomplish in your website and the content that might attract them.<\/span><\/li>\n<li class=\"li3\"><span class=\"s1\">Keep the number of subsections balanced, so that you are having more or less same number of sub-sections for every main section.<\/span><\/li>\n<li class=\"li3\"><span class=\"s1\">Make sure your pages are not buried too deep in your website. If you have too many levels in your website, the user will get confused and they won\u2019t be able to navigate easily in your website. <\/span><\/li>\n<li class=\"li1\"><span class=\"s1\">Make sure you list your main sections in Header and Footer of your website. The main content sections of your website must be available to the users at any page and any time.<\/span><\/li>\n<\/ul>\n<p class=\"p1\"><span class=\"s1\">Following the above principles, you will be able to design the website with a very intuitive navigation structure, where audience will know exactly where to look for to find what they need.<\/span><\/p>\n<p class=\"p5\"><span class=\"s1\"><b>Navigation elements in a website<\/b><\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">In order to create a good website structure, you need to know understand the concept of web navigation. Web navigation is how, or what are the different elements in your web page that makes it easier for users to communicate and go from one page to another. These elements are basically internal links present all over your website. <\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Let\u2019s understand some of the basic navigation elements in<span class=\"Apple-converted-space\">\u00a0 <\/span>a website. <\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Below image shows some of the main navigational elements used in website. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-expand=\"600\" class=\"lazyload alignnone size-full wp-image-27545\" src=\"data:image\/svg+xml;charset=utf-8,%3Csvg xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg' viewBox%3D'0 0 590 630'%2F%3E\" data-src=\"https:\/\/www.crazyleafdesign.com\/blog\/wp-content\/uploads\/2018\/09\/main-navigational-elements.png\" alt=\"main navigational elements\" width=\"590\" height=\"630\" \/><\/p>\n<p>&nbsp;<\/p>\n<p class=\"p1\"><span class=\"s1\">You may be familiar with some or all of these navigational options from websites you had visited. However, each of these navigational areas are used to meet unique navigational needs of website visitors. Let\u2019s understand the purpose of these navigational elements.<\/span><\/p>\n<ol class=\"ol1\">\n<li class=\"li1\"><b><\/b><span class=\"s1\"><b>Main Menu<\/b><\/span><\/li>\n<\/ol>\n<p class=\"p1\"><span class=\"s1\">Main menu is the most important navigation element and its mainly located in your website header.<\/span><\/p>\n<ol class=\"ol1\">\n<li class=\"li1\"><b><\/b><span class=\"s1\"><b>Secondary Menu<\/b><\/span><\/li>\n<\/ol>\n<p class=\"p1\"><span class=\"s1\">As the name implies this menu is secondary, which means it is for a subsection or a main section. It is generally located in the left navigation, often called as sidebar.<\/span><\/p>\n<ol class=\"ol1\">\n<li class=\"li1\"><b><\/b><span class=\"s1\"><b>Bread Crumbs<\/b><\/span><\/li>\n<\/ol>\n<p class=\"p1\"><span class=\"s1\">Breadcrumbs are very important and yet, often ignored navigational element. Breadcrumbs explain to the user where they are located in the website right now, when they land on a particular webpage of your website from search engines like Google or other external websites. Breadcrumbs are extremely important web navigational element for any website as they explain to the users about the section of website they have landed.<\/span><\/p>\n<ol class=\"ol1\">\n<li class=\"li1\"><b><\/b><span class=\"s1\"><b>Inline links , Related links &amp; External Links<\/b><\/span><\/li>\n<\/ol>\n<p class=\"p1\"><span class=\"s1\">These are different links that you can have within the content area of your website. These links encourage more interaction from the users and makes the browsing experience of your website audience even better.<\/span><\/p>\n<ol class=\"ol1\">\n<li class=\"li1\"><b><\/b><span class=\"s1\"><b>Footer Menu<\/b><\/span><\/li>\n<\/ol>\n<p class=\"p1\"><span class=\"s1\">Footer links are located in the footer of your website. They are another important navigational element, sometimes you give the most important links in your Main Menu in the Footer as well. This is to help users find the link to main pages of your website even when they scroll down to the bottom of your page.\u00a0<\/span><\/p>\n<p class=\"p1\"><span class=\"s1\">Footer menu is also features some seldom used links like your, privacy policy, terms and conditions, sitemap etc; these are not the first pages you want your website audience to visit. Hence you use footer navigation to provide these links.<\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are going to discuss the structure and navigation of websites. It intended to readers who are new to web design to learn the basic website structure.<\/p>\n","protected":false},"author":394,"featured_media":27544,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[59],"tags":[],"adace-sponsor":[],"class_list":["post-27542","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Website Structure and Navigation: Basic Web Design Rules<\/title>\n<meta name=\"description\" content=\"We are going to discuss the structure and navigation of websites. It intended to readers who are new to web design to learn the basic website structure.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Website Structure and Navigation: Basic Web Design Rules\" \/>\n<meta property=\"og:description\" content=\"We are going to discuss the structure and navigation of websites. It intended to readers who are new to web design to learn the basic website structure.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/\" \/>\n<meta property=\"og:site_name\" content=\"CrazyLeaf Design Blog\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/www.facebook.com\/crazyleafdesign\" \/>\n<meta property=\"article:published_time\" content=\"2018-09-14T08:43:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-09-17T18:46:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.crazyleafdesign.com\/blog\/wp-content\/uploads\/2018\/09\/sub-section-of-News-section.png\" \/>\n\t<meta property=\"og:image:width\" content=\"636\" \/>\n\t<meta property=\"og:image:height\" content=\"367\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Pranoy Sundar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pranoysundar\" \/>\n<meta name=\"twitter:site\" content=\"@crazyleaf\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pranoy Sundar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/website-structure-and-navigation-basic-web-design-rules\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/website-structure-and-navigation-basic-web-design-rules\\\/\"},\"author\":{\"name\":\"Pranoy Sundar\",\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/#\\\/schema\\\/person\\\/50cd0c473870c11b3a35ac06ac1f828e\"},\"headline\":\"Website Structure and Navigation: Basic Web Design Rules\",\"datePublished\":\"2018-09-14T08:43:52+00:00\",\"dateModified\":\"2018-09-17T18:46:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/website-structure-and-navigation-basic-web-design-rules\\\/\"},\"wordCount\":1596,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/website-structure-and-navigation-basic-web-design-rules\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/09\\\/sub-section-of-News-section.png\",\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/website-structure-and-navigation-basic-web-design-rules\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/website-structure-and-navigation-basic-web-design-rules\\\/\",\"url\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/website-structure-and-navigation-basic-web-design-rules\\\/\",\"name\":\"Website Structure and Navigation: Basic Web Design Rules\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/website-structure-and-navigation-basic-web-design-rules\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/website-structure-and-navigation-basic-web-design-rules\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/09\\\/sub-section-of-News-section.png\",\"datePublished\":\"2018-09-14T08:43:52+00:00\",\"dateModified\":\"2018-09-17T18:46:12+00:00\",\"description\":\"We are going to discuss the structure and navigation of websites. It intended to readers who are new to web design to learn the basic website structure.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/website-structure-and-navigation-basic-web-design-rules\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/website-structure-and-navigation-basic-web-design-rules\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/website-structure-and-navigation-basic-web-design-rules\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/09\\\/sub-section-of-News-section.png\",\"contentUrl\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/09\\\/sub-section-of-News-section.png\",\"width\":636,\"height\":367,\"caption\":\"sub-section of News section\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/website-structure-and-navigation-basic-web-design-rules\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/category\\\/web-design\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Website Structure and Navigation: Basic Web Design Rules\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/\",\"name\":\"CrazyLeaf Design Blog\",\"description\":\"LETS INSPIRE IN WEB AND GRAPHIC DESIGN!\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/#organization\",\"name\":\"CrazyLeaf Design Blog\",\"url\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/cropped-cld-logo-dark.png\",\"contentUrl\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/cropped-cld-logo-dark.png\",\"width\":690,\"height\":132,\"caption\":\"CrazyLeaf Design Blog\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"http:\\\/\\\/www.facebook.com\\\/crazyleafdesign\",\"https:\\\/\\\/x.com\\\/crazyleaf\",\"https:\\\/\\\/www.pinterest.com\\\/crazyleaf\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/#\\\/schema\\\/person\\\/50cd0c473870c11b3a35ac06ac1f828e\",\"name\":\"Pranoy Sundar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3474538029ab44f689b9a253724f8320e8a45155988fea9e39f0163bf003f81b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3474538029ab44f689b9a253724f8320e8a45155988fea9e39f0163bf003f81b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3474538029ab44f689b9a253724f8320e8a45155988fea9e39f0163bf003f81b?s=96&d=mm&r=g\",\"caption\":\"Pranoy Sundar\"},\"description\":\"Pranoy Sundar is Digital Marketer in Global Media Insight a web design company based in Dubai. He is passionate about everything to do with digital marketing - from designing websites, creating content to online advertisements and SEO.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/pranoysundar\"],\"url\":\"https:\\\/\\\/www.crazyleafdesign.com\\\/blog\\\/author\\\/pranoy-gmi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Website Structure and Navigation: Basic Web Design Rules","description":"We are going to discuss the structure and navigation of websites. It intended to readers who are new to web design to learn the basic website structure.","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:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/","og_locale":"en_US","og_type":"article","og_title":"Website Structure and Navigation: Basic Web Design Rules","og_description":"We are going to discuss the structure and navigation of websites. It intended to readers who are new to web design to learn the basic website structure.","og_url":"https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/","og_site_name":"CrazyLeaf Design Blog","article_publisher":"http:\/\/www.facebook.com\/crazyleafdesign","article_published_time":"2018-09-14T08:43:52+00:00","article_modified_time":"2018-09-17T18:46:12+00:00","og_image":[{"width":636,"height":367,"url":"https:\/\/www.crazyleafdesign.com\/blog\/wp-content\/uploads\/2018\/09\/sub-section-of-News-section.png","type":"image\/png"}],"author":"Pranoy Sundar","twitter_card":"summary_large_image","twitter_creator":"@pranoysundar","twitter_site":"@crazyleaf","twitter_misc":{"Written by":"Pranoy Sundar","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/#article","isPartOf":{"@id":"https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/"},"author":{"name":"Pranoy Sundar","@id":"https:\/\/www.crazyleafdesign.com\/blog\/#\/schema\/person\/50cd0c473870c11b3a35ac06ac1f828e"},"headline":"Website Structure and Navigation: Basic Web Design Rules","datePublished":"2018-09-14T08:43:52+00:00","dateModified":"2018-09-17T18:46:12+00:00","mainEntityOfPage":{"@id":"https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/"},"wordCount":1596,"commentCount":0,"publisher":{"@id":"https:\/\/www.crazyleafdesign.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/#primaryimage"},"thumbnailUrl":"https:\/\/www.crazyleafdesign.com\/blog\/wp-content\/uploads\/2018\/09\/sub-section-of-News-section.png","articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/","url":"https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/","name":"Website Structure and Navigation: Basic Web Design Rules","isPartOf":{"@id":"https:\/\/www.crazyleafdesign.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/#primaryimage"},"image":{"@id":"https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/#primaryimage"},"thumbnailUrl":"https:\/\/www.crazyleafdesign.com\/blog\/wp-content\/uploads\/2018\/09\/sub-section-of-News-section.png","datePublished":"2018-09-14T08:43:52+00:00","dateModified":"2018-09-17T18:46:12+00:00","description":"We are going to discuss the structure and navigation of websites. It intended to readers who are new to web design to learn the basic website structure.","breadcrumb":{"@id":"https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/#primaryimage","url":"https:\/\/www.crazyleafdesign.com\/blog\/wp-content\/uploads\/2018\/09\/sub-section-of-News-section.png","contentUrl":"https:\/\/www.crazyleafdesign.com\/blog\/wp-content\/uploads\/2018\/09\/sub-section-of-News-section.png","width":636,"height":367,"caption":"sub-section of News section"},{"@type":"BreadcrumbList","@id":"https:\/\/www.crazyleafdesign.com\/blog\/website-structure-and-navigation-basic-web-design-rules\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.crazyleafdesign.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/www.crazyleafdesign.com\/blog\/category\/web-design\/"},{"@type":"ListItem","position":3,"name":"Website Structure and Navigation: Basic Web Design Rules"}]},{"@type":"WebSite","@id":"https:\/\/www.crazyleafdesign.com\/blog\/#website","url":"https:\/\/www.crazyleafdesign.com\/blog\/","name":"CrazyLeaf Design Blog","description":"LETS INSPIRE IN WEB AND GRAPHIC DESIGN!","publisher":{"@id":"https:\/\/www.crazyleafdesign.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.crazyleafdesign.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.crazyleafdesign.com\/blog\/#organization","name":"CrazyLeaf Design Blog","url":"https:\/\/www.crazyleafdesign.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyleafdesign.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.crazyleafdesign.com\/blog\/wp-content\/uploads\/2026\/10\/cropped-cld-logo-dark.png","contentUrl":"https:\/\/www.crazyleafdesign.com\/blog\/wp-content\/uploads\/2026\/10\/cropped-cld-logo-dark.png","width":690,"height":132,"caption":"CrazyLeaf Design Blog"},"image":{"@id":"https:\/\/www.crazyleafdesign.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/www.facebook.com\/crazyleafdesign","https:\/\/x.com\/crazyleaf","https:\/\/www.pinterest.com\/crazyleaf\/"]},{"@type":"Person","@id":"https:\/\/www.crazyleafdesign.com\/blog\/#\/schema\/person\/50cd0c473870c11b3a35ac06ac1f828e","name":"Pranoy Sundar","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3474538029ab44f689b9a253724f8320e8a45155988fea9e39f0163bf003f81b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/3474538029ab44f689b9a253724f8320e8a45155988fea9e39f0163bf003f81b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3474538029ab44f689b9a253724f8320e8a45155988fea9e39f0163bf003f81b?s=96&d=mm&r=g","caption":"Pranoy Sundar"},"description":"Pranoy Sundar is Digital Marketer in Global Media Insight a web design company based in Dubai. He is passionate about everything to do with digital marketing - from designing websites, creating content to online advertisements and SEO.","sameAs":["https:\/\/x.com\/pranoysundar"],"url":"https:\/\/www.crazyleafdesign.com\/blog\/author\/pranoy-gmi\/"}]}},"wps_subtitle":"","_links":{"self":[{"href":"https:\/\/www.crazyleafdesign.com\/blog\/wp-json\/wp\/v2\/posts\/27542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crazyleafdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crazyleafdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crazyleafdesign.com\/blog\/wp-json\/wp\/v2\/users\/394"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crazyleafdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=27542"}],"version-history":[{"count":3,"href":"https:\/\/www.crazyleafdesign.com\/blog\/wp-json\/wp\/v2\/posts\/27542\/revisions"}],"predecessor-version":[{"id":27548,"href":"https:\/\/www.crazyleafdesign.com\/blog\/wp-json\/wp\/v2\/posts\/27542\/revisions\/27548"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.crazyleafdesign.com\/blog\/wp-json\/wp\/v2\/media\/27544"}],"wp:attachment":[{"href":"https:\/\/www.crazyleafdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=27542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crazyleafdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=27542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crazyleafdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=27542"},{"taxonomy":"adace-sponsor","embeddable":true,"href":"https:\/\/www.crazyleafdesign.com\/blog\/wp-json\/wp\/v2\/adace-sponsor?post=27542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}