{"id":3367,"date":"2020-07-21T06:00:14","date_gmt":"2020-07-21T04:00:14","guid":{"rendered":"http:\/\/www.jimdo.com/blog\/?p=3367"},"modified":"2022-06-27T20:33:58","modified_gmt":"2022-06-27T18:33:58","slug":"3-web-design-principles-for-beginners","status":"publish","type":"post","link":"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/","title":{"rendered":"3 Web Design Principles Every Beginner Should Know"},"content":{"rendered":"\n<p>When you start your own website, it feels like there are a million design choices to make. But the truth is that most successful websites use the same design rules to make themselves attractive and easy for visitors to use.&nbsp;<\/p>\n\n\n\n<p>There\u2019s a reason for this, too. According to Google\u2019s research, <a href=\"https:\/\/research.googleblog.com\/2012\/08\/users-love-simple-and-familiar-designs.html\" target=\"_blank\" aria-label=\"undefined (opens in a new tab)\" rel=\"noreferrer noopener\">users prefer simple and familiar designs<\/a>\u2014and they will judge a website in less than the blink of an eye.&nbsp;<\/p>\n\n\n\n<p>This post covers some of the web design basics that will take the mystery out of building your own site. If you want to dive deeper, there are <a href=\"https:\/\/www.jimdo.com/blog\/22-tips-for-building-a-diy-website\/\">many more tips for DIY websites<\/a>, but these provide a good place to start.&nbsp;<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-flat ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/#What_are_the_three_basic_principles_of_website_design\" >What are the three basic principles of website design?<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/#1_Paradox_of_Choice\" >1. Paradox of Choice<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/#2_Visual_hierarchy\" >2. Visual hierarchy<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/#3_White_Space\" >3. White Space<\/a><\/li><li class='ez-toc-page-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/#Where_do_I_start_with_web_design\" >Where do I start with web design?&nbsp;<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_are_the_three_basic_principles_of_website_design\"><\/span>What are the three basic principles of website design?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li>Don\u2019t offer too many choices (Paradox of Choice)<\/li><li>Put things in an order that makes sense (Visual Hierarchy)<\/li><li>Leave enough space between the items on your page (White Space)<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Paradox_of_Choice\"><\/span>1. Paradox of Choice<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Did you know that the more choices you offer, the less likely someone is to make a decision? And if they <em>do<\/em> make a decision, people with lots of options end up feeling less satisfied with their choice. This is known as the <a href=\"https:\/\/www.justinmind.com\/blog\/the-paradox-of-choice-ux-design\/\" target=\"_blank\" aria-label=\"undefined (opens in a new tab)\" rel=\"noreferrer noopener\">Paradox of Choice<\/a>.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"225\" src=\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/monstromart.jpg?resize=300%2C225&#038;ssl=1\" alt=\"Monstromart: Where Shopping is a Baffling Ordeal\" class=\"wp-image-5566\"\/><figcaption>Don\u2019t be like Monstromart in The Simpsons! Too many choices = a difficult experience for your customers.<\/figcaption><\/figure><\/div>\n\n\n\n<p><a href=\"https:\/\/www.interaction-design.org\/literature\/article\/hick-s-law-making-the-choice-easier-for-users\" target=\"_blank\" aria-label=\"undefined (opens in a new tab)\" rel=\"noreferrer noopener\">Hick\u2019s Law<\/a> says that the more choices you present, the longer it will take someone to make a decision. And if it takes too long, people <a href=\"https:\/\/www.jimdo.com/blog\/website-bounce-rate-how-to-keep-visitors\/\">might leave your website without clicking on anything<\/a>.<\/p>\n\n\n\n<p>Here\u2019s an example of a page with a reasonable number of choices. The design shows the reader what to read first and where to go next.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full img-screenshot\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"426\" src=\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/fewer-choices-on-a-website.png?resize=700%2C426&#038;ssl=1\" alt=\"An example of a web page with three clear choices.\" class=\"wp-image-3369\" srcset=\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/fewer-choices-on-a-website.png?w=700&amp;ssl=1 700w, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/fewer-choices-on-a-website.png?resize=300%2C183&amp;ssl=1 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><figcaption>Good web design offers visitors very clear choices.<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">How can the Paradox of Choice influence your website\u2019s design?<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Prioritize what you really want visitors to do when they visit your site.<\/strong> It might be signing up for your newsletter, making a purchase, listening to your music, etc. <a href=\"https:\/\/www.jimdo.com/blog\/preparing-build-website-create-site-plan\/\">Building a site plan before you start can help<\/a>. Whatever it is, focus on getting them to that point.<br><\/li><li><strong>Keep your navigation menu simple and short.<\/strong> A good rule of thumb is to have <a href=\"https:\/\/www.jimdo.com/blog\/fixing-website-navigation-bar\/\">no more than seven items in your navigation menu<\/a>. Any more than that and it will be difficult for users to read through all the options and decide where they want to go next.<br><\/li><li><strong>Reduce the number of choices on your landing pages and homepage. <\/strong>For example, only show your three bestsellers on your homepage, or your top services. Then offer more details or products on other pages. Keeping the choices limited and grouped means that the viewer can quickly select what they want to do next, rather than having to \u201cpingpong\u201d around the page looking at the different options.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"jimdo-alert\"><strong>Tip: <\/strong>Looking for more web design ideas? Check out our <a href=\"https:\/\/www.jimdo.com/blog\/tutorial-customized-website\/\">Beginner&#8217;s Guide to Customizing Your Jimdo Website<\/a>.<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Visual_hierarchy\"><\/span>2. Visual hierarchy<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Once you\u2019ve narrowed down the number of choices you offer, the next step is to prioritize the information on the page. That\u2019s where <strong>visual hierarchy <\/strong>comes in. Visual hierarchy means using visual cues like size, color, and placement to tell readers what\u2019s most important, less important\u2014and where they should look first.&nbsp;<\/p>\n\n\n\n<p>As a designer, your job is to make sure that the most important information on your website stands out, and that less important information doesn\u2019t. Beginners often miss this step and make everything on their website approximately the same size.&nbsp;<\/p>\n\n\n\n<p>Take the sample website below. This page presents a <em>lot <\/em>of choices. Are we supposed to get in touch? Buy a shirt? Learn more about the services? It\u2019s hard to know&#8230;and with six buttons to choose from, chances are good they won\u2019t know where to start.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full img-screenshot\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"656\" src=\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/a-page-without-visual-hierarchy.png?resize=700%2C656&#038;ssl=1\" alt=\"An example of a confusing web page with poor visual hierarchy.\" class=\"wp-image-3372\" srcset=\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/a-page-without-visual-hierarchy.png?w=700&amp;ssl=1 700w, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/a-page-without-visual-hierarchy.png?resize=300%2C281&amp;ssl=1 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><figcaption>This sample web page has poor visual hierarchy. Where are you supposed to look first?<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">How do you use visual hierarchy in your website design?&nbsp;<\/h3>\n\n\n\n<p>Creating visual hierarchy is about creating differences between elements. if you make everything a large font because everything is important, then that\u2019s the same as making nothing important. Think about these different approaches instead:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Size.<\/strong> Bigger = more important. Smaller = less important. User large, medium, and small headings to break up your text and give structure to your page. A large image is more important than lots of smaller images in a grid.&nbsp;<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Color.<\/strong> Normally we talk about <a href=\"https:\/\/www.jimdo.com/blog\/best-color-combinations-for-your-website\/\">color as adding personality to your website<\/a>, but it\u2019s also a tool to grab people\u2019s attention. An unusual color that stands out from the rest of your page can help emphasize something important.&nbsp;<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Placement.<\/strong> Information at the top of the page is more important than information down below. Information on the left side is traditionally more important than what\u2019s on the right (since we typically read in an F or Z-shaped pattern).&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"jimdo-alert\">Tip: With Jimdo, a lot of the visual hierarchy work is done for you by&nbsp;<a href=\"https:\/\/help.jimdo-dolphin.com\/hc\/en-us\/articles\/360000904546-What-kind-of-blocks-can-I-use-on-my-Dolphin-website-\" target=\"_blank\" aria-label=\"undefined (opens in a new tab)\" rel=\"noreferrer noopener\">using the existing blocks<\/a> (or <a href=\"https:\/\/help.jimdo.com\/hc\/en-us\/articles\/360000147023-How-do-I-use-suggested-layouts-\" target=\"_blank\" aria-label=\"undefined (opens in a new tab)\" rel=\"noreferrer noopener\">suggested layouts<\/a> in Creator). They\u2019re designed to follow the rules of web design and present information in a clear way.<\/div>\n\n\n\n<p>Let\u2019s take the example we used above and rearrange it with some better visual hierarchy. Now it\u2019s clearer what you want the visitor to look at first, second, and third, and which action is most important.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full img-screenshot\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"761\" src=\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/better-visual-hierarchy.png?resize=700%2C761&#038;ssl=1\" alt=\"A web page rearranged to show better visual hierarchy.\" class=\"wp-image-3373\" srcset=\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/better-visual-hierarchy.png?w=700&amp;ssl=1 700w, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/better-visual-hierarchy.png?resize=276%2C300&amp;ssl=1 276w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><figcaption>The same page redesigned with better visual hierarchy.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_White_Space\"><\/span>3. White Space<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>White space refers to the empty space around the pieces on your website. It doesn\u2019t literally have to be white, just empty. Designers have long known that white space is <a aria-label=\"undefined (opens in a new tab)\" href=\"http:\/\/uxmyths.com\/post\/2059998441\/myth-28-white-space-is-wasted-space\" target=\"_blank\" rel=\"noreferrer noopener\">not a waste of space<\/a>. It provides much-needed breathing room to help visitors focus their eyes on the different parts of the page.&nbsp;<\/p>\n\n\n\n<p>White space makes your site much easier to read and navigate. Think of it as Marie Kondo for your website\u2014the difference between looking for something in an overstuffed closet versus an uncluttered one.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to create more white space on your website<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Divide your page into different sections.<\/strong> With Jimdo, each block has an ideal amount of white space built in. So instead of cramming all of your content into one block, build your page out of different blocks. If you have a Creator website, use the Spacing Element to add empty space above and below different sections of your web page, and the Columns Element<strong> <\/strong>to create empty space in between elements that are side-by-side.<br><\/li><li><strong>Break up your text into smaller pieces.<\/strong> Create white space in your blocks of text by <a href=\"https:\/\/www.jimdo.com/blog\/checklist-for-clear-readable-website-text\/\">using shorter paragraphs and breaking up large sections<\/a>.<br><\/li><li><strong>Use white space in your photographs, too.<\/strong> Images are a great way to add more breathing room to a website. Notice in the example below how the photographs have plenty of empty space for a calm, uncluttered look.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image img-screenshot\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"411\" height=\"574\" src=\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/Screen-Shot-2020-07-07-at-12.21.54-PM.jpg?resize=411%2C574&#038;ssl=1\" alt=\"An example of a website that uses white space in its photography.\" class=\"wp-image-5567\" srcset=\"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/Screen-Shot-2020-07-07-at-12.21.54-PM.jpg?w=411&amp;ssl=1 411w, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/Screen-Shot-2020-07-07-at-12.21.54-PM.jpg?resize=215%2C300&amp;ssl=1 215w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><figcaption>An example of white space from Jimdo website noordsk.studio.<\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Where_do_I_start_with_web_design\"><\/span>Where do I start with web design?&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Learning web design isn\u2019t hard, and anyone can learn the basics on their own. If you find yourself getting stuck, just remember that simple is almost always going to be better for your visitors:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Narrow down your choices,&nbsp;<\/li><li>put them in an order that makes sense, and&nbsp;<\/li><li>leave enough empty space on the page so that the important parts can stand out.&nbsp;<\/li><\/ul>\n\n\n\n<p>Do that, and you\u2019ll be on your way to an amazing new website!<\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center post-cta has-white-background-color has-background is-layout-flex wp-container-core-columns-is-layout-0111f410 wp-block-columns-is-layout-flex\" style=\"padding-right:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h4 class=\"wp-block-heading\">Bring your business online with Jimdo.<\/h4>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<div class=\"wp-block-group is-content-justification-right is-nowrap is-layout-flex wp-container-core-group-is-layout-17124a9a wp-block-group-is-layout-flex\">\n<div class=\"wp-block-button\"><a data-tracking=\"post_cta_create_website_signup\" class=\"wp-block-button__link\" href=\"https:\/\/register.jimdo.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Start Now<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>When you start your own website, it feels like there are a million design choices to make. But the truth is that most successful websites use the same design rules to make themselves attractive and easy for visitors to use.&nbsp; There\u2019s a reason for this, too. According to Google\u2019s research, users prefer simple and familiar [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":5568,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[109],"tags":[125,114],"class_list":["post-3367","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-tips","tag-beginner-website-tips","tag-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>3 Web Design Principles Every Beginner Should Know - Jimdo<\/title>\n<meta name=\"description\" content=\"Building your first website? Master these website design basics and you\u2019ll be creating a beautiful website in no time.\" \/>\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.jimdo.com/blog\/3-web-design-principles-for-beginners\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3 Web Design Principles Every Beginner Should Know - Jimdo\" \/>\n<meta property=\"og:description\" content=\"Building your first website? Master these website design basics and you\u2019ll be creating a beautiful website in no time.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/\" \/>\n<meta property=\"og:site_name\" content=\"The Jimdo blog for small businesses\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-21T04:00:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-27T18:33:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/principles-of-web-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2048\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jimdo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jimdo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/3-web-design-principles-for-beginners\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/3-web-design-principles-for-beginners\\\/\"},\"author\":{\"name\":\"Jimdo\",\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/#\\\/schema\\\/person\\\/555d7b95204044216222b73d8efacc7d\"},\"headline\":\"3 Web Design Principles Every Beginner Should Know\",\"datePublished\":\"2020-07-21T04:00:14+00:00\",\"dateModified\":\"2022-06-27T18:33:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/3-web-design-principles-for-beginners\\\/\"},\"wordCount\":1251,\"publisher\":{\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/3-web-design-principles-for-beginners\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.jimdo.com/blog\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/principles-of-web-design.jpg?fit=2048%2C1024&ssl=1\",\"keywords\":[\"Beginner Website Tips\",\"Web Design\"],\"articleSection\":[\"Website Tips\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/3-web-design-principles-for-beginners\\\/\",\"url\":\"https:\\\/\\\/www.jimdo.com/blog\\\/3-web-design-principles-for-beginners\\\/\",\"name\":\"3 Web Design Principles Every Beginner Should Know - Jimdo\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/3-web-design-principles-for-beginners\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/3-web-design-principles-for-beginners\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.jimdo.com/blog\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/principles-of-web-design.jpg?fit=2048%2C1024&ssl=1\",\"datePublished\":\"2020-07-21T04:00:14+00:00\",\"dateModified\":\"2022-06-27T18:33:58+00:00\",\"description\":\"Building your first website? Master these website design basics and you\u2019ll be creating a beautiful website in no time.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.jimdo.com/blog\\\/3-web-design-principles-for-beginners\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/3-web-design-principles-for-beginners\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.jimdo.com/blog\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/principles-of-web-design.jpg?fit=2048%2C1024&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/www.jimdo.com/blog\\\/wp-content\\\/uploads\\\/2016\\\/10\\\/principles-of-web-design.jpg?fit=2048%2C1024&ssl=1\",\"width\":2048,\"height\":1024,\"caption\":\"3 Principles of Web Design\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.jimdo.com/blog\\\/\",\"name\":\"The Jimdo blog for small businesses\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.jimdo.com/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/#organization\",\"name\":\"Jimdo GmbH\",\"url\":\"https:\\\/\\\/www.jimdo.com/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.jimdo.com/blog\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/JimdoLogo-2019-main-petrol-white-bg.png\",\"contentUrl\":\"https:\\\/\\\/www.jimdo.com/blog\\\/wp-content\\\/uploads\\\/2017\\\/04\\\/JimdoLogo-2019-main-petrol-white-bg.png\",\"width\":2048,\"height\":841,\"caption\":\"Jimdo GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.jimdo.com/blog\\\/#\\\/schema\\\/person\\\/555d7b95204044216222b73d8efacc7d\",\"name\":\"Jimdo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2506bfab94e877841212e235c7148d443cd1a56b3ca7e617bd0bc48887dc682f?s=96&d=blank&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2506bfab94e877841212e235c7148d443cd1a56b3ca7e617bd0bc48887dc682f?s=96&d=blank&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2506bfab94e877841212e235c7148d443cd1a56b3ca7e617bd0bc48887dc682f?s=96&d=blank&r=g\",\"caption\":\"Jimdo\"},\"description\":\"The Jimdo blog is made for all entrepreneurs\u2014everyone with their own idea or project. Here you will find interesting information about founders and start-ups, current trends and exciting stories from other Jimdo users as well as great website tips on design, shop, SEO and more.\",\"url\":\"https:\\\/\\\/www.jimdo.com/blog\\\/author\\\/jimdoblog\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"3 Web Design Principles Every Beginner Should Know - Jimdo","description":"Building your first website? Master these website design basics and you\u2019ll be creating a beautiful website in no time.","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.jimdo.com/blog\/3-web-design-principles-for-beginners\/","og_locale":"en_US","og_type":"article","og_title":"3 Web Design Principles Every Beginner Should Know - Jimdo","og_description":"Building your first website? Master these website design basics and you\u2019ll be creating a beautiful website in no time.","og_url":"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/","og_site_name":"The Jimdo blog for small businesses","article_published_time":"2020-07-21T04:00:14+00:00","article_modified_time":"2022-06-27T18:33:58+00:00","og_image":[{"width":2048,"height":1024,"url":"https:\/\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/principles-of-web-design.jpg","type":"image\/jpeg"}],"author":"Jimdo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jimdo","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/#article","isPartOf":{"@id":"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/"},"author":{"name":"Jimdo","@id":"https:\/\/www.jimdo.com/blog\/#\/schema\/person\/555d7b95204044216222b73d8efacc7d"},"headline":"3 Web Design Principles Every Beginner Should Know","datePublished":"2020-07-21T04:00:14+00:00","dateModified":"2022-06-27T18:33:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/"},"wordCount":1251,"publisher":{"@id":"https:\/\/www.jimdo.com/blog\/#organization"},"image":{"@id":"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/principles-of-web-design.jpg?fit=2048%2C1024&ssl=1","keywords":["Beginner Website Tips","Web Design"],"articleSection":["Website Tips"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/","url":"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/","name":"3 Web Design Principles Every Beginner Should Know - Jimdo","isPartOf":{"@id":"https:\/\/www.jimdo.com/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/#primaryimage"},"image":{"@id":"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/principles-of-web-design.jpg?fit=2048%2C1024&ssl=1","datePublished":"2020-07-21T04:00:14+00:00","dateModified":"2022-06-27T18:33:58+00:00","description":"Building your first website? Master these website design basics and you\u2019ll be creating a beautiful website in no time.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jimdo.com/blog\/3-web-design-principles-for-beginners\/#primaryimage","url":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/principles-of-web-design.jpg?fit=2048%2C1024&ssl=1","contentUrl":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/principles-of-web-design.jpg?fit=2048%2C1024&ssl=1","width":2048,"height":1024,"caption":"3 Principles of Web Design"},{"@type":"WebSite","@id":"https:\/\/www.jimdo.com/blog\/#website","url":"https:\/\/www.jimdo.com/blog\/","name":"The Jimdo blog for small businesses","description":"","publisher":{"@id":"https:\/\/www.jimdo.com/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jimdo.com/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.jimdo.com/blog\/#organization","name":"Jimdo GmbH","url":"https:\/\/www.jimdo.com/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jimdo.com/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/JimdoLogo-2019-main-petrol-white-bg.png","contentUrl":"https:\/\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/04\/JimdoLogo-2019-main-petrol-white-bg.png","width":2048,"height":841,"caption":"Jimdo GmbH"},"image":{"@id":"https:\/\/www.jimdo.com/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.jimdo.com/blog\/#\/schema\/person\/555d7b95204044216222b73d8efacc7d","name":"Jimdo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2506bfab94e877841212e235c7148d443cd1a56b3ca7e617bd0bc48887dc682f?s=96&d=blank&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2506bfab94e877841212e235c7148d443cd1a56b3ca7e617bd0bc48887dc682f?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2506bfab94e877841212e235c7148d443cd1a56b3ca7e617bd0bc48887dc682f?s=96&d=blank&r=g","caption":"Jimdo"},"description":"The Jimdo blog is made for all entrepreneurs\u2014everyone with their own idea or project. Here you will find interesting information about founders and start-ups, current trends and exciting stories from other Jimdo users as well as great website tips on design, shop, SEO and more.","url":"https:\/\/www.jimdo.com/blog\/author\/jimdoblog\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2016\/10\/principles-of-web-design.jpg?fit=2048%2C1024&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":2861,"url":"https:\/\/www.jimdo.com/blog\/embed-spotify-playlist-on-website\/","url_meta":{"origin":3367,"position":0},"title":"How to Embed a Spotify Playlist on Your Website","author":"Jimdo","date":"May 2, 2022","format":false,"excerpt":"In just a few quick and easy steps you can embed a playlist from Spotify right on your website. Here's how.","rel":"","context":"In &quot;Website Tips&quot;","block_context":{"text":"Website Tips","link":"https:\/\/www.jimdo.com/blog\/website-tips\/"},"img":{"alt_text":"How to embed a Spotify playlist on a website","src":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2022\/05\/Hero-spotify.png?fit=1200%2C755&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2022\/05\/Hero-spotify.png?fit=1200%2C755&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2022\/05\/Hero-spotify.png?fit=1200%2C755&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2022\/05\/Hero-spotify.png?fit=1200%2C755&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2022\/05\/Hero-spotify.png?fit=1200%2C755&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3493,"url":"https:\/\/www.jimdo.com/blog\/22-tips-for-building-a-diy-website\/","url_meta":{"origin":3367,"position":1},"title":"22 Top Tips for the Best DIY Website","author":"Jimdo","date":"September 23, 2020","format":false,"excerpt":"What do successful DIY websites do that others don't? A few simple tips can help you get the most out of your DIY website builder.","rel":"","context":"In &quot;Website Tips&quot;","block_context":{"text":"Website Tips","link":"https:\/\/www.jimdo.com/blog\/website-tips\/"},"img":{"alt_text":"22 Tips for Building a DIY Website","src":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/02\/diy-website-tips.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/02\/diy-website-tips.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/02\/diy-website-tips.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/02\/diy-website-tips.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/02\/diy-website-tips.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":6308,"url":"https:\/\/www.jimdo.com/blog\/website-design-checklist\/","url_meta":{"origin":3367,"position":2},"title":"Your Checklist for a Successful Website Design","author":"Jimdo","date":"June 28, 2021","format":false,"excerpt":"Successful website design doesn\u2019t have to be complicated. Before you hit publish, make sure you\u2019ve followed these simple steps.","rel":"","context":"In &quot;Website Tips&quot;","block_context":{"text":"Website Tips","link":"https:\/\/www.jimdo.com/blog\/website-tips\/"},"img":{"alt_text":"A man using a computer","src":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2021\/06\/WebDesignChecklist.jpeg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2021\/06\/WebDesignChecklist.jpeg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2021\/06\/WebDesignChecklist.jpeg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2021\/06\/WebDesignChecklist.jpeg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2021\/06\/WebDesignChecklist.jpeg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3467,"url":"https:\/\/www.jimdo.com/blog\/examples-of-photography-websites\/","url_meta":{"origin":3367,"position":3},"title":"7 Photography Websites with the Wow Factor","author":"Jimdo","date":"March 2, 2022","format":false,"excerpt":"We\u2019ll show you some super smart examples of professional photography websites and walk you through how to put your photos front and center.","rel":"","context":"In &quot;Get inspired by our articles&quot;","block_context":{"text":"Get inspired by our articles","link":"https:\/\/www.jimdo.com/blog\/inspiration\/"},"img":{"alt_text":"7 Photography Websites with the Wow Factor","src":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2018\/11\/00-jimdo-blog-featured-image-photo-websites.jpg?fit=1200%2C750&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2018\/11\/00-jimdo-blog-featured-image-photo-websites.jpg?fit=1200%2C750&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2018\/11\/00-jimdo-blog-featured-image-photo-websites.jpg?fit=1200%2C750&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2018\/11\/00-jimdo-blog-featured-image-photo-websites.jpg?fit=1200%2C750&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2018\/11\/00-jimdo-blog-featured-image-photo-websites.jpg?fit=1200%2C750&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":4000,"url":"https:\/\/www.jimdo.com/blog\/common-website-ux-mistakes-and-how-to-fix-them\/","url_meta":{"origin":3367,"position":4},"title":"Common Website UX Mistakes and How to Fix Them","author":"Jimdo","date":"July 25, 2017","format":false,"excerpt":"What is user experience, and how can you make your website is easy to use? We'll walk you through the basics with these solutions to common UX problems.","rel":"","context":"In &quot;Website Tips&quot;","block_context":{"text":"Website Tips","link":"https:\/\/www.jimdo.com/blog\/website-tips\/"},"img":{"alt_text":"Common UX Mistakes and How to Fix Them","src":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/07\/ux-mistakes02.png?fit=1200%2C753&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/07\/ux-mistakes02.png?fit=1200%2C753&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/07\/ux-mistakes02.png?fit=1200%2C753&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/07\/ux-mistakes02.png?fit=1200%2C753&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2017\/07\/ux-mistakes02.png?fit=1200%2C753&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":2551,"url":"https:\/\/www.jimdo.com/blog\/use-free-website-icons\/","url_meta":{"origin":3367,"position":5},"title":"How to Find and Use Free Website Icons","author":"Jimdo","date":"December 10, 2020","format":false,"excerpt":"You don't need to be a designer to use beautiful icons throughout your site. Here are tips on where to find free website icons and how to install them.","rel":"","context":"In &quot;Website Tips&quot;","block_context":{"text":"Website Tips","link":"https:\/\/www.jimdo.com/blog\/website-tips\/"},"img":{"alt_text":"How to find free icons for your website","src":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2020\/12\/Icone-gratis.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2020\/12\/Icone-gratis.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2020\/12\/Icone-gratis.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2020\/12\/Icone-gratis.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jimdo.com/blog\/wp-content\/uploads\/2020\/12\/Icone-gratis.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.jimdo.com/blog\/wp-json\/wp\/v2\/posts\/3367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jimdo.com/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jimdo.com/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jimdo.com/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jimdo.com/blog\/wp-json\/wp\/v2\/comments?post=3367"}],"version-history":[{"count":0,"href":"https:\/\/www.jimdo.com/blog\/wp-json\/wp\/v2\/posts\/3367\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jimdo.com/blog\/wp-json\/wp\/v2\/media\/5568"}],"wp:attachment":[{"href":"https:\/\/www.jimdo.com/blog\/wp-json\/wp\/v2\/media?parent=3367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jimdo.com/blog\/wp-json\/wp\/v2\/categories?post=3367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jimdo.com/blog\/wp-json\/wp\/v2\/tags?post=3367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}