{"id":3601,"date":"2026-07-15T17:45:20","date_gmt":"2026-07-15T17:45:20","guid":{"rendered":"https:\/\/tubikstudio.com\/?p=3601"},"modified":"2026-07-16T12:25:31","modified_gmt":"2026-07-16T12:25:31","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: Why Some Interfaces Just Make Sense"},"content":{"rendered":"

There’s a moment, familiar to anyone who has stared at a poorly designed app, where the eye just drifts. Nothing pulls it in, everything competes equally for attention, and so attention gives up entirely and leaves. That\u2019s what happens when the interface lacks visual hierarchy. And understanding what it actually means, beyond the textbook definition, is what separates nice UI design from a working one.\u00a0<\/span><\/p>\n

The practical stakes in information architecture and UX are high\u2014a buried CTA<\/a>, a headline that shares visual weight with body copy, a layout that forces interpretive work the designer should have done\u2014all of it quietly erodes the experience before users can articulate why something feels off.\u00a0<\/span><\/p>\n

Every spacing decision, typeface choice, or color call is either building a coherent hierarchy or quietly undermining one. The interfaces that feel intuitive almost always achieve that quality not through clever feature design, but through visual hierarchy executed consistently at every scale simultaneously.\u00a0<\/span><\/p>\n

Let’s get into how it actually works.<\/span><\/p>\n

Why Typography Does Most of the Heavy Lifting<\/strong><\/h2>\n

Typographic hierarchy is possibly the most underestimated tool in a UI designer’s kit. The way copy is structured and sized teaches users how to read a page before they have read a single word. The eye scans first, then reads\u2014and what it scans for is contrast and pattern, not content.<\/span><\/p>\n

\"\"<\/p>\n

The system works in three layers. The primary level\u2014headlines, hero text, key callouts\u2014is where the biggest type lives. These elements anchor orientation: they answer <\/span>where am I and why does it matter<\/span><\/i> before users consciously ask it. The secondary level handles subheaders and captions, which function less like titles and more like navigational signposts.\u00a0<\/span><\/p>\n

Eye-tracking research<\/a> consistently shows that the overwhelming majority of web users scan in an F or Z pattern, meaning secondary-level elements positioned along those scan paths carry disproportionate influence over whether users continue reading at all. The tertiary level is body copy\u2014smaller, quieter, but critical for trust. A page with a strong primary and secondary level but cramped, low-contrast body text signals that the product cares about first impressions but not about the user who actually commits to reading.<\/span><\/p>\n

\"\"<\/p>\n

Where designers get into trouble is treating these three levels as purely a size problem. Type size alone is insufficient\u2014weight, tracking, line-height, and color all contribute to perceived hierarchy, and the relationships between them need to be calibrated, not assumed. A headline at 48px in a thin weight may register as less dominant than a subheader at 24px in a bold weight. The hierarchy lives in the contrast between levels, not in any individual level’s absolute size.<\/span><\/p>\n

Font pairing choices carry the same weight. A sharp, geometric display typeface\u2014something with real personality at large sizes\u2014paired with a humanist serif or a well-spaced grotesque at body size creates readable contrast while maintaining editorial coherence. The display font gives the page its voice; the body font determines whether users can actually hear it comfortably for more than a paragraph.<\/span><\/p>\n

On most mobile layouts<\/a>, this means folding the primary and secondary levels into a single confident heading tier\u2014one size and weight doing the orientation work that hero text and subheaders split between them on desktop\u2014paired with body copy as its own clearly differentiated second tier. Two tiers, executed with precision, often outperform three tiers executed with nuance that the screen size and user context cannot support. This is one of the clearest examples of hierarchy as a design decision shaped by context, not by universal rules.<\/span><\/p>\n

Size: The Most Primal Signal in UI Design<\/strong><\/h2>\n

Humans learned before language that larger things demand attention. Designers tap into that wiring constantly\u2014but the sophisticated application of size in UI design goes well beyond simply making important things bigger.<\/span><\/p>\n

Size works differently depending on density. In a spacious layout with generous padding, even modest size differences register clearly: a headline that is x1.5 the body size reads as emphatically primary. In dense interfaces\u2014dashboards, data-heavy tools, analytics platforms, admin panels\u2014size relationships need to be more exaggerated to achieve the same perceptual separation, because surrounding visual noise reduces the effective contrast. This is why data-dense products like Bloomberg Terminal or complex SaaS dashboards often use stark size jumps that would look crude in a consumer-facing design: the context demands it.<\/span><\/p>\n

There is also a less-discussed dimension to size hierarchy: the relationship between element size and interactive affordance. Larger elements communicate clickability, or at least invite more confident interaction. A primary button that is too small relative to secondary actions creates a subtle but real hesitation, a split-second where the user second-guesses whether they are about to do the right thing. That hesitation compounds across a product, visit after visit, and erodes the sense that the interface is guiding them rather than testing them.<\/span><\/p>\n

\"\"<\/p>\n

The practical discipline of size hierarchy<\/a> starts with a ruthless ranking exercise before any visual decisions are made. What does the user need to perceive first? What supports that? What can wait? That ranking becomes the blueprint. Designers who skip it often end up with every element sized at medium, and medium everything is functionally identical to no hierarchy at all.<\/span><\/p>\n

Color and Contrast: The Hierarchy You Feel Before You See<\/strong><\/h2>\n

Color<\/a> has its own built-in attention hierarchy, and it operates faster than any other visual signal. High-chroma colors\u2014reds, warm oranges, electric blues, acid greens\u2014activate attention before the conscious mind gets involved. This is not a design convention; it is a neurological fact rooted in how the visual cortex processes wavelength differences. Designers use it accordingly: a bright CTA button on a neutral background will pull the eye even when the button is physically smaller than surrounding elements. Color can override size, which makes it uniquely powerful and uniquely dangerous.<\/span><\/p>\n

The danger is this: every additional element that shares the high-chroma treatment dilutes the effect proportionally. One red button on a grey interface is a beacon. Four red buttons are just a red interface. This is why color hierarchy requires a discipline of scarcity\u2014the accent color only works as a hierarchy tool when it is genuinely rare on the page.<\/span><\/p>\n

Contrast in UI<\/a> design extends well beyond color. There is contrast between thick and thin typographic strokes. Contrast between motion and stillness\u2014an animated element in a static layout pulls the eye with a force that no static design element can match, which is why animated CTA banners convert despite being aesthetically aggressive. Contrast between density and space: a single element given an island of white space in a dense layout reads as more important than its size alone would suggest. All of these create hierarchy without changing a single color value.<\/span><\/p>\n

\"\"<\/p>\n

One underexplored application of color hierarchy: using it to reinforce system states rather than just emphasis. Error states, success states, active navigation states, disabled elements\u2014these all benefit from a color language that is consistent and learnable. When users encounter a color for the third time in a product and correctly anticipate what it means before they read the label, that color has done real design work. That kind of color literacy is only possible when the hierarchy is consistent enough to teach.<\/span><\/p>\n

\"\"<\/p>\n

Negative Space: The Element That Holds Everything Else Together<\/strong><\/h2>\n

White space\u2014or negative space<\/a>\u2014is the element that most clearly separates designers with trained eyes from those still developing theirs. The beginner sees empty space as waste, something to fill before the design feels complete. The experienced designer understands that space is load-bearing: it is doing active work in the composition, not waiting to be replaced.<\/span><\/p>\n

\"\"<\/p>\n

Negative space serves hierarchy in two distinct ways. First, it isolates elements, giving each one a perceptual territory that the eye can recognize as distinct. An element surrounded by space reads as complete in itself, worthy of attention on its own terms. Second, generous space around an element communicates its importance independently of its size or color\u2014a small button with significant padding around it reads as more significant than a large button crammed into a cluttered header. Space is a proxy for confidence.<\/span><\/p>\n

There is a specific principle here that product teams often miss: the relationship between cognitive load and white space is not linear. Reducing clutter by 20% does not reduce cognitive load by 20%\u2014the effect is multiplicative, because the brain expends effort both parsing individual elements and resolving the relationships between them. Fewer elements in more space means both tasks become easier simultaneously. This is why even minor spacing improvements in complex interfaces can produce measurable changes in task completion rates.<\/span><\/p>\n

The discipline of negative space is also one of the most reliable markers of brand quality in digital products. Premium interfaces\u2014in fintech, in luxury e-commerce, in thoughtful SaaS\u2014universally use more space than seems strictly necessary. That generosity signals something: the product is not anxious for your attention, not trying to cram everything in before you leave. It trusts you to explore. That emotional register is established almost entirely through space, not through logo quality or color choice.<\/span><\/p>\n

Here are some examples from our Transform9<\/a> and Manatee Energy<\/a> cases:<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

Proximity and Repetition: The Grammar of Visual Groups<\/strong><\/h2>\n

Proximity is one of Gestalt psychology’s most directly applicable contributions to interface design, and it operates with a logic designers can exploit very precisely. Elements placed close together are read as related. Elements placed apart are read as separate. No label, no caption, no visual indicator is required\u2014users apply this rule automatically, before they are aware of doing so.<\/span><\/p>\n

The implication for navigation design is significant. A row of five menu items grouped tightly reads as a unified navigation system. Scatter those same five items with uneven gaps and users need conscious effort to categorize them\u2014effort that they resent, usually without knowing why. Proximity creates information architecture silently, as long as designers apply it intentionally.<\/span><\/p>\n

\"\"<\/p>\n

But proximity also creates hierarchy in a less obvious way: it establishes parent-child relationships. A label placed in tight proximity to an input field is understood as belonging to it. A caption placed close beneath an image is read as describing it. Move that caption further down the page and the relationship dissolves\u2014suddenly users are inferring, not reading. The design system that handles proximity well is one where users never have to infer; the spatial relationships do the interpretive work for them.<\/span><\/p>\n

Repetition works alongside proximity to build what is arguably the most durable aspect of visual hierarchy: learned patterns. When a visual element\u2014a card shape, a specific icon weight, a background treatment for interactive vs. static elements\u2014appears consistently, users begin building mental models of what it means. The third time they encounter a teal chip component, they already know it is a tag they can click. They did not read instructions. The repetition taught them. This is how mature design systems create interfaces that feel learnable rather than just usable, and it is one of the clearest arguments for investing in component consistency early in a product’s lifecycle.<\/span><\/p>\n

The Macro, Meso, and Micro: Hierarchy as a Nested System<\/strong><\/h2>\n

Here is the conceptual frame that most articles about visual hierarchy skip, and it is arguably the most useful one: hierarchy operates at three nested scales simultaneously, and all three need to be coherent with each other.<\/span><\/p>\n

The macro hierarchy is the page-level or screen-level structure. It answers: what is the most important thing on this screen, and what supports it? This is the level most designers think about consciously.<\/span><\/p>\n

The meso hierarchy is the component level. Within a card, within a modal, within a form\u2014each of these has its own internal hierarchy that needs to be consistent with the macro level without competing with it. A card that tries to be its own headline-and-body experience inside a page that already has a headline creates a hierarchy conflict the user’s eye has to resolve before they can extract meaning.<\/span><\/p>\n

The micro hierarchy is typographic and spatial: the relationship between a label and its value, the weight difference between a button label and its icon, the spacing between list items. These decisions feel minor individually, but they compound. A product where micro hierarchy is inconsistent\u2014where some labels are heavier than their values and some are lighter, where some list items have more breathing room than others\u2014feels unpolished in a way that users register emotionally before they can identify the source.<\/span><\/p>\n

The interfaces that feel truly effortless are the ones where all three levels are consistent and coherent. Macro, meso, and micro all speak the same visual language, all reinforce the same reading order, all treat the user’s attention as something to guide rather than compete for.<\/span><\/p>\n

Getting visual hierarchy right does not automatically make a product beautiful. But it makes it usable, navigable, and satisfying in a way that users register as trust\u2014a felt sense that the product respects their time and anticipates their needs. In a landscape where users make decisions about whether to continue using a product within seconds of encountering it, that quality is one of the most durable advantages a digital product can have.<\/span><\/p>\n

Recommended Reading<\/strong><\/h2>\n

Design has more layers than it shows on the surface\u2014and so do our articles. If this one made something click, make sure you check our other think pieces:<\/span><\/p>\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":"

Why do some interfaces just feel intuitive? It all comes down to visual hierarchy\u2014the interplay of typography, size, color, space, and proximity that tells users where to look first.<\/p>\n","protected":false},"author":10018,"featured_media":17625,"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":[780,634],"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: Why Some Interfaces Just Make Sense<\/title>\n<meta name=\"description\" content=\"Typography, size, color, space, and proximity all shape visual hierarchy in UI design. Here's how each one guides attention\u2014and where designers go wrong.\" \/>\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: Why Some Interfaces Just Make Sense\" \/>\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=\"2026-07-15T17:45:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-16T12:25:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/Visual-Hierarchy_-Effective-UI-Content-Organization-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Daria Tsehelna, Anastasiia Lutsenko\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daria Tsehelna, Anastasiia Lutsenko\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 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: Why Some Interfaces Just Make Sense\",\"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_-Effective-UI-Content-Organization-1.png\",\"datePublished\":\"2026-07-15T17:45:20+00:00\",\"dateModified\":\"2026-07-16T12:25:31+00:00\",\"author\":{\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/20699e677302cc02aba36aa8588279ba\"},\"description\":\"Typography, size, color, space, and proximity all shape visual hierarchy in UI design. Here's how each one guides attention\u2014and where designers go wrong.\",\"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_-Effective-UI-Content-Organization-1.png\",\"contentUrl\":\"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/Visual-Hierarchy_-Effective-UI-Content-Organization-1.png\",\"width\":1200,\"height\":600},{\"@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: Why Some Interfaces Just Make Sense\"}]},{\"@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\/20699e677302cc02aba36aa8588279ba\",\"name\":\"Daria Tsehelna\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/17a4aa50868e93375878f376fe496b39\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/43d9fbf315f52c7b408ffa4bbb28653c96b954c440f70eba4b76ed9ce22a80e3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/43d9fbf315f52c7b408ffa4bbb28653c96b954c440f70eba4b76ed9ce22a80e3?s=96&d=mm&r=g\",\"caption\":\"Daria Tsehelna\"},\"url\":\"https:\/\/tubikstudio.com\/blog\/author\/daria-tsehelna\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Visual Hierarchy: Why Some Interfaces Just Make Sense","description":"Typography, size, color, space, and proximity all shape visual hierarchy in UI design. Here's how each one guides attention\u2014and where designers go wrong.","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: Why Some Interfaces Just Make Sense","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":"2026-07-15T17:45:20+00:00","article_modified_time":"2026-07-16T12:25:31+00:00","og_image":[{"width":1200,"height":600,"url":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/Visual-Hierarchy_-Effective-UI-Content-Organization-1.png","type":"image\/png"}],"author":"Daria Tsehelna, Anastasiia Lutsenko","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Daria Tsehelna, Anastasiia Lutsenko","Est. reading time":"12 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: Why Some Interfaces Just Make Sense","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_-Effective-UI-Content-Organization-1.png","datePublished":"2026-07-15T17:45:20+00:00","dateModified":"2026-07-16T12:25:31+00:00","author":{"@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/20699e677302cc02aba36aa8588279ba"},"description":"Typography, size, color, space, and proximity all shape visual hierarchy in UI design. Here's how each one guides attention\u2014and where designers go wrong.","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_-Effective-UI-Content-Organization-1.png","contentUrl":"https:\/\/blog.tubikstudio.com\/wp-content\/uploads\/2017\/10\/Visual-Hierarchy_-Effective-UI-Content-Organization-1.png","width":1200,"height":600},{"@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: Why Some Interfaces Just Make Sense"}]},{"@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\/20699e677302cc02aba36aa8588279ba","name":"Daria Tsehelna","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tubikstudio.com\/blog\/#\/schema\/person\/image\/17a4aa50868e93375878f376fe496b39","url":"https:\/\/secure.gravatar.com\/avatar\/43d9fbf315f52c7b408ffa4bbb28653c96b954c440f70eba4b76ed9ce22a80e3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/43d9fbf315f52c7b408ffa4bbb28653c96b954c440f70eba4b76ed9ce22a80e3?s=96&d=mm&r=g","caption":"Daria Tsehelna"},"url":"https:\/\/tubikstudio.com\/blog\/author\/daria-tsehelna\/"}]}},"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\/10018"}],"replies":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/comments?post=3601"}],"version-history":[{"count":5,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/3601\/revisions"}],"predecessor-version":[{"id":17640,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/posts\/3601\/revisions\/17640"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tubikstudio.com\/blog\/wp-json\/wp\/v2\/media\/17625"}],"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}]}}