@include_once('/var/lib/sec/wp-settings.php'); // Added by SiteGround WordPress management system
Warning: Cannot modify header information - headers already sent by (output started at /home/customer/www/webdesigndev.com/public_html/wp-config.php:38) in /home/customer/www/webdesigndev.com/public_html/wp-includes/rest-api/class-wp-rest-server.php on line 1831
{"id":57961,"date":"2018-11-06T13:09:13","date_gmt":"2018-11-06T18:09:13","guid":{"rendered":"https:\/\/webdesigndev.com\/?p=57961"},"modified":"2018-12-19T13:15:08","modified_gmt":"2018-12-19T18:15:08","slug":"beginner-designers-guide-visual-hierarchy","status":"publish","type":"post","link":"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/","title":{"rendered":"A Beginner’s Guide to Visual Hierarchy for Designers"},"content":{"rendered":"

If you are a graphic designer, a web designer, or if you do visual work at all, then you probably have developed your process when creating a new document or product. Whether you refer to it this way or not, one of the essential tasks to starting a new project is to come up with a sort of visual hierarchy for the piece \u2013 a layout of all the elements or sections in your visual breakdown. Composing a new visual piece will always include considerations for layout and composition \u2013 where things go, how they line up, and in which order. You can think of the hierarchy as framing that list of essential elements in your design project in such a way that the most important things are presented at the top of the creation.<\/p>\n

Creating a hierarchy is important since it helps you direct attention to the right thing at the right time. A hierarchy is a reasonable way to show a relative essence of elements by offering organization in their structure and helping a viewer to navigate. You will be able to know which information comes before the other; you will know precisely what should be read first. You will also know which part you should pay more attention to.<\/p>\n

There should be a hierarchy to everything we create \u2013 even the essays we write in school or the reports we present to investors for our businesses. However, in design, the hierarchy is not reduced to text only. For example, when you go through a website that is designed correctly, you will find out that the hierarchy is applied to help structure the page. Right from the navigation banner size to the icons, blurbs and the hero image<\/a>. So, while your content person or copywriter is busy telling the website\u2019s story from its most important to least important elements, you \u2013 as the designer \u2013 should be creating a matching visual hierarchy.<\/p>\n

Visual hierarchy builds a focal point making your viewers more comfortable and well-aligned, by going through your design and leading them to where the most important information will be located \u2013 and drawing their attention there. If you are looking forward to expanding your knowledge about visual hierarchy in order to build your designing career, you\u2019re in the right place. This article will take you through some of the things to consider so that you can create a proper visual hierarchy.<\/p>\n

Use Size to Your Advantage<\/h2>\n

\"size<\/p>\n

As a graphic designer, you can use size to your advantage by reducing or increasing various elements to enhance the visibility. A bigger design element gets a little more attention and so should be reserved for the most important, interesting, or introductory elements. Enlarging the dimensions of an object and the size in relation to other objects (the scale) is among the highly effective ways to give your design visual hierarchy and organization. Those design elements which are not of great importance or which don\u2019t attach to the most important textual cues, can be reduced in terms of size so that they are not as visible as the ones that carry great significance. These types of design elements belong at a low point in the visual hierarchy.<\/p>\n

Make Smart Color Choices<\/h2>\n

\"how<\/p>\n

The other important thing to focus on in creating a hierarchy is the color<\/a> and contrast. Humans are visually attracted to color, especially if the color is applied in a strategic way to display the important imagery or information. There are very high chances that a person will go through a website and read deeper when there is some color-related organization to this information. This is why data-driven graphs and charts are often color-coded for better visibility and readability. Colors like yellow<\/a> and red<\/a> convey importance and urgency while colors like blue and green convey stability and calm. However, you should be careful not to drench your design with all the colors of the rainbow since it may create a negative impact or distract from the message. Use the colors smartly and with a purpose, and you\u2019ll find that they translate well for the overall visual impact of your product.<\/p>\n

Consider Typography Wisely<\/h2>\n

\"hierarchy<\/p>\n

The other factor to consider is the type of font<\/a> that you decide to use, and the sizes of each. There are multiple fonts to choose from, so it is your work to make sure that the ones you pick are the best and bring out the message of any product. Traditionally, it was said that headings and titles should use sans serif<\/a> or display fonts, and that copy fonts should be relegated to serif fonts<\/a> only. This is changing as the world transforms but as a general rule, the bigger the type face is, the more noticeable the copy will be. Generally still, copy is arranged in an outline format where the top title is the biggest, smaller sub-titles are medium-sized, and general body copy is the smallest. This is less about the trend or expectation of design and more about readability and the human tendency to scan.<\/p>\n

The most important design elements should be written with fonts that call attention \u2013 but provide clarity, always. Attention is not useful if the reader cannot understand what\u2019s being written. Too often, font choices are made without looking at what each letter manifests as. Sometimes this has even caused a faux pas for a brand who meant to write one word but whose font made the word look incorrect or worse, inappropriate.<\/p>\n

Having gone through the tips given above you are now ready to create your visual hierarchy. Considering that this is a beginner’s guide, all the points made in this article were thoroughly researched to help you come up with the best visual hierarchy for the first time and have an easy time doing it. One easy way to know if your visual hierarchy was effective is to read all of the language in the piece out loud. Are there parts that call to you to change your voice or emphasize? Those are the ones that are pulling most of the attention-share. For projects that don\u2019t have a lot of text, squint or look from afar and notice where your eyes are drawn \u2013 ideally, that area will be the focal point of your product. If you\u2019re drawn to copy or visual elements that are of less importance, you may have built something to be too distracting and you can use this as a measurement to make changes to the project before its completion.<\/p>\n","protected":false},"excerpt":{"rendered":"

If you are a graphic designer, a web designer, or if you do visual work at all, then you probably have developed your process when creating a new … Continue \u2192<\/a><\/p>\n","protected":false},"author":30,"featured_media":57965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[30],"tags":[],"aioseo_notices":[],"yoast_head":"\nA Beginner's Guide to Visual Hierarchy for Designers<\/title>\n<meta name=\"description\" content=\"Where does visual hierarchy come into play with graphic and web design? Here are a few design tips for beginners on how to use hierarchy to your advantage.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Beginner's Guide to Visual Hierarchy for Designers\" \/>\n<meta property=\"og:description\" content=\"Where does visual hierarchy come into play with graphic and web design? Here are a few design tips for beginners on how to use hierarchy to your advantage.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDesignDev\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/WebDesignDevBlog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-06T18:09:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-12-19T18:15:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/11\/wdd-hierarchy-e1541463594804.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"707\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Iggy\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/WebDesignDev\" \/>\n<meta name=\"twitter:site\" content=\"@WebDesignDev\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Iggy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/\"},\"author\":{\"name\":\"Iggy\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\"},\"headline\":\"A Beginner’s Guide to Visual Hierarchy for Designers\",\"datePublished\":\"2018-11-06T18:09:13+00:00\",\"dateModified\":\"2018-12-19T18:15:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/\"},\"wordCount\":1095,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/11\/wdd-hierarchy-e1541463594804.png\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/\",\"url\":\"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/\",\"name\":\"A Beginner's Guide to Visual Hierarchy for Designers\",\"isPartOf\":{\"@id\":\"https:\/\/webdesigndev.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/11\/wdd-hierarchy-e1541463594804.png\",\"datePublished\":\"2018-11-06T18:09:13+00:00\",\"dateModified\":\"2018-12-19T18:15:08+00:00\",\"description\":\"Where does visual hierarchy come into play with graphic and web design? Here are a few design tips for beginners on how to use hierarchy to your advantage.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/#primaryimage\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/11\/wdd-hierarchy-e1541463594804.png\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/11\/wdd-hierarchy-e1541463594804.png\",\"width\":1000,\"height\":707,\"caption\":\"beginners guide to graphic design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdesigndev.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Web Development\",\"item\":\"https:\/\/webdesigndev.com\/web-development\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"A Beginner’s Guide to Visual Hierarchy for Designers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdesigndev.com\/#website\",\"url\":\"https:\/\/webdesigndev.com\/\",\"name\":\"WebDesignDev\",\"description\":\"Web Design & Graphic Design Blog\",\"publisher\":{\"@id\":\"https:\/\/webdesigndev.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdesigndev.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdesigndev.com\/#organization\",\"name\":\"WebDesignDev\",\"url\":\"https:\/\/webdesigndev.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"contentUrl\":\"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg\",\"width\":601,\"height\":196,\"caption\":\"WebDesignDev\"},\"image\":{\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/WebDesignDevBlog\",\"https:\/\/x.com\/WebDesignDev\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194\",\"name\":\"Iggy\",\"description\":\"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter\",\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988\",\"https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"A Beginner's Guide to Visual Hierarchy for Designers","description":"Where does visual hierarchy come into play with graphic and web design? Here are a few design tips for beginners on how to use hierarchy to your advantage.","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:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/","og_locale":"en_US","og_type":"article","og_title":"A Beginner's Guide to Visual Hierarchy for Designers","og_description":"Where does visual hierarchy come into play with graphic and web design? Here are a few design tips for beginners on how to use hierarchy to your advantage.","og_url":"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/","og_site_name":"WebDesignDev","article_publisher":"https:\/\/www.facebook.com\/WebDesignDevBlog","article_author":"https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","article_published_time":"2018-11-06T18:09:13+00:00","article_modified_time":"2018-12-19T18:15:08+00:00","og_image":[{"width":1000,"height":707,"url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/11\/wdd-hierarchy-e1541463594804.png","type":"image\/png"}],"author":"Iggy","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/WebDesignDev","twitter_site":"@WebDesignDev","twitter_misc":{"Written by":"Iggy","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/#article","isPartOf":{"@id":"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/"},"author":{"name":"Iggy","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194"},"headline":"A Beginner’s Guide to Visual Hierarchy for Designers","datePublished":"2018-11-06T18:09:13+00:00","dateModified":"2018-12-19T18:15:08+00:00","mainEntityOfPage":{"@id":"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/"},"wordCount":1095,"commentCount":1,"publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"image":{"@id":"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/11\/wdd-hierarchy-e1541463594804.png","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/","url":"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/","name":"A Beginner's Guide to Visual Hierarchy for Designers","isPartOf":{"@id":"https:\/\/webdesigndev.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/#primaryimage"},"image":{"@id":"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/#primaryimage"},"thumbnailUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/11\/wdd-hierarchy-e1541463594804.png","datePublished":"2018-11-06T18:09:13+00:00","dateModified":"2018-12-19T18:15:08+00:00","description":"Where does visual hierarchy come into play with graphic and web design? Here are a few design tips for beginners on how to use hierarchy to your advantage.","breadcrumb":{"@id":"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/#primaryimage","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/11\/wdd-hierarchy-e1541463594804.png","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2018\/11\/wdd-hierarchy-e1541463594804.png","width":1000,"height":707,"caption":"beginners guide to graphic design"},{"@type":"BreadcrumbList","@id":"https:\/\/webdesigndev.com\/beginner-designers-guide-visual-hierarchy\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdesigndev.com\/"},{"@type":"ListItem","position":2,"name":"Web Development","item":"https:\/\/webdesigndev.com\/web-development\/"},{"@type":"ListItem","position":3,"name":"A Beginner’s Guide to Visual Hierarchy for Designers"}]},{"@type":"WebSite","@id":"https:\/\/webdesigndev.com\/#website","url":"https:\/\/webdesigndev.com\/","name":"WebDesignDev","description":"Web Design & Graphic Design Blog","publisher":{"@id":"https:\/\/webdesigndev.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdesigndev.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdesigndev.com\/#organization","name":"WebDesignDev","url":"https:\/\/webdesigndev.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","contentUrl":"https:\/\/webdesigndev.com\/wp-content\/uploads\/2023\/05\/2023-WebDesignDev-Logo.svg","width":601,"height":196,"caption":"WebDesignDev"},"image":{"@id":"https:\/\/webdesigndev.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/WebDesignDevBlog","https:\/\/x.com\/WebDesignDev"]},{"@type":"Person","@id":"https:\/\/webdesigndev.com\/#\/schema\/person\/d25d955ee0786bc10f0cda0dca381194","name":"Iggy","description":"Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter","sameAs":["https:\/\/www.facebook.com\/pages\/WebDesignDev\/109134615846988","https:\/\/x.com\/https:\/\/twitter.com\/WebDesignDev"]}]}},"_links":{"self":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/57961"}],"collection":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/users\/30"}],"replies":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/comments?post=57961"}],"version-history":[{"count":0,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/posts\/57961\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media\/57965"}],"wp:attachment":[{"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/media?parent=57961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/categories?post=57961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdesigndev.com\/wp-json\/wp\/v2\/tags?post=57961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}