{"id":22144,"date":"2020-06-30T12:52:13","date_gmt":"2020-06-30T12:52:13","guid":{"rendered":"https:\/\/allcodesarebeautiful.com\/permakultur-prinzip-7\/"},"modified":"2024-07-19T17:45:13","modified_gmt":"2024-07-19T15:45:13","slug":"permaculture-principle-7","status":"publish","type":"post","link":"https:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/","title":{"rendered":"Web design principle 7: Design from patterns to details"},"content":{"rendered":"\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"box box-orange\">\n<p>We hope you enjoy learning about this principle!<\/p>\n<p><strong>Find out more in our main article: <a href=\"https:\/\/allcodesarebeautiful.com\/permaculture-on-the-web\">This is how sustainably websites can grow<\/a>.<\/strong><\/p>\n<\/div>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<blockquote class=\"wp-block-quote is-style-large is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>Can&#8217;t see the woods for the trees.<\/em><\/p>\n<\/blockquote>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The principle of designing from patterns to details means starting with <strong>primary designs and recurring forms<\/strong>. These can be found all around us \u2013 in nature, in our relationships and in our workplace. Take a step back, observe these patterns and consciously acknowledge them. Initially, it doesn\u2019t matter whether the patterns relate to design or behaviour. Process patterns could potentially lead you to <strong>practical solutions<\/strong> to problems, whereas design patterns or natural forms could provide you with an <strong>aesthetic approach<\/strong>. The key is to start by looking at the bigger picture without getting caught up in the details.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-first-create-patterns\">First create patterns<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How is your site <strong>structured<\/strong>? What is the <strong>basic framework<\/strong>?<\/li>\n\n\n\n<li>Think about the <strong>user journey <\/strong>and design it efficiently. Create characters to help you understand your users better. Consider your users\u2019 key objectives and your main conversion goals \u2013 prioritise these things.<\/li>\n\n\n\n<li>How do users interact with your site? Create a <strong>user journey map<\/strong> to look at all the touch points.<\/li>\n\n\n\n<li>Develop a <strong>well thought-out, consistent design<\/strong>. Define basic elements and apply them <strong>consistently<\/strong>. For example, decide on a global colour scheme to use for all links and buttons. Planning your design well at the start will save you a great deal of work later.<\/li>\n\n\n\n<li>Follow the <a href=\"https:\/\/www.investopedia.com\/terms\/l\/lean-startup.asp\" target=\"_blank\" rel=\"noreferrer noopener\">lean startup<\/a> principle and focus on <strong>essential core functions<\/strong> so you don\u2019t get carried away with too many different features. You can continue to develop your web project in <strong>cooperation with users<\/strong> at a later date.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:2rem\" class=\"wp-block-theme-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-secondary-background-color has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\">Think modular!<\/h3>\n\n\n\n<p>Finding the right pattern is more important than understanding all the details. <\/p>\n\n\n\n<p>By focusing on complex details, we run the risk of not being able to see the wood for the trees. When planning large-scale projects, this can result in designs that look impressive but don&#8217;t work. Complex systems that are self-adjusting and durable are usually based on simple or modular systems.<\/p>\n<\/div>\n\n\n\n<div style=\"height:2rem\" class=\"wp-block-theme-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-then-design-the-details\">Then design the details<\/h2>\n\n\n\n<p>Permaculture applies the concept of <a href=\"https:\/\/permaculturevisions.com\/getting-permaculture-zone\/\" target=\"_blank\" rel=\"noreferrer noopener\">zoning<\/a>. This involves dividing up areas so that the most frequently visited zones are easiest to access. Correspondingly, the zone which is visited least frequently is located furthest away from the main zone. The areas are also arranged according to the amount of attention and care required. This method aims to optimize paths and increase <strong>energy efficiency.<\/strong> It can also be applied to arranging information on a website in a meaningful way and can be used to develop the details of the information architecture.<\/p>\n\n\n\n<div style=\"height:2rem\" class=\"wp-block-theme-spacer\"><\/div>\n\n\n<div class=\"wp-block-columns-wrapper\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/allcodesarebeautiful.com\/wp-content\/uploads\/2020\/06\/Webdesign-Zonen-.png\" alt=\"Zeigt die verschiedenen Zonen einer Permakultur\" class=\"wp-image-20935\" width=\"404\" height=\"404\" srcset=\"https:\/\/allcodesarebeautiful.com\/wp-content\/uploads\/2020\/06\/Webdesign-Zonen-.png 538w, https:\/\/allcodesarebeautiful.com\/wp-content\/uploads\/2020\/06\/Webdesign-Zonen--300x300.png 300w, https:\/\/allcodesarebeautiful.com\/wp-content\/uploads\/2020\/06\/Webdesign-Zonen--60x60.png 60w, https:\/\/allcodesarebeautiful.com\/wp-content\/uploads\/2020\/06\/Webdesign-Zonen--150x150.png 150w, https:\/\/allcodesarebeautiful.com\/wp-content\/uploads\/2020\/06\/Webdesign-Zonen--100x100.png 100w, https:\/\/allcodesarebeautiful.com\/wp-content\/uploads\/2020\/06\/Webdesign-Zonen--166x166.png 166w, https:\/\/allcodesarebeautiful.com\/wp-content\/uploads\/2020\/06\/Webdesign-Zonen--250x250.png 250w\" sizes=\"(max-width: 404px) 100vw, 404px\" \/><figcaption class=\"wp-element-caption\"><a aria-label=\"undefined (opens in a new tab)\" href=\"https:\/\/www.hippermaculture.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">hippermaculture.com<\/a><\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<p>This diagram illustrates how a plot of land is zoned (and there are actually more similarities to a website than you might expect). The herb garden, which is used on a daily basis, is planted right next to the house to save time and effort.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>Decide which content is particularly important - and which is not \u2013 and use this to develop your <strong>menu structure<\/strong>. For example, if your website\u2019s&nbsp; main goal is to raise funds, don\u2019t hide the donation page in a submenu!<\/li>\n\n\n\n<li><strong><\/strong><strong>Take a user-centred approach<\/strong>: Try role-playing situations and put yourselves in your users\u2019 shoes to discuss which content is most important to them.<\/li>\n\n\n\n<li>Which information should be easily accessible? Make sure this is <strong>clearly visible <\/strong>on your home page. You can also add <strong>calls-to-action buttons<\/strong> to the page header or footer.<\/li>\n\n\n\n<li>So what should you do with niche content? This doesn&#8217;t usually require subpages and an unnecessarily complicated menu. You could include this kind of <strong>in-depth content in your blog<\/strong>.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:2rem\" class=\"wp-block-theme-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-group has-secondary-gradient-gradient-background has-background is-layout-constrained wp-block-group-is-layout-constrained\">\n<p>Now you know one of the 12 principles of permaculture webdesign.<\/p>\n\n\n\n<p><strong>Want to find out more? <\/strong><br \/>Go to the <a href=\"https:\/\/allcodesarebeautiful.com\/permaculture-principle-8\">permaculture principle 8<\/a> oder return to the main article <a href=\"https:\/\/allcodesarebeautiful.com\/permaculture-on-the-web\"><\/a><a href=\"https:\/\/allcodesarebeautiful.com\/en\/permaculture-on-the-web\/\">This is how sustainably websites can grow<\/a>!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>We hope you enjoy learning about this principle! Find out more in our main article: This is how sustainably websites can grow. Can&#8217;t see the woods for the trees. The principle of designing from patterns to details means starting with primary designs and recurring forms. These can be found all around us \u2013 in nature, [&hellip;]<\/p>\n","protected":false},"author":15,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[262,80],"tags":[],"class_list":["post-22144","post","type-post","status-publish","format-standard","hentry","category-sustainability","category-web-design"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>7. Design from patterns to details &#8226; Permaculture Webdesign<\/title>\n<meta name=\"description\" content=\"Take a step back. The key is to start by looking at the bigger picture without getting caught up in the details.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Web design principle 7: Design from patterns to details\" \/>\n<meta property=\"og:description\" content=\"We hope you enjoy learning about this principle! Find out more in our main article: This is how sustainably websites can grow. Can&#039;t see the woods for the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/\" \/>\n<meta property=\"og:site_name\" content=\"ACB\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-30T12:52:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-19T15:45:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/allcodesarebeautiful.com\/wp-content\/uploads\/2020\/06\/permakultur-websites.png\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Anne\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anne\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/permaculture-principle-7\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/permaculture-principle-7\\\/\"},\"author\":{\"name\":\"Anne\",\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/#\\\/schema\\\/person\\\/bd5187c90964de4c2255c84e6611b986\"},\"headline\":\"Web design principle 7: Design from patterns to details\",\"datePublished\":\"2020-06-30T12:52:13+00:00\",\"dateModified\":\"2024-07-19T15:45:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/permaculture-principle-7\\\/\"},\"wordCount\":642,\"publisher\":{\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/permaculture-principle-7\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Webdesign-Zonen-.png\",\"articleSection\":[\"Sustainability\",\"Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/permaculture-principle-7\\\/\",\"url\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/permaculture-principle-7\\\/\",\"name\":\"7. Design from patterns to details &#8226; Permaculture Webdesign\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/permaculture-principle-7\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/permaculture-principle-7\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Webdesign-Zonen-.png\",\"datePublished\":\"2020-06-30T12:52:13+00:00\",\"dateModified\":\"2024-07-19T15:45:13+00:00\",\"description\":\"Take a step back. The key is to start by looking at the bigger picture without getting caught up in the details.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/permaculture-principle-7\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/permaculture-principle-7\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/permaculture-principle-7\\\/#primaryimage\",\"url\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Webdesign-Zonen-.png\",\"contentUrl\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/Webdesign-Zonen-.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/permaculture-principle-7\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Start\",\"item\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Design\",\"item\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/category\\\/web-design\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Web design principle 7: Design from patterns to details\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/\",\"name\":\"ACB\",\"description\":\"Let\u00b4s make the web a better place!\",\"publisher\":{\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/#organization\",\"name\":\"ACB\",\"url\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/acb-logo-signet.svg\",\"contentUrl\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/wp-content\\\/uploads\\\/2018\\\/05\\\/acb-logo-signet.svg\",\"width\":1,\"height\":1,\"caption\":\"ACB\"},\"image\":{\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/company\\\/18997354\\\/\"],\"actionableFeedbackPolicy\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/reaktionen-bei-bugs\\\/\",\"ethicsPolicy\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/philosophie\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/allcodesarebeautiful.com\\\/en\\\/#\\\/schema\\\/person\\\/bd5187c90964de4c2255c84e6611b986\",\"name\":\"Anne\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5b6982f691f1d48a37d149fd912f8b0e6b1db6739b0746a239ba61eb3bcc0077?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5b6982f691f1d48a37d149fd912f8b0e6b1db6739b0746a239ba61eb3bcc0077?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5b6982f691f1d48a37d149fd912f8b0e6b1db6739b0746a239ba61eb3bcc0077?s=96&d=retro&r=g\",\"caption\":\"Anne\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"7. Design from patterns to details &#8226; Permaculture Webdesign","description":"Take a step back. The key is to start by looking at the bigger picture without getting caught up in the details.","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:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/","og_locale":"en_US","og_type":"article","og_title":"Web design principle 7: Design from patterns to details","og_description":"We hope you enjoy learning about this principle! Find out more in our main article: This is how sustainably websites can grow. Can't see the woods for the","og_url":"https:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/","og_site_name":"ACB","article_published_time":"2020-06-30T12:52:13+00:00","article_modified_time":"2024-07-19T15:45:13+00:00","og_image":[{"width":400,"height":400,"url":"https:\/\/allcodesarebeautiful.com\/wp-content\/uploads\/2020\/06\/permakultur-websites.png","type":"image\/png"}],"author":"Anne","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Anne","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/#article","isPartOf":{"@id":"https:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/"},"author":{"name":"Anne","@id":"https:\/\/allcodesarebeautiful.com\/en\/#\/schema\/person\/bd5187c90964de4c2255c84e6611b986"},"headline":"Web design principle 7: Design from patterns to details","datePublished":"2020-06-30T12:52:13+00:00","dateModified":"2024-07-19T15:45:13+00:00","mainEntityOfPage":{"@id":"https:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/"},"wordCount":642,"publisher":{"@id":"https:\/\/allcodesarebeautiful.com\/en\/#organization"},"image":{"@id":"https:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/#primaryimage"},"thumbnailUrl":"https:\/\/allcodesarebeautiful.com\/wp-content\/uploads\/2020\/06\/Webdesign-Zonen-.png","articleSection":["Sustainability","Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/","url":"https:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/","name":"7. Design from patterns to details &#8226; Permaculture Webdesign","isPartOf":{"@id":"https:\/\/allcodesarebeautiful.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/#primaryimage"},"image":{"@id":"https:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/#primaryimage"},"thumbnailUrl":"https:\/\/allcodesarebeautiful.com\/wp-content\/uploads\/2020\/06\/Webdesign-Zonen-.png","datePublished":"2020-06-30T12:52:13+00:00","dateModified":"2024-07-19T15:45:13+00:00","description":"Take a step back. The key is to start by looking at the bigger picture without getting caught up in the details.","breadcrumb":{"@id":"https:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/#primaryimage","url":"https:\/\/allcodesarebeautiful.com\/wp-content\/uploads\/2020\/06\/Webdesign-Zonen-.png","contentUrl":"https:\/\/allcodesarebeautiful.com\/wp-content\/uploads\/2020\/06\/Webdesign-Zonen-.png"},{"@type":"BreadcrumbList","@id":"https:\/\/allcodesarebeautiful.com\/en\/permaculture-principle-7\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Start","item":"https:\/\/allcodesarebeautiful.com\/en\/"},{"@type":"ListItem","position":2,"name":"Web Design","item":"https:\/\/allcodesarebeautiful.com\/en\/category\/web-design\/"},{"@type":"ListItem","position":3,"name":"Web design principle 7: Design from patterns to details"}]},{"@type":"WebSite","@id":"https:\/\/allcodesarebeautiful.com\/en\/#website","url":"https:\/\/allcodesarebeautiful.com\/en\/","name":"ACB","description":"Let\u00b4s make the web a better place!","publisher":{"@id":"https:\/\/allcodesarebeautiful.com\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/allcodesarebeautiful.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/allcodesarebeautiful.com\/en\/#organization","name":"ACB","url":"https:\/\/allcodesarebeautiful.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/allcodesarebeautiful.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/allcodesarebeautiful.com\/wp-content\/uploads\/2018\/05\/acb-logo-signet.svg","contentUrl":"https:\/\/allcodesarebeautiful.com\/wp-content\/uploads\/2018\/05\/acb-logo-signet.svg","width":1,"height":1,"caption":"ACB"},"image":{"@id":"https:\/\/allcodesarebeautiful.com\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/18997354\/"],"actionableFeedbackPolicy":"https:\/\/allcodesarebeautiful.com\/reaktionen-bei-bugs\/","ethicsPolicy":"https:\/\/allcodesarebeautiful.com\/philosophie\/"},{"@type":"Person","@id":"https:\/\/allcodesarebeautiful.com\/en\/#\/schema\/person\/bd5187c90964de4c2255c84e6611b986","name":"Anne","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5b6982f691f1d48a37d149fd912f8b0e6b1db6739b0746a239ba61eb3bcc0077?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5b6982f691f1d48a37d149fd912f8b0e6b1db6739b0746a239ba61eb3bcc0077?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5b6982f691f1d48a37d149fd912f8b0e6b1db6739b0746a239ba61eb3bcc0077?s=96&d=retro&r=g","caption":"Anne"}}]}},"_links":{"self":[{"href":"https:\/\/allcodesarebeautiful.com\/en\/wp-json\/wp\/v2\/posts\/22144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/allcodesarebeautiful.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/allcodesarebeautiful.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/allcodesarebeautiful.com\/en\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/allcodesarebeautiful.com\/en\/wp-json\/wp\/v2\/comments?post=22144"}],"version-history":[{"count":10,"href":"https:\/\/allcodesarebeautiful.com\/en\/wp-json\/wp\/v2\/posts\/22144\/revisions"}],"predecessor-version":[{"id":30354,"href":"https:\/\/allcodesarebeautiful.com\/en\/wp-json\/wp\/v2\/posts\/22144\/revisions\/30354"}],"wp:attachment":[{"href":"https:\/\/allcodesarebeautiful.com\/en\/wp-json\/wp\/v2\/media?parent=22144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/allcodesarebeautiful.com\/en\/wp-json\/wp\/v2\/categories?post=22144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/allcodesarebeautiful.com\/en\/wp-json\/wp\/v2\/tags?post=22144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}