{"id":16388,"date":"2020-02-12T12:13:43","date_gmt":"2020-02-12T17:13:43","guid":{"rendered":"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/?p=16388"},"modified":"2023-11-15T11:44:20","modified_gmt":"2023-11-15T16:44:20","slug":"what-is-visual-hierarchy","status":"publish","type":"post","link":"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/blog\/what-is-visual-hierarchy\/","title":{"rendered":"What is Visual Hierarchy \u2014 and Why is it Important?\u00a0"},"content":{"rendered":"<p>You&#8217;re an entrepreneur on a budget juggling a myriad of responsibilities, and graphic design has suddenly become one of them. Maybe you&#8217;re <a href=\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/blog\/how-to-design-a-logo\/\">designing a logo<\/a> for your business, a flyer, or a <a href=\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/blog\/social-media-graphic-design-inspiration\/\">social media post<\/a>. Whatever it is, you&#8217;re suddenly realizing there&#8217;s a lot more to this graphic design thing than you realized. You know how you want your project to look and what information is important for your viewers but aren\u2019t sure how to present it effectively.<\/p>\n<p>Visual hierarchy is here to help.<\/p>\n<h2>So, what is visual hierarchy?<\/h2>\n<p>As attention spans shrink and technology evolves, designers are forced to present information in the most easily digestible way\u2013 one that guides a viewer further down a piece of collateral. This is essentially what visual hierarchy is all about.\u00a0 <strong>Visual hierarchy directs viewers to the most essential information on a page using graphic design elements like color, size, and alignment to organize and prioritize content.<\/strong><\/p>\n<p>We\u2019ll go over four basic elements of the visual hierarchy so you can unleash the creative juices and pu!<\/p>\n<p>Four key elements of visual hierarchy:<\/p>\n<ul>\n<li><a href=\"#stepone\">Color<\/a><\/li>\n<li><a href=\"#steptwo\">Size<\/a><\/li>\n<li><a href=\"#stepthree\">Alignment<\/a><\/li>\n<li><a href=\"#stepfour\">Space<\/a><\/li>\n<\/ul>\n<hr \/>\n<h2 id=\"stepone\">Color provokes<\/h2>\n<p>The human eye is innately drawn to color. Bright, vibrant colors stand out more than muted ones and have greater visual weight. In an interface, color might be used to create structure, or assist in navigation.<\/p>\n<p>Color also holds meaning and creates an emotional response in viewers subconsciously. <a href=\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/blog\/colors-and-emotions\/\">Research suggests<\/a> that blues are often received as dependable, secure, and calming, while reds are stimulating and even known to increase viewers\u2019 heart rates.<\/p>\n<p>This ad uses color to make the viewer feel uneasy and call attention to something out of the ordinary.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16391 size-medium\" src=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210114652\/color-in-visual-hierarchy-445x600.jpg\" alt=\"vibrant colors example using lemons\" width=\"445\" height=\"600\" srcset=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210114652\/color-in-visual-hierarchy-445x600.jpg 445w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210114652\/color-in-visual-hierarchy-259x350.jpg 259w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210114652\/color-in-visual-hierarchy.jpg 504w\" sizes=\"(max-width: 445px) 100vw, 445px\" \/><\/p>\n<p>Check out <a href=\"https:\/\/namesforchange.org\/\">Names for Change<\/a>, a website driven to help people in the Durham, North Carolina region out of homelessness. Fundraising for socks or tampons isn\u2019t exactly exciting stuff, so they use color to visually stimulate the viewer, and also create a sense of organization around these seemingly random items.<\/p>\n<div id=\"attachment_16394\" style=\"width: 793px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-16394\" class=\"wp-image-16394\" src=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210124123\/Screen-Shot-2020-02-10-at-12.41.12-PM-600x306.png\" alt=\"names for change visual hierarchy\" width=\"783\" height=\"400\" srcset=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210124123\/Screen-Shot-2020-02-10-at-12.41.12-PM-600x306.png 600w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210124123\/Screen-Shot-2020-02-10-at-12.41.12-PM-1024x523.png 1024w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210124123\/Screen-Shot-2020-02-10-at-12.41.12-PM-768x392.png 768w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210124123\/Screen-Shot-2020-02-10-at-12.41.12-PM-1536x784.png 1536w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210124123\/Screen-Shot-2020-02-10-at-12.41.12-PM-2048x1045.png 2048w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210124123\/Screen-Shot-2020-02-10-at-12.41.12-PM-350x179.png 350w\" sizes=\"(max-width: 783px) 100vw, 783px\" \/><p id=\"caption-attachment-16394\" class=\"wp-caption-text\">Source: Names for Change<\/p><\/div>\n<p>The point? Don\u2019t arbitrarily pick color because it looks good. When used strategically, color is a powerful tool to highlight important information, direct people to where they need to go and trigger emotional responses.<\/p>\n<h2 id=\"steptwo\">Size makes a big impression<\/h2>\n<p>While balance and moderation are key to all elements of graphic design (and just life in general, no?) size establishes a hierarchy where bigger items draw more attention and thus appear to be the most important.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16402 size-full\" src=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210151157\/circles-.png\" alt=\"pink circles of different sizes\" width=\"512\" height=\"205\" srcset=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210151157\/circles-.png 512w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210151157\/circles--350x140.png 350w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/p>\n<p>Just by looking at the above image without context, your eye immediately assumes the biggest circle is the most important. You\u2019ve drawn meaning from these shapes with only one quality changing between them. Aren\u2019t brains cool?<\/p>\n<p>Size is often used in bodies of text to identify meaningful subjects, headlines, or important quotes, making the most important the largest and scaling down from there. Keep in mind that too many sets of sizes can be confusing, so establishing a basic size structure is a good idea. Secondary content, like labels, should be smaller, so they don\u2019t compete with the more important information.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16395 size-full\" src=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210124306\/visual-hierarchy-size.png\" alt=\"font size example\" width=\"512\" height=\"348\" srcset=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210124306\/visual-hierarchy-size.png 512w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210124306\/visual-hierarchy-size-350x238.png 350w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/p>\n<p>Many apps use size to establish an immediate purpose for their interface. Take the Warby Parker app for example. This app uses augmented reality (AR) to let consumers virtually try on glasses. Nothing on the screen competes with the image of your face (which takes up more than 50 percent of most screens).<\/p>\n<div id=\"attachment_16403\" style=\"width: 794px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-16403\" class=\"wp-image-16403\" src=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210152018\/warby-parker-gif-599x324.gif\" alt=\"person trying on glasses using the warby parker app\" width=\"784\" height=\"424\" srcset=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210152018\/warby-parker-gif-599x324.gif 599w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210152018\/warby-parker-gif-767x415.gif 767w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210152018\/warby-parker-gif-350x189.gif 350w\" sizes=\"(max-width: 784px) 100vw, 784px\" \/><p id=\"caption-attachment-16403\" class=\"wp-caption-text\">Source: Warby Parker<\/p><\/div>\n<p>The Warby Parker app uses size hierarchy to put the priority on you as a consumer, rather than their product. This simplicity no doubt helped with the adoption of the app by so many folks searching for the perfect eyewear.<\/p>\n<p>When designing a logo, the size of each element is a crucial part of creating something memorable, and clear. Below is an example of a brand using proper size hierarchy to emphasize the brand name first, and all other elements second. To the right, we see a poor example of sizing in visual hierarchy where the slogan dominates and we are left without a clear impression of the company name.<\/p>\n<div id='gallery-1' class='gallery galleryid-16388 gallery-columns-2 gallery-size-medium'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"600\" src=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150107\/42754168_padded_logo-copy-600x600.png\" class=\"attachment-medium size-medium\" alt=\"\" aria-describedby=\"gallery-1-16416\" srcset=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150107\/42754168_padded_logo-copy-600x600.png 600w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150107\/42754168_padded_logo-copy-150x150.png 150w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150107\/42754168_padded_logo-copy-768x768.png 768w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150107\/42754168_padded_logo-copy-350x350.png 350w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150107\/42754168_padded_logo-copy-365x365.png 365w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150107\/42754168_padded_logo-copy.png 1000w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-16416'>\n\t\t\t\tLogo made in Looka\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"600\" src=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211145952\/42754168_padded_logo-600x600.png\" class=\"attachment-medium size-medium\" alt=\"logo made in looka\" aria-describedby=\"gallery-1-16415\" srcset=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211145952\/42754168_padded_logo-600x600.png 600w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211145952\/42754168_padded_logo-150x150.png 150w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211145952\/42754168_padded_logo-768x768.png 768w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211145952\/42754168_padded_logo-350x350.png 350w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211145952\/42754168_padded_logo-365x365.png 365w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211145952\/42754168_padded_logo.png 1000w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-16415'>\n\t\t\t\tLogo made in Looka\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 id=\"stepthree\">Alignment builds a framework<\/h2>\n<p>Alignment creates order within a visual hierarchy. It ensures nothing is placed randomly on a piece of collateral, but instead, with the intention to lead the viewer&#8217;s eye from one element to another.<\/p>\n<div id=\"attachment_16406\" style=\"width: 710px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-16406\" class=\"wp-image-16406 size-full\" src=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210153004\/Z-Pattern-UX-Design.png\" alt=\"Z pattern for reading content online\" width=\"700\" height=\"461\" srcset=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210153004\/Z-Pattern-UX-Design.png 700w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210153004\/Z-Pattern-UX-Design-600x395.png 600w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210153004\/Z-Pattern-UX-Design-350x231.png 350w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><p id=\"caption-attachment-16406\" class=\"wp-caption-text\">Source: uxplanet.org<\/p><\/div>\n<p>The <a href=\"https:\/\/3.7designs.co\/blog\/2009\/01\/the-gutenburg-diagram-in-design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Guttenberg Diagram<\/a> insists people skim content in a Z pattern, meaning the most important information should go in the top left corner and bottom right. We see this often in design. Check out Trello&#8217;s sign-up page.<\/p>\n<div id=\"attachment_16407\" style=\"width: 794px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-16407\" class=\"wp-image-16407\" src=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210153052\/Screen-Shot-2020-02-10-at-3.27.49-PM-600x280.png\" alt=\"trello sign up page UX\" width=\"784\" height=\"366\" srcset=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210153052\/Screen-Shot-2020-02-10-at-3.27.49-PM-600x280.png 600w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210153052\/Screen-Shot-2020-02-10-at-3.27.49-PM-1024x478.png 1024w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210153052\/Screen-Shot-2020-02-10-at-3.27.49-PM-768x358.png 768w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210153052\/Screen-Shot-2020-02-10-at-3.27.49-PM-1536x717.png 1536w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210153052\/Screen-Shot-2020-02-10-at-3.27.49-PM-2048x956.png 2048w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200210153052\/Screen-Shot-2020-02-10-at-3.27.49-PM-350x163.png 350w\" sizes=\"(max-width: 784px) 100vw, 784px\" \/><p id=\"caption-attachment-16407\" class=\"wp-caption-text\">Source: Trello<\/p><\/div>\n<p>The value and purpose of the platform are communicated in the primary top-left corner, followed by the signup button on the bottom right. For a person skimming the page, these are the only two things you need to be aware of immediately before following through with a sign-up action. As you peruse the interwebs today, watch where your eye goes first and then second. You\u2019ll be surprised by how consistent this principle of alignment applies.<\/p>\n<p>Below is an example of alignment used advantageously in a logo on the left, and poorly on the right. Stacking design elements from smallest to largest and center aligning them provides a clear structure of information\u2014especially in small design pieces like a logo. On the left, we see how poor alignment of your design elements can create a messy logo that doesn&#8217;t flow nicely.<\/p>\n<div id='gallery-2' class='gallery galleryid-16388 gallery-columns-2 gallery-size-medium'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"600\" src=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150213\/42753719_padded_logo-600x600.png\" class=\"attachment-medium size-medium\" alt=\"\" aria-describedby=\"gallery-2-16418\" srcset=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150213\/42753719_padded_logo-600x600.png 600w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150213\/42753719_padded_logo-150x150.png 150w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150213\/42753719_padded_logo-768x768.png 768w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150213\/42753719_padded_logo-350x350.png 350w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150213\/42753719_padded_logo-365x365.png 365w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150213\/42753719_padded_logo.png 1000w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-16418'>\n\t\t\t\tLogo made in Looka\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"600\" src=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150209\/42753623_padded_logo-600x600.png\" class=\"attachment-medium size-medium\" alt=\"\" aria-describedby=\"gallery-2-16417\" srcset=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150209\/42753623_padded_logo-600x600.png 600w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150209\/42753623_padded_logo-150x150.png 150w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150209\/42753623_padded_logo-768x768.png 768w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150209\/42753623_padded_logo-350x350.png 350w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150209\/42753623_padded_logo-365x365.png 365w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200211150209\/42753623_padded_logo.png 1000w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-16417'>\n\t\t\t\tLogo made in Looka\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p>Sticking to this alignment principle will help you build a framework for your design elements. Resulting in a fluid visual experience for the viewer!<\/p>\n<h2 id=\"stepfour\">Space creates balance<\/h2>\n<p><a href=\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/blog\/how-to-use-negative-space-in-your-logo\/\">Negative space<\/a>, or &#8220;White space&#8221;, in design is empty, unoccupied space. Negative space draws attention to what a viewer should be focusing on. Designs that ignore this element in visual hierarchy will look cluttered, and messy. White space separates and organizes design elements to create a sense of balance.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-16426\" src=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200212112138\/KKO1-chocolate-packaging-design-600x300.jpg\" alt=\"KKO1-chocolate-packaging-design\" width=\"784\" height=\"392\" srcset=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200212112138\/KKO1-chocolate-packaging-design-600x300.jpg 600w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200212112138\/KKO1-chocolate-packaging-design-1024x512.jpg 1024w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200212112138\/KKO1-chocolate-packaging-design-768x384.jpg 768w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200212112138\/KKO1-chocolate-packaging-design-350x175.jpg 350w, https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200212112138\/KKO1-chocolate-packaging-design.jpg 1501w\" sizes=\"(max-width: 784px) 100vw, 784px\" \/><\/p>\n<p>See how the chocolate packaging design places the logo on the only blank, white space as a way to draw the eye towards the company name? This intentional use of blank space and color is a perfect example of how subtle but crucial the use of space is in visual hierarchy.<\/p>\n<h3>Now you&#8217;re ready to nail your design!<\/h3>\n<p>Now that you\u2019ve got a basic understanding of four core principles of visual hierarchy, you can make well-informed design choices.<\/p>\n<p>Remember:<\/p>\n<div class=\"altlist\"><\/p>\n<ul>\n<li>Color draws the eye and provokes emotional responses<\/li>\n<li>Size establishes a hierarchy of importance on a page<\/li>\n<li>Alignment is the yellow brick road that leads the eye through the most important information<\/li>\n<li>Space creates some breathing room for the viewer to focus on what matters<\/li>\n<\/ul>\n<p><\/div>\n<p>Ready to apply the elements of visual hierarchy to your logo design? Hop into our logo maker and show off your design skills now!<\/p>\n<div class=\"cta cta--grey cta--shortcode\" data-plugin=\"BLOG_FULL\">\n  <div class=\"cta__container\">\n    <h2 class=\"cta__headline\"> Design a logo now! <\/h2>\n    <form\n      class=\"cta__form\"\n      action=\"\/logo-maker\/app\"\n      method=\"GET\"\n    >\n      <input class=\"cta__input\" type=\"text\" name=\"company_name\" value=\"\" placeholder=\"Enter your company name\">\n      <button class=\"cta__button cta__button--primary\">Get started<\/button>\n    <\/form>\n  <\/div>\n<\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You&#8217;re an entrepreneur on a budget juggling a myriad of responsibilities, and graphic design has suddenly become one of them. Maybe you&#8217;re designing a logo for your business, a flyer, or a social media post. Whatever it is, you&#8217;re suddenly realizing there&#8217;s a lot more to this graphic design thing than you realized. You know [&hellip;]<\/p>\n","protected":false},"author":49,"featured_media":16429,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.6.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is Visual Hierarchy \u2014 and Why is it Important?\u00a0 | Looka<\/title>\n<meta name=\"description\" content=\"Visual hierarchy is a design principle used to guide a viewer&#039;s eye to the most important elements on a designed asset. We&#039;re covering 4 key elements here.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/blog\/what-is-visual-hierarchy\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is Visual Hierarchy \u2014 and Why is it Important?\u00a0 | Looka\" \/>\n<meta property=\"og:description\" content=\"Visual hierarchy is a design principle used to guide a viewer&#039;s eye to the most important elements on a designed asset. We&#039;re covering 4 key elements here.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/blog\/what-is-visual-hierarchy\/\" \/>\n<meta property=\"og:site_name\" content=\"Looka\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/lookadesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-12T17:13:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-15T16:44:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200212121013\/AdobeStock_269230718-min-scaled.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1700\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@lookadesign\" \/>\n<meta name=\"twitter:site\" content=\"@lookadesign\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"7 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/#organization\",\"name\":\"Looka\",\"url\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/\",\"sameAs\":[\"https:\/\/facebook.com\/lookadesign\/\",\"https:\/\/instagram.com\/lookadesign\/\",\"https:\/\/ca.linkedin.com\/company\/looka\/\",\"https:\/\/youtube.com\/channel\/UCEKWKzxgyde1SjZIydF_4iQ\",\"https:\/\/twitter.com\/lookadesign\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20190402110136\/looka_blue.png\",\"width\":3202,\"height\":3202,\"caption\":\"Looka\"},\"image\":{\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/#website\",\"url\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/\",\"name\":\"Looka\",\"description\":\"#1 Free Logo Maker\",\"publisher\":{\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/blog\/what-is-visual-hierarchy\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20200212121013\/AdobeStock_269230718-min-scaled.jpeg\",\"width\":2560,\"height\":1700,\"caption\":\"visual hierarchy\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/blog\/what-is-visual-hierarchy\/#webpage\",\"url\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/blog\/what-is-visual-hierarchy\/\",\"name\":\"What is Visual Hierarchy \\u2014 and Why is it Important?\\u00a0 | Looka\",\"isPartOf\":{\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/blog\/what-is-visual-hierarchy\/#primaryimage\"},\"datePublished\":\"2020-02-12T17:13:43+00:00\",\"dateModified\":\"2023-11-15T16:44:20+00:00\",\"description\":\"Visual hierarchy is a design principle used to guide a viewer's eye to the most important elements on a designed asset. We're covering 4 key elements here.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/blog\/what-is-visual-hierarchy\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/blog\/what-is-visual-hierarchy\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/blog\/what-is-visual-hierarchy\/#webpage\"},\"author\":{\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/#\/schema\/person\/657f69e94d22582ae6170f9739ccfe84\"},\"headline\":\"What is Visual Hierarchy \\u2014 and Why is it Important?\\u00a0\",\"datePublished\":\"2020-02-12T17:13:43+00:00\",\"dateModified\":\"2023-11-15T16:44:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/blog\/what-is-visual-hierarchy\/#webpage\"},\"publisher\":{\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/blog\/what-is-visual-hierarchy\/#primaryimage\"},\"articleSection\":\"Branding\",\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/#\/schema\/person\/657f69e94d22582ae6170f9739ccfe84\",\"name\":\"Nisha\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/cdn.logojoy.com\/wp-content\/uploads\/20210304151531\/Annisha-Lashand-Profile-Pic.jpg\",\"caption\":\"Nisha\"},\"description\":\"Nisha is the Senior Content Marketing Manager at Looka. Through her work, Nisha has helped thousands of people build comprehensive brands. When she's not writing about branding, design, and entrepreneurship you can find her writing poetry on Instagram @annishalashand.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/wp-json\/wp\/v2\/posts\/16388"}],"collection":[{"href":"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/wp-json\/wp\/v2\/users\/49"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/wp-json\/wp\/v2\/comments?post=16388"}],"version-history":[{"count":31,"href":"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/wp-json\/wp\/v2\/posts\/16388\/revisions"}],"predecessor-version":[{"id":25697,"href":"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/wp-json\/wp\/v2\/posts\/16388\/revisions\/25697"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/wp-json\/wp\/v2\/media\/16429"}],"wp:attachment":[{"href":"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/wp-json\/wp\/v2\/media?parent=16388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/wp-json\/wp\/v2\/categories?post=16388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress-715453-3009179.cloudwaysapps.com\/wp-json\/wp\/v2\/tags?post=16388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}