{"id":3601,"date":"2017-10-04T17:45:20","date_gmt":"2017-10-04T14:45:20","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=3601"},"modified":"2023-08-14T18:25:38","modified_gmt":"2023-08-14T18:25:38","slug":"visual-hierarchy-effective-ui-content-organization","status":"publish","type":"post","link":"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/","title":{"rendered":"Visual Hierarchy: Effective UI Content Organization"},"content":{"rendered":"

Henry Adams once said: \u201cChaos was the law of nature and order was the dream of man\u201d. People always favor the order because it makes things more comprehensible. The same works with user interfaces of digital products. When UI elements are organized and structured, people can easily use an app or a website and feel satisfied with a product.<\/span><\/p>\n

To organize content in UI clearly for users, designers apply a well-known technique called visual hierarchy. Today\u2019s article gives a general insight into the essence of this approach and the tools helping to organize the content properly.<\/span><\/p>\n

What\u2019s visual hierarchy?<\/span><\/h2>\n

Visual hierarchy is one of the core techniques which are applied to the design process. It is initially based on Gestalt psychological theory<\/a> which examines users\u2019 visual perception of elements in relation to each other and shows how people tend to unify the visual elements into groups.<\/span><\/p>\n

Visual hierarchy strives at presenting the content of a product that way so users could comprehend the level of importance for each element. It organizes UI components so that the brain could distinguish the objects on the basis of their physical differences, such as size, color, contrast, style, etc.<\/span><\/p>\n

The visual presentation of UI elements has a great influence on <\/span>the user experience of a product. If content components look like a mess, people can\u2019t navigate within a product or interact with it properly. Moreover, unstructured copy content<\/a> has a low level of legibility, so users can\u2019t scan it quickly and they need to make a significant effort to distinguish the data they\u2019ve been looking for. Such bad UX can lead to poor user satisfaction which means a product wouldn\u2019t be much sought-after.<\/span><\/p>\n

\"tubik<\/p>\n

Typographic hierarchy<\/span><\/h2>\n

Copy content is a significant part of any UI design. That\u2019s why visual hierarchy often highly depends on typography<\/a>. Specialists decided to emphasize the importance of copy presentation by creating a separate system of visual hierarchy called the typographic hierarchy.<\/span><\/p>\n

The system aims at organizing copy content in the best way for users\u2019 perception. Designers modify and combine fonts to build the contrast between the most meaningful and prominent copy elements which should be noticed first and ordinary text information. The fonts are modified by regulating sizes, colors, and families as well as their alignment.<\/span><\/p>\n

Typographic hierarchy includes different elements of copy content which are headlines, subheaders, body copy, call-to-action elements, captions, and some others. To build an effective visual hierarchy, all the elements need to be segmented into different levels. Let\u2019s see what they are.<\/span><\/p>\n

The primary level.<\/strong> It includes the biggest type like in headlines. The primary level aims at providing users with the core information as well as drawing people\u2019s attention to a product.<\/span><\/p>\n

The secondary level.<\/strong> This is the type of copy elements<\/a> which should be easily scanned. They usually involve subheaders and captions which help users quickly navigate through the content.<\/span><\/p>\n

The tertiary level.<\/strong> Body text and some additional data build the tertiary level. Designers often apply relatively small typefaces still it should remain readable<\/a> enough.<\/span><\/p>\n

As the copy content is usually a major source of information in UI, designers need to present the data gradually. By segmenting copy elements into different levels designers help users easily go from one piece of copy to the other and perceive the information in the right order.<\/span><\/p>\n

One more thing to mention is that while creating typography for mobile products, designers are recommended to keep the number of layers within two. The thing is that small mobile screens don\u2019t provide enough space for three levels. That is why the elements of a secondary level such as subheaders step aside to make mobile UI look clean.<\/span><\/p>\n

\"Bakery<\/p>\n

 <\/p>\n

Visual hierarchy tools<\/span><\/h2>\n

 <\/p>\n

When designers have already chosen all the content components, it\u2019s time to create an order. Let\u2019s find out what helps designers to set the effective visual hierarchy of UI components.<\/span><\/p>\n

 <\/p>\n

Size<\/span><\/h3>\n

One of the most powerful tools for visual material transformation is size. It is rooted in human\u2019s mind that big things are somehow more important than the small ones. That\u2019s why users\u2019 attention automatically goes first to the large words or big pictures.<\/span>
\n Designers need to distinguish the level of significance for each content element and based on this data transform the components into big and small.<\/span><\/p>\n

 <\/p>\n

Color<\/span><\/h3>\n

In our previous article<\/a>, we\u2019ve mentioned that color has a great impact on the users\u2019 perception which is the reason why it serves as an effective tool for visual hierarchy creation.<\/span><\/p>\n

Colors have their own hierarchy which is defined by the power of influence on users\u2019 minds. There are bold colors such as red, orange, and black which can easily draw attention. On the other hand, there are weak, or soft, colors like white and cream which work better as a background<\/a>.<\/span><\/p>\n

Using the different colors designers can support a slight hierarchy of the UI elements. For example, CTA buttons in bold colors will definitely be the first thing that users see if the other UI elements are created in a\u00a0softer palette.<\/span><\/p>\n

 <\/p>\n

Contrast<\/span><\/h3>\n

Hierarchy is based on contrast itself. One element contrasts with the other and that\u2019s how users can see the differences between the content elements. Contrast can be created via visual differences including size, color, and style. Still, it\u2019s recommended to keep the contrast in balance so that one object wouldn\u2019t completely obscure the others.<\/span><\/p>\n

 <\/p>\n

Negative space<\/span><\/h3>\n

There can be many components in a user interface and to make them all noticeable for users\u2019 eyes designers need to give them some private space. Negative space<\/a>, or white space, is the area between elements in a design composition. Some designers usually don\u2019t think of the white space as a component of design still the experts apply it as a useful tool helping to build an appropriate composition. A right amount of negative space between the elements will help users to notice and perceive each of them to each of them.<\/span><\/p>\n

 <\/p>\n

Proximity<\/span><\/h3>\n

As we said above, visual hierarchy is built upon Gestalt principles, so designers pay deep attention to the proximity of UI elements. As people tend to unify the visual elements into groups, UI components need to be placed that way so users could categorize them. If some elements are placed in a certain proximity<\/a>, users automatically perceive them as a group. Designers can use proximity as a tool which helps to divide the content into subcategories.<\/span><\/p>\n

 <\/p>\n

Repetition<\/span><\/h3>\n

If people notice that some elements look similar, they may automatically unify them into one group. That’s how repetition works. Designers repeat some patterns for different objects on purpose so that users could unify them. For example, a website with a great amount of body copy at a page can highlight the most important sentences with another color. Seeing the sentences in this color users can follow from one key point to another.<\/span><\/p>\n

Visual hierarchy is a foundation of effective information architecture<\/a>. When UI elements are structured and organized, people enjoy using a product and it will be more effective in solving their problems. Moreover, powerful visual hierarchy improves the navigation system since people can better orient within a product. Stay tuned and be ready for the next article about visual hierarchy.<\/span><\/p>\n

\"dance<\/p>\n

Recommended reading<\/span><\/h2>\n

Tips on Applying Copy Content in User Interfaces<\/a><\/span><\/p>\n

UX Design: How to Make User Interface Readable<\/a><\/p>\n

Information Architecture. Basics for Designers<\/a><\/span><\/p>\n

Information Architecture: Effective Techniques For Designers<\/a><\/span><\/p>\n

Gestalt Theory for Efficient UX: Principle of Similarity<\/a><\/span><\/p>\n

Gestalt Theory for UX Design: Principle of Proximity<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

The article about visual hierarchy for powerful UI content organization: size, contrast, proximity, negative space and other stuff to structure UI elements effectively. <\/p>\n","protected":false},"author":3,"featured_media":8835,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[7,9],"tags":[206,491,233,502,256,504,319,515,324,527,365,534,440,457,463,465,466,20,467,100,468,123,469,147,479,151,482],"coauthors":[],"class_list":["post-3601","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-processes_and_tools","category-ui_ux","tag-gestalt-theory","tag-user-interface","tag-human-computer-interaction","tag-ux","tag-interaction-design","tag-ux-design-article","tag-mobile-app","tag-uxui","tag-mobile-design-inspiration","tag-visual-hierarchy","tag-product-design","tag-web-design-article","tag-tubik","tag-ui","tag-ui-design-article","tag-ui-design-examples","tag-ui-design-inspiration","tag-app-design","tag-ui-design-practices","tag-design","tag-ui-design-process","tag-design-for-business","tag-ui-design-tips","tag-design-studio","tag-usability","tag-design-tips","tag-user-experience"],"acf":[],"yoast_head":"\nVisual Hierarchy: Effective UI Content Organization<\/title>\n<meta name=\"description\" content=\"The article about visual hierarchy for powerful UI content organization: size, contrast, proximity, negative space and other stuff to structure UI elements effectively.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Visual Hierarchy: Effective UI Content Organization\" \/>\n<meta property=\"og:description\" content=\"The article about visual hierarchy for powerful UI content organization: size, contrast, proximity, negative space and other stuff to structure UI elements effectively.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/\" \/>\n<meta property=\"og:site_name\" content=\"Tubik Blog: Articles About Design\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-04T14:45:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-14T18:25:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/visual-hierarchy-in-UI-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3000\" \/>\n\t<meta property=\"og:image:height\" content=\"2000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Marina Yalanska\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marina Yalanska\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/\",\"url\":\"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/\",\"name\":\"Visual Hierarchy: Effective UI Content Organization\",\"isPartOf\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/visual-hierarchy-in-UI-design.jpg\",\"datePublished\":\"2017-10-04T14:45:20+00:00\",\"dateModified\":\"2023-08-14T18:25:38+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\"},\"description\":\"The article about visual hierarchy for powerful UI content organization: size, contrast, proximity, negative space and other stuff to structure UI elements effectively.\",\"breadcrumb\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/#primaryimage\",\"url\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/visual-hierarchy-in-UI-design.jpg\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/visual-hierarchy-in-UI-design.jpg\",\"width\":3000,\"height\":2000,\"caption\":\"visual hierarchy in UI design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tubikstudio.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Visual Hierarchy: Effective UI Content Organization\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#website\",\"url\":\"https:\/\/tubikstudio.com\/blog\/\",\"name\":\"Tubik Blog: Articles About Design\",\"description\":\"Tubik Studio\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f\",\"name\":\"Marina Yalanska\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g\",\"caption\":\"Marina Yalanska\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Visual Hierarchy: Effective UI Content Organization","description":"The article about visual hierarchy for powerful UI content organization: size, contrast, proximity, negative space and other stuff to structure UI elements effectively.","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:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/","og_locale":"en_US","og_type":"article","og_title":"Visual Hierarchy: Effective UI Content Organization","og_description":"The article about visual hierarchy for powerful UI content organization: size, contrast, proximity, negative space and other stuff to structure UI elements effectively.","og_url":"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/","og_site_name":"Tubik Blog: Articles About Design","article_published_time":"2017-10-04T14:45:20+00:00","article_modified_time":"2023-08-14T18:25:38+00:00","og_image":[{"width":3000,"height":2000,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/visual-hierarchy-in-UI-design.jpg","type":"image\/jpeg"}],"author":"Marina Yalanska","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Marina Yalanska","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/","url":"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/","name":"Visual Hierarchy: Effective UI Content Organization","isPartOf":{"@id":"https:\/\/tubikstudio.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/#primaryimage"},"image":{"@id":"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/visual-hierarchy-in-UI-design.jpg","datePublished":"2017-10-04T14:45:20+00:00","dateModified":"2023-08-14T18:25:38+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f"},"description":"The article about visual hierarchy for powerful UI content organization: size, contrast, proximity, negative space and other stuff to structure UI elements effectively.","breadcrumb":{"@id":"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/#primaryimage","url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/visual-hierarchy-in-UI-design.jpg","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/visual-hierarchy-in-UI-design.jpg","width":3000,"height":2000,"caption":"visual hierarchy in UI design"},{"@type":"BreadcrumbList","@id":"https:\/\/tubikstudio.com\/blog\/visual-hierarchy-effective-ui-content-organization\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tubikstudio.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Visual Hierarchy: Effective UI Content Organization"}]},{"@type":"WebSite","@id":"https:\/\/tubikstudio.com\/blog\/#website","url":"https:\/\/tubikstudio.com\/blog\/","name":"Tubik Blog: Articles About Design","description":"Tubik Studio","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tubikstudio.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/320206b0076eb11ea0c0d4d17012c36f","name":"Marina Yalanska","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/2ddde1c118fcf989ce8e73997a3909dd","url":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/630af235953a586b42ed17f9ea472b131bcde00719efc655984d63ca2078e7a2?s=96&d=mm&r=g","caption":"Marina Yalanska"},"url":"https:\/\/tubikstudio.com\/blog\/author\/marina-yalanska\/"}]}},"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/3601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=3601"}],"version-history":[{"count":3,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/3601\/revisions"}],"predecessor-version":[{"id":14576,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/3601\/revisions\/14576"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/8835"}],"wp:attachment":[{"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media?parent=3601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/categories?post=3601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/tags?post=3601"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/coauthors?post=3601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}