{"id":418,"date":"2013-07-26T14:47:50","date_gmt":"2013-07-26T14:47:50","guid":{"rendered":"http:\/\/areteworks.com\/blog\/?p=289"},"modified":"2016-04-22T11:11:19","modified_gmt":"2016-04-22T18:11:19","slug":"visual-weight-in-user-interface-design","status":"publish","type":"post","link":"https:\/\/areteworks.com\/visual-weight-in-user-interface-design\/","title":{"rendered":"Visual weight in User Interface Design"},"content":{"rendered":"

When it comes to balance, the physical world tells us that weight is associated with gravity and objects being pulled downward. Visual weight, however, is more 3-dimensional in that it asserts itself in other directions as well. The visual weight each object carries pushes some UI elements to the forefront while causing others to recede. The process of assigning weight to different screen elements and graphics based on importance creates a successful visual hierarchy that controls which elements a user sees in what order.<\/p>\n","protected":false},"excerpt":{"rendered":"

When it comes to balance, the physical world tells us that weight is associated with gravity and objects being pulled downward. Visual weight, however, is more 3-dimensional in that it asserts itself in other directions as well. The visual weight each object carries pushes some UI elements to the forefront while causing others to recede.…<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17],"tags":[],"acf":[],"yoast_head":"\nVisual Weight in User Interface Design | Areteworks<\/title>\n<meta name=\"description\" content=\"The process of assigning weight to different screen elements and graphics creates a visual hierarchy that controls which elements a user sees in what order.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/areteworks.com\/visual-weight-in-user-interface-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visual Weight in User Interface Design | Areteworks\" \/>\n<meta property=\"og:description\" content=\"The process of assigning weight to different screen elements and graphics creates a visual hierarchy that controls which elements a user sees in what order.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/areteworks.com\/visual-weight-in-user-interface-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Areteworks\" \/>\n<meta property=\"article:published_time\" content=\"2013-07-26T14:47:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-04-22T18:11:19+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steven Liu\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/areteworks.com\/#website\",\"url\":\"https:\/\/areteworks.com\/\",\"name\":\"Areteworks\",\"description\":\"UI UX Design Company\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/areteworks.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/areteworks.com\/visual-weight-in-user-interface-design\/#webpage\",\"url\":\"https:\/\/areteworks.com\/visual-weight-in-user-interface-design\/\",\"name\":\"Visual Weight in User Interface Design | Areteworks\",\"isPartOf\":{\"@id\":\"https:\/\/areteworks.com\/#website\"},\"datePublished\":\"2013-07-26T14:47:50+00:00\",\"dateModified\":\"2016-04-22T18:11:19+00:00\",\"author\":{\"@id\":\"https:\/\/areteworks.com\/#\/schema\/person\/824fde08f51c36e32a3ad23407c8f65a\"},\"description\":\"The process of assigning weight to different screen elements and graphics creates a visual hierarchy that controls which elements a user sees in what order.\",\"breadcrumb\":{\"@id\":\"https:\/\/areteworks.com\/visual-weight-in-user-interface-design\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/areteworks.com\/visual-weight-in-user-interface-design\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/areteworks.com\/visual-weight-in-user-interface-design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/areteworks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visual weight in User Interface Design\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/areteworks.com\/#\/schema\/person\/824fde08f51c36e32a3ad23407c8f65a\",\"name\":\"Steven Liu\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/areteworks.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e0fe557088000ed6c9a689a9b1fb0fda?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e0fe557088000ed6c9a689a9b1fb0fda?s=96&d=mm&r=g\",\"caption\":\"Steven Liu\"},\"url\":\"https:\/\/areteworks.com\/author\/steven-liu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Visual Weight in User Interface Design | Areteworks","description":"The process of assigning weight to different screen elements and graphics creates a visual hierarchy that controls which elements a user sees in what order.","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:\/\/areteworks.com\/visual-weight-in-user-interface-design\/","og_locale":"en_US","og_type":"article","og_title":"Visual Weight in User Interface Design | Areteworks","og_description":"The process of assigning weight to different screen elements and graphics creates a visual hierarchy that controls which elements a user sees in what order.","og_url":"https:\/\/areteworks.com\/visual-weight-in-user-interface-design\/","og_site_name":"Areteworks","article_published_time":"2013-07-26T14:47:50+00:00","article_modified_time":"2016-04-22T18:11:19+00:00","twitter_card":"summary","twitter_misc":{"Written by":"Steven Liu"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/areteworks.com\/#website","url":"https:\/\/areteworks.com\/","name":"Areteworks","description":"UI UX Design Company","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/areteworks.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/areteworks.com\/visual-weight-in-user-interface-design\/#webpage","url":"https:\/\/areteworks.com\/visual-weight-in-user-interface-design\/","name":"Visual Weight in User Interface Design | Areteworks","isPartOf":{"@id":"https:\/\/areteworks.com\/#website"},"datePublished":"2013-07-26T14:47:50+00:00","dateModified":"2016-04-22T18:11:19+00:00","author":{"@id":"https:\/\/areteworks.com\/#\/schema\/person\/824fde08f51c36e32a3ad23407c8f65a"},"description":"The process of assigning weight to different screen elements and graphics creates a visual hierarchy that controls which elements a user sees in what order.","breadcrumb":{"@id":"https:\/\/areteworks.com\/visual-weight-in-user-interface-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/areteworks.com\/visual-weight-in-user-interface-design\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/areteworks.com\/visual-weight-in-user-interface-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/areteworks.com\/"},{"@type":"ListItem","position":2,"name":"Visual weight in User Interface Design"}]},{"@type":"Person","@id":"https:\/\/areteworks.com\/#\/schema\/person\/824fde08f51c36e32a3ad23407c8f65a","name":"Steven Liu","image":{"@type":"ImageObject","@id":"https:\/\/areteworks.com\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/e0fe557088000ed6c9a689a9b1fb0fda?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e0fe557088000ed6c9a689a9b1fb0fda?s=96&d=mm&r=g","caption":"Steven Liu"},"url":"https:\/\/areteworks.com\/author\/steven-liu\/"}]}},"_links":{"self":[{"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/posts\/418"}],"collection":[{"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/comments?post=418"}],"version-history":[{"count":0,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/posts\/418\/revisions"}],"wp:attachment":[{"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/media?parent=418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/categories?post=418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/areteworks.com\/wp-json\/wp\/v2\/tags?post=418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}