CINXE.COM

<!DOCTYPE html><html data-app-version="-production" lang="en"><head><link rel="preload" href="https://static.tutsplus.com/packs/static/fonts/fa-solid-900-130191cbdfe1d7a5dde9.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="https://static.tutsplus.com/packs/static/fonts/fa-regular-400-7b8124cb811f19c72e48.woff2" as="font" type="font/woff2" crossorigin="anonymous"><link rel="preload" href="https://static.tutsplus.com/packs/static/fonts/fa-brands-400-78547c4b11a377e195ff.woff2" as="font" type="font/woff2" crossorigin="anonymous"><script>window.Tutsplus = {}; window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; Tutsplus.environment = 'production'; Tutsplus.apexDomain = 'tutsplus.com'; Tutsplus.recaptchaSiteKey = '6Ldpx74UAAAAACuA5loIvNFtSYkAxOiK89Otp9dp'; Tutsplus.rollbarToken = '15981c89d2cb4b20994adb78613f9f59'; Tutsplus.rollbarEnabled = false; Tutsplus.ssoEnabled = true; Tutsplus.ssoServer = 'https://account.envato.com'; Tutsplus.ssoSignInPath = '/sso/sign_in.json'; Tutsplus.resetPasswordPath = 'https://account.envato.com/reset_password?to=tutsplus?to=tutsplus'; Tutsplus.forcedResetPasswordPath = 'https://account.envato.com/password_reset_required?to=tutsplus?to=tutsplus'; Tutsplus.adsEnabled = true; Tutsplus.is_posts_page = true; Tutsplus.is_post_page = true; Tutsplus.ext_social = false; Tutsplus.load_mathjax_library = false; Tutsplus.load_twitter_widget = false;</script><script type="text/javascript" data-turbo-eval="false"> window.addEventListener("CookiebotOnDialogDisplay", (event) => { const cookieDialog = event.srcElement.CookieConsentDialog.DOM cookieDialog.dataset.turbo = false }) </script> <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="d10f7659-aa82-4007-9cf1-54a9496002bf" data-framework="TCFv2.2" type="text/javascript" data-georegions="{'region':'US','cbid':'d9683f70-895f-4427-97dc-f1087cddf9d8'}" async> </script> <script type="text/plain" data-cookieconsent="statistics" data-test-id="gtm-loader"> window['gtag_enable_tcf_support'] = true; if (!window.gtmLoaded) { (function(w,d,s,l,i) { w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'}); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l!='dataLayer'?'&l='+l:''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id='+i+dl; f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MXT8M8X'); window.gtmLoaded = true; } </script> <script src="https://static.tutsplus.com/packs/js/runtime-76a1416ff3535925e8ac.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/951-fa7abab3c99e681f8324.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/779-582d5befd4c454578e79.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/599-484f62584dbf173654de.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/697-0770b598cb0641a27591.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/894-f97578aa5d25d0d34c81.js" async="async" data-turbo-suppress-warning="" defer="defer"></script> <script src="https://static.tutsplus.com/packs/js/post-f32f668c8be4f1611b16.js" async="async" data-turbo-suppress-warning="" defer="defer"></script><link rel="stylesheet" media="all" href="https://static.tutsplus.com/packs/css/697-2b4a34c9.css" /> <link rel="stylesheet" media="all" href="https://static.tutsplus.com/packs/css/post-90fd413c.css" /><link href="/tailwind.css" rel="stylesheet" type="text/css" /><meta content="no-referrer-when-downgrade" name="referrer" /><meta charset="utf-8" /><meta content="no-cache" name="turbo-cache-control" /><meta content="reload" name="turbo-visit-control" /><meta content="" name="geo-regions" /><meta content="nocache" name="bingbot" /><link href="https://static.tutsplus.com" rel="preconnect" /><title>Understanding Visual Hierarchy in Web Design | Envato Tuts+</title><link rel="canonical" href="https://webdesign.tutsplus.com/understanding-visual-hierarchy-in-web-design--webdesign-84a" /><link rel="icon" type="image/x-icon" href="https://static.tutsplus.com/packs/static/images/favicon-f8d459d2fa865233f59c.ico" /><link rel="apple-touch-icon" type="image/png" href="https://static.tutsplus.com/packs/static/images/apple-touch-icon-46747f8b314a25bfa124.png" /><link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="https://tutsplus.com/posts.atom" /><meta content="width=device-width, initial-scale=1" name="viewport" /><meta content="index, follow" name="robots" /><meta content="Understanding Visual Hierarchy in Web Design | Envato Tuts+" property="og:title" /><meta content="Web Design Envato Tuts+" property="og:site_name" /><meta content="1494084460809023" property="fb:app_id" /><meta content="Visual hierarchy is a key principle behind effective web and UX design. In this article we'll cover the theory behind it and go over basic exercises to put these principles into practice." name="description" property="og:description" /><link href="https://cms-assets.tutsplus.com" rel="preconnect" /><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Article", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://webdesign.tutsplus.com/understanding-visual-hierarchy-in-web-design--webdesign-84a?utm_campaign=tutsplus_social_mksk_instagram_visualvierachy&utm_content=visual&utm_medium=social&utm_source=instagram" }, "headline": "Understanding Visual Hierarchy in Web Design", "author": { "@type": "Person", "name": "Brandon Jones", "url": "https://tutsplus.com/authors/brandon-jones" }, "datePublished": "2011-09-28 11:00:49 UTC", "dateModified": "2022-11-29 08:18:00 UTC", "image": "https://cms-assets.tutsplus.com/uploads/users/30/posts/3396/preview_image/visual_hierarchy.png", "description": "Visual hierarchy is a key principle behind effective web and UX design. In this article we'll cover the theory behind it and go over basic exercises to put these principles into practice.", "url": "https://webdesign.tutsplus.com/understanding-visual-hierarchy-in-web-design--webdesign-84a?utm_campaign=tutsplus_social_mksk_instagram_visualvierachy&utm_content=visual&utm_medium=social&utm_source=instagram", "publisher": { "@type": "Organization", "name": "Envato Tuts", "logo": { "@type": "ImageObject", "url": "https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png"} } }</script><meta content="article" property="og:type" /><meta content="https://webdesign.tutsplus.com/understanding-visual-hierarchy-in-web-design--webdesign-84a" property="og:url" /><link href="https://webdesign.tutsplus.com/understanding-visual-hierarchy-in-web-design--webdesign-84a" hreflang="x-default" rel="alternate" /><link href="https://webdesign.tutsplus.com/de/understanding-visual-hierarchy-in-web-design--webdesign-84a" hreflang="de" rel="alternate" /><link href="https://webdesign.tutsplus.com/understanding-visual-hierarchy-in-web-design--webdesign-84a" hreflang="en" rel="alternate" /><link href="https://webdesign.tutsplus.com/es/understanding-visual-hierarchy-in-web-design--webdesign-84a" hreflang="es" rel="alternate" /><link href="https://webdesign.tutsplus.com/id/understanding-visual-hierarchy-in-web-design--webdesign-84a" hreflang="id" rel="alternate" /><meta content="https://cms-assets.tutsplus.com/uploads/users/30/posts/3396/preview_image/visual_hierarchy.png" property="og:image" /><meta content="summary_large_image" name="twitter:card" /><meta content="@tutsplus" name="twitter:site" /><meta content="Understanding Visual Hierarchy in Web Design" name="twitter:title" /><meta content="Visual hierarchy is a key principle behind effective web and UX design. In this article we'll cover the theory behind it and go over basic exercises to put these principles into practice." name="twitter:description" /><meta content="https://cms-assets.tutsplus.com/uploads/users/30/posts/3396/preview_image/visual_hierarchy.png" name="twitter:image" /><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "Envato", "alternateName": "Envato Tuts+", "url": "https://tutsplus.com/", "logo": "https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png", "contactPoint": {"@type": "ContactPoint", "telephone": "+61 3 8376 6284", "contactType": "corporate contact"}, "parentOrganization": {"@type": "Organization", "name": "Envato Pty Ltd", "url": "https://www.envato.com/about"}, "sameAs": [ "https://tutsplus.com/", "https://business.tutsplus.com/", "https://code.tutsplus.com/", "https://design.tutsplus.com/", "https://webdesign.tutsplus.com/", "https://photography.tutsplus.com/", "https://music.tutsplus.com/", "https://cgi.tutsplus.com/", "https://gamedevelopment.tutsplus.com/", "https://computers.tutsplus.com/", "https://elements.envato.com/", "https://themeforest.net/", "https://codecanyon.net/", "https://audiojungle.net/", "https://videohive.net/", "https://graphicriver.net/", "https://photodune.net/", "https://3docean.net/", "https://placeit.net/", "https://mixkit.co/", "https://www.reshot.com/", "https://twitter.com/envato", "https://www.facebook.com/envato", "https://www.youtube.com/user/Envato", "https://www.instagram.com/envato/", "https://www.pinterest.com/envato/", "https://market.envato.com/" ] }</script><script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebSite", "name": "Envato Tuts+", "url": "https://tutsplus.com" } </script> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "BreadcrumbList", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://webdesign.tutsplus.com/understanding-visual-hierarchy-in-web-design--webdesign-84a?utm_campaign=tutsplus_social_mksk_instagram_visualvierachy&utm_content=visual&utm_medium=social&utm_source=instagram" }, "itemListElement": [{"@type":"ListItem","position":1,"name":"Home","item":{"@type":"Thing","@id":"https://tutsplus.com/"}},{"@type":"ListItem","position":2,"name":"Web Design","item":{"@type":"Thing","@id":"https://webdesign.tutsplus.com"}},{"@type":"ListItem","position":3,"name":"UX/UI","item":{"@type":"Thing","@id":"https://webdesign.tutsplus.com/c/uxui"}},{"@type":"ListItem","position":4,"name":"Design Theory","item":{"@type":"Thing","@id":"https://webdesign.tutsplus.com/c/uxui/s/design-theory"}}] } </script> <meta content="t60fIs6JfmiK5FpPBlh_bKr5lJSX6abJYYIFjqiFG3M" name="google-site-verification" /><meta content="D3E35339A8EC086B14C62277CBEC8234" name="msvalidate.01" /><meta content="zvqxFgQqdy" name="baidu-site-verification" /></head><body class="page-body body--announcement-bar topic-webdesign post__fullwidth-inarticle-ad-footer" data-analytics-context="body" data-controller="ga-analytics content-filters utm" data-ga-account="UA-11792865-37" data-ga-autolink-domains="activeden.net,audiojungle.net,themeforest.net,videohive.net,graphicriver.net,3docean.net,codecanyon.net,photodune.net,market.envato.com,elements.envato.com,build.envatohostedservices.com,author.envato.com,envato.com" data-ga-domain="tutsplus.com" data-utm-is-content-page-value="true" data-utm-utm-campaign-value="webdesign-84" data-utm-utm-medium-value="articles" data-wt-dcsid="dcs222cpd4g6lg7wb3cum8l5g_6w6m" name="page-body"> <script data-test-id="gtm-page-attributes"> window.dataLayer = window.dataLayer || []; function normalizeAttributeValue(value) { if (value === undefined) return undefined if (value === null) return undefined var normalizedValue = value .toString() .toLowerCase() .trim() .replace(/&/g, '&') .replace(/'/g, "'") .replace(/\s+/g, ' ') if (normalizedValue === '') return undefined return normalizedValue } (function () { if (document.documentElement.hasAttribute('data-turbo-preview')) return var pageAttributes = { app_name: 'tutsplus', app_version: '17436', app_env: 'production', topic: 'web design', page_type: 'article', category: 'UX/UI', sub_category: 'Design Theory', software_tag: '', tag: '', ga_param: '' } var normalizedPageAttributes = { event_attributes: null } Object.keys(pageAttributes).forEach(function(key) { normalizedPageAttributes[key] = normalizeAttributeValue(pageAttributes[key]) }) dataLayer.push(normalizedPageAttributes) dataLayer.push({ event: 'analytics_ready', event_attributes: { custom_timestamp: Date.now() } }) })() </script> <noscript data-test-id="gtm-noscript"> <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MXT8M8X" height="0" width="0" style="display:none;visibility:hidden" > </iframe> </noscript>  <script src="https://static.tutsplus.com/packs/js/global_nav_scroll-e15d1af062eca0d35d71.js" defer="defer"></script><nav class="global-nav view new-nav" data-analytics-context="navigation" data-controller="global-nav"><a class="global-new-nav__skip-to-content-link" data-action="click->global-nav#sendNewNavDataLayerEvent" href="#page-content">Skip to content</a><div class="announcement-bar view announcement-bar--open" data-controller="announcement-bar" data-announcement-id="cyber_nov24" data-background-image="https://cms-assets.tutsplus.com/uploads/users/15/topics/12/announcement_background_image/cyber_bg_2024.png" data-fallback-background-color="#a340a1" data-text-color="#FFFFFF" data-link-color="#25410d" data-analytics-context="announcement bar" > <div class="announcement-bar__content"> <div class="announcement-bar__primary"> <div class="announcement-bar__title"> <div align="center"> <span class="announcement-bar__title-desktop"> <strong>30% off unlimited creative assets this Cyber Sale. <span style="color:#aeec7b;">Get in quick! </span></strong> </span> <span class="announcement-bar__title-mobile"> <strong>30% off in Cyber Sale </strong> </span> <a rel="noskim" href="https://elements.envato.com/lp/pm/campaign/cybermonday/?utm_source=tutsplus.com&utm_medium=promos&utm_campaign=elements_tuts-header_promo_Cyber2024" data-action="click->ga-analytics#sendElementsClickEvent">Save now</a> </div> <style> .announcement-bar__title a { border-radius:4px; background-color:#aeec7b; padding:0px 20px; box-shadow:0px 0px 0px #aeec7b; margin:10px 10px 10px 10px; font-size:12px; height:30px; line-height:30px; text-decoration:none; color:#25410d; } .announcement-bar__title a:hover { background-color: #c8f1a5; text-decoration:none; color:#25410d; } </style> </div> </div> <div class="announcement-bar__secondary"> <a title="Close this announcement bar" class="announcement-bar__close-link" data-action="click->announcement-bar#close click->global-nav#onAnnouncementBarClose" href="#"> <span class="announcement-bar__close-label">Dismiss</span> <i class="fa fa-times announcement-bar__close-icon"></i> </a> </div> </div> </div> <div class="global-nav__mobile-closed"><div class="nav-actions"><a class="mobile-menu-icon mobile-header-action" data-action="click->global-nav#toggle" href="javascript:"><i class="fa fa-reorder"></i></a><a class="global-nav__header-tuts-logo-link mobile-header-action mobile-home-logo" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://tutsplus.com/"><img alt="envato-tuts+" class="global-nav__header-tuts-logo-image new-nav-mobile" src="https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png" /></a><a class="mobile-search-icon mobile-header-action" data-action="click->global-nav#toggle" href="javascript:"><i class="fa fa-magnifying-glass"></i></a></div></div><div class="global-nav__mobile-overlay"></div><div class="global-nav__mobile-new"><section class="view global-nav__mobile-open-header"><a class="global-nav__header-tuts-logo-link mobile-header-action mobile-home-logo" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://tutsplus.com/"><img alt="envato-tuts+" class="global-nav__header-tuts-logo-image new-nav-mobile" src="https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png" /></a><a class="mobile-close-icon mobile-header-action" data-action="click->global-nav#toggle" href="javascript:"><i class="fa fa-times"></i></a></section><section class="global-nav__mobile-search view new-nav-mobile" data-controller="global-search"><form class="global-nav__search-form mobile" data-turbo="false" data-action="submit->global-nav#sendSearchDataLayerEvent submit->global-search#perform_search" action="https://webdesign.tutsplus.com/t/tutorials/search" accept-charset="UTF-8" method="get"><input type="text" name="search[terms]" id="search_terms" value="" placeholder="Search tutorials, courses and resources" class="global-nav__search-terms" data-action="keydown->global-search#keydown input->global-search#auto_suggestions focus->global-search#focus_in" /> <div class="search__auto_suggestions_container " data-global-search-target="suggestionContainer" data-action="mousedown->global-search#onSuggestionContainerMousedown" > <div class="search__auto_suggestions_content"> <div class="search__auto_suggesstion_list_container"> <div class="search__auto_suggesstion_list_content"> <ul class="search__auto_suggesstion_list" role="listbox" data-global-search-target="suggestionList"> </ul> </div> </div> </div> </div><button name="button" type="submit" class="global-nav__search-button" aria-label="Search"><i class="fa fa-search"></i></button></form></section><ul class='global-nav__mobile-top-level new-nav-mobile'> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Design'> <a href='https://design.tutsplus.com' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Design </span> </a> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Business'> <a href='https://business.tutsplus.com' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Business </span> </a> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Photo'> <a href='https://photography.tutsplus.com/photo' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Photo </span> </a> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Video'> <a href='https://photography.tutsplus.com/video' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Video </span> </a> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Web Design'> <a href='javascript:' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action='click->global-nav#toggleSecondLevelSection'> <span class='global-nav__mobile-top-level-link-title'> Web Design </span> <span class='global-nav__mobile-top-level-expand-text'> <i class='fa fa-angle-right global-nav__mobile-top-level-link-icon'></i> </span> </a> <div class='global-nav__mobile-second-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleSecondLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-second-level-heading '> <span class='global-nav__mobile-second-level-heading-title'> Web Design </span> <a href='https://webdesign.tutsplus.com' class='global-nav__mobile-second-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-second-level-heading-link-text'> View all Web Design </span> <span class='global-nav__mobile-second-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title'>Start Learning</div> <ul class='global-nav__mobile-second-level-links'> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Software'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> Software </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading global-nav__mobile-third-level-heading-without-link'> <span class='global-nav__mobile-third-level-heading-title'> Software </span> </section> <div class='global-nav__mobile-third-level-links-title empty-title'> </div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Sketch'> <a href='https://webdesign.tutsplus.com/compatible-with/sketch' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sketch@2x-06b2d1b0b5e67fbd7a46.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Sketch </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Figma'> <a href='https://webdesign.tutsplus.com/compatible-with/figma' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/figma@2x-9b6b6b30267a5cb7e475.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Figma </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Adobe XD'> <a href='https://webdesign.tutsplus.com/compatible-with/adobe-xd' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/xd@2x-727778ad5bc8388de2c8.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Adobe XD </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Sublime Text'> <a href='https://webdesign.tutsplus.com/compatible-with/sublime-text' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sublime@2x-ffbddc90d1c534b42d83.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Sublime Text </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Visual Studio Code'> <a href='https://webdesign.tutsplus.com/compatible-with/visual-studio-code' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/vscode@2x-3da3dc440f7877aa3715.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Visual Studio Code </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='MailChimp'> <a href='https://webdesign.tutsplus.com/compatible-with/mailchimp' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/mailchimp@2x-12ec7ec155f7365c14a0.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> MailChimp </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Webflow'> <a href='https://webdesign.tutsplus.com/compatible-with/webflow' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/webflow@2x-c488c71766a27a4ca131.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Webflow </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Campaign Monitor'> <a href='https://webdesign.tutsplus.com/compatible-with/campaign-monitor' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/campaign_monitor@2x-097a4d858a7583260178.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Campaign Monitor </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='AI Tools'> <a href='https://webdesign.tutsplus.com/compatible-with/ai-tools' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/ai_tools@2x-829ddec496349c126fb9.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> AI Tools </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='WordPress'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> WordPress </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> WordPress </span> <a href='https://webdesign.tutsplus.com/c/wordpress' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all WordPress </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title empty-title'></div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='WordPress CMS'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-cms' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> WordPress CMS </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='WordPress Themes'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-themes' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> WordPress Themes </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='WordPress Plugins'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-plugins' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> WordPress Plugins </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='WordPress Hosting'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-hosting' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> WordPress Hosting </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Elementor'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/elementor' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Elementor </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='HTML/CSS'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> HTML/CSS </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> HTML/CSS </span> <a href='https://webdesign.tutsplus.com/c/htmlcss' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all HTML/CSS </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title empty-title'></div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='HTML'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/html' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> HTML </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='CSS'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/css' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> CSS </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='JavaScript for Designers'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/javascript-for-designers' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> JavaScript for Designers </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Bootstrap'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/bootstrap' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Bootstrap </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Animation'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/animation' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Animation </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='HTML Templates'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/html-templates' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> HTML Templates </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Landing Pages'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/landing-pages' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Landing Pages </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='SVG'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/svg' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> SVG </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Email'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> Email </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> Email </span> <a href='https://webdesign.tutsplus.com/c/email' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all Email </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title empty-title'></div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Email Design'> <a href='https://webdesign.tutsplus.com/c/email/s/email-design' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Email Design </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Email Templates'> <a href='https://webdesign.tutsplus.com/c/email/s/email-templates' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Email Templates </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Email Marketing'> <a href='https://webdesign.tutsplus.com/c/email/s/email-marketing' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Email Marketing </span> </a> </li> </ul> <div class='global-nav__mobile-third-level-links-title '> popular software in Email </div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Campaign Monitor'> <a href='https://webdesign.tutsplus.com/c/email/compatible-with/campaign-monitor' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/campaign_monitor@2x-097a4d858a7583260178.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Campaign Monitor </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='MailChimp'> <a href='https://webdesign.tutsplus.com/c/email/compatible-with/mailchimp' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/mailchimp@2x-12ec7ec155f7365c14a0.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> MailChimp </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='UX/UI'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> UX/UI </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> UX/UI </span> <a href='https://webdesign.tutsplus.com/c/uxui' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all UX/UI </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title '>Learn UI Design</div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Forms'> <a href='https://webdesign.tutsplus.com/c/uxui/s/forms' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Forms </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Icon Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/icon-design' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Icon Design </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Navigation'> <a href='https://webdesign.tutsplus.com/c/uxui/s/navigation' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Navigation </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Prototyping'> <a href='https://webdesign.tutsplus.com/c/uxui/s/prototyping' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Prototyping </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Wireframing'> <a href='https://webdesign.tutsplus.com/c/uxui/s/wireframing' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Wireframing </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Web Typography'> <a href='https://webdesign.tutsplus.com/c/uxui/s/web-typography' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Web Typography </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Material Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/material-design' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Material Design </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Design Theory'> <a href='https://webdesign.tutsplus.com/c/uxui/s/design-theory' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Design Theory </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Design Systems'> <a href='https://webdesign.tutsplus.com/c/uxui/s/design-systems' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Design Systems </span> </a> </li> </ul> <div class='global-nav__mobile-second-level-links-title '>Learn UX Design</div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='User Research'> <a href='https://webdesign.tutsplus.com/c/uxui/s/user-research' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> User Research </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='User Testing'> <a href='https://webdesign.tutsplus.com/c/uxui/s/user-testing' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> User Testing </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Responsive Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/responsive-design' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Responsive Design </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Usability'> <a href='https://webdesign.tutsplus.com/c/uxui/s/usability' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Usability </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Accessibility'> <a href='https://webdesign.tutsplus.com/c/uxui/s/accessibility' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Accessibility </span> </a> </li> </ul> <div class='global-nav__mobile-third-level-links-title '> popular software in UX/UI </div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Sketch'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/sketch' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sketch@2x-06b2d1b0b5e67fbd7a46.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Sketch </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Figma'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/figma' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/figma@2x-9b6b6b30267a5cb7e475.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Figma </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Adobe XD'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/adobe-xd' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/xd@2x-727778ad5bc8388de2c8.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Adobe XD </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Webflow'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/webflow' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/webflow@2x-c488c71766a27a4ca131.png' loading='lazy'> <span class='global-nav__mobile-third-level-link-title'> Webflow </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='SEO'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> SEO </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> SEO </span> <a href='https://webdesign.tutsplus.com/c/seo' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all SEO </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title empty-title'></div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Content Strategy'> <a href='https://webdesign.tutsplus.com/c/seo/s/content-strategy' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Content Strategy </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Conversion'> <a href='https://webdesign.tutsplus.com/c/seo/s/conversion' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Conversion </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Performance'> <a href='https://webdesign.tutsplus.com/c/seo/s/performance' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Performance </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='eCommerce'> <a href='javascript:' class='global-nav__mobile-second-level-link' data-action='click->global-nav#toggleThirdLevelSection'> <span class='global-nav__mobile-second-level-link-title'> eCommerce </span> <span class='global-nav__mobile-second-level-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> <div class='global-nav__mobile-third-level-new'> <div class='global-nav__mobile-new'> <section class='view global-nav__mobile-open-header'> <a href='javascript:' class='mobile-action-icon mobile-back-icon' data-action='click->global-nav#toggleThirdLevelSection'> <i class='fa fa-arrow-left'></i> </a> <a href='javascript:' class='mobile-action-icon mobile-close-icon' data-action='click->global-nav#toggleThirdLevelSection global-nav#toggleSecondLevelSection global-nav#toggle'> <i class='fa fa-times'></i> </a> </section> <section class='view global-nav__mobile-third-level-heading '> <span class='global-nav__mobile-third-level-heading-title'> eCommerce </span> <a href='https://webdesign.tutsplus.com/c/ecommerce' class='global-nav__mobile-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-heading-link-text'> View all eCommerce </span> <span class='global-nav__mobile-third-level-heading-link-icon'> <i class='fa fa-angle-right'></i> </span> </a> </section> <div class='global-nav__mobile-second-level-links-title empty-title'></div> <ul class='global-nav__mobile-third-level-links'> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Shopify'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/shopify' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Shopify </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='WooCommerce'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/woocommerce' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> WooCommerce </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='BigCommerce'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/bigcommerce' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> BigCommerce </span> </a> </li> <li class='global-nav__mobile-third-level-link-item' test-nav-item-name='Magento'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/magento' class='global-nav__mobile-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-nav__mobile-third-level-link-title'> Magento </span> </a> </li> </ul> </div> </div> </li> </ul> <div class='global-nav__mobile-second-level-links-title '> popular software in Web Design </div> <ul class='global-nav__mobile-second-level-links'> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Sketch'> <a href='https://webdesign.tutsplus.com/compatible-with/sketch' class='global-nav__mobile-second-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sketch@2x-06b2d1b0b5e67fbd7a46.png' loading='lazy'> <span class='global-nav__mobile-second-level-link-title'> Sketch </span> </a> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Figma'> <a href='https://webdesign.tutsplus.com/compatible-with/figma' class='global-nav__mobile-second-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/figma@2x-9b6b6b30267a5cb7e475.png' loading='lazy'> <span class='global-nav__mobile-second-level-link-title'> Figma </span> </a> </li> <li class='global-nav__mobile-second-level-link-item' test-nav-item-name='Adobe XD'> <a href='https://webdesign.tutsplus.com/compatible-with/adobe-xd' class='global-nav__mobile-second-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-nav__mobile-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/xd@2x-727778ad5bc8388de2c8.png' loading='lazy'> <span class='global-nav__mobile-second-level-link-title'> Adobe XD </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Code'> <a href='https://code.tutsplus.com' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Code </span> </a> </li> <li class='global-nav__mobile-top-level-item' test-nav-item-name='Music'> <a href='https://music.tutsplus.com' class='global-nav__mobile-top-level-link global-nav__mobile-top-level-link-new-nav' data-action=''> <span class='global-nav__mobile-top-level-link-title'> Music </span> </a> </li> </ul> <hr class="global-nav__mobile-divider" /><ul class="global-nav-mobile__envato-links new-nav-mobile"><li class="global-nav__mobile-top-level-item"><turbo-frame id="user_mobile_session_info" loading="lazy" src="/user_mobile_session?show_greeting=false"><a data-turbo="false" class="global-nav__mobile-user-link" href="https://tutsplus.com/sign_in?redirect_to=https%3A%2F%2Fwebdesign.tutsplus.com%2Funderstanding-visual-hierarchy-in-web-design--webdesign-84a%3Futm_campaign%3Dtutsplus_social_mksk_instagram_visualvierachy%26utm_content%3Dvisual%26utm_medium%3Dsocial%26utm_source%3Dinstagram">Sign In</a></turbo-frame></li><li class="global-nav__mobile-top-level-item"><a class="global-mobile__header-item--envato-link" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://www.youtube.com/channel/UC8lxnUR_CzruT2KA6cb7p0Q">Tuts+ YouTube</a></li><li class="global-nav__mobile-top-level-item"><a class="global-mobile__header-item--envato-link" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://elements.envato.com">Envato</a></li></ul></div><div class="global-new-nav__header"><div class="global-new-nav__header-content"><div class="global-new-nav__header-top"><div class="global-new-nav__header-right"><ul class="global-new-nav__header-list"><li class="global-new-nav__header-item"><a class="global-nav__header-item--envato-link" data-action="click->ga-analytics#sendElementsClickEvent" href="https://elements.envato.com?utm_campaign=elements_tuts-header_nav&utm_medium=promos&utm_source=tutsplus">Envato</a></li><li class="global-new-nav__header-item global-new-nav__header-divider">|</li><li class="global-new-nav__header-item"><a class="global-nav__header-item--envato-link" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://www.youtube.com/channel/UC8lxnUR_CzruT2KA6cb7p0Q?utm_campaign=elements_tuts-header_nav&utm_medium=promos&utm_source=tutsplus">Tuts+ YouTube</a></li><li class="global-new-nav__header-item global-new-nav__header-divider">|</li><li class="global-new-nav__header-item"><turbo-frame id="user_session_info" loading="lazy" src="/user_session"><a data-turbo="false" class="global-new-nav__user-link" rel="nofollow" href="https://tutsplus.com/sign_in?redirect_to=https%3A%2F%2Fwebdesign.tutsplus.com%2Funderstanding-visual-hierarchy-in-web-design--webdesign-84a%3Futm_campaign%3Dtutsplus_social_mksk_instagram_visualvierachy%26utm_content%3Dvisual%26utm_medium%3Dsocial%26utm_source%3Dinstagram">Sign In</a></turbo-frame></li></ul></div></div><div class="global-new-nav__header-bottom"><ul class="global-nav__header-list" data-controller="subcategories-nav"><li class="global-nav__header-item global-nav__header-item-tuts-logo"><a class="global-nav__header-tuts-logo-link" data-action="click->global-nav#sendNewNavDataLayerEvent" href="https://tutsplus.com/"><img alt="envato-tuts+" class="global-nav__header-tuts-logo-image new-nav-mobile" src="https://static.tutsplus.com/packs/static/images/envato-tutsplus-dark-da1bf6c5a7fd83433e94.png" /></a></li> <li class='global-nav__header-item '> <a href='https://design.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Design</span> </a> </li> <li class='global-nav__header-item '> <a href='https://business.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Business</span> </a> </li> <li class='global-nav__header-item '> <a href='https://photography.tutsplus.com/photo' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Photo</span> </a> </li> <li class='global-nav__header-item '> <a href='https://photography.tutsplus.com/video' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Video</span> </a> </li> <li class='global-nav__header-item global-nav__top-level-item--expanded'> <a href='https://webdesign.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Web Design</span> </a> <div class='global-new-nav__header-second-level'> <ul class='global-nav__header-second-level-list'> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name="Software"> <div class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'>Software</span> <i class='fa fa-chevron-down'></i> </div> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Sketch'> <a href='https://webdesign.tutsplus.com/compatible-with/sketch' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sketch@2x-06b2d1b0b5e67fbd7a46.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Sketch </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Figma'> <a href='https://webdesign.tutsplus.com/compatible-with/figma' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/figma@2x-9b6b6b30267a5cb7e475.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Figma </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Adobe XD'> <a href='https://webdesign.tutsplus.com/compatible-with/adobe-xd' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/xd@2x-727778ad5bc8388de2c8.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Adobe XD </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Sublime Text'> <a href='https://webdesign.tutsplus.com/compatible-with/sublime-text' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sublime@2x-ffbddc90d1c534b42d83.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Sublime Text </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Visual Studio Code'> <a href='https://webdesign.tutsplus.com/compatible-with/visual-studio-code' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/vscode@2x-3da3dc440f7877aa3715.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Visual Studio Code </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='MailChimp'> <a href='https://webdesign.tutsplus.com/compatible-with/mailchimp' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/mailchimp@2x-12ec7ec155f7365c14a0.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> MailChimp </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Webflow'> <a href='https://webdesign.tutsplus.com/compatible-with/webflow' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/webflow@2x-c488c71766a27a4ca131.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Webflow </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Campaign Monitor'> <a href='https://webdesign.tutsplus.com/compatible-with/campaign-monitor' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/campaign_monitor@2x-097a4d858a7583260178.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Campaign Monitor </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='AI Tools'> <a href='https://webdesign.tutsplus.com/compatible-with/ai-tools' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/ai_tools@2x-829ddec496349c126fb9.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> AI Tools </span> </a> </li> </ul> </ul> </div> </div> </li> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='WordPress'> <a href='https://webdesign.tutsplus.com/c/wordpress' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> WordPress </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='WordPress CMS'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-cms' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> WordPress CMS </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='WordPress Themes'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-themes' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> WordPress Themes </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='WordPress Plugins'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-plugins' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> WordPress Plugins </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='WordPress Hosting'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/wordpress-hosting' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> WordPress Hosting </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Elementor'> <a href='https://webdesign.tutsplus.com/c/wordpress/s/elementor' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Elementor </span> </a> </li> </ul> </ul> <a href='https://webdesign.tutsplus.com/c/wordpress' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All WordPress </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </div> </div> </li> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='HTML/CSS'> <a href='https://webdesign.tutsplus.com/c/htmlcss' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> HTML/CSS </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='HTML'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/html' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> HTML </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='CSS'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/css' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> CSS </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='JavaScript for Designers'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/javascript-for-designers' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> JavaScript for Designers </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Bootstrap'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/bootstrap' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Bootstrap </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Animation'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/animation' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Animation </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='HTML Templates'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/html-templates' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> HTML Templates </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Landing Pages'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/landing-pages' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Landing Pages </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='SVG'> <a href='https://webdesign.tutsplus.com/c/htmlcss/s/svg' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> SVG </span> </a> </li> </ul> </ul> <a href='https://webdesign.tutsplus.com/c/htmlcss' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All HTML/CSS </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </div> </div> </li> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='Email'> <a href='https://webdesign.tutsplus.com/c/email' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> Email </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Email Design'> <a href='https://webdesign.tutsplus.com/c/email/s/email-design' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Email Design </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Email Templates'> <a href='https://webdesign.tutsplus.com/c/email/s/email-templates' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Email Templates </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Email Marketing'> <a href='https://webdesign.tutsplus.com/c/email/s/email-marketing' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Email Marketing </span> </a> </li> </ul> </ul> <a href='https://webdesign.tutsplus.com/c/email' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All Email </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </div> <div class='global-new-nav__header-third-level-popular-softwares'> <ul class='global-new-nav__header-third-level-links'> <li> <div class='global-new-nav__header-third-level-links-title'>popular software</div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Campaign Monitor'> <a href='https://webdesign.tutsplus.com/c/email/compatible-with/campaign-monitor' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/campaign_monitor@2x-097a4d858a7583260178.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Campaign Monitor </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='MailChimp'> <a href='https://webdesign.tutsplus.com/c/email/compatible-with/mailchimp' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/mailchimp@2x-12ec7ec155f7365c14a0.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> MailChimp </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__header-item active-category ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='UX/UI'> <a href='https://webdesign.tutsplus.com/c/uxui' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> UX/UI </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Learn UI Design </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Forms'> <a href='https://webdesign.tutsplus.com/c/uxui/s/forms' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Forms </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Icon Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/icon-design' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Icon Design </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Navigation'> <a href='https://webdesign.tutsplus.com/c/uxui/s/navigation' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Navigation </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Prototyping'> <a href='https://webdesign.tutsplus.com/c/uxui/s/prototyping' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Prototyping </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Wireframing'> <a href='https://webdesign.tutsplus.com/c/uxui/s/wireframing' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Wireframing </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Web Typography'> <a href='https://webdesign.tutsplus.com/c/uxui/s/web-typography' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Web Typography </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Material Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/material-design' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Material Design </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Design Theory'> <a href='https://webdesign.tutsplus.com/c/uxui/s/design-theory' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Design Theory </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Design Systems'> <a href='https://webdesign.tutsplus.com/c/uxui/s/design-systems' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Design Systems </span> </a> </li> <li class='global-new-nav__header-third-level-link-item'> <a href='https://webdesign.tutsplus.com/c/uxui/s/ui-design' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All UI Design </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </li> </ul> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Learn UX Design </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='User Research'> <a href='https://webdesign.tutsplus.com/c/uxui/s/user-research' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> User Research </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='User Testing'> <a href='https://webdesign.tutsplus.com/c/uxui/s/user-testing' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> User Testing </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Responsive Design'> <a href='https://webdesign.tutsplus.com/c/uxui/s/responsive-design' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Responsive Design </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Usability'> <a href='https://webdesign.tutsplus.com/c/uxui/s/usability' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Usability </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Accessibility'> <a href='https://webdesign.tutsplus.com/c/uxui/s/accessibility' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Accessibility </span> </a> </li> <li class='global-new-nav__header-third-level-link-item'> <a href='https://webdesign.tutsplus.com/c/uxui/s/ux-design' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All UX Design </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </li> </ul> </ul> </div> <div class='global-new-nav__header-third-level-popular-softwares'> <ul class='global-new-nav__header-third-level-links'> <li> <div class='global-new-nav__header-third-level-links-title'>popular software</div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Sketch'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/sketch' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/sketch@2x-06b2d1b0b5e67fbd7a46.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Sketch </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Figma'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/figma' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/figma@2x-9b6b6b30267a5cb7e475.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Figma </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Adobe XD'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/adobe-xd' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/xd@2x-727778ad5bc8388de2c8.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Adobe XD </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Webflow'> <a href='https://webdesign.tutsplus.com/c/uxui/compatible-with/webflow' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <img class='global-new-nav__header-popular-software-icon' src='https://static.tutsplus.com/packs/static/images/popular_software/webdesign/webflow@2x-c488c71766a27a4ca131.png' loading='lazy'> <span class='global-new-nav__header-third-level-link-title'> Webflow </span> </a> </li> </ul> </div> </div> </li> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='SEO'> <a href='https://webdesign.tutsplus.com/c/seo' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> SEO </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Content Strategy'> <a href='https://webdesign.tutsplus.com/c/seo/s/content-strategy' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Content Strategy </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Conversion'> <a href='https://webdesign.tutsplus.com/c/seo/s/conversion' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Conversion </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Performance'> <a href='https://webdesign.tutsplus.com/c/seo/s/performance' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Performance </span> </a> </li> </ul> </ul> <a href='https://webdesign.tutsplus.com/c/seo' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All SEO </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </div> </div> </li> <li class='global-nav__header-item ' data-action='mouseenter->subcategories-nav#show mouseleave->subcategories-nav#hide click->subcategories-nav#show' test-nav-item-name='eCommerce'> <a href='https://webdesign.tutsplus.com/c/ecommerce' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-link-text'> eCommerce </span> <i class='fa fa-chevron-down'></i> </a> <div class='global-new-nav__header-third-level'> <div class='global-new-nav__header-third-level-sub-categories'> <ul class='global-new-nav__header-third-level-links display-flex'> <ul> <li> <div class='global-new-nav__header-third-level-links-title'> Start Learning </div> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Shopify'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/shopify' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Shopify </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='WooCommerce'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/woocommerce' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> WooCommerce </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='BigCommerce'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/bigcommerce' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> BigCommerce </span> </a> </li> <li class='global-new-nav__header-third-level-link-item' test-nav-item-name='Magento'> <a href='https://webdesign.tutsplus.com/c/ecommerce/s/magento' class='global-new-nav__header-third-level-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-link-title'> Magento </span> </a> </li> </ul> </ul> <a href='https://webdesign.tutsplus.com/c/ecommerce' class='global-new-nav__header-third-level-heading-link' data-action='click->global-nav#sendNewNavDataLayerEvent'> <span class='global-new-nav__header-third-level-heading-link-text'> All eCommerce </span> <span class='global-new-nav__header-third-level-heading-link-icon'> <i class='fa fa-arrow-right'></i> </span> </a> </div> </div> </li> </ul> </div> </li> <li class='global-nav__header-item '> <a href='https://code.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Code</span> </a> </li> <li class='global-nav__header-item '> <a href='https://music.tutsplus.com' class='global-new-nav__header-link global-nav__header-link--primary' data-action='click->global-nav#sendNewNavDataLayerEvent focusin->subcategories-nav#hideAllSubCategoriesMenuWrappers'> <span>Music</span> </a> </li> </ul><div class="global-new-nav__header-right" data-controller="global-search"><form class="global-nav__search-form nonmobile" data-turbo="false" data-action="submit->global-nav#sendSearchDataLayerEvent submit->global-search#perform_search" action="https://webdesign.tutsplus.com/t/tutorials/search" accept-charset="UTF-8" method="get"><input type="text" name="search[terms]" id="search_terms" value="" placeholder="Search tutorials..." class="global-nav__search-terms search-terms-nonmobile" data-action="keydown->global-search#keydown input->global-search#auto_suggestions focus->global-search#focus_in" /> <div class="search__auto_suggestions_container " data-global-search-target="suggestionContainer" data-action="mousedown->global-search#onSuggestionContainerMousedown" > <div class="search__auto_suggestions_content"> <div class="search__auto_suggesstion_list_container"> <div class="search__auto_suggesstion_list_content"> <ul class="search__auto_suggesstion_list" role="listbox" data-global-search-target="suggestionList"> </ul> </div> </div> </div> </div><button name="button" type="submit" class="global-nav__search-button" aria-label="Search"><i class="fa fa-search"></i></button></form></div></div></div></div></nav><div class="empty-sticky-nav-background-div" style="height: 207px"></div><div class="page-content topic-webdesign " id="page-content"><main class="content" style="background-color: transparent;"><div class="content-banner"><div class="content-banner-restricted-width full_width_post"><ol class="content-banner__content-breadcrumb topic-webdesign content-banner__content-breadcrumb-with-primary-category" data-controller="breadcrumbs-component" data-analytics-context="breadcrumbs"> <li class='breadcrumbs-link-item__home-icon'> <a href="https://tutsplus.com/" > <img alt="envato-tuts+" src="https://static.tutsplus.com/packs/static/images/home-67b42eb75817c9594bed.svg" /> </a> </li> <li class='breadcrumbs-link-item__home'> <a href="https://tutsplus.com/" > Home </a> </li> <li> <a href="https://webdesign.tutsplus.com" > Web Design </a> </li> <li> <a href="https://webdesign.tutsplus.com/c/uxui" > UX/UI </a> </li> <li> <a href="https://webdesign.tutsplus.com/c/uxui/s/design-theory" > Design Theory </a> </li> </ol> <div class="content-banner__content"><div class="content-banner__body"><h1 class="content-banner__title">Understanding Visual Hierarchy in Web Design</h1><div class="content-banner__summary">Visual hierarchy is a key principle behind effective web and UX design. In this article we'll cover the theory behind it and go over basic exercises to put these principles into practice.</div></div></div></div></div><div class="content-title"></div><input type="hidden" name="registrations_post_id" id="registrations_post_id" value="webdesign-84" autocomplete="off" /><input type="hidden" name="registrations_post_languages" id="registrations_post_languages" value="en" autocomplete="off" /><input type="hidden" name="registrations_primary_category_slug" id="registrations_primary_category_slug" value="design-theory" autocomplete="off" /><article class="post article view full_width_post " data-action="count-headings@window->post-promotion-placement#checkSidebarAdDisplayCondition" data-auto-insert-signup-is-enable-value="false" data-controller="inline-toc-analytics scroll-position sticky-ad post-promotion-placement auto-insert-signup"><div class='post-on-scroll-floating-buttons-group__container' data-controller='sticky-block' data-scroll-height-definer='.post-body__content' data-sticky-block-target='stickyElement' data-sticky-bottom='true'> <a href="#page-body" class="scroll-to-target" data-controller="scroll-to-target-tracking" data-action="click->scroll-to-target-tracking#onClick" data-label="Scroll to top" data-target-selector="#page-body"> <span class="scroll-to-target__btn-label">Scroll to top</span> <i class="fa fa-chevron-down scroll-to-target__btn-icon"></i> </a> </div> <div class="post__inarticle-ad-template is-hidden" data-placement-tag="" data-promotion-placement="5"><turbo-frame id="publift_lazy_article_mid_1" loading="lazy" src="/promotions/publift_promotion?position=article_mid_1&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="post__inarticle-ad-template is-hidden" data-placement-tag="" data-promotion-placement="8"><turbo-frame id="publift_lazy_article_mid_2" loading="lazy" src="/promotions/publift_promotion?position=article_mid_2&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="post__inarticle-ad-template-mobile is-hidden" data-placement-tag="" data-promotion-placement="3"><turbo-frame id="publift_lazy_mob_article_top" loading="lazy" src="/promotions/publift_promotion?position=mob_article_top&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="post__inarticle-ad-template-mobile is-hidden" data-placement-tag="" data-promotion-placement="8"><turbo-frame id="publift_lazy_mob_article_1" loading="lazy" src="/promotions/publift_promotion?position=mob_article_1&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="post__inarticle-ad-template-mobile is-hidden" data-placement-tag="" data-promotion-placement="11"><turbo-frame id="publift_lazy_mob_article_2" loading="lazy" src="/promotions/publift_promotion?position=mob_article_2&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="layout__content-with-sidebar"><div class="content-heading"><div><div class='content-heading__author-bio-and-meta-info'> <div class='content-heading__author-bio'> <img class="content-author__image" alt="Brandon Jones" width="40px" height="40" loading="lazy" src="//www.gravatar.com/avatar/9c3395243b0d29deb905352827d745e1?s=200&d=https%3A%2F%2Fassets.tutsplus.com%2Fimages%2Fhub%2Favatar_default.png&r=PG" /> <div class='content-heading__author-name-publish-date-and-read-time'> <span class='content-heading__author-name'> <a rel="author" aria-label="Author: Brandon Jones" href="https://tutsplus.com/authors/brandon-jones">Brandon Jones</a> </span> <div class='content-heading__publish-date-and-read-time'> <time datetime="2022-11-29T08:18:00Z" title="Nov 29, 2022"> Nov 29, 2022 </time> <span class='content-heading__separator'>•</span> 7 min read </div> </div> </div> <div class="content-heading__meta-info"> <div class='content-heading__meta-info-item'> <span class="content-heading__meta-info-likes">15</span> <div class='content-heading__meta-info-likes-icon'> <img alt="" src="https://static.tutsplus.com/packs/static/images/thumbs-up-e80969147d3487ef9dc5.svg" /> </div> </div> <div class="languges-and-sharing-component"> <div class='content-heading__meta-info-language-selector' data-controller="section-header" data-menu-class="language-selector-wrapper"> <div class="language-selector-wrapper relative [&.open-popup>ul]:block"> <a class="flex text-sm px-2 items-center font-semibold text-grey-700" data-action="click->section-header#displayMenu" href="javascript:"> <div class='content-heading__meta-info-language-selector-icon'> <img alt="" src="https://static.tutsplus.com/packs/static/images/globe-aa9dbd58d8ee3a4d53a3.svg" /> </div> <span class="pr-2">English</span> <i class="fa fa-chevron-down !p-0 !text-xs" aria-hidden="true"></i> </a> <ul class="hidden right-[-2px] rounded-md bg-white absolute p-0 m-0 min-w-[150px] z-[5] shadow-md shadow-black/30 overflow-auto max-h-[400px] mt-1"> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 !text-white bg-blue-500" href="javascript:"> <i class="fa fa-check pr-2 " aria-hidden="true"></i> English </a> </li> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 " href="https://webdesign.tutsplus.com/de/understanding-visual-hierarchy-in-web-design--webdesign-84a"> <i class="fa fa-check pr-2 invisible" aria-hidden="true"></i> Deutsch </a> </li> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 " href="https://webdesign.tutsplus.com/id/understanding-visual-hierarchy-in-web-design--webdesign-84a"> <i class="fa fa-check pr-2 invisible" aria-hidden="true"></i> Bahasa Indonesia </a> </li> <li style="direction: ltr;" class="m-2 list-none min-w-[150px] whitespace-nowrap"> <a class="flex items-center text-sm px-2 py-1 block font-semibold rounded-md text-grey-700 " href="https://webdesign.tutsplus.com/es/understanding-visual-hierarchy-in-web-design--webdesign-84a"> <i class="fa fa-check pr-2 invisible" aria-hidden="true"></i> Español </a> </li> </ul> </div> </div> <div data-controller="share-icon" class='content-heading__social_share'> <div class="share-icon" > <a class="social-link facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://webdesign.tutsplus.com/understanding-visual-hierarchy-in-web-design--webdesign-84a?utm_campaign=tutsplus_social_mksk_instagram_visualvierachy&utm_content=visual&utm_medium=social&utm_source=instagram" target="_blank"> <svg class="social-icon social-icon-fb" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M7.69921 19.3126V12.956H5.73572V10.0349H7.69921V8.77635C7.69921 5.52236 9.16588 4.01445 12.3484 4.01445C12.6667 4.01445 13.1064 4.0479 13.5135 4.09649C13.8185 4.12799 14.121 4.17988 14.4191 4.25182V6.90042C14.2467 6.88429 14.0739 6.87473 13.9008 6.87175C13.7069 6.8667 13.513 6.86431 13.3191 6.86458C12.7579 6.86458 12.3198 6.94105 11.9897 7.11072C11.7677 7.22249 11.5811 7.39404 11.4508 7.60619C11.246 7.94075 11.154 8.39878 11.154 9.00178V10.0349H14.2643L13.9579 11.7101L13.7302 12.956H11.154V19.5237C15.8698 18.9518 19.5238 14.9219 19.5238 10.0349C19.5238 4.75605 15.2595 0.476074 10 0.476074C4.74048 0.476074 0.476196 4.75605 0.476196 10.0349C0.476196 14.518 3.5508 18.2794 7.69921 19.3126Z"/> </svg> </a> </div> <div class="share-icon"> <a class="social-link" href=https://www.linkedin.com/shareArticle?mini=true&url=https://webdesign.tutsplus.com/understanding-visual-hierarchy-in-web-design--webdesign-84a?utm_campaign=tutsplus_social_mksk_instagram_visualvierachy&utm_content=visual&utm_medium=social&utm_source=instagram&title=Understanding%20Visual%20Hierarchy%20in%20Web%20Design&summary=Visual%20hierarchy%20is%20a%20key%20principle%20behind%20effective%20web%20and%20UX%20design.%20In%20this%20article%20we%27ll%20cover%20the%20theory%20behind%20it%20and%20go%20over%20basic%20exercises%20to%20put%20these%20principles%20into%20practice. target="_blank"> <svg class="social-icon social-icon-linkedin" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M19.5227 19.5237H15.5809V13.3374C15.5809 11.8622 15.551 9.96378 13.5269 9.96378C11.4717 9.96378 11.1579 11.5689 11.1579 13.2285V19.5237H7.21614V6.80232H11.0026V8.53635H11.0536C11.5827 7.53659 12.8692 6.48129 14.7913 6.48129C18.7851 6.48129 19.5238 9.11399 19.5238 12.5409L19.5227 19.5237ZM2.76423 5.06163C1.49542 5.06163 0.476166 4.03299 0.476166 2.76774C0.476166 1.5036 1.49653 0.476074 2.76423 0.476074C4.0286 0.476074 5.05341 1.5036 5.05341 2.76774C5.05341 4.03299 4.02749 5.06163 2.76423 5.06163ZM4.74064 19.5237H0.787822V6.80232H4.74064V19.5237Z"/> </svg> </a> </div> <div class="share-icon"> <a class="social-link" href="https://www.pinterest.com/pin/create/button/?url=https://webdesign.tutsplus.com/understanding-visual-hierarchy-in-web-design--webdesign-84a?utm_campaign=tutsplus_social_mksk_instagram_visualvierachy&utm_content=visual&utm_medium=social&utm_source=instagram&description=Visual%20hierarchy%20is%20a%20key%20principle%20behind%20effective%20web%20and%20UX%20design.%20In%20this%20article%20we%27ll%20cover%20the%20theory%20behind%20it%20and%20go%20over%20basic%20exercises%20to%20put%20these%20principles%20into%20practice." target="_blank"> <div class="icon"> <svg class="social-icon social-icon-pinterest" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M10.014 0.476074C4.74628 0.476074 0.476257 4.7356 0.476257 9.98957C0.476257 14.0205 2.98878 17.4634 6.53719 18.8483C6.45365 18.0951 6.37886 16.9412 6.56981 16.1189C6.74405 15.3753 7.68843 11.3912 7.68843 11.3912C7.68843 11.3912 7.40281 10.8197 7.40281 9.97766C7.40281 8.65782 8.17216 7.66734 9.12768 7.66734C9.94239 7.66734 10.3354 8.27766 10.3354 9.00703C10.3354 9.82369 9.81588 11.0443 9.54617 12.1753C9.31943 13.1221 10.0235 13.8935 10.9584 13.8935C12.6514 13.8935 13.9562 12.1118 13.9562 9.53877C13.9562 7.26814 12.3149 5.67449 9.97182 5.67449C7.2588 5.67449 5.66839 7.70782 5.66839 9.80068C5.66839 10.6205 5.98186 11.5015 6.37568 11.9761C6.45445 12.0713 6.46479 12.1546 6.44331 12.2499C6.3717 12.5475 6.2102 13.2015 6.17758 13.3316C6.13541 13.5102 6.04073 13.5467 5.85854 13.4626C4.6691 12.915 3.92283 11.1785 3.92283 9.77528C3.92283 6.77846 6.10915 4.01973 10.224 4.01973C13.5322 4.01973 16.1052 6.37449 16.1052 9.51417C16.1052 12.7959 14.031 15.4364 11.1461 15.4364C10.1803 15.4364 9.27328 14.9372 8.95185 14.3419L8.35595 16.6023C8.14193 17.4316 7.55716 18.4689 7.16413 19.0991C8.05759 19.3729 8.9988 19.5237 9.98853 19.5237C15.2451 19.5237 19.5239 15.2658 19.5239 10.0102C19.5239 4.75385 15.2451 0.496709 9.98853 0.496709L10.014 0.476074Z"/> </svg> </div> </a> </div> <div class="share-icon"> <a class="social-link" href="https://x.com/intent/post?url=https://webdesign.tutsplus.com/understanding-visual-hierarchy-in-web-design--webdesign-84a?utm_campaign=tutsplus_social_mksk_instagram_visualvierachy&utm_content=visual&utm_medium=social&utm_source=instagram&text=Understanding%20Visual%20Hierarchy%20in%20Web%20Design" target="_blank"> <svg class="social-icon social-icon-x" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M15.477 0.428467H18.3977L12.0167 7.69085L19.5238 17.5713H13.6461L9.04289 11.5781L3.77464 17.5713H0.852417L7.67781 9.80318L0.476227 0.429257H6.50321L10.6643 5.90726L15.477 0.428467ZM14.4524 15.8312H16.0707L5.62385 2.07771H3.88734L14.4524 15.8312Z"/> </svg> </a> </div> <div class="share-icon"> <a class="social-link copy-button" href="javascript:void(0)" data-action="click->share-icon#copyDomain"> <svg class="social-icon social-icon-link" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M17.9817 9.46401L15.1331 12.3126C14.6442 12.8015 14.0638 13.1894 13.4251 13.454C12.7863 13.7186 12.1016 13.8548 11.4102 13.8548C10.7188 13.8548 10.0341 13.7186 9.39535 13.454C8.75657 13.1894 8.17616 12.8015 7.68728 12.3126C7.56675 12.2123 7.46847 12.0879 7.39869 11.9475C7.32892 11.8071 7.28919 11.6536 7.28204 11.497C7.27489 11.3403 7.30047 11.1839 7.35716 11.0377C7.41386 10.8915 7.50041 10.7587 7.61129 10.6478C7.72218 10.5369 7.85496 10.4504 8.00117 10.3937C8.14738 10.337 8.30381 10.3114 8.46046 10.3185C8.61711 10.3257 8.77056 10.3654 8.91099 10.4352C9.05143 10.505 9.17578 10.6033 9.2761 10.7238C9.84289 11.2847 10.6081 11.5993 11.4055 11.5993C12.2029 11.5993 12.9681 11.2847 13.5349 10.7238L16.3835 7.87518C16.9483 7.31043 17.2655 6.54446 17.2655 5.74578C17.2655 4.9471 16.9483 4.18114 16.3835 3.61638C15.8188 3.05163 15.0528 2.73436 14.2541 2.73436C13.4554 2.73436 12.6895 3.05163 12.1247 3.61638L11.2222 4.52831C11.0102 4.74025 10.7228 4.85932 10.4231 4.85932C10.1233 4.85932 9.83589 4.74025 9.62395 4.52831C9.41201 4.31638 9.29295 4.02893 9.29295 3.7292C9.29295 3.42948 9.41201 3.14203 9.62395 2.93009L10.5359 2.01816C11.5233 1.03078 12.8624 0.476074 14.2588 0.476074C15.6552 0.476074 16.9943 1.03078 17.9817 2.01816C18.9691 3.00554 19.5238 4.34472 19.5238 5.74108C19.5238 7.13745 18.9691 8.47663 17.9817 9.46401ZM8.77783 15.4715L7.87531 16.3834C7.31055 16.9481 6.54459 17.2654 5.74591 17.2654C4.94723 17.2654 4.18126 16.9481 3.61651 16.3834C3.05175 15.8186 2.73448 15.0527 2.73448 14.254C2.73448 13.4553 3.05175 12.6893 3.61651 12.1246L6.46511 9.27598C7.03189 8.71507 7.7971 8.40044 8.59451 8.40044C9.39192 8.40044 10.1571 8.71507 10.7239 9.27598C10.9402 9.45602 11.216 9.54872 11.4971 9.53588C11.7782 9.52305 12.0444 9.40562 12.2434 9.20663C12.4424 9.00764 12.5598 8.74146 12.5726 8.46034C12.5855 8.17922 12.4928 7.90345 12.3127 7.68716C11.8245 7.1971 11.2443 6.80826 10.6054 6.54295C9.96654 6.27763 9.28158 6.14105 8.58981 6.14105C7.89804 6.14105 7.21307 6.27763 6.57421 6.54295C5.93534 6.80826 5.35514 7.1971 4.86688 7.68716L2.01828 10.5358C1.0309 11.5231 0.476196 12.8623 0.476196 14.2587C0.476196 15.6551 1.0309 16.9942 2.01828 17.9816C3.00566 18.969 4.34484 19.5237 5.74121 19.5237C7.13757 19.5237 8.47675 18.969 9.46413 17.9816L10.3761 17.0697C10.588 16.8577 10.7071 16.5703 10.7071 16.2706C10.7071 15.9708 10.588 15.6834 10.3761 15.4715C10.1641 15.2595 9.87667 15.1405 9.57695 15.1405C9.27722 15.1405 8.98977 15.2595 8.77783 15.4715Z"/> </svg> </a> <div id="toast">Copied to clipboard!</div> </div> </div> </div> </div> </div> </div><div class="content-heading__secondary"> <div class="content-heading__secondary-categories"> <a href="https://webdesign.tutsplus.com/c/uxui"> <span class="content-heading__secondary-categories-tag"> UX/UI </span> </a> <a href="https://webdesign.tutsplus.com/c/uxui/s/design-theory"> <span class="content-heading__secondary-categories-tag"> Design Theory </span> </a> </div> </div></div><div class="post-body view" data-controller="post-body animate-hash-anchors image-gallery" data-post-title="Understanding Visual Hierarchy in Web Design"><div class="post-body__series-navigation"><div class="post-body__series-navigation-description">This post is part of a series called <a href="https://webdesign.tutsplus.com/series/web-design-theory--webdesign-2002">Web Design Theory</a>.</div><div class="post-body__series-navigation-item"><a class="post-body__series-navigation-next-link" href="https://webdesign.tutsplus.com/designing-for-the-new-fold-web-design-post-monitorism--webdesign-1891a">Designing for the New Fold: Web Design Post Monitorism</a></div></div><div class="post-body__body"><div class="post-body__content"><style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#iqx67{background-color:rgb(243, 245, 246);}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="i6bk"><p>Visual hierarchy in web design is one of the most important principles behind effective websites. Developing a visual hierarchy in design is crucial for a successful user experience. In this article we’ll cover the theory behind it and go over basic exercises to put these principles into practice.</p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iogt"> <h2 id="toc-vdq8-design-as-a-communication-tool">Design as a Communication Tool</h2> <p>At its core, design is all about visual communication. An effective design clearly communicates ideas to viewers.</p> <p>According to data gathered by <a href="https://blog.hubspot.com/marketing/web-design-stats-for-2020" target="_self">Hubspot</a> in 2022, <strong>84.6% of web designers find crowded web design</strong> a common mistake made by small businesses. Most people are inherently visual thinkers, not data processors. If you give them a massive block of information, chances are most people won’t bother to read it. </p> <p>Visual hierarchy in web design is all about communicating visual information. It’s about understanding that people will see our designs in terms of relationships is crucial to becoming a more effective designer.</p> <figure class="post_image"><a href="https://elements.envato.com/belton-minimal-html5-black-white-multipurpose-MXFV3Y" data-action="click->ga-analytics#sendElementsClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2777/posts/3396/image-upload/Belton_Minimal_HTML5_Black_White_Multipurpose.jpg" alt="Belton – Minimal HTML5 Black & White Multipurpose" loading="lazy" width="870px" height="584px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2777/posts/3396/image-upload/Belton_Minimal_HTML5_Black_White_Multipurpose.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2777/posts/3396/image-upload/Belton_Minimal_HTML5_Black_White_Multipurpose.jpg" alt="Belton – Minimal HTML5 Black & White Multipurpose" loading="lazy" width="650px" height="438px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2777/posts/3396/image-upload/Belton_Minimal_HTML5_Black_White_Multipurpose.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2777/posts/3396/image-upload/Belton_Minimal_HTML5_Black_White_Multipurpose.jpg" alt="Belton – Minimal HTML5 Black & White Multipurpose" loading="lazy" width="380px" height="259px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2777/posts/3396/image-upload/Belton_Minimal_HTML5_Black_White_Multipurpose.jpg 2x"></a></figure> <p>Images, colors, and videos are the some visual elements that help communicate values and messages on a website. When adding those to our design, we can play with differences in <strong>scale</strong> to suggest that one object is closer to us than another or that one is more dominant than the other.</p> <p>Variations in <strong>color</strong> might also suggest that one object holds a unique personality that sets it apart from the other object. A lot of information can be delivered in just a single image by using some very rudimentary tools.</p> <p>As web designers, our task is to break down that raw information into delicious little chunks of visually relevant information. Information must be easy on the eyes, and more importantly, effective at communicating the message behind a webpage.</p> <p>Let’s dive in to learn more about visual hierarchy in web design! </p> </div><div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="iqx67"><div class="full-width-section__content-container div-container"><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i4kvm"> <h2 id="toc-8qh9-what-is-visual-hierarchy">What is Visual Hierarchy?</h2> <blockquote> <p>Visual hierarchy is the principle of arranging elements to show their order of importance.</p> </blockquote> <p>We’ll start by understanding design principles on hierarchy. As explained by the <a href="https://www.interaction-design.org/literature/topics/visual-hierarchy#:~:text=Visual%20hierarchy%20is%20the%20principle,guide%20them%20to%20desired%20actions." target="_self">Interaction Design Foundation</a>, structuring visual characteristics is a way of controlling the delivery of the user’s experience.</p> <p>Hierarchy is also a visual design principle that follows the way our brains categorizes information. It’s in our inherent nature as humans to group similar visual elements to organize them into meaningful patterns.</p> <div class="callout-block"> <span class="callout-icon callout-info"></span> <div class="callout-message">Information organized with a hierarchy in mind will always be more effective at communicating.</div> </div> <p>For example, let’s look at the following image of two text blocks:</p> <figure><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2777/posts/3396/image-upload/text_visual_hierarchy_envato_tuts.jpg" alt="visual hierarchy in web design" loading="lazy" width="870px" height="497px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2777/posts/3396/image-upload/text_visual_hierarchy_envato_tuts.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2777/posts/3396/image-upload/text_visual_hierarchy_envato_tuts.jpg" alt="visual hierarchy in web design" loading="lazy" width="650px" height="374px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2777/posts/3396/image-upload/text_visual_hierarchy_envato_tuts.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2777/posts/3396/image-upload/text_visual_hierarchy_envato_tuts.jpg" alt="visual hierarchy in web design" loading="lazy" width="380px" height="222px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2777/posts/3396/image-upload/text_visual_hierarchy_envato_tuts.jpg 2x"></figure> <p>This is the most rudimentary form of a visual hierarchy system applied to text. Each example has the exact amount of information. The difference is in how the structure has been broken up dramatically.</p> <p><strong>Proximity</strong>, <strong>scale</strong>, and <strong>similarity</strong> of the text formatting allows a reader to organize the lower example into titles and paragraphs. This hierarchy gives the titles more meaning than the other information, and makes it easier to scan.</p> <p>We’ve got some <a href="https://www.designrush.com/agency/website-design-development/trends/web-design-best-practices" target="_blank" rel="noopener">design principles</a> on hierarchy down, so it’s time to take a dive into some deeper examples.</p> </div></div></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i3mx2"> <h2 id="toc-gjvv-a-visual-toolbox-for-designers">A Visual Toolbox For Designers</h2> <p>Understanding visual hierarchy in design is key to design successful UI and UX proposal. Let’s go over some basic tools you can should consider when designing for web.</p> </div><div data-content-block-type="TableOfContents" class="content-block content-block-tableofcontents" id="isdz"> <div data-content-block-type="ContentTextBlock" class="content-block content-block-contenttextblock">Jump to content in this section</div> <ul class="visual-toc-list toc-ordered-list visual-toc__regular-theme div-container visual-toc-list__overflow visual-toc-list__unequal-split" start="0"> <li class="toc-item-title"><a href="#toc-82kl-size"><span class="visual-toc__heading-title content-container">Size</span></a></li> <li class="toc-item-title"><a href="#toc-e9ya-color"><span class="visual-toc__heading-title content-container">Color</span></a></li> <li class="toc-item-title"><a href="#toc-yfrp-contrast"><span class="visual-toc__heading-title content-container">Contrast</span></a></li> <li class="toc-item-title"><a href="#toc-rd5r-alignment"><span class="visual-toc__heading-title content-container">Alignment</span></a></li> <li class="toc-item-title"><a href="#toc-1stx-repetition"><span class="visual-toc__heading-title content-container">Repetition</span></a></li> <li class="toc-item-title"><a href="#toc-3gu6-proximity"><span class="visual-toc__heading-title content-container">Proximity</span></a></li> <li class="toc-item-title"><a href="#toc-1g0f-density-and-whitespace"><span class="visual-toc__heading-title content-container">Density and Whitespace</span></a></li> <li class="toc-item-title"><a href="#toc-55q3-style-and-texture"><span class="visual-toc__heading-title content-container">Style and Texture</span></a></li> </ul> </div><div data-content-block-type="Wysi" id="iwd9" class="content-block-wysi content-block"> <h3 id="toc-82kl-size">Size</h3> <div class="callout-block"> <span class="callout-icon callout-info"></span> <div class="callout-message">Objects that are bigger demand more attention. </div> </div> <p>Using size as a hierarchal tool is an effective way of guiding a viewer’s eye to a particular portion of the page. The biggest elements should be the most important in most cases; the smallest elements should be the least important.</p> <figure class="post_image"><a href="https://elements.envato.com/hintio-coming-soon-landing-page-template-P829Z9J" data-action="click->ga-analytics#sendElementsClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2777/posts/3396/image-upload/Hintio_Coming_Soon_Landing_Page_Template.jpg" alt="Hintio - Coming Soon & Landing Page Template" loading="lazy" width="870px" height="515px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2777/posts/3396/image-upload/Hintio_Coming_Soon_Landing_Page_Template.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2777/posts/3396/image-upload/Hintio_Coming_Soon_Landing_Page_Template.jpg" alt="Hintio - Coming Soon & Landing Page Template" loading="lazy" width="650px" height="387px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2777/posts/3396/image-upload/Hintio_Coming_Soon_Landing_Page_Template.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2777/posts/3396/image-upload/Hintio_Coming_Soon_Landing_Page_Template.jpg" alt="Hintio - Coming Soon & Landing Page Template" loading="lazy" width="380px" height="230px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2777/posts/3396/image-upload/Hintio_Coming_Soon_Landing_Page_Template.jpg 2x"></a></figure> <p>For example, the use of <strong>BIG, bold type</strong> adds a level of order to this design. The eye should naturally move from big elements down to the smaller elements.</p> <h3 id="toc-e9ya-color">Color</h3> <p>Color can function as both an organizational tool as well as a personality tool. Bold, contrasting colors on a particular element of a website will demand attention. It can be used to highlight and contrast buttons, error messages or hyperlinks.</p> <p>Color can affect everything from a websites brand (ie. CocaCola Red) to symbolism (ie. cool, subdued colors). Advanced applications of color can even be used to classify information within a hierarchy.</p> <figure class="post_image"><a href="https://elements.envato.com/ecoshop-multipurpose-ecommerce-html5-template-DBTMXN" data-action="click->ga-analytics#sendElementsClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2777/posts/3396/image-upload/ECOSHOP_Multipurpose_eCommerce_HTML5_Template.jpg" alt="Use color to highlight sections or as a background to emphasise elements. " loading="lazy" width="870px" height="984px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2777/posts/3396/image-upload/ECOSHOP_Multipurpose_eCommerce_HTML5_Template.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2777/posts/3396/image-upload/ECOSHOP_Multipurpose_eCommerce_HTML5_Template.jpg" alt="Use color to highlight sections or as a background to emphasise elements. " loading="lazy" width="650px" height="734px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2777/posts/3396/image-upload/ECOSHOP_Multipurpose_eCommerce_HTML5_Template.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2777/posts/3396/image-upload/ECOSHOP_Multipurpose_eCommerce_HTML5_Template.jpg" alt="Use color to highlight sections or as a background to emphasise elements. " loading="lazy" width="380px" height="428px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2777/posts/3396/image-upload/ECOSHOP_Multipurpose_eCommerce_HTML5_Template.jpg 2x"></a></figure> <p>This site uses the band’s color to highlight selected areas and as background for images. This way it’s easy to find a particular type of information based on the color key.</p> <h3 id="toc-yfrp-contrast">Contrast</h3> <p>Shifts in text-size or color will show that something is different or requires attention. Changing from a light background color to a dark background color can quickly separate the core content of a page from the footer.</p> <figure class="post_image"><a href="https://elements.envato.com/denzel-onepage-personal-html-template-3GRDEPB" data-action="click->ga-analytics#sendElementsClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2777/posts/3396/image-upload/Denzel_Onepage_Personal_HTML_Template.jpg" alt="Create good contrast between different sections of your web design." loading="lazy" width="870px" height="588px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2777/posts/3396/image-upload/Denzel_Onepage_Personal_HTML_Template.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2777/posts/3396/image-upload/Denzel_Onepage_Personal_HTML_Template.jpg" alt="Create good contrast between different sections of your web design." loading="lazy" width="650px" height="441px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2777/posts/3396/image-upload/Denzel_Onepage_Personal_HTML_Template.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2777/posts/3396/image-upload/Denzel_Onepage_Personal_HTML_Template.jpg" alt="Create good contrast between different sections of your web design." loading="lazy" width="380px" height="261px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2777/posts/3396/image-upload/Denzel_Onepage_Personal_HTML_Template.jpg 2x"></a></figure> <p>The contrast between the dark image for the fold and the white background to show more information when scrolling down creates a distinct hierarchy of information.</p> <h3 id="toc-rd5r-alignment">Alignment</h3> <p>Alignment creates order between elements. It can be as simple as the difference between a "content column" and a "sidebar column". It’s key to add some information hierarchy for all elements on screen.</p> <p>Alignment can also take on more complex hierarchical roles. Consider, for instance, the power of information placed in the top-right of an eCommerce website. Users usually expect to see profiles, accounts, shopping carts, etc.</p> <figure class="post_image"><a href="https://elements.envato.com/e-commerce-landing-page-template-A5BGWGF" data-action="click->ga-analytics#sendElementsClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2777/posts/3396/image-upload/E_commerce_Landing_Page_Template.jpg" alt="Align basic information at the top-right of an eCommerce website." loading="lazy" width="870px" height="587px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2777/posts/3396/image-upload/E_commerce_Landing_Page_Template.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2777/posts/3396/image-upload/E_commerce_Landing_Page_Template.jpg" alt="Align basic information at the top-right of an eCommerce website." loading="lazy" width="650px" height="440px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2777/posts/3396/image-upload/E_commerce_Landing_Page_Template.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2777/posts/3396/image-upload/E_commerce_Landing_Page_Template.jpg" alt="Align basic information at the top-right of an eCommerce website." loading="lazy" width="380px" height="260px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2777/posts/3396/image-upload/E_commerce_Landing_Page_Template.jpg 2x"></a></figure> <h3 id="toc-1stx-repetition">Repetition</h3> <p>Repetition assigns relative meaning to elements. If all "paragraph" text is grey, when users see a new block of grey text, they can assume it’s another basic paragraph. When the users encounter a blue link or a black title, they can safely assume it is different from the grey text.</p> <figure class="post_image"><a href="https://elements.envato.com/o-brand-ecommerce-figma-template-S92JN2W" data-action="click->ga-analytics#sendElementsClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2777/posts/3396/image-upload/O_Brand_Ecommerce_Figma_Template.jpg" alt="This site creates repetitive elements like paragraph text, then breaks the repetition when it wants to draw attention." loading="lazy" width="870px" height="860px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2777/posts/3396/image-upload/O_Brand_Ecommerce_Figma_Template.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2777/posts/3396/image-upload/O_Brand_Ecommerce_Figma_Template.jpg" alt="This site creates repetitive elements like paragraph text, then breaks the repetition when it wants to draw attention." loading="lazy" width="650px" height="643px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2777/posts/3396/image-upload/O_Brand_Ecommerce_Figma_Template.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2777/posts/3396/image-upload/O_Brand_Ecommerce_Figma_Template.jpg" alt="This site creates repetitive elements like paragraph text, then breaks the repetition when it wants to draw attention." loading="lazy" width="380px" height="376px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2777/posts/3396/image-upload/O_Brand_Ecommerce_Figma_Template.jpg 2x"></a></figure> <p>This site creates repetitive elements like paragraph text, then breaks the repetition to divide information into different categories.</p> <h3 id="toc-3gu6-proximity">Proximity</h3> <p>Proximity separates elements from each other and creates sub-hierarchies. Within a page there might be widgets that are separated from each other by space. At the same time, those widgets show a new information hierarchy: title, subtitle, and content.</p> <figure class="post_image"><a href="https://elements.envato.com/balzac-a-creative-html5-template-for-agencies-Q2LV3X" data-action="click->ga-analytics#sendElementsClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2777/posts/3396/image-upload/Balzac_A_Creative_HTML5_Template_for_Agencies.jpg" alt="This is a good example of proximity. " loading="lazy" width="870px" height="542px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2777/posts/3396/image-upload/Balzac_A_Creative_HTML5_Template_for_Agencies.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2777/posts/3396/image-upload/Balzac_A_Creative_HTML5_Template_for_Agencies.jpg" alt="This is a good example of proximity. " loading="lazy" width="650px" height="407px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2777/posts/3396/image-upload/Balzac_A_Creative_HTML5_Template_for_Agencies.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2777/posts/3396/image-upload/Balzac_A_Creative_HTML5_Template_for_Agencies.jpg" alt="This is a good example of proximity. " loading="lazy" width="380px" height="241px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2777/posts/3396/image-upload/Balzac_A_Creative_HTML5_Template_for_Agencies.jpg 2x"></a></figure> <p>Proximity is also the quickest way to associate similar content. </p> <h3 id="toc-1g0f-density-and-whitespace">Density and Whitespace</h3> <p>Densely packing elements into a space makes it feel "heavy" and cluttered. When elements are spaced out too much, they may lose the relationships to one another. When a page is designed just right, the eye will easily recognize when elements are related and when they aren’t.</p> <figure class="post_image"><a href="https://elements.envato.com/exist-wonderful-fashion-html-template-STL66L" data-action="click->ga-analytics#sendElementsClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2777/posts/3396/image-upload/Exist_Wonderful_Fashion_HTML_Template.jpg" alt="A good example on how to play with density and whitespace. " loading="lazy" width="870px" height="497px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2777/posts/3396/image-upload/Exist_Wonderful_Fashion_HTML_Template.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2777/posts/3396/image-upload/Exist_Wonderful_Fashion_HTML_Template.jpg" alt="A good example on how to play with density and whitespace. " loading="lazy" width="650px" height="374px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2777/posts/3396/image-upload/Exist_Wonderful_Fashion_HTML_Template.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2777/posts/3396/image-upload/Exist_Wonderful_Fashion_HTML_Template.jpg" alt="A good example on how to play with density and whitespace. " loading="lazy" width="380px" height="222px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2777/posts/3396/image-upload/Exist_Wonderful_Fashion_HTML_Template.jpg 2x"></a></figure> <p>By spacing elements out and keeping plenty of whitespace on the page, design makes it easier for users to roam around.</p> <h3 id="toc-55q3-style-and-texture">Style and Texture</h3> <p>Style can be used to impart a form of hierarchy that both embraces and transcends the other tools. For instance, a flat gray background will <em>feel</em> different than a colorful and textured background. Style influences how different visual relationships are made.</p> <figure class="post_image"><a href="https://elements.envato.com/e-commerce-hero-header-image-M4XVK9J" data-action="click->ga-analytics#sendElementsClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2777/posts/3396/image-upload/E_commerce_Hero_Header_Image.jpg" alt="This web design shows a subtle yet smart use of style and texture." loading="lazy" width="870px" height="530px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2777/posts/3396/image-upload/E_commerce_Hero_Header_Image.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2777/posts/3396/image-upload/E_commerce_Hero_Header_Image.jpg" alt="This web design shows a subtle yet smart use of style and texture." loading="lazy" width="650px" height="398px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2777/posts/3396/image-upload/E_commerce_Hero_Header_Image.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2777/posts/3396/image-upload/E_commerce_Hero_Header_Image.jpg" alt="This web design shows a subtle yet smart use of style and texture." loading="lazy" width="380px" height="236px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2777/posts/3396/image-upload/E_commerce_Hero_Header_Image.jpg 2x"></a></figure> <p>It’s worth mentioning that style is also one of the most dangerous tools that a designer can use. It can easily mislead people by over-emphasizing certain elements through style. Be considerate of the impact on an overall design when you choose to add extra style and polish to an element.</p> <h2 id="toc-cmmg-a-quick-exercise-to-test-visual-hierarchy">A Quick Exercise to Test Visual Hierarchy</h2> <p>To conclude, I’d like to end with a very simple exercise. Use a website that you visit frequently, or a project that you’re working on. The exercise goes like this:</p> <ol> <li>List the key information points that visitors are likely seeking.</li> <li>Assign values (1-10) according to their importance to the average visitor.</li> <li>Now, look at the actual design again.</li> <li>Assign values (1-10) according to the <em>actual</em> visual importance as you see it in the live design.</li> <li>Ask yourself: Does the expected importance match up with the actual designed importance?</li> </ol> <p>Try out this quick exercise and then adjust the areas that got a bit of room for improvement. This will help you create functional and visually appealing navigation experiences for the users you’re designing for. </p> <h2 id="toc-fk8f-conclusion"><span>Conclusion</span></h2> <p>It’s a wrap! Now you know the importance of understanding visual hierarchy in design and trying to interpret it is a way to improve the way you see web design. It’s an open window to see UI and UX design in a whole new light. Hopefully this tutorial helps inform your own work as well!</p> <h2 id="toc-vliz-learn-more-design-principles-with-tuts">Learn More Design Principles With Tuts+</h2> <p>Keep learning about the latest in design theory. Check out our free courses covering design principles that could definitely be applied to web and UX design: </p> <ul class="roundup-block__contents posts--half-width roundup-block--list"> <li class="roundup-block__content"><a class="roundup-block__content-link" href="https://design.tutsplus.com/articles/the-principles-of-design--cms-33962"><div class="roundup-block__content-container"> <div class="roundup-block__preview"> <img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2796/posts/33962/preview_image/Principles_of_Design.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2796/posts/33962/preview_image/Principles_of_Design.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2796/posts/33962/preview_image/Principles_of_Design.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2796/posts/33962/preview_image/Principles_of_Design.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2796/posts/33962/preview_image/Principles_of_Design.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2796/posts/33962/preview_image/Principles_of_Design.jpg 2x"> </div> <div class="roundup-block__content-meta"> <div class="roundup-block__content-title">The principles of design</div> <div class="roundup-block__author-info"> <div class="roundup-block__author-profile-image"> <img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2056/profiles/20573/profileImage/Screenshot-2021-06-02-at-11.16.08.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2056/profiles/20573/profileImage/Screenshot-2021-06-02-at-11.16.08.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2056/profiles/20573/profileImage/Screenshot-2021-06-02-at-11.16.08.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2056/profiles/20573/profileImage/Screenshot-2021-06-02-at-11.16.08.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2056/profiles/20573/profileImage/Screenshot-2021-06-02-at-11.16.08.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2056/profiles/20573/profileImage/Screenshot-2021-06-02-at-11.16.08.jpg 2x"> </div> <div class="roundup-block__author-meta"> <div class="roundup-block__author-name">Laura Keung</div> <div class="roundup-block__published-date">04 Sep 2024</div> </div> </div> </div> </div></a></li> <li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/courses/introduction-to-design-systems"><div class="roundup-block__content-container"> <div class="roundup-block__preview"> <img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/71/courses/1339/preview_image/introduction-to-design-systems-400x277.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/71/courses/1339/preview_image/introduction-to-design-systems-400x277.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/71/courses/1339/preview_image/introduction-to-design-systems-400x277.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/71/courses/1339/preview_image/introduction-to-design-systems-400x277.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/71/courses/1339/preview_image/introduction-to-design-systems-400x277.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/71/courses/1339/preview_image/introduction-to-design-systems-400x277.png 2x"> </div> <div class="roundup-block__content-meta"> <div class="roundup-block__content-title">Introduction to Design Systems</div> <div class="roundup-block__author-info"> <div class="roundup-block__author-profile-image"> <img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/265/profileImage/adi.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/265/profileImage/adi.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/265/profileImage/adi.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/265/profileImage/adi.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/265/profileImage/adi.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/265/profileImage/adi.jpg 2x"> </div> <div class="roundup-block__author-meta"> <div class="roundup-block__author-name">Adi Purdila</div> <div class="roundup-block__published-date">21 Apr 2020</div> </div> </div> </div> </div></a></li> <li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/web-design-for-beginners-epic-free-course--cms-41118"><div class="roundup-block__content-container"> <div class="roundup-block__preview"> <img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2796/posts/41118/preview_image/Web.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2796/posts/41118/preview_image/Web.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2796/posts/41118/preview_image/Web.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2796/posts/41118/preview_image/Web.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2796/posts/41118/preview_image/Web.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2796/posts/41118/preview_image/Web.jpg 2x"> </div> <div class="roundup-block__content-meta"> <div class="roundup-block__content-title">Web Design for Beginners (Epic Free Course!)</div> <div class="roundup-block__author-info"> <div class="roundup-block__author-profile-image"> <img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/265/profileImage/adi.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/265/profileImage/adi.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/265/profileImage/adi.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/265/profileImage/adi.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/265/profileImage/adi.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/265/profileImage/adi.jpg 2x"> </div> <div class="roundup-block__author-meta"> <div class="roundup-block__author-name">Adi Purdila</div> <div class="roundup-block__published-date">25 Apr 2023</div> </div> </div> </div> </div></a></li> <li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/what-is-the-neubrutalism-web-design-trend--cms-41576"><div class="roundup-block__content-container"> <div class="roundup-block__preview"> <img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/41576/preview_image/neubrutalism.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/41576/preview_image/neubrutalism.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/41576/preview_image/neubrutalism.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/41576/preview_image/neubrutalism.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/41576/preview_image/neubrutalism.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/41576/preview_image/neubrutalism.png 2x"> </div> <div class="roundup-block__content-meta"> <div class="roundup-block__content-title">What is the Neubrutalism Web Design Trend?</div> <div class="roundup-block__author-info"> <div class="roundup-block__author-profile-image"> <img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg 2x"> </div> <div class="roundup-block__author-meta"> <div class="roundup-block__author-name">Hermione Wright</div> <div class="roundup-block__published-date">11 Oct 2023</div> </div> </div> </div> </div></a></li> </ul> </div></div></div></div><div class="post__article-ad-mobile"><turbo-frame id="publift_lazy_mob_article_3" loading="lazy" src="/promotions/publift_promotion?position=mob_article_3&variation=in-article"><div class="avert fuse-ad avert--in-article"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><div class="content-heading content-heading__mobile"><div class="content-heading__secondary"> <div class="content-heading__secondary-categories"> <a href="https://webdesign.tutsplus.com/c/uxui"> <span class="content-heading__secondary-categories-tag"> UX/UI </span> </a> <a href="https://webdesign.tutsplus.com/c/uxui/s/design-theory"> <span class="content-heading__secondary-categories-tag"> Design Theory </span> </a> </div> </div></div> <div class='content-footer'> <div class='content-footer__content-meta-details'> <div class='content-footer__author-details'> <img class="content-footer__author-image" alt="Brandon Jones" width="64px" height="64" loading="lazy" src="//www.gravatar.com/avatar/9c3395243b0d29deb905352827d745e1?s=200&d=https%3A%2F%2Fassets.tutsplus.com%2Fimages%2Fhub%2Favatar_default.png&r=PG" /> <span>By</span> <span class='content-footer__author-name'> <a rel="author" aria-label="Author: Brandon Jones" href="https://tutsplus.com/authors/brandon-jones">Brandon Jones</a> </span> </div> <div class='content-footer__additional-details'> <div class='content-footer__feedback-buttons-group' data-controller="post-vote" data-id=3396> <a class='content-footer__feedback-like-button' data-post-vote-target='likeButton' data-action='click->post-vote#like'> <span>Like</span> <div class='content-footer__feedback-icon-placeholder' data-post-vote-target='likeIcon'> <img alt="" src="https://static.tutsplus.com/packs/static/images/thumbs-up-e80969147d3487ef9dc5.svg" /> <img alt="" src="https://static.tutsplus.com/packs/static/images/thumbs-up-highlight-13174f0b8cbe2b523c3b.svg" /> </div> </a> <a class='content-footer__feedback-dislike-button' data-post-vote-target='dislikeButton' data-action='click->post-vote#dislike'> <div class='content-footer__feedback-icon-placeholder' data-post-vote-target='dislikeIcon'> <img alt="" src="https://static.tutsplus.com/packs/static/images/thumbs-down-401ae0d4ead12668516b.svg" /> <img alt="" src="https://static.tutsplus.com/packs/static/images/thumbs-down-highlight-1022d39c6062c9267b1d.svg" /> </div> </a> <input type="hidden" name="authenticity_token" id="authenticity_token" value="smjeH7W5QGvtJi3ZMHhsqTuGqfnfqNw19-5DgVeIMS0anlU1GLl8az_APA_F6fL3H5ORXhpzx_-KoUy5hbzqEA" data-post-vote-target="token" autocomplete="off" /> </div> </div> </div> </div> </div></article></main><div class="market-highlight market-highlight--padded-bottom" data-analytics-context-detail="market highlight"> <div class="market-highlight__heading"> <div class="market-highlight__intro"> Looking for something to help kick start your next project? </div> <div class="market-highlight__title"> <a href="https://themeforest.net?ec_unit=market_highlight">Envato Market</a> has a range of items for sale to help get you started. </div> </div> <div class="market-highlight__cards"><div class="market-highlight__card"><a href="https://themeforest.net/category/wordpress?ec_unit=market_highlight"><img alt="" class="market-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/market/webdesign/wordpress-1b58877900e4f863b0ce.png" /><div class="market-highlight__card-content"><div class="market-highlight__card-title">WordPress Themes</div><div class="market-highlight__card-description">From $13</div></div></a></div><div class="market-highlight__card"><a href="https://themeforest.net/category/ecommerce/magento?ec_unit=market_highlight"><img alt="" class="market-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/market/webdesign/magento-30a04dcdf1bc1e645378.png" /><div class="market-highlight__card-content"><div class="market-highlight__card-title">Magento Themes</div><div class="market-highlight__card-description">From $17</div></div></a></div><div class="market-highlight__card"><a href="https://themeforest.net/category/ecommerce?ec_unit=market_highlight"><img alt="" class="market-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/market/webdesign/ecommerce-e05c1aa8ac1080dec2d5.png" /><div class="market-highlight__card-content"><div class="market-highlight__card-title">ECommerce Websites</div><div class="market-highlight__card-description">From $16</div></div></a></div><div class="market-highlight__card"><a href="https://codecanyon.net/category/html5?ec_unit=market_highlight"><img alt="" class="market-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/market/webdesign/html5-3ea42fd6c6271f9fa2c6.png" /><div class="market-highlight__card-content"><div class="market-highlight__card-title">HTML5 Templates</div><div class="market-highlight__card-description">From $4</div></div></a></div></div> </div> </div><div class="cta-toast-popup" data-analytics-context-detail="cta toast"><turbo-frame id="cta_toast_popup" src="/cta_toast"></turbo-frame></div><div class="ecosystem-highlight" data-analytics-context-detail="ecosystem highlight"><div class="ecosystem-highlight__cards"><div class="ecosystem-highlight__card"><a data-action="click->ga-analytics#sendElementsClickEvent" href="https://elements.envato.com?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&utm_source=tutsplus"><img alt="" class="ecosystem-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/ecosystem/Elements-9c6156923682e0ca754a.png" /><div class="ecosystem-highlight__card-content"><div class="ecosystem-highlight__card-title">Unlimited Downloads<br />From $16.50/month</div><div class="ecosystem-highlight__card-description">Get access to over one million creative assets on Envato.</div></div></a></div><div class="ecosystem-highlight__card"><a data-action="click->ga-analytics#sendMarketClickEvent" href="https://themeforest.net?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&utm_source=tutsplus"><img alt="" class="ecosystem-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/ecosystem/Market-b1c3dbb6b2a34956edf4.png" /><div class="ecosystem-highlight__card-content"><div class="ecosystem-highlight__card-title"> Over 9 Million Digital Assets</div><div class="ecosystem-highlight__card-description"> Everything you need for your next creative project.</div></div></a></div><div class="ecosystem-highlight__card"><a data-action="click->ga-analytics#sendPlaceitClickEvent" href="https://placeit.net?ec_unit=ecosystem_highlight&utm_campaign=placeit_mkt-footer&utm_content=tuts_global-footer&utm_medium=promos&utm_source=tutsplus.com"><img alt="" class="ecosystem-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/ecosystem/Placeit-2bfac81aff196db3c276.png" /><div class="ecosystem-highlight__card-content"><div class="ecosystem-highlight__card-title"> Create Beautiful Logos, Designs <br> & Mockups in Seconds</div><div class="ecosystem-highlight__card-description"> Design like a professional without Photoshop.</div></div></a></div><div class="ecosystem-highlight__card"><a href="https://community.envato.com?ec_unit=ecosystem_highlight&utm_campaign=elements_tuts-ecosystem-promo_&utm_medium=promos&utm_source=tutsplus"><img alt="" class="ecosystem-highlight__card-image" loading="lazy" src="https://static.tutsplus.com/packs/static/images/ecosystem/Community-4973bc700aa03754d91c.png" /><div class="ecosystem-highlight__card-content"><div class="ecosystem-highlight__card-title"> Join the Community</div><div class="ecosystem-highlight__card-description"> Share ideas. Host meetups. Lead discussions. Collaborate.</div></div></a></div></div></div><footer class="page-footer view" data-analytics-context="footer" data-controller="page-footer"><div class="page-footer__content"><div class="page-footer__links-column"><div class="page-footer__section page-footer__section--first"><div class="page-footer__heading">Envato Tuts+</div><a class="page-footer__links-column-expansion-link" data-action="click->page-footer#toggleFooterSection" href="javascript:void(0);"><span class="page-footer__links-column-expansion-link-expand-text"><i class="fa fa-plus page-footer__links-column-link-icon"></i></span><span class="page-footer__links-column-expansion-link-collapse-text"><i class="fa fa-minus page-footer__links-column-link-icon"></i></span></a><div class="page-footer__item"><a class="page-footer__link" href="https://tutsplus.com/about">About Envato Tuts+</a></div><div class="page-footer__item"><a class="page-footer__link" href="https://tutsplus.com/terms-of-use">Terms of Use</a></div><div class="page-footer__item"><a target="_blank" class="page-footer__link" href="https://www.envato.com/privacy">Privacy</a></div><div class="page-footer__item"><a target="_blank" class="page-footer__link" href="https://www.envato.com/cookies/">Cookies</a></div><div class="page-footer__item"><a class="page-footer__link" data-action="click->page-footer#openCookieSettings" href="javascript:void(0);">Cookie Settings</a></div><div class="page-footer__item"><a target="_blank" class="page-footer__link" href="https://www.envato.com/privacy/#my-personal-information">Do not sell or share my personal information</a></div></div></div><div class="page-footer__links-column"><div class="page-footer__section page-footer__section--first"><div class="page-footer__heading">Help</div><a class="page-footer__links-column-expansion-link" data-action="click->page-footer#toggleFooterSection" href="javascript:void(0);"><span class="page-footer__links-column-expansion-link-expand-text"><i class="fa fa-plus page-footer__links-column-link-icon"></i></span><span class="page-footer__links-column-expansion-link-collapse-text"><i class="fa fa-minus page-footer__links-column-link-icon"></i></span></a><div class="page-footer__item"><a class="page-footer__link" href="https://help.elements.envato.com/hc/en-us/categories/360000070683">FAQ</a></div><div class="page-footer__item"><a class="page-footer__link" href="https://help.elements.envato.com">Help Center</a></div></div></div><div class="page-footer__links-column page-footer__links-last-column"><div class="page-footer__brands-wrapper"><div class="page-footer__tuts-brand"><img loading="lazy" alt="envato-tuts+" class="page-footer__tuts-logo-image tuts-logo" src="https://static.tutsplus.com/packs/static/images/tuts_logo-73b941f1418b55c886ac.svg" /><div class="page-footer__counts"><div class="page-footer__count-item"><div class="page-footer__count-value">25,328</div><div class="page-footer__count-label">Tutorials</div></div><div class="page-footer__count-item"><div class="page-footer__count-value">553</div><div class="page-footer__count-label">Courses</div></div><div class="page-footer__count-item"><div class="page-footer__count-value">18,689</div><div class="page-footer__count-label">Translations</div></div></div></div><div class="page-footer__bcorp-brand"><a class="page-footer__bcorp-brand-link" href="https://www.bcorporation.net/en-us/find-a-b-corp/company/envato" rel="noopener" target="_blank"><img alt="B Corp logo" loading="lazy" src="https://static.tutsplus.com/packs/static/images/bcorp-bfc565be3a93741fc88c.svg" /></a></div></div></div></div><div class="page-footer__envato-bar"><div class="page-footer__envato-bar-content"><div class="page-footer__envato-bar-content-left-column"><ul class="page-footer__envato-bar-links"><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" data-action="click->ga-analytics#sendElementsClickEvent" href="https://elements.envato.com">Envato</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" data-action="click->ga-analytics#sendMarketClickEvent" href="https://market.envato.com">Envato Market</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" data-action="click->ga-analytics#sendPlaceitClickEvent" href="https://placeit.net/">Placeit by Envato</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" href="https://www.envato.com/products/">All products</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" href="https://www.envato.com/about/careers/">Careers</a></li><li class="page-footer__envato-bar-link-item"><a class="page-footer__envato-bar-link" href="https://www.envato.com/sitemap/">Sitemap</a></li></ul><div class="page-footer__copyright">© 2024 Envato Pty Ltd. Trademarks and brands are the property of their respective owners.</div></div><div class="page-footer__envato-bar-content-right-column"><ul class="page-footer__follow-us"><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__youtube-link" href="https://www.youtube.com/@envatotuts"><img alt="Youtube" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_youtube-2fdd89edede4b116d099.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__instagram-link" href="https://www.instagram.com/envato/"><img alt="Instagram" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_instagram-f01c9d7dc71f1ea86182.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__tiktok-link" href="https://www.tiktok.com/@envato"><img alt="Tiktok" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_tiktok-57b06ff17a284d8a1744.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__facebook-link" href="https://www.facebook.com/envato/"><img alt="Facebook" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_facebook-f35494f677e855ad50dd.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__twitter-link" href="https://twitter.com/envato"><img alt="Twitter" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_twitter-98772a5169f3f29dd437.svg" /></a></li><li class="page-footer__follow-us-element"><a class="page-footer__social-link page-footer__pinterest-link" href="https://www.pinterest.com.au/envato/"><img alt="Pinterest" loading="lazy" width="24px" height="24px" src="https://static.tutsplus.com/packs/static/images/social_pinterest-c768bee1968ceb51ae43.svg" /></a></li></ul></div></div></div></footer><script defer="defer" src="https://www.google-analytics.com/analytics.js"></script><div class="sticky-footer-ad"><turbo-frame id="publift_lazy_article_sticky_footer" loading="lazy" src="/promotions/publift_promotion?position=article_sticky_footer&variation=sticky-footer"><div class="avert fuse-ad avert--sticky-footer"><div class="avert__wrapper"><div class="avert__content"></div><div class="avert__label">Advertisement</div></div></div></turbo-frame></div><script defer="defer" src="https://cdn.fuseplatform.net/publift/tags/2/1007/fuse.js"></script> <noscript> <img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=912712196247539&ev=PageView&noscript=1"/> </noscript> <script src="https://static.tutsplus.com/packs/js/lazy_load_third_party_libraries-3f74f88902b8cb9ca575.js" defer="defer"></script><script type="text/javascript"> /* <![CDATA[ */ var google_conversion_id = 943617023; var google_custom_params = window.google_tag_params; var google_remarketing_only = true; /* ]]> */ </script> <script type="text/javascript" defer="defer" src="//www.googleadservices.com/pagead/conversion.js"> </script> <noscript> <div style="display:inline;"> <img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/943617023/?value=0&guid=ON&script=0"/> </div> </noscript> </body></html>