{"id":24631,"date":"2015-09-11T23:01:37","date_gmt":"2015-09-11T15:01:37","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=24631"},"modified":"2024-08-07T17:25:45","modified_gmt":"2024-08-07T09:25:45","slug":"human-process-visual-information-web-design","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/","title":{"rendered":"Mastering Web Design with Insights from Human Visual Processing"},"content":{"rendered":"<p>Designing websites and <a href=\"https:\/\/www.hongkiat.com\/blog\/mobile-app-ui\/\">user interfaces<\/a> has become much easier in recent years. Numerous tools are available, making it unnecessary to start from scratch when developing UIs (check out our <a href=\"https:\/\/www.hongkiat.com\/blog\/web-mobile-ui-kits\/\">fresh UI compilation<\/a>). But this isn\u2019t about the end of web design.<\/p>\n<p>Instead, this article aims to explain the basic psychology-based concepts behind the wide array of visual design tools (from the simplest CSS kits to the most advanced premium themes). <strong>Not only will you use them, but you\u2019ll also understand them<\/strong>. This understanding will make it easier to successfully modify existing ones.<\/p>\n<p>Let\u2019s explore how the human mind and body process visual information and how this knowledge informs web design.<\/p>\n<h2>Principles of Perceptual Organization<\/h2>\n<p>According to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Gestalt_psychology\">Gestalt psychology<\/a>, <strong>the whole is different from the sum of its parts<\/strong>. Proponents of this theory argue that the human mind groups objects based on several principles. These aren\u2019t just theories but practical facts about organizing visual groups.<\/p>\n<p>Below are some laws and popular uses of these principles. You might even find new ideas for your next design.<\/p>\n<h3>Law of Similarity<\/h3>\n<p>The first principle states that <strong>similar small objects are perceived as a group<\/strong> rather than as multiple instances of the same object. Similarity might be based on shape, color, shading, or other qualities. This principle underlies <strong>pattern design<\/strong> and many <a href=\"https:\/\/www.hongkiat.com\/blog\/cool-geometric-art-pieces\/\">geometric<\/a> and <a href=\"https:\/\/www.hongkiat.com\/blog\/symbols-impact-on-logo-design\/\">minimalistic logo designs<\/a>.<\/p>\n<p>For instance, this picture shows a circular logo instead of separate triangles. The triangular shape at the bottom of the eagle makes us think that the shape is part of the image.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/human-process-visual-information-web-design\/gestalt-eagle.jpg\" width=\"214\" height=\"210\" alt=\"Gestalt principle of similarity example with eagle logo\"><\/figure>\n<p>You\u2019ve probably used this law unknowingly when creating <strong>same-sized featured content boxes<\/strong> for your website. To show that certain content elements are of the same importance or share similar information, <strong>create a specific shape for that purpose<\/strong>. This way, users will immediately associate that particular shape with a specific area of information.<\/p>\n<h3>Law of Proximity<\/h3>\n<p>According to this law, <strong>objects that are closer<\/strong> to each other are <strong>considered to be of the same group<\/strong>. When squares are rendered next to each other in close, regular proximity, they create a sense of grouping.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/human-process-visual-information-web-design\/gestalt-proximity.jpg\" width=\"254\" height=\"158\" alt=\"Gestalt principle of proximity example\"><\/figure>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/human-process-visual-information-web-design\/gestalt-close.jpg\" width=\"84\" height=\"83\" alt=\"Close proximity of objects example\"><\/figure>\n<p>This principle has been widely used on the web, especially in <strong>content loops<\/strong> on blogs and webshops.<\/p>\n<p>Titles, featured images, metadata, and excerpts can be grouped together even without borders or backgrounds. You might be able to remove unnecessary lines and colors from your design, making it more minimalistic yet fully comprehensible.<\/p>\n<p>As Wikipedia states:<\/p>\n<p class=\"note\"><em>\u201cThe laws of similarity and proximity can, for example, be used as guides for placing radio buttons. They may also be used in designing computers and software for more intuitive human use. Examples include the design and layout of a desktop\u2019s shortcuts in rows and columns.\u201d<\/em><\/p>\n<h3>Law of Good Form<\/h3>\n<p>Also known as the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.verywellmind.com\/gestalt-laws-of-perceptual-organization-2795835\">Law of Pragnanz<\/a> or Good Gestalt, this law states that we tend to group objects together if they <strong>form a simple, regular, and orderly pattern<\/strong>. Our mind tries to separate complex forms into simple, understandable shapes, emphasizing the <strong>importance of conciseness<\/strong>.<\/p>\n<p>This is one reason behind the success of <strong>grid-based design<\/strong> and why table- and frame-based web structures were so popular in the past.<\/p>\n<p>By keeping this principle in mind, you can avoid creating websites filled with complex shapes of content blocks connected via other laws. Instead, you can <strong>group your objects in interesting ways<\/strong>, such as in diamond- or kite-shapes, which are still perceived as orderly and concise.<\/p>\n<h2>Color Theory, Perception, and Usage<\/h2>\n<p>Color vision and perception are <strong>largely subjective<\/strong>, based on <strong>how viewers\u2019 brains react<\/strong> to light waves reflected by colorful objects or shapes. Different people, even without visual impairments, may see the same object in different colors (remember <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/The_dress_(viral_phenomenon)\">the dress<\/a>).<\/p>\n<h3>Color Properties<\/h3>\n<p>There are three objective properties of color: <strong>hue<\/strong>, <strong>value<\/strong>, and <strong>intensity<\/strong>.<\/p>\n<p><strong>Hue<\/strong> is the name of the color as labeled on a color wheel or in a rainbow. There are six (or twelve, depending on whom you ask) basic hues: red, orange, yellow, green, blue, and violet.<\/p>\n<p>Yellow, blue, and red are <strong>primary<\/strong>; orange, green, and violet are <strong>secondary<\/strong> hues. Tertiary hues are direct mixtures of two primary and secondary hues (e.g., yellow-green or red-violet).<\/p>\n<p><strong>Value<\/strong> refers to the lightness or darkness of the color, described as <strong>high-value<\/strong> for light colors or <strong>low-value<\/strong> for dark colors.<\/p>\n<p><strong>Intensity<\/strong> describes the <strong>brightness or dimness<\/strong> of a color. A color with the same hue and value can still be altered by changing its intensity, creating different color outputs.<\/p>\n<p>The highest intensity of every color is its hue on the color wheel, while the lowest is grey.<\/p>\n<h2>Color Contrasts<\/h2>\n<p>Based on the laws of similarity, viewers\u2019 minds group objects by similar and different properties, often colors.<\/p>\n<p>When choosing a color palette for your website, especially for minimalistic designs or text-heavy content areas like blogs or ads, <strong>understand different color contrasts<\/strong> to find the right values for the best results.<\/p>\n<p>According to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/en.wikipedia.org\/wiki\/Johannes_Itten\">Johannes Itten<\/a>, there are seven color contrasts. Here are three of them:<\/p>\n<h3>1. Contrast of Hue<\/h3>\n<p><strong>Yellow, red, and blue at full intensity<\/strong> create direct and vivid contrasts. Secondary hues provide less sharp distinctions but still work well. Tertiary hues are less effective but still useful, though primary hues produce the most striking results.<\/p>\n<h3>2. Complementary Contrast<\/h3>\n<p>Two colors are in complementary contrast if they create a neutral grey when mixed. These <strong>strange pairs<\/strong> enhance vividness and intensity when adjacent and cancel each other out when mixed. Each color has one complementary color, located diagonally opposite on the color wheel.<\/p>\n<h3>3. Light-Dark Contrast<\/h3>\n<p>For single-color websites, <strong>using different values of the same hue<\/strong> can yield impressive results. This approach is often used in <a href=\"https:\/\/www.hongkiat.com\/blog\/clean-simple-minimalist-website-design\/\">minimalistic web design<\/a>. Light-dark contrast is also effective for grayscale designs and providing theme color options.<\/p>\n<p>To explore the remaining four color contrasts, visit <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/personal.utdallas.edu\/~melacy\/pages\/2D_Design\/Itten_ColorContrasts\/IttenColorContrasts.html\">this resource<\/a>.<\/p>\n<h2>Creating Palettes and Checking for Contrasts<\/h2>\n<p>Knowing the theory is great, but applying your ideas is another challenge. Fortunately, the web offers many tools for creating custom color patterns based on contrast rules, such as <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/paletton.com\">Paletton<\/a> and <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/color.adobe.com\/\">Adobe Kuler<\/a>.<\/p>\n<p>For web purposes, you can check the contrasts you choose using tools like <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">webAIM<\/a>, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/snook.ca\/technical\/colour_contrast\/colour.html#fg=33FF33,bg=333333\">Jonathan Snook\u2019s site<\/a>, or download the Color Contrast Analyser by The Paciello Group <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.tpgi.com\/color-contrast-checker\/\">here<\/a>.<\/p>\n<h2>Conclusion<\/h2>\n<p>When working with a new theme or modifying existing ones, consider principles of perception to organize your content and follow color rules to give your design its final form and tint.<\/p>","protected":false},"excerpt":{"rendered":"<p>Designing websites and user interfaces has become much easier in recent years. Numerous tools are available, making it unnecessary to start from scratch when developing UIs (check out our fresh UI compilation). But this isn\u2019t about the end of web design. Instead, this article aims to explain the basic psychology-based concepts behind the wide array&hellip;<\/p>\n","protected":false},"author":347,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Mastering Web Design with Insights from Human Visual Processing - Hongkiat<\/title>\n<meta name=\"description\" content=\"Designing websites and user interfaces has become much easier in recent years. Numerous tools are available, making it unnecessary to start from scratch\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mastering Web Design with Insights from Human Visual Processing\" \/>\n<meta property=\"og:description\" content=\"Designing websites and user interfaces has become much easier in recent years. Numerous tools are available, making it unnecessary to start from scratch\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-11T15:01:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-07T09:25:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/human-process-visual-information-web-design\/gestalt-eagle.jpg\" \/>\n<meta name=\"author\" content=\"Marton Fekete\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Marton Fekete\" \/>\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\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/human-process-visual-information-web-design\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/human-process-visual-information-web-design\\\/\"},\"author\":{\"name\":\"Marton Fekete\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b278676f16e4dcc9a01346eac36777a6\"},\"headline\":\"Mastering Web Design with Insights from Human Visual Processing\",\"datePublished\":\"2015-09-11T15:01:37+00:00\",\"dateModified\":\"2024-08-07T09:25:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/human-process-visual-information-web-design\\\/\"},\"wordCount\":1062,\"commentCount\":5,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/human-process-visual-information-web-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/human-process-visual-information-web-design\\\/gestalt-eagle.jpg\",\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/human-process-visual-information-web-design\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/human-process-visual-information-web-design\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/human-process-visual-information-web-design\\\/\",\"name\":\"Mastering Web Design with Insights from Human Visual Processing - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/human-process-visual-information-web-design\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/human-process-visual-information-web-design\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/human-process-visual-information-web-design\\\/gestalt-eagle.jpg\",\"datePublished\":\"2015-09-11T15:01:37+00:00\",\"dateModified\":\"2024-08-07T09:25:45+00:00\",\"description\":\"Designing websites and user interfaces has become much easier in recent years. Numerous tools are available, making it unnecessary to start from scratch\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/human-process-visual-information-web-design\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/human-process-visual-information-web-design\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/human-process-visual-information-web-design\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/human-process-visual-information-web-design\\\/gestalt-eagle.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/human-process-visual-information-web-design\\\/gestalt-eagle.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/human-process-visual-information-web-design\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mastering Web Design with Insights from Human Visual Processing\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/b278676f16e4dcc9a01346eac36777a6\",\"name\":\"Marton Fekete\",\"description\":\"Marton is a Hungarian site developer recently hooked on WordPress. He is a redesign enthusiast and freelance content writer who likes playing RPGs in his free time.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/martonfekete\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Mastering Web Design with Insights from Human Visual Processing - Hongkiat","description":"Designing websites and user interfaces has become much easier in recent years. Numerous tools are available, making it unnecessary to start from scratch","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:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/","og_locale":"en_US","og_type":"article","og_title":"Mastering Web Design with Insights from Human Visual Processing","og_description":"Designing websites and user interfaces has become much easier in recent years. Numerous tools are available, making it unnecessary to start from scratch","og_url":"https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2015-09-11T15:01:37+00:00","article_modified_time":"2024-08-07T09:25:45+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/human-process-visual-information-web-design\/gestalt-eagle.jpg","type":"","width":"","height":""}],"author":"Marton Fekete","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Marton Fekete","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/"},"author":{"name":"Marton Fekete","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b278676f16e4dcc9a01346eac36777a6"},"headline":"Mastering Web Design with Insights from Human Visual Processing","datePublished":"2015-09-11T15:01:37+00:00","dateModified":"2024-08-07T09:25:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/"},"wordCount":1062,"commentCount":5,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/human-process-visual-information-web-design\/gestalt-eagle.jpg","articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/","url":"https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/","name":"Mastering Web Design with Insights from Human Visual Processing - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/human-process-visual-information-web-design\/gestalt-eagle.jpg","datePublished":"2015-09-11T15:01:37+00:00","dateModified":"2024-08-07T09:25:45+00:00","description":"Designing websites and user interfaces has become much easier in recent years. Numerous tools are available, making it unnecessary to start from scratch","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/human-process-visual-information-web-design\/gestalt-eagle.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/human-process-visual-information-web-design\/gestalt-eagle.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/human-process-visual-information-web-design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Mastering Web Design with Insights from Human Visual Processing"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/b278676f16e4dcc9a01346eac36777a6","name":"Marton Fekete","description":"Marton is a Hungarian site developer recently hooked on WordPress. He is a redesign enthusiast and freelance content writer who likes playing RPGs in his free time.","url":"https:\/\/www.hongkiat.com\/blog\/author\/martonfekete\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6ph","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24631","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/347"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=24631"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24631\/revisions"}],"predecessor-version":[{"id":72505,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/24631\/revisions\/72505"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=24631"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=24631"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=24631"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=24631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}