CINXE.COM

<!DOCTYPE html><html data-wf-domain="wf-blog-2021.webflow.io" data-wf-page="656f87be9f5fac9659edecb2" data-wf-site="6009e6adcf8c45466fee3e56" data-wf-intellimize-customer-id="117877979" lang="en" data-wf-collection="656f87bd9f5fac9659edec2d" data-wf-item-slug="design"><head><meta charset="utf-8"/><title>Design | Webflow Blog</title><meta content="Design tips, resources, and insights — from fundamental principles and best-in-class tools to typography, color, and project inspo." name="description"/><meta content="Design | Webflow Blog" property="og:title"/><meta content="Design tips, resources, and insights — from fundamental principles and best-in-class tools to typography, color, and project inspo." property="og:description"/><meta content="Design | Webflow Blog" property="twitter:title"/><meta content="Design tips, resources, and insights — from fundamental principles and best-in-class tools to typography, color, and project inspo." property="twitter:description"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><meta content="Webflow" name="generator"/><link href="https://cdn.prod.website-files.com/6009e6adcf8c45466fee3e56/css/wf-blog-2021.webflow.7f0685c06.min.css" rel="stylesheet" type="text/css"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"/><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script><script type="text/javascript">WebFont.load({ google: { families: ["Roboto Mono:300,regular,500"] }});</script><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/6009e6adcf8c45466fee3e56/651edc0e378edc9ce5f31f75_favicon.png" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/6009e6adcf8c45466fee3e56/651edc125ced8ca64c2d90a7_webclip.png" rel="apple-touch-icon"/><style>.anti-flicker, .anti-flicker * {visibility: hidden !important; opacity: 0 !important;}</style><style>[data-wf-hidden-variation], [data-wf-hidden-variation] * { display: none !important; }</style> <style>.anti-flicker, .anti-flicker * {visibility: hidden !important; opacity: 0 !important;}</style> <script>(function(e,t,p){var n=document.documentElement,s={p:[],r:[]},u={p:s.p,r:s.r,push:function(e){s.p.push(e)},ready:function(e){s.r.push(e)}};e.intellimize=u,n.className+=" "+p,setTimeout(function(){n.className=n.className.replace(RegExp(" ?"+p),"")},t)})(window, 4000, 'anti-flicker')</script> <link rel="preload" href="https://cdn.intellimize.co/snippet/117237908.js" as="script"> <script src="https://cdn.intellimize.co/snippet/117237908.js" async onerror="document.documentElement.className = document.documentElement.className.replace(RegExp(' ?anti-flicker'), '');"></script> <link rel="preconnect" href="https://api.intellimize.co" crossorigin> <link rel="preconnect" href="https://117237908.intellimizeio.com"> <link rel="preconnect" href="https://log.intellimize.co" crossorigin>   <meta name="theme-color" content="#146EF5" /> <meta name="twitter:card" content="summary_large_image">  <meta name="p:domain_verify" content="036f26a5cf411a605048d3b84322ad6d"/>  <meta property="fb:pages" content="149158061793615" />  <style> .showcase-embed-code { display: none !important; } .css-1s8q1mb { bottom: 50px !important; right: 10px !important; } .w-container { max-width: 1170px; } #BeaconContainer-root .c-Link { color: #4353FF !important; } .footer-link, .footer-heading { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @media (max-width: 479px) { .chart__category h5, .chart__column h5 { font-size: 12px !important; } } .chart__category div, .chart__column div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #consent-container > div > div { background-color: #262626 !important; border-radius: 0px !important; color: #fff !important; } .css-7066so-Root { max-height: calc(100vh - 140px) !important; } .float-label { position: absolute; z-index: 1; color: white !important; pointer-events: none; left: 0px; top: 6px; opacity: 0; font-size: 11px; text-transform: uppercase; color: #a8c0cc; } .validator { zoom: 1; transform: translateY(-25px); white-space: nowrap; } .invalid { box-shadow: inset 0 -2px 0 0px #EB5079; } #HSBeaconFabButton { border: none; bottom: 50px !important; right: 10px !important; } #BeaconContainer-root .c-Link { color: #4353FF !important; } #HSBeaconFabButton:active { box-shadow: none; } #HSBeaconFabButton.is-configDisplayRight { right: 10px; right: initial; } .c-SearchInput { display: none !important; opacity: 0.0 !important; } #BeaconFabButtonFrame { border: none; height: 100%; width: 100%; } #HSBeaconContainerFrame { bottom: 120px !important; right: 10px !important; @media (max-height: 740px) { #HSBeaconFabButton { bottom: 50px !important; right: 10px !important; } #HSBeaconFabButton.is-configDisplayRight { right: 10px !important; right: initial; } } @media (max-width: 370px) { #HSBeaconFabButton { right: 10px !important; } #HSBeaconFabButton.is-configDisplayRight { right: initial; right: 10px; } #HSBeaconFabButton.is-configDisplayRight { right: 10px; right: initial; } } </style>  <script> //window.wf_disableSignupModal = true; </script> <script type='text/javascript' src="https://webflow.com/resources/marketing-head.js"></script><link rel="canonical" href="https://webflow.com/blog/category/design" /> <script> // Reset native pagination canonicals const canonical = document.querySelector('link[rel="canonical"]'); const urlParams = new URLSearchParams(window.location.search); const paginationParam = Array.from(urlParams.entries()).find(([key]) => /page$/.test(key)); if (paginationParam && canonical) { canonical.href = `${canonical.href.split('?')[0]}?${paginationParam.join("=")}`; } </script>  <script id="jetboost-script" type="text/javascript"> window.JETBOOST_SITE_ID = "cl3242dt302po0nva9lo09gpj"; (function(d) { var s = d.createElement("script"); s.src = "https://cdn.jetboost.io/jetboost.js"; s.async = 1; d.getElementsByTagName("head")[0].appendChild(s); })(document); </script></head><body><div class="g-nav-wrapper"><div id="new-g-nav" class="g-nav-wrapper-position"><a id="skip-link" href="#main" class="g-nav-skip">Skip to main content</a><div data-animation="default" class="g-nav w-nav" data-easing2="ease" theme="" data-easing="ease-out-quart" data-collapse="medium" data-w-id="bc908851-f042-55d5-5bea-3871c5548407" role="banner" data-duration="400"><div class="g-main_nav_container"><a href="https://webflow.com/?r=0" data-cta-text="webflow" data-cta="top nav CTA" data-cta-position="top nav section" class="g-brand w-nav-brand"><div class="g-brand-logo w-embed"><svg width="108" height="19" viewBox="0 0 108 19" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Webflow</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M28.8562 0.5L19.6486 18.5H11L14.8534 11.04H14.6805C11.5015 15.1668 6.7583 17.8835 0 18.5V11.1433C0 11.1433 4.32345 10.8879 6.86508 8.21575H0V0.500142H7.71561V6.84612L7.88878 6.84541L11.0417 0.500142H16.8768V6.80588L17.0499 6.8056L20.3211 0.5H28.8562Z" fill="#146EF5"/> <path d="M79.0662 16.5132H81.5511V2.25H79.0662V16.5132Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M65.3675 16.3675C65.9075 16.592 66.4567 16.7043 67.015 16.7043C67.9373 16.7043 68.7626 16.4798 69.4908 16.0307C70.2189 15.5817 70.7833 14.9628 71.1838 14.1739C71.5843 13.379 71.7845 12.4778 71.7845 11.4705C71.7845 10.4632 71.5782 9.56211 71.1656 8.76718C70.7529 7.97226 70.1795 7.35634 69.4452 6.91943C68.711 6.47646 67.8766 6.25801 66.9421 6.26407C66.3475 6.26407 65.7771 6.37937 65.2309 6.60996C64.6848 6.84055 64.2297 7.16823 63.8656 7.593C63.8375 7.62534 63.8102 7.658 63.7837 7.69099V2.2591H61.2897V16.5132H63.7655L63.7605 15.1816C63.8245 15.2601 63.893 15.3368 63.9657 15.4118C64.3601 15.8184 64.8274 16.1369 65.3675 16.3675ZM67.9161 14.0647C67.5095 14.3135 67.0453 14.4379 66.5234 14.4379C66.0076 14.4379 65.5343 14.3104 65.1035 14.0556C64.6726 13.7946 64.3298 13.4397 64.0749 12.9906C63.8261 12.5416 63.7017 12.0318 63.7017 11.4614C63.6957 10.891 63.817 10.3813 64.0658 9.93227C64.3207 9.47716 64.6635 9.1252 65.0944 8.87641C65.5252 8.62155 66.0016 8.49715 66.5234 8.50322C67.0453 8.49715 67.5095 8.61851 67.9161 8.86731C68.3287 9.11003 68.6442 9.45895 68.8627 9.91406C69.0872 10.3631 69.1995 10.8789 69.1995 11.4614C69.1995 12.044 69.0872 12.5598 68.8627 13.0088C68.6442 13.4579 68.3287 13.8098 67.9161 14.0647Z" fill="currentColor"/> <path d="M32.4562 3.11471H35.2961L37.8365 12.3923L40.539 3.11471H42.9056L45.8365 12.2061L48.2759 3.11471H50.8791L47.038 16.5132H44.5895L41.6091 7.63159L38.8733 16.5132H36.3975L32.4562 3.11471Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M55.0729 16.7498C54.0837 16.7559 53.1917 16.5374 52.3968 16.0945C51.6079 15.6454 50.986 15.0234 50.5308 14.2285C50.0818 13.4336 49.8573 12.5264 49.8573 11.5069C49.8573 10.5178 50.0879 9.62279 50.5491 8.8218C51.0102 8.0208 51.6352 7.39578 52.4241 6.94674C53.213 6.4977 54.0928 6.27318 55.0637 6.27318C56.156 6.27318 57.1117 6.5159 57.9309 7.00135C58.7562 7.4868 59.3721 8.17554 59.7787 9.06755C60.1913 9.9535 60.34 10.9699 60.2247 12.1168H52.428C52.4498 12.5737 52.5638 12.9894 52.77 13.3638C53.0006 13.7764 53.3222 14.098 53.7348 14.3286C54.1475 14.5592 54.6086 14.6745 55.1184 14.6745C55.5067 14.6684 55.8678 14.6017 56.2015 14.4743C56.5353 14.3408 56.8174 14.1618 57.048 13.9372C57.2847 13.7127 57.4516 13.4579 57.5487 13.1727H60.1519C59.9941 13.8705 59.6786 14.4925 59.2053 15.0386C58.7319 15.5787 58.1373 16.0004 57.4212 16.3038C56.7052 16.6072 55.9224 16.7559 55.0729 16.7498ZM52.7791 9.61369C52.6337 9.86727 52.5329 10.1403 52.4768 10.4329H57.6451C57.6076 10.0633 57.4935 9.72652 57.3029 9.42254C57.0844 9.06452 56.7871 8.78842 56.4109 8.59424C56.0347 8.39399 55.6099 8.29387 55.1366 8.29387C54.6329 8.29387 54.1748 8.40916 53.7621 8.63975C53.3495 8.87034 53.0218 9.19499 52.7791 9.61369Z" fill="currentColor"/> <path d="M73.6141 6.48253C73.6141 5.6694 73.7991 4.94729 74.1693 4.3162C74.5394 3.67905 75.0583 3.18449 75.7258 2.83254C76.3993 2.47452 77.1852 2.28944 78.0832 2.27731V4.48914C77.6645 4.49521 77.3065 4.5832 77.0092 4.75311C76.7179 4.91695 76.4934 5.15664 76.3356 5.47218C76.1904 5.76268 76.112 6.09946 76.1005 6.48253H78.0286V8.58514H76.099V16.5132H73.6141V8.58514H72.0121V6.48253H73.6141Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M87.868 16.7316C86.8546 16.7316 85.9474 16.5101 85.1464 16.0672C84.3515 15.6181 83.7265 14.9992 83.2714 14.2103C82.8223 13.4154 82.5978 12.5143 82.5978 11.5069C82.5978 10.4936 82.8223 9.58942 83.2714 8.79449C83.7265 7.99349 84.3515 7.37151 85.1464 6.92854C85.9474 6.48556 86.8546 6.26407 87.868 6.26407C88.8874 6.26407 89.7977 6.48556 90.5986 6.92854C91.4057 7.37151 92.0338 7.99046 92.4828 8.78539C92.9318 9.58031 93.1594 10.4875 93.1655 11.5069C93.1594 12.5143 92.9318 13.4154 92.4828 14.2103C92.0398 14.9992 91.4148 15.6181 90.6077 16.0672C89.8007 16.5101 88.8874 16.7316 87.868 16.7316ZM87.868 14.447C88.402 14.447 88.8753 14.3256 89.2879 14.0829C89.7006 13.8341 90.0191 13.4882 90.2437 13.0452C90.4682 12.5962 90.5804 12.0834 90.5804 11.5069C90.5804 10.9244 90.4682 10.4086 90.2437 9.95957C90.0191 9.51053 89.7006 9.16465 89.2879 8.92192C88.8753 8.67313 88.402 8.54873 87.868 8.54873C87.3401 8.54873 86.8698 8.67313 86.4571 8.92192C86.0506 9.16465 85.735 9.51053 85.5105 9.95957C85.286 10.4086 85.1768 10.9244 85.1828 11.5069C85.1828 12.0834 85.2951 12.5962 85.5196 13.0452C85.7502 13.4882 86.0657 13.8341 86.4662 14.0829C86.8728 14.3256 87.3401 14.447 87.868 14.447Z" fill="currentColor"/> <path d="M95.8506 6.48253H93.0836L96.0782 16.5132H98.4994L100.469 10.1066L102.595 16.5132H104.98L107.984 6.48253H105.481L103.777 12.726L101.894 6.48253H99.4733L97.5995 12.8635L95.8506 6.48253Z" fill="currentColor"/> </svg></div></a><div class="g-nav_menu-mobile"><div class="g-nav_menu-right cc-mobile"><a href="https://webflow.com/contact-sales" data-cta-text="contact sales" data-cta="top nav CTA" data-cta-position="top nav section" class="g-nav_menu-link_wrapper-mobile w-nav-link">Contact sales</a></div><div id="g-nav-icon" aria-label="Menu" class="g-nav_menu-button w-nav-button"><div data-is-ix2-target="1" class="g-nav_menu-button-icon" data-w-id="bc908851-f042-55d5-5bea-3871c5548410" data-animation-type="lottie" data-src="https://cdn.prod.website-files.com/5f1a22ca3b746e2f46cafd62/5f1a22ca3b746e32a7cafdbb_nav.json" data-loop="0" data-direction="1" data-autoplay="0" data-renderer="svg" data-default-duration="1.5" data-duration="0" data-ix2-initial-state="0"></div></div></div><nav role="navigation" class="g-nav_menu w-nav-menu"><div class="g-nav_menu-mobile-flex"><ul role="list" class="g-nav_menu-left w-list-unstyled"><li class="g-nav_menu-list_item"><div data-delay="0" data-hover="false" class="g-nav_menu-dropdown_wrapper w-dropdown"><div data-cta-text="platform" data-cta="top nav CTA" data-cta-position="top nav section" class="g-nav_menu-dropdown_toggle w-dropdown-toggle"><div>Platform</div><div class="g-nav_menu-dropdown-icon w-embed"><svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.983887 1.33854L1.79589 0.5L5.98438 4.82322L10.1718 0.500052L10.9839 1.33849L5.98448 6.5L0.983887 1.33854Z" fill="currentColor"/> </svg></div></div><nav class="g-nav_menu-dropdown w-dropdown-list"><div id="w-node-bc908851-f042-55d5-5bea-3871c554841b-c5548403" class="g-nav_menu_container"><div class="g-nav_menu-container-bg"></div><ul aria-label="Platform" role="list" class="g-nav_menu-list w-list-unstyled"><li class="g-nav_menu-section"><div class="g-nav_menu-section_heading">Build</div><ul aria-label="Build" role="list" class="new-g-nav-col w-list-unstyled"><li class="g-nav_menu-section-list_item"><a data-cta-text="design" data-cta="top nav CTA" data-cta-position="platform section" href="https://webflow.com/design" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="26" viewBox="0 0 24 26" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.35822 7.36856L6.60823 7.37237L6.60823 7.37237L7.35822 7.36856ZM7.33998 3.7762L7.78693 3.17393C7.5588 3.00463 7.25461 2.97876 7.00117 3.10709C6.74773 3.23543 6.58855 3.49593 6.58999 3.78001L7.33998 3.7762ZM10.2248 5.91702L9.77786 6.5193L9.77786 6.5193L10.2248 5.91702ZM18.8793 12.3395L18.8831 13.0895C19.206 13.0878 19.4915 12.8798 19.592 12.573C19.6926 12.2663 19.5855 11.9296 19.3263 11.7372L18.8793 12.3395ZM13.4908 12.3668L13.487 11.6169C13.227 11.6182 12.9863 11.754 12.8508 11.9758C12.7153 12.1976 12.7042 12.4738 12.8217 12.7057L13.4908 12.3668ZM16.7568 18.8167L17.0956 19.4858C17.4651 19.2987 17.613 18.8474 17.4259 18.4779L16.7568 18.8167ZM13.8902 20.2682L13.2211 20.607C13.3109 20.7845 13.4676 20.919 13.6566 20.9809C13.8456 21.0429 14.0515 21.0272 14.229 20.9373L13.8902 20.2682ZM10.6242 13.8184L11.2933 13.4796C11.1759 13.2477 10.9468 13.0931 10.6878 13.0711C10.4288 13.0491 10.1768 13.1627 10.0219 13.3715L10.6242 13.8184ZM7.41298 18.1457L6.66299 18.1495C6.66463 18.4723 6.87265 18.7578 7.17942 18.8584C7.4862 18.9589 7.82288 18.8518 8.01525 18.5926L7.41298 18.1457ZM8.10821 7.36476L8.08997 3.77239L6.58999 3.78001L6.60823 7.37237L8.10821 7.36476ZM6.89303 4.37848L9.77786 6.5193L10.6718 5.31474L7.78693 3.17393L6.89303 4.37848ZM9.77786 6.5193L18.4324 12.9418L19.3263 11.7372L10.6718 5.31474L9.77786 6.5193ZM18.8755 11.5895L13.487 11.6169L13.4946 13.1168L18.8831 13.0895L18.8755 11.5895ZM12.8217 12.7057L16.0876 19.1555L17.4259 18.4779L14.1599 12.028L12.8217 12.7057ZM16.4179 18.1476L13.5514 19.5991L14.229 20.9373L17.0956 19.4858L16.4179 18.1476ZM14.5593 19.9294L11.2933 13.4796L9.95509 14.1572L13.2211 20.607L14.5593 19.9294ZM10.0219 13.3715L6.8107 17.6987L8.01525 18.5926L11.2265 14.2653L10.0219 13.3715ZM8.16297 18.1418L8.10821 7.36475L6.60823 7.37237L6.66299 18.1495L8.16297 18.1418Z" fill="currentColor"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Design</div><div class="g-nav_menu-section_link-description">Build high-performing sites</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="edit mode" data-cta="top nav CTA" data-cta-position="platform section" href="https://webflow.com/edit-mode" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 5.5L5.75 14.7501V18.2501H9.25L18.5 9L15 5.5Z" stroke="currentColor" stroke-width="1.5"/> <path d="M20 18.25H13" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Edit mode</div><div class="g-nav_menu-section_link-description">Empower your content team</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="interactions" data-cta="top nav CTA" data-cta-position="platform section" href="https://webflow.com/interactions-animations" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 3.80516C12 3.29805 11.3322 3.11307 11.0713 3.54791L4.9087 13.8188C4.50878 14.4854 4.9889 15.3333 5.76619 15.3333H12V20.3231C12 20.82 12.6462 21.0127 12.9184 20.597L18.987 11.3254C19.4223 10.6604 18.9452 9.77778 18.1503 9.77778H12V3.80516Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Interactions</div><div class="g-nav_menu-section_link-description">Craft immersive experiences</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="page building" data-cta="top nav CTA" data-cta-position="platform section" href="https://webflow.com/page-building" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_521_40327)"> <path fill-rule="evenodd" clip-rule="evenodd" d="M9 15H12V16.5H9C8.17157 16.5 7.5 15.8284 7.5 15L7.5 4.5C7.5 3.67157 8.17157 3 9 3L19.5 3C20.3284 3 21 3.67157 21 4.5V10.5H19.5V4.5L9 4.5L9 15ZM15 10.5L15 21L18 18H22.5L15 10.5Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.5 21C3.67157 21 3 20.3284 3 19.5L3 17.25H4.5V19.5H6.75V21H4.5ZM9 19.5H12V21H9L9 19.5ZM4.5 12L4.5 15H3L3 12H4.5ZM3 9.75V9V7.5C3 6.67157 3.67157 6 4.5 6L6 6V7.5H4.5V9L4.5 9.75H3Z" fill="currentColor"/> </g> <defs> <clipPath id="clip0_521_40327"> <rect width="24" height="24"/> </clipPath> </defs> </svg></div><div><div><div class="g-nav_menu-section_link-heading">Page building</div><div class="g-nav_menu-section_link-tag">New</div></div><div class="g-nav_menu-section_link-description">Launch simple landing pages quickly and easily</div></div></a></li></ul></li><li class="g-nav_menu-section"><div class="g-nav_menu-section_heading">Manage</div><ul aria-label="Manage" role="list" class="new-g-nav-col w-list-unstyled"><li class="g-nav_menu-section-list_item"><a data-cta-text="cms" data-cta="top nav CTA" data-cta-position="platform section" href="https://webflow.com/cms" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 9.5V15.991C6 17.7909 8.68629 19.25 12 19.25C15.3137 19.25 18 17.7909 18 15.991V9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 7.5V11.8984C6 13.4733 8.68629 14.75 12 14.75C15.3137 14.75 18 13.4733 18 11.8984V7.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18 7.5C18 6.11929 15.3137 5 12 5C8.68629 5 6 6.11929 6 7.5C6 8.88071 8.68629 10 12 10C15.3137 10 18 8.88071 18 7.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg></div><div><div class="g-nav_menu-section_link-heading">CMS</div><div class="g-nav_menu-section_link-description">Manage content at scale</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="hosting" data-cta="top nav CTA" data-cta-position="platform section" href="https://webflow.com/hosting" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M1.5 15.5C1.5 17.9853 3.51472 20 6 20H18C20.4853 20 22.5 17.9853 22.5 15.5C22.5 13.1766 20.7391 11.2644 18.4791 11.0252C18.4929 10.852 18.5 10.6768 18.5 10.5C18.5 6.91015 15.5899 4 12 4C8.41015 4 5.5 6.91015 5.5 10.5C5.5 10.6768 5.50706 10.852 5.52091 11.0252C3.26088 11.2644 1.5 13.1766 1.5 15.5ZM1.5 15.5C1.5 13.0147 3.51472 11 6 11C7.37184 11 8.60031 11.6139 9.42569 12.5819" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Hosting</div><div class="g-nav_menu-section_link-description">Host and scale your site without the hassle</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="localization" data-cta="top nav CTA" data-cta-position="platform section" href="https://webflow.com/localization" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="1.5"/> <ellipse cx="12" cy="12" rx="3" ry="8" stroke="currentColor" stroke-width="1.5"/> <ellipse cx="12" cy="12" rx="3" ry="8" transform="rotate(90 12 12)" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Localization</div><div class="g-nav_menu-section_link-description">Customize your site for a worldwide audience</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="security" data-cta="top nav CTA" data-cta-position="platform section" href="https://webflow.com/security" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20 5.97823L12 3L4 5.97823V8.48438C4 12.8488 6.00759 16.9806 12 21C17.9924 16.9806 20 12.8488 20 8.48438V5.97823Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Security</div><div class="g-nav_menu-section_link-description">Ensure your site stays safe</div></div></a></li></ul></li><li class="g-nav_menu-section"><div class="g-nav_menu-section_heading">Optimize</div><ul aria-label="Optimize" role="list" class="new-g-nav-col w-list-unstyled"><li class="g-nav_menu-section-list_item"><a data-cta-text="analyze" data-cta="top nav CTA" data-cta-position="platform section" href="https://webflow.com/analyze" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4.5 5.0473V18.4527H20.5" stroke="currentColor" stroke-width="1.5"/> <path d="M20.5 8.93918L14.8784 13.6959L9.68919 10.2365L4.5 14.9932" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div><div class="g-nav_menu-section_link-heading">Analyze</div><div class="g-nav_menu-section_link-tag">New</div></div><div class="g-nav_menu-section_link-description">Understand how your site performs</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="optimize" data-cta="top nav CTA" data-cta-position="product section" href="https://webflow.com/optimize" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8.5 5H5.5V8" stroke="currentColor" stroke-width="1.5"/> <path d="M16 19L19 19L19 16" stroke="currentColor" stroke-width="1.5"/> <path d="M5.5 16L5.5 19L8.5 19" stroke="currentColor" stroke-width="1.5"/> <path d="M19 8L19 5L16 5" stroke="currentColor" stroke-width="1.5"/> <circle cx="12.5" cy="12" r="3.25" stroke="currentColor" stroke-width="1.5"/> <circle cx="12.5" cy="12" r="1" fill="currentColor"/> </svg></div><div><div><div class="g-nav_menu-section_link-heading">Optimize</div><div class="g-nav_menu-section_link-tag">New</div></div><div class="g-nav_menu-section_link-description">Maximize conversions with testing and personalization</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="seo" data-cta="top nav CTA" data-cta-position="platform section" href="https://webflow.com/seo" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17 11C17 14.3137 14.3137 17 11 17C7.68629 17 5 14.3137 5 11C5 7.68629 7.68629 5 11 5C14.3137 5 17 7.68629 17 11Z" stroke="currentColor" stroke-width="1.5"/> <path d="M15 15L20 20" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">SEO</div><div class="g-nav_menu-section_link-description">Grow your reach with fine-tuned controls</div></div></a></li></ul></li><li class="g-nav_menu-section cc-last"><div class="g-nav_menu-section_heading">Extend</div><ul aria-label="Extend" role="list" class="new-g-nav-col w-list-unstyled"><li class="g-nav_menu-section-list_item"><a data-cta-text="apps" data-cta="top nav CTA" data-cta-position="platform section" href="https://webflow.com/apps" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M18.5 5.5H14.5V9.5H18.5V5.5ZM14.5 4C13.6716 4 13 4.67157 13 5.5V9.5C13 10.3284 13.6716 11 14.5 11H18.5C19.3284 11 20 10.3284 20 9.5V5.5C20 4.67157 19.3284 4 18.5 4H14.5ZM9.5 14.5H5.5L5.5 18.5H9.5V14.5ZM5.5 13C4.67157 13 4 13.6716 4 14.5V18.5C4 19.3284 4.67157 20 5.5 20H9.5C10.3284 20 11 19.3284 11 18.5V14.5C11 13.6716 10.3284 13 9.5 13H5.5ZM5.5 5.5H9.5V9.5H5.5L5.5 5.5ZM4 5.5C4 4.67157 4.67157 4 5.5 4H9.5C10.3284 4 11 4.67157 11 5.5V9.5C11 10.3284 10.3284 11 9.5 11H5.5C4.67157 11 4 10.3284 4 9.5V5.5ZM15.75 15.75V13H17.25V15.75H20V17.25H17.25V20H15.75V17.25H13V15.75H15.75Z" fill="currentColor"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Apps</div><div class="g-nav_menu-section_link-description">Connect your site to apps like HubSpot, Adobe Express, and more</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="figma to webflow" data-cta="top nav CTA" data-cta-position="platform section" href="https://webflow.com/figma-to-webflow" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 5.5C9.0335 5.5 8.25 6.2835 8.25 7.25C8.25 8.2165 9.0335 9 10 9H11.75V5.5H10ZM11.75 4H10C8.20507 4 6.75 5.45507 6.75 7.25C6.75 8.25522 7.20637 9.15385 7.92321 9.75C7.20637 10.3462 6.75 11.2448 6.75 12.25C6.75 13.2552 7.20637 14.1538 7.92322 14.75C7.20637 15.3462 6.75 16.2448 6.75 17.25C6.75 19.0449 8.20507 20.5 10 20.5C11.7949 20.5 13.25 19.0449 13.25 17.25V15.5V14.9891C13.7552 15.3125 14.3557 15.5 15 15.5C16.7949 15.5 18.25 14.0449 18.25 12.25C18.25 11.2448 17.7936 10.3462 17.0768 9.75C17.7936 9.15385 18.25 8.25522 18.25 7.25C18.25 5.45507 16.7949 4 15 4H13.25H12.5H11.75ZM13.25 5.5V9H15C15.9665 9 16.75 8.2165 16.75 7.25C16.75 6.2835 15.9665 5.5 15 5.5H13.25ZM11.75 10.5H10C9.0335 10.5 8.25 11.2835 8.25 12.25C8.25 13.2165 9.0335 14 10 14H11.75V12.25V10.5ZM15 10.5C14.0335 10.5 13.25 11.2835 13.25 12.25C13.25 13.2165 14.0335 14 15 14C15.9665 14 16.75 13.2165 16.75 12.25C16.75 11.2835 15.9665 10.5 15 10.5ZM10 15.5C9.0335 15.5 8.25 16.2835 8.25 17.25C8.25 18.2165 9.0335 19 10 19C10.9665 19 11.75 18.2165 11.75 17.25V15.5H10Z" fill="currentColor"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Figma to Webflow</div><div class="g-nav_menu-section_link-description">Turn static designs into clean, production-ready code</div></div></a></li></ul></li><li class="g-nav_menu-section cc-ad"><a data-cta-text="platform overview" data-cta="top nav CTA" data-cta-position="platform section" href="https://webflow.com/platform" class="g-nav_menu-content_block-ad-link-2 cc-product cc-platform w-inline-block"><div class="g-nav_menu-section_link cc-ad"><div class="g-nav_menu-section_link-icon w-embed"><svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.5 10.75L6.25 7.75V7.5L12.5 4.5L18.75 7.5L18.75 7.75L12.5 10.75Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/> <path d="M18.75 11L18.75 11.75L12.5 15L6.25 11.75V11" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/> <path d="M18.75 15V15.75L12.5 19L6.25 15.75V15" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Platform overview</div><div class="paragraph-s u-text-gray200">Explore the power of the Webflow Platform</div></div></div><div class="g-nav_menu-content_block-ad-arrow-2">↗</div></a><a data-cta-text="ai at webflow" data-cta="top nav CTA" data-cta-position="platform section" href="https://webflow.com/ai" class="g-nav_menu-content_block-ad-link-2 cc-product cc-ai w-inline-block"><div class="g-nav_menu-section_link cc-ad"><div class="g-nav_menu-section_link-icon w-embed"><svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.5 3C12.5 7.97056 16.5294 12 21.5 12C16.5294 12 12.5 16.0294 12.5 21C12.5 16.0294 8.47056 12 3.5 12C8.47056 12 12.5 7.97056 12.5 3Z" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">AI at Webflow</div><div class="paragraph-s u-text-gray200">Elevate your site with the power of AI</div></div></div><div class="g-nav_menu-content_block-ad-arrow-2">↗</div></a></li></ul></div><div scroll="enable" data-w-id="bc908851-f042-55d5-5bea-3871c55484b4" class="g-nav_menu-overlay"></div></nav></div></li><li class="g-nav_menu-list_item"><div data-delay="0" data-hover="false" class="g-nav_menu-dropdown_wrapper w-dropdown"><div data-cta-text="solutions" data-cta="top nav CTA" data-cta-position="top nav section" class="g-nav_menu-dropdown_toggle w-dropdown-toggle"><div>Solutions</div><div class="g-nav_menu-dropdown-icon w-embed"><svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.983887 1.33854L1.79589 0.5L5.98438 4.82322L10.1718 0.500052L10.9839 1.33849L5.98448 6.5L0.983887 1.33854Z" fill="currentColor"/> </svg></div></div><nav class="g-nav_menu-dropdown cc-small w-dropdown-list"><div id="w-node-bc908851-f042-55d5-5bea-3871c55484bc-c5548403" class="g-nav_menu_container cc-small"><div class="g-nav_menu-container-bg"></div><ul aria-label="Solutions" role="list" class="g-nav_menu-list w-list-unstyled"><li class="g-nav_menu-section"><div class="g-nav_menu-section_heading">Webflow for</div><ul aria-label="Webflow for" role="list" class="new-g-nav-col w-list-unstyled"><li class="g-nav_menu-section-list_item"><a data-cta-text="enterprise" data-cta="top nav CTA" data-cta-position="solutions section" href="https://webflow.com/enterprise" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="6" y="9" width="12" height="9" rx="1" stroke="currentColor" stroke-width="1.5"/> <path d="M9 7C9 6.44772 9.44772 6 10 6H14C14.5523 6 15 6.44772 15 7V9H9V7Z" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Enterprise</div><div class="g-nav_menu-section_link-description">Built for world-class organizations</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="agencies" data-cta="top nav CTA" data-cta-position="solutions section" href="https://webflow.com/solutions/agencies" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12" cy="7.25" r="2.75" stroke="currentColor" stroke-width="1.5"/> <path d="M7.5 19.5001V17.0156C7.5 14.5303 9.51472 12.5156 12 12.5156V12.5156C14.4853 12.5156 16.5 14.5303 16.5 17.0156V19.5001" stroke="currentColor" stroke-width="1.5"/> <path d="M16 10.5C17.3807 10.5 18.5 9.38071 18.5 8C18.5 6.61929 17.3807 5.5 16 5.5" stroke="currentColor" stroke-width="1.5"/> <path d="M17.5 12.5V12.5C18.6046 12.5 19.5 13.3954 19.5 14.5V17.5" stroke="currentColor" stroke-width="1.5"/> <path d="M8 10.5C6.61929 10.5 5.5 9.38071 5.5 8C5.5 6.61929 6.61929 5.5 8 5.5" stroke="currentColor" stroke-width="1.5"/> <path d="M6.5 12.5V12.5C5.39543 12.5 4.5 13.3954 4.5 14.5V17.5" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Agencies</div><div class="g-nav_menu-section_link-description">Accelerate your agency’s growth</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="freelancers" data-cta="top nav CTA" data-cta-position="solutions section" href="https://webflow.com/solutions/freelancers" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="13" cy="8.5" r="3.5" stroke="currentColor" stroke-width="1.5"/> <path d="M6 20V18C6 16.3431 7.34315 15 9 15H13" stroke="currentColor" stroke-width="1.5"/> <path d="M10 21H20.2667L24 15H16.5334L13.2666 21H10Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Freelancers</div><div class="g-nav_menu-section_link-description">Build custom sites for clients</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="global alliances" data-cta="top nav CTA" data-cta-position="solutions section" href="https://webflow.com/solutions/global-alliances" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0356 8.3881C10.1693 7.717 10.3383 7.11097 10.5341 6.58893C10.7883 5.911 11.0742 5.411 11.356 5.09306C11.6387 4.77431 11.8579 4.7 12 4.7C12.1421 4.7 12.3613 4.77431 12.644 5.09306C12.9258 5.411 13.2117 5.911 13.4659 6.58893C13.6617 7.11097 13.8307 7.717 13.9644 8.3881C13.3321 8.33031 12.6741 8.3 12 8.3C11.3259 8.3 10.6679 8.33031 10.0356 8.3881ZM9.22325 6.09736C9.36046 5.73148 9.51392 5.38778 9.68399 5.07504C7.51528 5.80003 5.80003 7.51528 5.07504 9.68399C5.38778 9.51392 5.73148 9.36046 6.09736 9.22325C6.81805 8.95299 7.65679 8.73395 8.57716 8.57716C8.73395 7.65679 8.95299 6.81805 9.22325 6.09736ZM14.7768 6.09736C14.6395 5.73148 14.4861 5.38778 14.316 5.07504C16.4847 5.80003 18.2 7.51527 18.925 9.68399C18.6122 9.51391 18.2685 9.36045 17.9026 9.22325C17.182 8.95299 16.3432 8.73395 15.4228 8.57716C15.2661 7.65679 15.047 6.81805 14.7768 6.09736ZM5.07504 14.316C5.80003 16.4847 7.51527 18.2 9.68399 18.925C9.51391 18.6122 9.36045 18.2685 9.22325 17.9026C8.95299 17.182 8.73395 16.3432 8.57716 15.4228C7.65678 15.2661 6.81805 15.047 6.09736 14.7768C5.73148 14.6395 5.38778 14.4861 5.07504 14.316ZM5.09306 12.644C4.77455 12.3616 4.70011 12.1425 4.7 12.0003L4.7 12L4.7 11.9983C4.70058 11.8561 4.77556 11.6375 5.09306 11.356C5.411 11.0742 5.911 10.7883 6.58893 10.5341C7.11097 10.3383 7.717 10.1693 8.3881 10.0356C8.33031 10.6679 8.3 11.3259 8.3 12C8.3 12.6741 8.33031 13.3321 8.3881 13.9644C7.717 13.8307 7.11097 13.6617 6.58893 13.4659C5.911 13.2117 5.411 12.9258 5.09306 12.644ZM12 15.7V14.3C11.238 14.3 10.5055 14.2587 9.81712 14.1829C9.74125 13.4945 9.7 12.762 9.7 12C9.7 11.238 9.74125 10.5055 9.81712 9.81712C10.5055 9.74125 11.238 9.7 12 9.7C12.762 9.7 13.4945 9.74125 14.1829 9.81712C14.2587 10.5055 14.3 11.238 14.3 12H15.7C15.7 11.3259 15.6697 10.6679 15.6119 10.0356C16.283 10.1693 16.889 10.3383 17.4111 10.5341C18.089 10.7883 18.589 11.0742 18.9069 11.356C19.2257 11.6386 19.3 11.8579 19.3 12H20.7C20.7 7.19512 16.8049 3.3 12 3.3C7.19579 3.3 3.30109 7.19404 3.3 11.998L3.3 12C3.3 16.8049 7.19512 20.7 12 20.7V19.3C11.8579 19.3 11.6387 19.2257 11.356 18.9069C11.0742 18.589 10.7883 18.089 10.5341 17.4111C10.3383 16.889 10.1693 16.283 10.0356 15.6119C10.6679 15.6697 11.3259 15.7 12 15.7Z" fill="currentColor"/> <path d="M17.5 20L14.4981 16.9499C13.8454 16.2867 13.8325 15.2155 14.4692 14.5363C15.1431 13.8174 16.2732 13.8219 16.9415 14.5462L17.5 15.1515L18.0585 14.5462C18.7268 13.8219 19.8569 13.8174 20.5308 14.5363C21.1675 15.2155 21.1546 16.2867 20.5019 16.9499L17.5 20Z" fill="currentColor"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Global alliances</div><div class="g-nav_menu-section_link-description">Unlock enterprise-level partnership</div></div></a></li><li id="w-node-bc908851-f042-55d5-5bea-3871c55484e3-c5548403" class="g-nav_menu-section-list_item"><a data-cta-text="startups" data-cta="top nav CTA" data-cta-position="solutions section" href="https://webflow.com/startups" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 15.9971V12" stroke="currentColor" stroke-width="1.5"/> <path d="M12 12C12 7.99594 15.2459 4.75 19.25 4.75C19.25 8.75406 16.0041 12 12 12Z" stroke="currentColor" stroke-width="1.5"/> <path d="M12 12C12 9.1005 9.6495 6.75 6.75 6.75C6.75 9.64949 9.10051 12 12 12Z" stroke="currentColor" stroke-width="1.5"/> <path d="M6.57544 18.5754C7.85907 17.0036 9.81235 16 12 16C14.1877 16 16.141 17.0036 17.4246 18.5754" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Startups</div><div class="g-nav_menu-section_link-description">Move faster with Webflow</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="classrooms" data-cta="top nav CTA" data-cta-position="solutions section" href="https://webflow.com/classroom" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 8.56392C6.32075 8.9344 4.89524 10.3547 4.92565 12.35C4.97933 15.8729 5.35761 18.007 6.90773 19.9625C7.9898 21.3275 9.9843 21.344 11.4337 20.3778L11.4673 20.3553C11.7899 20.1403 12.2102 20.1403 12.5328 20.3553C13.9864 21.3244 15.9946 21.2494 17.012 19.8293C18.3874 17.9096 18.8308 15.7931 18.9638 12.3498C19.097 8.90331 14.83 7.17023 12.3911 9.60909L12 10.0002" stroke="currentColor" stroke-width="1.5"/> <path d="M7.2178 5.18626L7.2706 4.87185L8.5712 5.09024C10.8398 5.47118 12.3787 7.66448 11.9948 9.95059C11.9691 10.1034 11.824 10.1994 11.6887 10.1767L10.6489 10.0021C8.37154 9.61972 6.8354 7.46358 7.2178 5.18626Z" stroke="currentColor" stroke-width="1.5"/> <path d="M16.4673 5C14.4603 5.4014 13.3246 6.77919 13.0602 8.07574M13.0602 8.07574C12.9998 8.37199 12.9848 8.66401 13.0154 8.93917L13.0602 8.07574Z" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Classrooms</div><div class="g-nav_menu-section_link-description">Register to use Webflow for free</div></div></a></li></ul></li><li class="g-nav_menu-section cc-small"><div class="g-nav_menu-section_heading">Compare</div><ul aria-label="Compare" role="list" class="new-g-nav-col w-list-unstyled"><li class="g-nav_menu-section-list_item"><a data-cta-text="contentful" data-cta="top nav CTA" data-cta-position="solutions section" href="https://webflow.com/vs/contentful" class="g-nav_menu-section_link w-inline-block"><div><div class="g-nav_menu-section_link-heading">Contentful</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="sitecore" data-cta="top nav CTA" data-cta-position="solutions section" href="https://webflow.com/vs/sitecore" class="g-nav_menu-section_link w-inline-block"><div><div class="g-nav_menu-section_link-heading">Sitecore</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="wix" data-cta="top nav CTA" data-cta-position="solutions section" href="https://webflow.com/vs/wix" class="g-nav_menu-section_link w-inline-block"><div><div class="g-nav_menu-section_link-heading">Wix</div></div></a></li><li id="w-node-bc908851-f042-55d5-5bea-3871c5548506-c5548403" class="g-nav_menu-section-list_item"><a data-cta-text="wordpress" data-cta="top nav CTA" data-cta-position="solutions section" href="https://webflow.com/vs/wordpress" class="g-nav_menu-section_link w-inline-block"><div><div class="g-nav_menu-section_link-heading">WordPress</div></div></a></li></ul></li><li class="g-nav_menu-section cc-last"><div class="g-nav_menu-content_block-ad"><a data-cta-text="ad unit" data-cta="top nav CTA" data-cta-position="product section" href="https://webflow.com/customers/dropbox-sign" class="g-nav_menu-content_block-ad-link cc-customer w-inline-block"><div class="g-nav_menu-content_block-ad-top"><div class="g-nav_menu-content_block-ad-eyebrow"><div class="g-nav_menu-content_block-ad-pill">Customer story</div><div class="g-nav_menu-content_block-ad-arrow">↗</div></div><div class="h4">How Dropbox Sign transformed collaboration with Webflow</div></div><div class="u-mt-48"><div class="h3 u-mb-8">67%</div><div class="caption u-text-gray300"><strong>Decrease in dev ticketing</strong></div></div></a></div><a data-cta-text="customer stories" data-cta="top nav CTA" data-cta-position="solutions section" href="https://webflow.com/customers" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10 19.25H6C5.86193 19.25 5.75 19.1381 5.75 19V5C5.75 4.86193 5.86193 4.75 6 4.75H18C18.1381 4.75 18.25 4.86193 18.25 5V9" stroke="currentColor" stroke-width="1.5"/> <path d="M18 11.75L12.75 17.0001V19.2502H15L20.25 14.0001L18 11.75Z" stroke="currentColor" stroke-width="1.5"/> <path d="M8 8.25H16" stroke="currentColor" stroke-width="1.5"/> <path d="M8 11.25H12" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Customer stories</div><div class="g-nav_menu-section_link-description">Browse Webflow success stories</div></div></a></li></ul></div><div scroll="enable" class="g-nav_menu-overlay"></div></nav></div></li><li class="g-nav_menu-list_item"><div data-delay="0" data-hover="false" class="g-nav_menu-dropdown_wrapper w-dropdown"><div data-cta-text="resources" data-cta="top nav CTA" data-cta-position="top nav section" class="g-nav_menu-dropdown_toggle w-dropdown-toggle"><div>Resources</div><div class="g-nav_menu-dropdown-icon w-embed"><svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.983887 1.33854L1.79589 0.5L5.98438 4.82322L10.1718 0.500052L10.9839 1.33849L5.98448 6.5L0.983887 1.33854Z" fill="currentColor"/> </svg></div></div><nav class="g-nav_menu-dropdown w-dropdown-list"><div id="w-node-bc908851-f042-55d5-5bea-3871c554852b-c5548403" class="g-nav_menu_container"><div class="g-nav_menu-container-bg"></div><ul aria-label="Resources" role="list" class="g-nav_menu-list w-list-unstyled"><li class="g-nav_menu-section"><div class="g-nav_menu-section_heading">Get started</div><ul aria-label="Get started" role="list" class="new-g-nav-col w-list-unstyled"><li class="g-nav_menu-section-list_item"><a data-cta-text="templates" data-cta="top nav CTA" data-cta-position="resources section" href="https://webflow.com/templates" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="19.25" y="19.25" width="14.5" height="14.5" rx="0.75" transform="rotate(180 19.25 19.25)" stroke="currentColor" stroke-width="1.5"/> <line x1="13.25" y1="20" x2="13.25" y2="4" stroke="currentColor" stroke-width="1.5"/> <line x1="20" y1="10.75" x2="13" y2="10.75" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Templates</div><div class="g-nav_menu-section_link-description">Website templates for any use case</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="made in webflow" data-cta="top nav CTA" data-cta-position="resources section" href="https://webflow.com/made-in-webflow" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M2.67358 13.2838C4.31827 13.1148 6.09486 12.6734 7.25225 11.457L7.62671 10.9922H2.67358V6.0001L7.67358 6V10.8906L10.3484 6.0001H14.2591V10.6533L16.8575 6H22.4516L15.7048 18L10.1034 17.9869L12.865 13.1501C10.1902 16.0881 6.64832 17.6505 2.67358 17.9869V13.2838Z" fill="currentColor"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Made in Webflow</div><div class="g-nav_menu-section_link-description">Find and clone inspiring sites</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="hire a webflow partner" data-cta="top nav CTA" data-cta-position="resources section" href="https://webflow.com/certified-partners" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12.5" cy="8.5" r="3.5" stroke="currentColor" stroke-width="1.5"/> <path d="M5.5 20V18C5.5 16.3431 6.84315 15 8.5 15H12.5" stroke="currentColor" stroke-width="1.5"/> <path d="M17.5277 13.3587C17.6834 12.9109 18.3166 12.9109 18.4723 13.3587L19.1789 15.3915C19.2476 15.5891 19.4319 15.723 19.641 15.7273L21.7927 15.7711C22.2666 15.7808 22.4623 16.383 22.0846 16.6694L20.3696 17.9696C20.2029 18.096 20.1325 18.3127 20.1931 18.5129L20.8163 20.5728C20.9536 21.0265 20.4412 21.3988 20.0521 21.128L18.2856 19.8987C18.1139 19.7793 17.8861 19.7793 17.7144 19.8987L15.9479 21.128C15.5588 21.3988 15.0464 21.0265 15.1837 20.5728L15.8069 18.5129C15.8675 18.3127 15.7971 18.096 15.6304 17.9696L13.9154 16.6694C13.5377 16.383 13.7334 15.7808 14.2073 15.7711L16.359 15.7273C16.5681 15.723 16.7524 15.5891 16.8211 15.3915L17.5277 13.3587Z" fill="currentColor"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Hire a Certified Partner</div><div class="g-nav_menu-section_link-description">Find a freelancer or agency to help with your next project</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="developers" data-cta="top nav CTA" data-cta-position="resources section" href="https://developers.webflow.com/" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.75 8.5L3.96502 11.8119C3.85119 11.9115 3.85119 12.0885 3.96502 12.1882L7.75 15.5" stroke="currentColor" stroke-width="1.5"/> <path d="M17.5 8.5L21.285 11.8119C21.3988 11.9115 21.3988 12.0885 21.285 12.1882L17.5 15.5" stroke="currentColor" stroke-width="1.5"/> <path d="M15.5 4L9.5 20" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Developers</div><div class="g-nav_menu-section_link-description">Submit an app, explore our APIs, get technical support, and more</div></div></a></li></ul></li><li class="g-nav_menu-section"><div class="g-nav_menu-section_heading">Learn</div><ul aria-label="Learn" role="list" class="new-g-nav-col w-list-unstyled"><li class="g-nav_menu-section-list_item"><a data-cta-text="webflow university" data-cta="top nav CTA" data-cta-position="resources section" href="https://university.webflow.com/" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7.07176 11C6.70506 11.8446 6.5 12.7885 6.5 13.7845C6.5 17.3201 10.5 18 12.5 18C14.375 18 18.5 17.3201 18.5 13.7845C18.5 12.7885 18.2949 11.8446 17.9282 11" stroke="currentColor" stroke-width="1.5"/> <path d="M22.3211 9.08945L12.5447 13.9776C12.5166 13.9917 12.4834 13.9917 12.4553 13.9776L2.67889 9.08945C2.60518 9.0526 2.60518 8.94742 2.67889 8.91056L12.4553 4.02236C12.4834 4.00828 12.5166 4.00828 12.5447 4.02236L22.3211 8.91056C22.3948 8.94742 22.3948 9.0526 22.3211 9.08945Z" stroke="currentColor" stroke-width="1.5"/> <path d="M12.5 8L9.5 10.0001V20" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Webflow University</div><div class="g-nav_menu-section_link-description">Learn web design and development for free</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="blog" data-cta="top nav CTA" data-cta-position="resources section" href="https://webflow.com/blog" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="5.75" y="5" width="12.5" height="6" rx="1" stroke="currentColor" stroke-width="1.5"/> <rect x="5.375" y="14.375" width="13.25" height="0.75" stroke="currentColor" stroke-width="0.75"/> <rect x="5.375" y="17.875" width="10.25" height="0.75" stroke="currentColor" stroke-width="0.75"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Blog</div><div class="g-nav_menu-section_link-description">Stories, insights, and advice for how you build for the web</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="resources" data-cta="top nav CTA" data-cta-position="resources section" href="https://webflow.com/resources" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 7V19.5" stroke="currentColor" stroke-width="1.5"/> <path d="M19.3136 5H16.1065C14.5089 5 12.998 5.7262 12 6.97368C11.002 5.7262 9.49107 5 7.8935 5H4.68643C4.58347 5 4.5 5.08347 4.5 5.18643V17.8399C4.5 17.9428 4.58347 18.0263 4.68643 18.0263H7.90962C9.49699 18.0263 10.9983 18.7479 11.9899 19.9874C11.9951 19.9939 12.0049 19.9939 12.0101 19.9874C13.0017 18.7479 14.503 18.0263 16.0904 18.0263H19.3136C19.4165 18.0263 19.5 17.9428 19.5 17.8399V5.18643C19.5 5.08347 19.4165 5 19.3136 5Z" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Resources</div><div class="g-nav_menu-section_link-description">Free ebooks, webinars, whitepapers, and reports</div></div></a></li></ul></li><li class="g-nav_menu-section"><div class="g-nav_menu-section_heading">Discover</div><ul aria-label="Discover" role="list" class="new-g-nav-col w-list-unstyled"><li class="g-nav_menu-section-list_item"><a data-cta-text="customer stories" data-cta="top nav CTA" data-cta-position="resources section" href="https://webflow.com/customers" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.5 19.25H6.5C6.36193 19.25 6.25 19.1381 6.25 19V5C6.25 4.86193 6.36193 4.75 6.5 4.75H18.5C18.6381 4.75 18.75 4.86193 18.75 5V9" stroke="currentColor" stroke-width="1.5"/> <path d="M18.5 11.75L13.25 17.0001V19.2502H15.5L20.75 14.0001L18.5 11.75Z" stroke="currentColor" stroke-width="1.5"/> <path d="M8.5 8.25H16.5" stroke="currentColor" stroke-width="1.5"/> <path d="M8.5 11.25H12.5" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Customer stories</div><div class="g-nav_menu-section_link-description">Explore enterprise and agency success stories</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="community" data-cta="top nav CTA" data-cta-position="resources section" href="https://webflow.com/community" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M10.7711 6.44912C10.8477 5.35986 11.7557 4.5 12.8644 4.5C14.0234 4.5 14.963 5.43957 14.963 6.59859C14.963 7.75762 14.0234 8.69719 12.8644 8.69719C12.5412 8.69719 12.235 8.6241 11.9615 8.49354C12.0744 9.01176 12.0808 9.55419 11.9711 10.0854C12.2568 10.1584 12.5561 10.1972 12.8644 10.1972C14.8519 10.1972 16.463 8.58604 16.463 6.5986C16.463 4.61115 14.8519 3 12.8644 3C11.2029 3 9.80441 4.12602 9.39038 5.65657C9.64303 5.7384 9.89096 5.84784 10.1302 5.98597C10.3637 6.12076 10.5776 6.27638 10.7711 6.44912Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.7968 13.8473C13.5098 13.7736 13.209 13.7344 12.899 13.7344C10.9116 13.7344 9.30042 15.3455 9.30042 17.333C9.30041 19.3204 10.9116 20.9316 12.899 20.9316C14.5386 20.9316 15.9221 19.835 16.3562 18.3353C16.1063 18.2538 15.8611 18.1452 15.6244 18.0086C15.3922 17.8745 15.1793 17.7198 14.9867 17.5482C14.8789 18.6061 13.9854 19.4316 12.899 19.4316C11.74 19.4316 10.8004 18.492 10.8004 17.333C10.8004 16.1739 11.74 15.2344 12.899 15.2344C13.2128 15.2344 13.5104 15.3032 13.7777 15.4266C13.6759 14.9108 13.6792 14.3729 13.7968 13.8473Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M9.45 7.27091C10.5683 7.91655 10.9514 9.34649 10.3058 10.4648C10.156 10.7242 9.96399 10.9441 9.74346 11.1207C10.2171 11.3155 10.6541 11.6056 11.023 11.9826C11.2436 11.7571 11.4398 11.5006 11.6048 11.2148C12.6647 9.37905 12.0357 7.03173 10.2 5.97188C8.36428 4.91202 6.01696 5.54099 4.95711 7.3767C4.0759 8.903 4.36216 10.783 5.53883 11.9825C5.77736 11.7394 6.05248 11.5242 6.36187 11.3455C6.51103 11.2594 6.66357 11.1845 6.81852 11.1204C5.93115 10.411 5.67071 9.14071 6.25614 8.1267C6.90178 7.00843 8.33172 6.62527 9.45 7.27091Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7554 11.9805C14.5349 12.206 14.3387 12.4624 14.1738 12.7481C13.1139 14.5839 13.7429 16.9312 15.5786 17.991C17.4143 19.0509 19.7617 18.4219 20.8215 16.5862C21.7027 15.06 21.4165 13.18 20.2399 11.9805C20.0013 12.2237 19.7261 12.439 19.4166 12.6177C19.2676 12.7037 19.1151 12.7787 18.9603 12.8427C19.8475 13.5522 20.1079 14.8223 19.5225 15.8362C18.8768 16.9545 17.4469 17.3376 16.3286 16.692C15.2103 16.0464 14.8272 14.6164 15.4728 13.4981C15.6225 13.2388 15.8144 13.019 16.0348 12.8424C15.5613 12.6476 15.1242 12.3575 14.7554 11.9805Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.11193 12.6459C8.23021 12.0003 9.66015 12.3834 10.3058 13.5017C10.5109 13.8569 10.6122 14.2436 10.619 14.6266C11.0259 14.2843 11.5098 14.0305 12.0408 13.8948C11.9599 13.503 11.8158 13.1172 11.6048 12.7517C10.545 10.916 8.19765 10.287 6.36193 11.3469C4.52622 12.4067 3.89725 14.7541 4.9571 16.5898C5.87885 18.1863 7.77441 18.8701 9.46032 18.324C9.37904 18.0236 9.33567 17.7077 9.33567 17.3816C9.33567 17.1578 9.35611 16.9387 9.39521 16.7262C8.28543 17.3285 6.89128 16.9399 6.25614 15.8398C5.6105 14.7215 5.99365 13.2916 7.11193 12.6459Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.7377 10.0714C13.8186 10.4633 13.9627 10.8492 14.1737 11.2148C15.2336 13.0505 17.5809 13.6795 19.4166 12.6196C21.2524 11.5597 21.8813 9.21242 20.8215 7.37671C19.8997 5.78021 18.0042 5.09644 16.3183 5.6425C16.3995 5.94277 16.4429 6.2586 16.4429 6.58456C16.4429 6.8085 16.4224 7.02766 16.3833 7.24028C17.4931 6.63791 18.8873 7.02658 19.5224 8.12671C20.1681 9.24499 19.7849 10.6749 18.6666 11.3206C17.5484 11.9662 16.1184 11.583 15.4728 10.4648C15.2676 10.1095 15.1664 9.72267 15.1595 9.33959C14.7526 9.6819 14.2688 9.93572 13.7377 10.0714Z" fill="currentColor"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Community</div><div class="g-nav_menu-section_link-description">Connect with the worldwide Webflow community</div></div></a></li><li class="g-nav_menu-section-list_item"><a data-cta-text="partner with webflow" data-cta="top nav CTA" data-cta-position="resources section" href="https://webflow.com/partners" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6.25 19V16.25C6.25 15.1454 7.14543 14.25 8.25 14.25H12.5M15.75 8C15.75 9.79493 14.2949 11.25 12.5 11.25C10.7051 11.25 9.25 9.79493 9.25 8C9.25 6.20507 10.7051 4.75 12.5 4.75C14.2949 4.75 15.75 6.20507 15.75 8Z" stroke="currentColor" stroke-width="1.5"/> <path d="M17.0001 19.0006L14.4838 16.4844C13.9367 15.9373 13.9259 15.0535 14.4596 14.4932C15.0244 13.9001 15.9717 13.9038 16.5319 14.5013L17.0001 15.0007L17.4682 14.5014C18.0284 13.9038 18.9757 13.9001 19.5405 14.4932C20.0742 15.0535 20.0634 15.9373 19.5163 16.4844L17.0001 19.0006Z" fill="currentColor" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Partner with Webflow</div><div class="g-nav_menu-section_link-description">Grow your business by becoming a Webflow partner</div></div></a></li></ul></li><li class="g-nav_menu-section cc-last"><div class="g-nav_menu-section_heading">Get help</div><ul aria-label="Get help" role="list" class="new-g-nav-col w-list-unstyled"><li class="g-nav_menu-section-list_item"><a data-cta-text="support" data-cta="top nav CTA" data-cta-position="resources section" href="https://help.webflow.com/" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 3.25C7.66751 3.25 3.75 7.16751 3.75 12C3.75 16.8325 7.66751 20.75 12.5 20.75C17.3325 20.75 21.25 16.8325 21.25 12C21.25 7.16751 17.3325 3.25 12.5 3.25ZM5.25 12C5.25 10.2681 5.85727 8.67804 6.87049 7.43114L8.99642 9.55706C8.51285 10.2493 8.22921 11.0915 8.22921 12C8.22921 12.9084 8.51286 13.7507 8.99642 14.4429L6.87048 16.5688C5.85726 15.3219 5.25 13.7319 5.25 12ZM7.93114 17.6295L10.0571 15.5036C10.7493 15.9872 11.5916 16.2708 12.5 16.2708C13.4085 16.2708 14.2507 15.9872 14.943 15.5036L17.0689 17.6295C15.822 18.6427 14.2319 19.25 12.5 19.25C10.7681 19.25 9.17804 18.6427 7.93114 17.6295ZM18.1295 16.5688C19.1427 15.3219 19.75 13.7319 19.75 12C19.75 10.2681 19.1427 8.67804 18.1295 7.43114L16.0036 9.55702C16.4872 10.2493 16.7709 11.0915 16.7709 12C16.7709 12.9085 16.4872 13.7507 16.0036 14.4429L18.1295 16.5688ZM17.0688 6.37048C15.8219 5.35726 14.2319 4.75 12.5 4.75C10.7681 4.75 9.17806 5.35726 7.93115 6.37048L10.0571 8.4964C10.7493 8.01281 11.5916 7.72915 12.5 7.72915C13.4085 7.72915 14.2507 8.0128 14.943 8.49636L17.0688 6.37048ZM9.72921 12C9.72921 10.4697 10.9698 9.22915 12.5 9.22915C14.0303 9.22915 15.2709 10.4697 15.2709 12C15.2709 13.5303 14.0303 14.7708 12.5 14.7708C10.9698 14.7708 9.72921 13.5303 9.72921 12Z" fill="currentColor"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Support</div><div class="g-nav_menu-section_link-description">Jump into our product docs or connect with our Support team</div></div></a></li><li id="w-node-bc908851-f042-55d5-5bea-3871c5548596-c5548403" class="g-nav_menu-section-list_item"><a data-cta-text="forum" data-cta="top nav CTA" data-cta-position="resources section" href="https://forum.webflow.com/" class="g-nav_menu-section_link w-inline-block"><div class="g-nav_menu-section_link-icon w-embed"><svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="12.5" cy="8.5" r="3.5" stroke="currentColor" stroke-width="1.5"/> <path d="M5.5 20V18C5.5 16.3431 6.84315 15 8.5 15H12.5" stroke="currentColor" stroke-width="1.5"/> <path d="M14.5 15H23.5" stroke="currentColor" stroke-width="1.5"/> <path d="M14.5 18H23.5" stroke="currentColor" stroke-width="1.5"/> <path d="M14.5 21H21.5" stroke="currentColor" stroke-width="1.5"/> </svg></div><div><div class="g-nav_menu-section_link-heading">Forum</div><div class="g-nav_menu-section_link-description">Ask questions and learn alongside other Webflow users</div></div></a></li></ul></li></ul></div><div scroll="enable" class="g-nav_menu-overlay"></div></nav></div></li><li class="g-nav_menu-list_item"><a href="https://webflow.com/enterprise" data-cta-text="enterprise" data-cta="top nav CTA" data-cta-position="top nav section" class="g-nav_menu-link_wrapper w-nav-link">Enterprise</a></li><li class="g-nav_menu-list_item cc-last"><a href="https://webflow.com/pricing" data-cta-text="pricing" data-cta="top nav CTA" data-cta-position="top nav section" class="g-nav_menu-link_wrapper cc-last w-nav-link">Pricing</a></li></ul><div class="g-nav_menu-right"><a id="login-btn" href="https://webflow.com/dashboard/login" data-login-cta="1" data-cta="top nav CTA" data-cta-position="top nav section" class="g-nav_menu-link_wrapper cc-mobile_button w-nav-link">Log in</a><a href="https://webflow.com/contact-sales" id="secondary-nav" data-cta="top nav CTA" data-cta-position="top nav section" class="g-nav_menu-link_wrapper cc-mobile_button w-nav-link">Contact sales</a><a id="continue-nav" data-signup-cta="1" data-cta="top nav CTA" data-cta-position="top nav section" data-cta-text="get started its free" href="https://webflow.com/dashboard/signup" class="button cc-nav w-inline-block"><div>Get started<span class="g-nav-text_desktop"> — it's free</span></div></a></div></div></nav></div></div><div class="g-nav-js w-embed w-script"><script> //Close modal when pressing the Esc key window.addEventListener('keyup', function(event) { if (event.which === 27) { wf_utils.signupModalUtils.closeModal(); } }); //Lock body scroll when nav is open window.addEventListener('DOMContentLoaded', (event) => { $('.brand-boilerplate-components--g-nav_menu-button, .w-nav-overlay').click(function() { if ($('body').css('overflow') !== 'hidden') { $('body').css('overflow', 'hidden'); } else { $('body').css('overflow', 'auto'); } }); }); // Global nav - Changes subnav height and width in a very flowy way window.onload = function() { $('.brand-boilerplate-components--g-nav_menu-dropdown_toggle').on('click', function () { const containerElement = $(this).next().find('.brand-boilerplate-components--g-nav_menu_container'); setTimeout(function () { const containerWidth = containerElement.outerWidth(); $('.brand-boilerplate-components--g-nav_menu-container-bg').width(containerWidth); const containerHeight = containerElement.outerHeight(); $('.brand-boilerplate-components--g-nav_menu-container-bg').height(containerHeight); }, 50); }); }; </script></div><div class="g-nav-css w-embed"><style> /* Lowering z-index so that it's below the nav when opened */ .w-webflow-badge { z-index: 100 !important; } /* Nav styling and focus states */ .g-nav_menu-section_link:focus .g-nav_menu-section_link-heading, .g-nav_menu-section_link-row:focus .g-nav_menu-section_link-heading { text-decoration: underline; } .g-nav_menu-section_link:hover .g-nav_menu-beta_tag, .g-nav_menu-section_link:focus .g-nav_menu-beta_tag { text-decoration: none !important; } .g-nav *:focus { outline: none !important; } /* On smaller desktop devices, there is a lack of packing on both the meganav, and the dropdown, that needs to be compensated accordingly */ @media (min-width:992px) and (max-width: 1320px) { .g-nav { padding: 0px 8px 0px 20px; } .g-nav_menu_container.cc-small { margin-left: auto; margin-right: auto; } .g-nav_menu-content_block { padding-right: 20px; } .g-nav_menu-grid-left { padding-left: 20px; } } @media screen and (max-width: 1068px) and (min-width: 992px) { .g-nav_menu-link_wrapper.button { padding: 12px 16px; } .g-nav_menu-left { grid-column-gap: 1rem; } .g-nav_menu-right { grid-column-gap: 1rem; } .button.cc-nav { padding: 14px 16px; font-size:0.9rem; } .g-nav { padding: 0px 8px 0px 16px; } .g-nav_menu-link_wrapper { font-size:0.9rem; } } .w-nav-overlay { overflow: scroll !important; } /*----- Styling -----*/ .g-nav[theme="dark"] { background-color: #080808; } .g-nav[theme="dark"] .g-nav_menu-link_wrapper, .g-nav[theme="dark"] .g-brand-logo, .g-nav[theme="dark"] .g-nav_menu-dropdown_toggle, .g-nav[theme="dark"] .g-nav_menu-link_wrapper-mobile { color: #FFFFFF; opacity: 1; } .g-nav[theme="dark"] .g-nav_menu-button-icon { filter: invert(1); } @media only screen and (min-width: 991px) { .g-nav_menu-link_wrapper { transition: color 0.3s; /* Smooth color transition */ } .g-nav_menu-mobile-flex:hover .g-nav_menu-link_wrapper, .g-nav_menu-mobile-flex:hover .g-nav_menu-dropdown_toggle, .g-nav_menu-mobile-flex:hover .g-nav_menu-link_wrapper { color: #5A5A5A; /* Change color of all links to dark gray when navigation is hovered */ } .g-nav_menu-mobile-flex .g-nav_menu-dropdown_toggle:hover, .g-nav_menu-mobile-flex .g-nav_menu-dropdown_toggle.w--open, .g-nav_menu-mobile-flex .g-nav_menu-link_wrapper:hover { color: #080808; /* Ensure the hovered link remains black */ } .g-nav[theme="dark"] .g-nav_menu-mobile-flex:hover .g-nav_menu-dropdown_toggle, .g-nav[theme="dark"] .g-nav_menu-mobile-flex:hover .g-nav_menu-link_wrapper { color: #ABABAB; /* Change color of all links to light gray when navigation is hovered */ } .g-nav[theme="dark"] .g-nav_menu-mobile-flex .g-nav_menu-link_wrapper:hover, .g-nav[theme="dark"] .g-nav_menu-mobile-flex .g-nav_menu-dropdown_toggle:hover, .g-nav[theme="dark"] .g-nav_menu-mobile-flex .g-nav_menu-dropdown_toggle.w--open { color: #FFFFFF; /* Ensure the hovered link remains white */ } } @media only screen and (max-width: 991px) { .g-nav[theme="dark"] .g-nav_menu-link_wrapper, .g-nav[theme="dark"] .g-nav_menu-dropdown_toggle, .g-nav_menu-link_wrapper, .g-nav_menu-dropdown_toggle { color: #080808; } .g-nav_menu-link_wrapper:hover, .g-nav[theme="dark"] .g-nav_menu-link_wrapper:hover, .g-nav[theme="dark"] .g-brand-logo:hover, .g-nav[theme="dark"] .g-nav_menu-dropdown_toggle:hover { color: #146EF5; } .g-nav_menu { height: calc(100vh - 65px) !important; min-height: auto; } } /*----- Animating -----*/ .g-nav_menu-section-list_item { opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; } .g-nav_menu-dropdown.w--open .g-nav_menu-section-list_item { opacity: 1; transform: translateY(0); } /* Adjustment for the published live version */ /* Nav styling and focus states */ .brand-boilerplate-components--g-nav_menu-section_link:focus .brand-boilerplate-components--g-nav_menu-section_link-heading, .brand-boilerplate-components--g-nav_menu-section_link-row:focus .brand-boilerplate-components--g-nav_menu-section_link-heading { text-decoration: underline; } .brand-boilerplate-components--g-nav_menu-section_link:hover .brand-boilerplate-components--g-nav_menu-beta_tag, .brand-boilerplate-components--g-nav_menu-section_link:focus .brand-boilerplate-components--g-nav_menu-beta_tag { text-decoration: none !important; } .brand-boilerplate-components--g-nav *:focus { outline: none !important; } /* On smaller desktop devices, there is a lack of packing on both the meganav, and the dropdown, that needs to be compensated accordingly */ @media (min-width:992px) and (max-width: 1320px) { .brand-boilerplate-components--g-nav { padding: 0px 8px 0px 20px; } .brand-boilerplate-components--g-nav_menu_container.cc-small { margin-left: auto; margin-right: auto; } .brand-boilerplate-components--g-nav_menu-content_block { padding-right: 20px; } .brand-boilerplate-components--g-nav_menu-grid-left { padding-left: 20px; } } @media screen and (max-width: 1068px) and (min-width: 992px) { .brand-boilerplate-components--g-nav_menu-link_wrapper.button { padding: 12px 16px; } .brand-boilerplate-components--g-nav_menu-left { grid-column-gap: 1rem; } .brand-boilerplate-components--g-nav_menu-right { grid-column-gap: 1rem; } .button.cc-nav { padding: 14px 16px; font-size:0.9rem; } .brand-boilerplate-components--g-nav { padding: 0px 8px 0px 16px; } .brand-boilerplate-components--g-nav_menu-link_wrapper { font-size:0.9rem; } } .w-nav-overlay { overflow: scroll !important; } /*----- Styling -----*/ .brand-boilerplate-components--g-nav[theme="dark"] { background-color: #080808; } .brand-boilerplate-components--g-nav[theme="dark"] .brand-boilerplate-components--g-nav_menu-link_wrapper, .brand-boilerplate-components--g-nav[theme="dark"] .brand-boilerplate-components--g-brand-logo, .brand-boilerplate-components--g-nav[theme="dark"] .brand-boilerplate-components--g-nav_menu-dropdown_toggle, .brand-boilerplate-components--g-nav[theme="dark"] .brand-boilerplate-components--g-nav_menu-link_wrapper-mobile { color: #FFFFFF; opacity: 1; } .brand-boilerplate-components--g-nav[theme="dark"] .brand-boilerplate-components--g-nav_menu-button-icon { filter: invert(1); } @media only screen and (min-width: 991px) { .brand-boilerplate-components--g-nav_menu-link_wrapper { transition: color 0.3s; /* Smooth color transition */ } .brand-boilerplate-components--g-nav_menu-mobile-flex:hover .brand-boilerplate-components--g-nav_menu-link_wrapper, .brand-boilerplate-components--g-nav_menu-mobile-flex:hover .brand-boilerplate-components--g-nav_menu-dropdown_toggle, .brand-boilerplate-components--g-nav_menu-mobile-flex:hover .brand-boilerplate-components--g-nav_menu-link_wrapper { color: #5A5A5A; /* Change color of all links to dark gray when navigation is hovered */ } .brand-boilerplate-components--g-nav_menu-mobile-flex .brand-boilerplate-components--g-nav_menu-dropdown_toggle:hover, .brand-boilerplate-components--g-nav_menu-mobile-flex .brand-boilerplate-components--g-nav_menu-dropdown_toggle.w--open, .brand-boilerplate-components--g-nav_menu-mobile-flex .brand-boilerplate-components--g-nav_menu-link_wrapper:hover { color: #080808; /* Ensure the hovered link remains black */ } .brand-boilerplate-components--g-nav[theme="dark"] .brand-boilerplate-components--g-nav_menu-mobile-flex:hover .brand-boilerplate-components--g-nav_menu-dropdown_toggle, .brand-boilerplate-components--g-nav[theme="dark"] .brand-boilerplate-components--g-nav_menu-mobile-flex:hover .brand-boilerplate-components--g-nav_menu-link_wrapper { color: #ABABAB; /* Change color of all links to light gray when navigation is hovered */ } .brand-boilerplate-components--g-nav[theme="dark"] .brand-boilerplate-components--g-nav_menu-mobile-flex .brand-boilerplate-components--g-nav_menu-link_wrapper:hover, .brand-boilerplate-components--g-nav[theme="dark"] .brand-boilerplate-components--g-nav_menu-mobile-flex .brand-boilerplate-components--g-nav_menu-dropdown_toggle:hover, .brand-boilerplate-components--g-nav[theme="dark"] .brand-boilerplate-components--g-nav_menu-mobile-flex .brand-boilerplate-components--g-nav_menu-dropdown_toggle.w--open { color: #FFFFFF; /* Ensure the hovered link remains white */ } } @media only screen and (max-width: 991px) { .brand-boilerplate-components--g-nav[theme="dark"] .brand-boilerplate-components--g-nav_menu-link_wrapper, .brand-boilerplate-components--g-nav[theme="dark"] .brand-boilerplate-components--g-nav_menu-dropdown_toggle, .brand-boilerplate-components--g-nav_menu-link_wrapper, .brand-boilerplate-components--g-nav_menu-dropdown_toggle { color: #080808; } .brand-boilerplate-components--g-nav_menu-link_wrapper:hover, .brand-boilerplate-components--g-nav[theme="dark"] .brand-boilerplate-components--g-nav_menu-link_wrapper:hover, .brand-boilerplate-components--g-nav[theme="dark"] .brand-boilerplate-components--g-brand-logo:hover, .brand-boilerplate-components--g-nav[theme="dark"] .brand-boilerplate-components--g-nav_menu-dropdown_toggle:hover { color: #146EF5; } .brand-boilerplate-components--g-nav_menu { height: calc(100vh - 65px) !important; min-height: auto; } } /*----- Animating -----*/ .brand-boilerplate-components--g-nav_menu-section-list_item { opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; } .brand-boilerplate-components--g-nav_menu-dropdown.w--open .brand-boilerplate-components--g-nav_menu-section-list_item { opacity: 1; transform: translateY(0); } </style></div></div><div id="one-tap-wrapper-auto" class="one-tap-wrapper"></div><div class="g-nav-modal_wrap"><div class="g-modal_box experiment"><div data-modal-close="treatment" class="g-modal_x modal-close_btn"></div><div class="g-modal-asset cc-image"><div class="g-modal-image"><img src="https://cdn.prod.website-files.com/6009e6adcf8c45466fee3e56/673e4ccd26b9e1ebc598bc7f_webflow-desktop.avif" loading="lazy" alt="" class="g-modal-image-img"/><img src="https://cdn.prod.website-files.com/6009e6adcf8c45466fee3e56/673e4ccd26b9e1ebc598bc8e_webflow-tablet.avif" loading="lazy" srcset="https://cdn.prod.website-files.com/6009e6adcf8c45466fee3e56/673e4ccd26b9e1ebc598bc8e_webflow-tablet-p-500.png 500w, https://cdn.prod.website-files.com/6009e6adcf8c45466fee3e56/673e4ccd26b9e1ebc598bc8e_webflow-tablet.avif 2880w" sizes="100vw" alt="" class="g-modal-image-img cc-tablet"/></div></div><div id="w-node-bc908851-f042-55d5-5bea-3871c55485bd-c5548403" class="g-modal-login cc-test"><div><div class="g-modal_embed experiment w-embed w-iframe"><iframe data-modal-variant="treatment" style="display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameBorder="0"></iframe></div></div><div class="g-modal-logos"><div class="eyebrow u-text-center">Trusted by teams at</div><div class="g-modal-logos_wrapper"><img src="https://cdn.prod.website-files.com/6009e6adcf8c45466fee3e56/6723909da87bc591d8c364b7_ideo-logo.svg" loading="lazy" alt="Ideo" height="19" class="g-modal-logos_img"/><img src="https://cdn.prod.website-files.com/6009e6adcf8c45466fee3e56/66bd15c719d20c52532af070_monday.com.svg" loading="lazy" alt="Monday.com" height="25" class="g-modal-logos_img"/><img src="https://cdn.prod.website-files.com/6009e6adcf8c45466fee3e56/6723909da87bc591d8c364cb_bbdo-logo.svg" loading="lazy" alt="BBDO" height="20" class="g-modal-logos_img"/><img src="https://cdn.prod.website-files.com/6009e6adcf8c45466fee3e56/66bd15c719d20c52532af085_nytimes.svg" loading="lazy" alt="The New York Times" height="23" class="g-modal-logos_img"/><img src="https://cdn.prod.website-files.com/6009e6adcf8c45466fee3e56/66bd15c719d20c52532af0ac_TED.svg" loading="lazy" height="20" width="52" alt="Ted" class="g-modal-logos_img"/><img src="https://cdn.prod.website-files.com/6009e6adcf8c45466fee3e56/66bd15c719d20c52532af0dc_philips.svg" loading="lazy" alt="Philips" height="16" class="g-modal-logos_img"/></div></div></div></div><div data-modal-trigger="treatment" class="g-modal_trigger"></div></div></div><div class="u-d-none"><div class="u-global-css w-embed"><style> /* Body mods */ body { min-height: 100vh; min-height: -webkit-fill-available; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; text-decoration-thickness: 0.07em !important; text-underline-offset: 0.08em !important; text-underline-position: under; } /* Text Selection Color */ ::-moz-selection { background: rgba(20, 110, 245, 0.95); color: #FFFFFF; } ::selection { background: rgba(20, 110, 245, 0.95); color: #FFFFFF; } /* Margin top for headings in rich text elements */ .w-richtext>:first-child { margin-top: 0; } .w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child { margin-bottom: 0; } .w-input, .w-select, a { color: inherit; font-size: inherit; -webkit-appearance: none; -moz-appearance: none; } /* Global Focus Outline Color - will update to use native focus(keyboard) state */ *:focus:not(:focus-visible) { outline: 0; } /*----- Button's arrow moving on hover -----*/ .card:hover .button-icon_right, .button:hover .button-icon_right { transform: translateX(8px); } .card:hover .button-icon_top-right, .button:hover .button-icon_top-right { transform: translate(8px, -8px); } /* Truncation utility */ .u-truncate-2lines { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .u-truncate-3lines { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } /* Feature content and images opacity on current */ .sticky-features_item-anchor + .sticky-features_item-content { opacity: 0.2; } .sticky-features_item-anchor + .sticky-features_img-wrapper { opacity: 0; } .sticky-features_item-anchor.w--current + div { opacity: 1; z-index:10; } /* Feature tabs transitions */ .feature_tab-link.w--current .tab-link_description { opacity: 1; height: auto; transition: opacity .5s ease-out, max-height 1.2s cubic-bezier(.165, .84, .44, 1); display: block; } .feature_tab-link.cc-dark.w--current .tab-link_description { color: var(--gray-200); } .feature_tab-link.cc-dark.w--current .feature_item-content { color: var(--white); } @media only screen and (max-width: 991px) { .feature_tab-link .tab-link_description.cc-mobile-visibility { opacity: 1; height: auto; display: block; max-height: 200px; transition: opacity .5s ease-out, max-height 1.2s cubic-bezier(.165, .84, .44, 1); } .feature_tab-link.cc-dark .tab-link_description { color: var(--gray-200) !important; } } /* Features dropdown — Used in hero section in our feature pages */ [theme="light"] .features-dropdown-toggle, [theme="light"] .brand-boilerplate-components--features-dropdown-toggle { color: #5a5a5a; border-color: #d8d8d8; } [theme="light"] .features-dropdown-toggle:hover, [theme="light"] .features-dropdown-toggle.w--open, [theme="light"] .brand-boilerplate-components--features-dropdown-toggle:hover, [theme="light"] .brand-boilerplate-components--features-dropdown-toggle.w--open { color: #080808; border-color: #5a5a5a; } .features-dropdown-link_block:hover *:not(.tag_new):not(.brand-boilerplate-components--tag_new), .brand-boilerplate-components--features-dropdown-link_block:hover *:not(.tag_new):not(.brand-boilerplate-components--tag_new) { text-decoration: underline; } @media (prefers-reduced-motion) { /* Remove transition from all to make things instant */ * { -webkit-transition: all 0s linear 0s !important; transition: all 0s linear 0s !important; } /* Custom classes to hide/show content */ .a11y-reduce-motion-show { display: block !important; } .a11y-reduce-motion-hide { display: none; } } </style></div><div class="u-global-js w-embed w-script"><script> // Add reduced motion IX to <body> const observer = new MutationObserver(function (m, mo) { const body = document.body; if (body) { body.setAttribute("data-wf-ix-vacation", "1"); mo.disconnect(); } }); observer.observe(document, { childList: true, subtree: true, }); // Load all of this after the whole page (and jquery) has loaded window.onload = function() { // Set footer copyright year $('[class*="footer-copyright_year"]').text(new Date().getFullYear()); // "Skip to main" script var skipLinkEle = document.getElementById('skip-link'); if (skipLinkEle) { skipLinkEle.addEventListener('click keydown', function (e) { if (e.type === "keydown" && e.which !== 13) { return; } e.preventDefault(); var target = document.getElementById('main'); target.setAttribute('tabindex', '-1'); target.focus(); }); } // Trap modal focus and enable ESC key for accessibility var buttonThatOpenedModal; var findModal = function (elem) { var tabbable = elem.find('select, input, textarea, button, a').filter(':visible'); var firstTabbable = tabbable.first(); var lastTabbable = tabbable.last(); firstTabbable.focus(); lastTabbable.on('keydown', function (e) { if ((e.which === 9 && !e.shiftKey)) { e.preventDefault(); firstTabbable.focus(); } }); firstTabbable.on('keydown', function (e) { if ((e.which === 9 && e.shiftKey)) { e.preventDefault(); lastTabbable.focus(); } }); elem.on('keydown', function (e) { if (e.keyCode === 27) { $(elem).find('[class$="modal-close_btn"]').click(); }; }); }; var modalOpenButton = $('[class$="modal-open_btn"]'); modalOpenButton.on('keydown', function (e) { if (e.which !== 13 && e.which !== 32) { return; } e.preventDefault(); var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); $(this).get(0).dispatchEvent(evt); }); modalOpenButton.on('click', function () { $(this).next().show(); findModal($(this).next()); buttonThatOpenedModal = $(this); }); var modalCloseButton = $('[class$="modal-close_btn"], [class$="modal-close_area"]'); modalCloseButton.on('keydown', function (e) { if (e.which !== 13 && e.which !== 32) { return; } e.preventDefault(); var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); $(this).get(0).dispatchEvent(evt); }); modalCloseButton.on('click', function () { $(this).closest('[class$="modal-wrapper"]').hide(); if (buttonThatOpenedModal) { buttonThatOpenedModal.focus(); buttonThatOpenedModal = null; } }); // Toggle accordion attributes for accessibility var accordionToggleButton = $('.accordion-trigger'); accordionToggleButton.on('keydown', function (e) { if (e.which !== 13 && e.which !== 32) { return; } e.preventDefault(); var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); $(this).get(0).dispatchEvent(evt); }); accordionToggleButton.on('click', function (e) { $(this).toggleAttrVal('aria-expanded', "false", "true"); $(this).parent().find('.accordion-content').toggleAttrVal('aria-hidden', "true", "false"); }); // jQuery method to toggle attribute value $.fn.toggleAttrVal = function (attr, val1, val2) { var test = $(this).attr(attr); if (test === val1) { $(this).attr(attr, val2); return this; } if (test === val2) { $(this).attr(attr, val1); return this; } $(this).attr(attr, val1); return this; }; }; </script></div></div><div class="new_section cc-blog cc-masthead"><div class="new_container"><div class="grid lg-col-5 cc-gap-48 md-col-1 cc-masthead cc-categories"><ol itemtype="https://schema.org/BreadcrumbList" itemscope="https://schema.org/BreadcrumbList" id="w-node-_798f450a-0ffd-c005-dda8-f0367578ffb1-59edecb2" role="list" class="breadcrumb-list u-mb-32 w-list-unstyled"><li itemprop="itemListElement" itemscope="https://schema.org/ListItem" itemtype="https://schema.org/ListItem" class="breadcrumb-item"><a itemprop="item" href="http://www.webflow.com/blog" class="new_eyebrow cc-breadcrumb w-inline-block"><div itemprop="name">Blog</div></a><div class="caption">→</div><meta itemprop="position" content="1"/></li><li itemprop="itemListElement" itemscope="https://schema.org/ListItem" itemtype="https://schema.org/ListItem" class="breadcrumb-item"><div itemprop="name" class="new_eyebrow cc-breadcrumb-current">Design</div><meta itemprop="position" content="2"/></li></ol><div id="w-node-e180cda0-e410-f4da-fe8b-1277abce65c6-59edecb2"><h1 class="new_h1 cc-masthead">Design</h1></div><p id="w-node-e180cda0-e410-f4da-fe8b-1277abce65c9-59edecb2" class="new_paragraph-l cc-masthead">Design tips, resources, and insights — from fundamental principles and best-in-class tools to typography, color, and project inspo.</p></div><div class="new_b-h-divider new_u-bg-black u-mt-16"></div></div></div><div class="new_section cc-blog"><div class="w-dyn-list"><div role="list" class="w-dyn-items"><div role="listitem" class="w-dyn-item"><div class="new_container"><div style="background-color:#ffae13" class="u-p-8 u-position-relative hover-underline"><div style="border-color:#080808" class="new_b-color-container cc-category-latest"><div class="u-mb-64 grid xs-col-1 cc-xs-gap-16 u-z-index-1"><div style="color:#080808" class="new_caption">Latest</div><a id="w-node-_97022ee3-6337-7285-52f0-d4b39172f250-59edecb2" style="color:#080808" href="#" class="button cc-text-only w-inline-block"><div class="u-d-inline-block">Read more</div><div class="new_button-icon_right">→</div></a></div><div id="w-node-_97022ee3-6337-7285-52f0-d4b39172f256-59edecb2"><h2 style="color:#080808" class="new_h1 cc-category">Maintaining brand consistency at scale with design systems in Webflow </h2><div class="u-w-70"><p style="color:#080808" class="new_paragraph-xl u-mt-32">Big-picture guidance and tactical best practices on building, implementing, and maintaining a design system within Webflow.</p></div></div><a href="/blog/brand-consistency-design-systems" class="u-link-overlay w-inline-block"><div class="sr-only">Maintaining brand consistency at scale with design systems in Webflow </div></a></div></div></div></div></div></div></div><div class="new_section cc-blog"><div class="new_container"><h2 class="new_h2 u-mb-32">Browse category</h2><div><div class="jetboost-list-wrapper-q8p1 w-dyn-list"><div id="browse-all-list" role="list" class="grid lg-col-3 cc-gap-40 md-col-2 sm-col-1 cc-sm-gap-40 w-dyn-items"><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a33792ff9772a40813238_DESIGN_BlogHeader14_red_2400x1260-2.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a33792ff9772a40813238_DESIGN_BlogHeader14_red_2400x1260-2-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a33792ff9772a40813238_DESIGN_BlogHeader14_red_2400x1260-2-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a33792ff9772a40813238_DESIGN_BlogHeader14_red_2400x1260-2-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a33792ff9772a40813238_DESIGN_BlogHeader14_red_2400x1260-2-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a33792ff9772a40813238_DESIGN_BlogHeader14_red_2400x1260-2-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a33792ff9772a40813238_DESIGN_BlogHeader14_red_2400x1260-2.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How contrast in design makes an impact on your websites</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How contrast in design makes an impact on your websites</h3><p class="u-mb-16 u-sm-mb-16">Learn why contrast in design is essential for accessibility and use best practices to create a visually appealing, user-friendly, and functional website.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/contrast-in-design" class="u-link-overlay w-inline-block"><div class="sr-only">How contrast in design makes an impact on your websites</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="contrast-in-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/67b67203278dff45d2b05bbd_09_AIBlogHeader_2400x1260.jpg" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to create accurate and data-backed UX personas to improve your marketing</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#7a3dff" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to create accurate and data-backed UX personas to improve your marketing</h3><p class="u-mb-16 u-sm-mb-16">Learn to create a UX persona that accurately portrays your customers’ motivations, goals, and needs so you can center your design thinking on them.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/ux-personas" class="u-link-overlay w-inline-block"><div class="sr-only">How to create accurate and data-backed UX personas to improve your marketing</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="ux-personas" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7e383e6befb872107a58_425_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7e383e6befb872107a58_425_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7e383e6befb872107a58_425_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7e383e6befb872107a58_425_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7e383e6befb872107a58_425_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7e383e6befb872107a58_425_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7e383e6befb872107a58_425_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How storyboarding helps UX designers translate big ideas to web design</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How storyboarding helps UX designers translate big ideas to web design</h3><p class="u-mb-16 u-sm-mb-16">Learn how to create UX storyboards that help translate your biggest design ideas into rough sketches you can test, improve, and collaborate on.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/storyboarding-ux" class="u-link-overlay w-inline-block"><div class="sr-only">How storyboarding helps UX designers translate big ideas to web design</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="storyboarding-ux" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">16 best prototyping tools for designers in 2025</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ed52cb" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">16 best prototyping tools for designers in 2025</h3><p class="u-mb-16 u-sm-mb-16">Explore the best prototyping tools for web design, app creation, animations, and more. </p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/prototyping-tools" class="u-link-overlay w-inline-block"><div class="sr-only">16 best prototyping tools for designers in 2025</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="prototyping-tools" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a22b614f1f85e6834c97c_443_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a22b614f1f85e6834c97c_443_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a22b614f1f85e6834c97c_443_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a22b614f1f85e6834c97c_443_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a22b614f1f85e6834c97c_443_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a22b614f1f85e6834c97c_443_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a22b614f1f85e6834c97c_443_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Ghost buttons in design: Pros and cons for your website</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Ghost buttons in design: Pros and cons for your website</h3><p class="u-mb-16 u-sm-mb-16">Learn the pros and cons of using ghost buttons so you can identify when and where to leverage their unique look to create engaging designs.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/ghost-buttons" class="u-link-overlay w-inline-block"><div class="sr-only">Ghost buttons in design: Pros and cons for your website</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="ghost-buttons" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a1e91722f4e6df21e6887_DESIGN_BlogHeader04_purple_2400x1260-1.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a1e91722f4e6df21e6887_DESIGN_BlogHeader04_purple_2400x1260-1-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a1e91722f4e6df21e6887_DESIGN_BlogHeader04_purple_2400x1260-1-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a1e91722f4e6df21e6887_DESIGN_BlogHeader04_purple_2400x1260-1-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a1e91722f4e6df21e6887_DESIGN_BlogHeader04_purple_2400x1260-1-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a1e91722f4e6df21e6887_DESIGN_BlogHeader04_purple_2400x1260-1-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/675a1e91722f4e6df21e6887_DESIGN_BlogHeader04_purple_2400x1260-1.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to use card UI design to improve your site's visual hierarchy</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#7a3dff" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to use card UI design to improve your site's visual hierarchy</h3><p class="u-mb-16 u-sm-mb-16">Learn the types of UI design cards, their use cases, and best practices. Discover how these elements improve your website’s layout and hierarchy.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/ui-design-cards" class="u-link-overlay w-inline-block"><div class="sr-only">How to use card UI design to improve your site's visual hierarchy</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="ui-design-cards" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6758e35a7dd74af06ea09733_392_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6758e35a7dd74af06ea09733_392_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6758e35a7dd74af06ea09733_392_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6758e35a7dd74af06ea09733_392_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6758e35a7dd74af06ea09733_392_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6758e35a7dd74af06ea09733_392_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6758e35a7dd74af06ea09733_392_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Card sorting in UX design: A complete guide</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ee1d36" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Card sorting in UX design: A complete guide</h3><p class="u-mb-16 u-sm-mb-16">Learn the different types of card sorting UX tests and how they uncover valuable insights about the way users understand your site structure.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/card-sorting-ux" class="u-link-overlay w-inline-block"><div class="sr-only">Card sorting in UX design: A complete guide</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="card-sorting-ux" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6753963591eab27b21dded1e_69_BlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6753963591eab27b21dded1e_69_BlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6753963591eab27b21dded1e_69_BlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6753963591eab27b21dded1e_69_BlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6753963591eab27b21dded1e_69_BlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6753963591eab27b21dded1e_69_BlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6753963591eab27b21dded1e_69_BlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Psychology of shapes in web design: How to convey meaning and boost conversions</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ff6b00" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Psychology of shapes in web design: How to convey meaning and boost conversions</h3><p class="u-mb-16 u-sm-mb-16">Learn how to leverage the psychology of shapes to evoke emotions, encourage action-oriented behavior on websites, and tell a brand’s story.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/psychology-of-shapes" class="u-link-overlay w-inline-block"><div class="sr-only">Psychology of shapes in web design: How to convey meaning and boost conversions</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="psychology-of-shapes" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div class="w-condition-invisible"><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="" class="new_cover-img w-dyn-bind-empty"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to optimize your toggle switch UI for a better user experience</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ed52cb" class="u-p-8"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to optimize your toggle switch UI for a better user experience</h3><p class="u-mb-16 u-sm-mb-16">Toggle switches are intuitive, responsive UI elements that let users quickly enable or disable settings. Learn to perfect them with these best practices.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/toggle-switch-ui" class="u-link-overlay w-inline-block"><div class="sr-only">How to optimize your toggle switch UI for a better user experience</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="toggle-switch-ui" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div class="w-condition-invisible"><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="" class="new_cover-img w-dyn-bind-empty"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Shopping cart design: 7 inspiring examples and best practices</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Tomas Laurinavicius</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#00d722" class="u-p-8"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Shopping cart design: 7 inspiring examples and best practices</h3><p class="u-mb-16 u-sm-mb-16">Follow these best practices for shopping cart designs to generate more conversions, improve the user experience, and reduce cart abandonment rates.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Tomas Laurinavicius</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/ecommerce-cart-design" class="u-link-overlay w-inline-block"><div class="sr-only">Shopping cart design: 7 inspiring examples and best practices</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="ecommerce-cart-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/674656574bec967d3a27f81e_PERSONALIZATION_DesignBlogHeader_2400x1260-1-1.png" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/674656574bec967d3a27f81e_PERSONALIZATION_DesignBlogHeader_2400x1260-1-1-p-500.png 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/674656574bec967d3a27f81e_PERSONALIZATION_DesignBlogHeader_2400x1260-1-1-p-800.png 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/674656574bec967d3a27f81e_PERSONALIZATION_DesignBlogHeader_2400x1260-1-1-p-1080.png 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/674656574bec967d3a27f81e_PERSONALIZATION_DesignBlogHeader_2400x1260-1-1-p-1600.png 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/674656574bec967d3a27f81e_PERSONALIZATION_DesignBlogHeader_2400x1260-1-1.png 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Rethinking pop-up designs: Tips for crafting effective pop-ups</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#3b89ff" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Rethinking pop-up designs: Tips for crafting effective pop-ups</h3><p class="u-mb-16 u-sm-mb-16">Getting pop-up design right is tricky, but these tips and techniques will help you design an impressive pop-up experience that reliably generates leads.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/popup-design" class="u-link-overlay w-inline-block"><div class="sr-only">Rethinking pop-up designs: Tips for crafting effective pop-ups</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="popup-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/674651460f02cbfe61e31fad_361_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/674651460f02cbfe61e31fad_361_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/674651460f02cbfe61e31fad_361_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/674651460f02cbfe61e31fad_361_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/674651460f02cbfe61e31fad_361_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/674651460f02cbfe61e31fad_361_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/674651460f02cbfe61e31fad_361_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Notification design: Practical dos and don’ts for a better UX</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#00d722" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Notification design: Practical dos and don’ts for a better UX</h3><p class="u-mb-16 u-sm-mb-16">Follow these UX best practices to create informative, engaging notifications that call users to action and enhance their experience with your product.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/notification-ux" class="u-link-overlay w-inline-block"><div class="sr-only">Notification design: Practical dos and don’ts for a better UX</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="notification-ux" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/67256ad3c7a2fcf419bceef0_DESIGN_BlogHeader10_orange_2400x1260-2.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/67256ad3c7a2fcf419bceef0_DESIGN_BlogHeader10_orange_2400x1260-2-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/67256ad3c7a2fcf419bceef0_DESIGN_BlogHeader10_orange_2400x1260-2-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/67256ad3c7a2fcf419bceef0_DESIGN_BlogHeader10_orange_2400x1260-2-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/67256ad3c7a2fcf419bceef0_DESIGN_BlogHeader10_orange_2400x1260-2-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/67256ad3c7a2fcf419bceef0_DESIGN_BlogHeader10_orange_2400x1260-2-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/67256ad3c7a2fcf419bceef0_DESIGN_BlogHeader10_orange_2400x1260-2.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">11 premium UI kits for stunning web designs</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">11 premium UI kits for stunning web designs</h3><p class="u-mb-16 u-sm-mb-16">Create functional web designs with these 11 UI kits. Start a new project or copy and paste elements into your existing sites to give them a creative boost.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/ui-kits" class="u-link-overlay w-inline-block"><div class="sr-only">11 premium UI kits for stunning web designs</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="ui-kits" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/672566f19b5ca75c00b6df53_DESIGN_BlogHeader20_yellow_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/672566f19b5ca75c00b6df53_DESIGN_BlogHeader20_yellow_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/672566f19b5ca75c00b6df53_DESIGN_BlogHeader20_yellow_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/672566f19b5ca75c00b6df53_DESIGN_BlogHeader20_yellow_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/672566f19b5ca75c00b6df53_DESIGN_BlogHeader20_yellow_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/672566f19b5ca75c00b6df53_DESIGN_BlogHeader20_yellow_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/672566f19b5ca75c00b6df53_DESIGN_BlogHeader20_yellow_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">The 14 best modern fonts to use in 2024</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jeff Cardello</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ffae13" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">The 14 best modern fonts to use in 2024</h3><p class="u-mb-16 u-sm-mb-16">Discover 14 modern fonts for web design and learn about the subtle differences that set them apart along with their history and best uses.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jeff Cardello</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/modern-fonts" class="u-link-overlay w-inline-block"><div class="sr-only">The 14 best modern fonts to use in 2024</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="modern-fonts" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6722c2af5830c468fe4921d0_434_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6722c2af5830c468fe4921d0_434_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6722c2af5830c468fe4921d0_434_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6722c2af5830c468fe4921d0_434_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6722c2af5830c468fe4921d0_434_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6722c2af5830c468fe4921d0_434_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6722c2af5830c468fe4921d0_434_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Icons for websites: 7 key principles for visually appealing icon shapes</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ee1d36" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Icons for websites: 7 key principles for visually appealing icon shapes</h3><p class="u-mb-16 u-sm-mb-16">Learn the seven principles of icon design and follow a step-by-step guide to create visually appealing, functional icon sets for your client’s website.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/icon-design" class="u-link-overlay w-inline-block"><div class="sr-only">Icons for websites: 7 key principles for visually appealing icon shapes</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="icon-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/671c1d3444bcf7b81b92f271_12_AIBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/671c1d3444bcf7b81b92f271_12_AIBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/671c1d3444bcf7b81b92f271_12_AIBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/671c1d3444bcf7b81b92f271_12_AIBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/671c1d3444bcf7b81b92f271_12_AIBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/671c1d3444bcf7b81b92f271_12_AIBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/671c1d3444bcf7b81b92f271_12_AIBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Psychology in UX design: 8 ways to target audiences with your web designs</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ffae13" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Psychology in UX design: 8 ways to target audiences with your web designs</h3><p class="u-mb-16 u-sm-mb-16">Use psychology in your UX designs with these eight fundamental principles. Understand what resonates with a client’s target audience and why.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/psychology-in-design" class="u-link-overlay w-inline-block"><div class="sr-only">Psychology in UX design: 8 ways to target audiences with your web designs</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="psychology-in-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb1e653a3cc9c6ba57d643_442_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb1e653a3cc9c6ba57d643_442_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb1e653a3cc9c6ba57d643_442_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb1e653a3cc9c6ba57d643_442_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb1e653a3cc9c6ba57d643_442_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb1e653a3cc9c6ba57d643_442_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb1e653a3cc9c6ba57d643_442_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Benefits of dark mode: Is it better for user experience?</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Benefits of dark mode: Is it better for user experience?</h3><p class="u-mb-16 u-sm-mb-16">Examine the drawbacks and benefits of dark mode to determine whether it’s a good choice to incorporate into your designs for an optimized user experience.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/benefits-of-dark-mode" class="u-link-overlay w-inline-block"><div class="sr-only">Benefits of dark mode: Is it better for user experience?</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="benefits-of-dark-mode" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6705c65f955ec58416ddd31b_DESIGN_BlogHeader15_blue_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6705c65f955ec58416ddd31b_DESIGN_BlogHeader15_blue_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6705c65f955ec58416ddd31b_DESIGN_BlogHeader15_blue_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6705c65f955ec58416ddd31b_DESIGN_BlogHeader15_blue_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6705c65f955ec58416ddd31b_DESIGN_BlogHeader15_blue_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6705c65f955ec58416ddd31b_DESIGN_BlogHeader15_blue_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6705c65f955ec58416ddd31b_DESIGN_BlogHeader15_blue_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to use information architecture to build logical layouts</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#146ef5" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to use information architecture to build logical layouts</h3><p class="u-mb-16 u-sm-mb-16">Learn why information architecture is essential to website structures, and discover best practices to improve the overall user experience.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/information-architecture" class="u-link-overlay w-inline-block"><div class="sr-only">How to use information architecture to build logical layouts</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="information-architecture" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div class="w-condition-invisible"><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="" class="new_cover-img w-dyn-bind-empty"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Minimalist graphic design: 6 key principles with examples</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#7a3dff" class="u-p-8"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Minimalist graphic design: 6 key principles with examples</h3><p class="u-mb-16 u-sm-mb-16">Learn where minimalism started and how it influences modern graphic designers with its commitment to simplicity, functionality, and elegance.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/minimalist-graphic-design" class="u-link-overlay w-inline-block"><div class="sr-only">Minimalist graphic design: 6 key principles with examples</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="minimalist-graphic-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/658374f8f2d5340eb6d3a3b2_71_BlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/658374f8f2d5340eb6d3a3b2_71_BlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/658374f8f2d5340eb6d3a3b2_71_BlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/658374f8f2d5340eb6d3a3b2_71_BlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/658374f8f2d5340eb6d3a3b2_71_BlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/658374f8f2d5340eb6d3a3b2_71_BlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/658374f8f2d5340eb6d3a3b2_71_BlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to use serial position effect in web design to create memorable sites</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ed52cb" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to use serial position effect in web design to create memorable sites</h3><p class="u-mb-16 u-sm-mb-16">Learn how the serial position effect captures attention, highlights a website’s most important elements, and encourages visitors to take action.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/serial-position-effect" class="u-link-overlay w-inline-block"><div class="sr-only">How to use serial position effect in web design to create memorable sites</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="serial-position-effect" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6709b3d201b03638fadae1e6_418_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6709b3d201b03638fadae1e6_418_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6709b3d201b03638fadae1e6_418_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6709b3d201b03638fadae1e6_418_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6709b3d201b03638fadae1e6_418_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6709b3d201b03638fadae1e6_418_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6709b3d201b03638fadae1e6_418_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">8 online web design certificates for beginners in 2024</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">8 online web design certificates for beginners in 2024</h3><p class="u-mb-16 u-sm-mb-16">Web design certificates improve your credibility as a creative professional. Check out eight popular certifications to build your career and attract more client</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/web-design-certification" class="u-link-overlay w-inline-block"><div class="sr-only">8 online web design certificates for beginners in 2024</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="web-design-certification" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f5d3c7572fdd5cf9fb96fb_433_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f5d3c7572fdd5cf9fb96fb_433_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f5d3c7572fdd5cf9fb96fb_433_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f5d3c7572fdd5cf9fb96fb_433_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f5d3c7572fdd5cf9fb96fb_433_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f5d3c7572fdd5cf9fb96fb_433_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f5d3c7572fdd5cf9fb96fb_433_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to conduct cognitive walkthroughs to improve your site’s UX</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ff6b00" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to conduct cognitive walkthroughs to improve your site’s UX</h3><p class="u-mb-16 u-sm-mb-16">Discover how to use cognitive walkthroughs to learn more about your site’s usability, and use those insights to make it more intuitive to first-time visitors.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/cognitive-walkthrough" class="u-link-overlay w-inline-block"><div class="sr-only">How to conduct cognitive walkthroughs to improve your site’s UX</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="cognitive-walkthrough" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f35164da7b8bb0dfb4e0a8_56_BlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f35164da7b8bb0dfb4e0a8_56_BlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f35164da7b8bb0dfb4e0a8_56_BlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f35164da7b8bb0dfb4e0a8_56_BlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f35164da7b8bb0dfb4e0a8_56_BlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f35164da7b8bb0dfb4e0a8_56_BlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f35164da7b8bb0dfb4e0a8_56_BlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Image optimization for web design: 5 tips and 3 tools to improve your site</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Image optimization for web design: 5 tips and 3 tools to improve your site</h3><p class="u-mb-16 u-sm-mb-16">Try these five image optimization techniques to ensure your webpages load quickly, allowing users to enjoy a responsive, seamless experience.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/image-optimization-for-web" class="u-link-overlay w-inline-block"><div class="sr-only">Image optimization for web design: 5 tips and 3 tools to improve your site</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="image-optimization-for-web" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6709bd775df3b017ea9bd4bf_DESIGN_BlogHeader13_yellow_2400x1260-2.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6709bd775df3b017ea9bd4bf_DESIGN_BlogHeader13_yellow_2400x1260-2-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6709bd775df3b017ea9bd4bf_DESIGN_BlogHeader13_yellow_2400x1260-2-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6709bd775df3b017ea9bd4bf_DESIGN_BlogHeader13_yellow_2400x1260-2-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6709bd775df3b017ea9bd4bf_DESIGN_BlogHeader13_yellow_2400x1260-2-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6709bd775df3b017ea9bd4bf_DESIGN_BlogHeader13_yellow_2400x1260-2-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6709bd775df3b017ea9bd4bf_DESIGN_BlogHeader13_yellow_2400x1260-2.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">10 stunning photography website templates to inspire your next project</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Naja Wade</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">10 stunning photography website templates to inspire your next project</h3><p class="u-mb-16 u-sm-mb-16">Learn what makes a photography portfolio effective and find inspiration from these 10 photography website templates to create designs that attract clients. </p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Naja Wade</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/photography-website-templates" class="u-link-overlay w-inline-block"><div class="sr-only">10 stunning photography website templates to inspire your next project</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="photography-website-templates" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f34e1dbb15e802dfda4130_88_ExternalCommunicationBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f34e1dbb15e802dfda4130_88_ExternalCommunicationBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f34e1dbb15e802dfda4130_88_ExternalCommunicationBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f34e1dbb15e802dfda4130_88_ExternalCommunicationBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f34e1dbb15e802dfda4130_88_ExternalCommunicationBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f34e1dbb15e802dfda4130_88_ExternalCommunicationBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66f34e1dbb15e802dfda4130_88_ExternalCommunicationBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Website design questionnaires: 7 essentials things to ask your clients</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#00d722" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Website design questionnaires: 7 essentials things to ask your clients</h3><p class="u-mb-16 u-sm-mb-16">Use this checklist to create a questionnaire for website design projects that can help you understand your client’s web design aspirations.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/questionnaire-for-website-design" class="u-link-overlay w-inline-block"><div class="sr-only">Website design questionnaires: 7 essentials things to ask your clients</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="questionnaire-for-website-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66e213aee3cdb32f620c6a7f_DESIGN_BlogHeader01_blue_2400x1260-1.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66e213aee3cdb32f620c6a7f_DESIGN_BlogHeader01_blue_2400x1260-1-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66e213aee3cdb32f620c6a7f_DESIGN_BlogHeader01_blue_2400x1260-1-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66e213aee3cdb32f620c6a7f_DESIGN_BlogHeader01_blue_2400x1260-1-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66e213aee3cdb32f620c6a7f_DESIGN_BlogHeader01_blue_2400x1260-1-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66e213aee3cdb32f620c6a7f_DESIGN_BlogHeader01_blue_2400x1260-1-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66e213aee3cdb32f620c6a7f_DESIGN_BlogHeader01_blue_2400x1260-1.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">What’s a parallax effect? 11 website examples that wow visitors</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jeff Cardello</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#146ef5" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">What’s a parallax effect? 11 website examples that wow visitors</h3><p class="u-mb-16 u-sm-mb-16">Find web design inspiration in these 11 parallax scrolling effect examples and learn how to bring depth and dynamism to your webpages.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jeff Cardello</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/parallax-scrolling" class="u-link-overlay w-inline-block"><div class="sr-only">What’s a parallax effect? 11 website examples that wow visitors</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="parallax-scrolling" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div class="w-condition-invisible"><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="" class="new_cover-img w-dyn-bind-empty"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Form design best practices and inspiring patterns to improve conversions</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Mat Vogels</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ffae13" class="u-p-8"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Form design best practices and inspiring patterns to improve conversions</h3><p class="u-mb-16 u-sm-mb-16">Learn how forms improve the user experience and incorporate these form design best practices to encourage action on your website.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Mat Vogels</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/4-inspirational-form-design-patterns" class="u-link-overlay w-inline-block"><div class="sr-only">Form design best practices and inspiring patterns to improve conversions</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="4-inspirational-form-design-patterns" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66761407a45ccfbeae1d1a4b_378_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66761407a45ccfbeae1d1a4b_378_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66761407a45ccfbeae1d1a4b_378_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66761407a45ccfbeae1d1a4b_378_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66761407a45ccfbeae1d1a4b_378_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66761407a45ccfbeae1d1a4b_378_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66761407a45ccfbeae1d1a4b_378_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">10 inspiring one-page website examples & tips to create your own</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Naja Wade</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ee1d36" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">10 inspiring one-page website examples & tips to create your own</h3><p class="u-mb-16 u-sm-mb-16">Find design inspiration from 10 modern one-page website examples. Learn the top tips and design tricks to make appealing single-page sites.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Naja Wade</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/one-page-website-examples" class="u-link-overlay w-inline-block"><div class="sr-only">10 inspiring one-page website examples & tips to create your own</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="one-page-website-examples" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66e215f901afa431fddc432f_DESIGN_BlogHeader11_purple_2400x1260-2.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66e215f901afa431fddc432f_DESIGN_BlogHeader11_purple_2400x1260-2-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66e215f901afa431fddc432f_DESIGN_BlogHeader11_purple_2400x1260-2-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66e215f901afa431fddc432f_DESIGN_BlogHeader11_purple_2400x1260-2-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66e215f901afa431fddc432f_DESIGN_BlogHeader11_purple_2400x1260-2-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66e215f901afa431fddc432f_DESIGN_BlogHeader11_purple_2400x1260-2-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66e215f901afa431fddc432f_DESIGN_BlogHeader11_purple_2400x1260-2.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">6 digital magazine design examples to inspire your next project</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">6 digital magazine design examples to inspire your next project</h3><p class="u-mb-16 u-sm-mb-16">Browse through these six digital magazine examples and learn best practices for designing visually appealing and functional layouts for your clients.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/magazines-examples" class="u-link-overlay w-inline-block"><div class="sr-only">6 digital magazine design examples to inspire your next project</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="magazines-examples" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div class="w-condition-invisible"><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="" class="new_cover-img w-dyn-bind-empty"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Top 11 differences between graphic and web design</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jeff Cardello</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#146ef5" class="u-p-8"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Top 11 differences between graphic and web design</h3><p class="u-mb-16 u-sm-mb-16">Graphic and web design require overlapping skill sets but serve different purposes. Learn about the distinctions between the two disciplines.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jeff Cardello</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/web-design-vs-graphic-design" class="u-link-overlay w-inline-block"><div class="sr-only">Top 11 differences between graphic and web design</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="web-design-vs-graphic-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66db7376bf838f5d6ea57b27_65_BlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66db7376bf838f5d6ea57b27_65_BlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66db7376bf838f5d6ea57b27_65_BlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66db7376bf838f5d6ea57b27_65_BlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66db7376bf838f5d6ea57b27_65_BlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66db7376bf838f5d6ea57b27_65_BlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66db7376bf838f5d6ea57b27_65_BlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to leverage the golden ratio to optimize your web designs</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#7a3dff" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to leverage the golden ratio to optimize your web designs</h3><p class="u-mb-16 u-sm-mb-16">Learn how to use the golden ratio in web design to establish visual hierarchies that promote readability, intuitive understanding, and appealing layouts.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/golden-ratio-design" class="u-link-overlay w-inline-block"><div class="sr-only">How to leverage the golden ratio to optimize your web designs</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="golden-ratio-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66ecb6469e87685418b2b7e2_447_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66ecb6469e87685418b2b7e2_447_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66ecb6469e87685418b2b7e2_447_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66ecb6469e87685418b2b7e2_447_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66ecb6469e87685418b2b7e2_447_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66ecb6469e87685418b2b7e2_447_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66ecb6469e87685418b2b7e2_447_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">UX vs. UI design: What makes them different?</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Tomas Laurinavicius</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">UX vs. UI design: What makes them different?</h3><p class="u-mb-16 u-sm-mb-16">UX and UI design work together to make websites functional and beautiful. Learn the differences and similarities between the two disciplines.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Tomas Laurinavicius</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/ux-vs-ui-design" class="u-link-overlay w-inline-block"><div class="sr-only">UX vs. UI design: What makes them different?</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="ux-vs-ui-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66d9f35f9ea734cd00ae6152_192_BusinessBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66d9f35f9ea734cd00ae6152_192_BusinessBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66d9f35f9ea734cd00ae6152_192_BusinessBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66d9f35f9ea734cd00ae6152_192_BusinessBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66d9f35f9ea734cd00ae6152_192_BusinessBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66d9f35f9ea734cd00ae6152_192_BusinessBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66d9f35f9ea734cd00ae6152_192_BusinessBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Elevate your sign-up page design with these 5 effective best practices</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#146ef5" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Elevate your sign-up page design with these 5 effective best practices</h3><p class="u-mb-16 u-sm-mb-16">Try these five clever techniques to elevate your sign-up page design and capture your users’ interest. Plus, explore successful examples.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/sign-up-page-design" class="u-link-overlay w-inline-block"><div class="sr-only">Elevate your sign-up page design with these 5 effective best practices</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="sign-up-page-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/655bd5736aa69cd0aed93e58_386_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/655bd5736aa69cd0aed93e58_386_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/655bd5736aa69cd0aed93e58_386_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/655bd5736aa69cd0aed93e58_386_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/655bd5736aa69cd0aed93e58_386_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/655bd5736aa69cd0aed93e58_386_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/655bd5736aa69cd0aed93e58_386_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Why is web design important? An exploration of benefits and principles</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ed52cb" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Why is web design important? An exploration of benefits and principles</h3><p class="u-mb-16 u-sm-mb-16">Learn why web design is important in today’s digital landscape and explore some basic principles that can help you optimize yours and grow your audience.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/why-is-web-design-important" class="u-link-overlay w-inline-block"><div class="sr-only">Why is web design important? An exploration of benefits and principles</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="why-is-web-design-important" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66d8e24d256340e63ef80399_440_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66d8e24d256340e63ef80399_440_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66d8e24d256340e63ef80399_440_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66d8e24d256340e63ef80399_440_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66d8e24d256340e63ef80399_440_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66d8e24d256340e63ef80399_440_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66d8e24d256340e63ef80399_440_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">UX prototyping: The secret to creating successful designs</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ff6b00" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">UX prototyping: The secret to creating successful designs</h3><p class="u-mb-16 u-sm-mb-16">UX prototyping allows you to demonstrate your designs, test them with users, hand them off to developers, and convince executives to support your project.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/ux-prototyping" class="u-link-overlay w-inline-block"><div class="sr-only">UX prototyping: The secret to creating successful designs</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="ux-prototyping" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7e383e6befb872107a58_425_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7e383e6befb872107a58_425_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7e383e6befb872107a58_425_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7e383e6befb872107a58_425_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7e383e6befb872107a58_425_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7e383e6befb872107a58_425_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7e383e6befb872107a58_425_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Craft effective CTAs with these best practices and optimizations</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Craft effective CTAs with these best practices and optimizations</h3><p class="u-mb-16 u-sm-mb-16">Implement these CTA best practices to start building action buttons that convert more readers from passive visitors to active customers.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/cta-best-practices" class="u-link-overlay w-inline-block"><div class="sr-only">Craft effective CTAs with these best practices and optimizations</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="cta-best-practices" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7b778b1bf071aeaa38fa_385_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7b778b1bf071aeaa38fa_385_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7b778b1bf071aeaa38fa_385_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7b778b1bf071aeaa38fa_385_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7b778b1bf071aeaa38fa_385_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7b778b1bf071aeaa38fa_385_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66cf7b778b1bf071aeaa38fa_385_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to design dropdown menus that improve navigation and usability</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ee1d36" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to design dropdown menus that improve navigation and usability</h3><p class="u-mb-16 u-sm-mb-16">Learn how to use HTML and CSS to design custom dropdown menus that improve how users interact with a page, fill out a form, or navigate your website.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/dropdown-menu" class="u-link-overlay w-inline-block"><div class="sr-only">How to design dropdown menus that improve navigation and usability</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="dropdown-menu" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66c648e03cdb75f213390ad1_436_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66c648e03cdb75f213390ad1_436_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66c648e03cdb75f213390ad1_436_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66c648e03cdb75f213390ad1_436_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66c648e03cdb75f213390ad1_436_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66c648e03cdb75f213390ad1_436_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66c648e03cdb75f213390ad1_436_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to use breakpoints to create responsive websites</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#7a3dff" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to use breakpoints to create responsive websites</h3><p class="u-mb-16 u-sm-mb-16">Learn the most common responsive breakpoints, types, and best practices to create more accessible and enjoyable websites for all devices.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/responsive-breakpoints" class="u-link-overlay w-inline-block"><div class="sr-only">How to use breakpoints to create responsive websites</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="responsive-breakpoints" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66c521dc47996bf4515e73e3_307_MarketingBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66c521dc47996bf4515e73e3_307_MarketingBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66c521dc47996bf4515e73e3_307_MarketingBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66c521dc47996bf4515e73e3_307_MarketingBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66c521dc47996bf4515e73e3_307_MarketingBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66c521dc47996bf4515e73e3_307_MarketingBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66c521dc47996bf4515e73e3_307_MarketingBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to check and improve your website load times</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ff6b00" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to check and improve your website load times</h3><p class="u-mb-16 u-sm-mb-16">Your website load times contribute significantly to how professional and seamless your site appears. Optimize your page loading to improve user retention.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/website-load-times" class="u-link-overlay w-inline-block"><div class="sr-only">How to check and improve your website load times</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="website-load-times" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b6a75b741e43b694d20559_455_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b6a75b741e43b694d20559_455_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b6a75b741e43b694d20559_455_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b6a75b741e43b694d20559_455_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b6a75b741e43b694d20559_455_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b6a75b741e43b694d20559_455_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b6a75b741e43b694d20559_455_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">7 microinteractions examples and how they boost web UX</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Naja Wade</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">7 microinteractions examples and how they boost web UX</h3><p class="u-mb-16 u-sm-mb-16">Learn how website microinteractions enhance user experience with these 7 examples.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Naja Wade</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/microinteractions" class="u-link-overlay w-inline-block"><div class="sr-only">7 microinteractions examples and how they boost web UX</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="microinteractions" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b69cc263f8077c40a88640_358_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b69cc263f8077c40a88640_358_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b69cc263f8077c40a88640_358_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b69cc263f8077c40a88640_358_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b69cc263f8077c40a88640_358_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b69cc263f8077c40a88640_358_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b69cc263f8077c40a88640_358_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to increase conversions with compelling call-to-action button colors</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ed52cb" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to increase conversions with compelling call-to-action button colors</h3><p class="u-mb-16 u-sm-mb-16">Learn how different CTA button colors impact people psychologically and use the right colors to attract attention and encourage clicks from website visitors.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/cta-button-colors" class="u-link-overlay w-inline-block"><div class="sr-only">How to increase conversions with compelling call-to-action button colors</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="cta-button-colors" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b16ad0d8362e04622187dd_439_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b16ad0d8362e04622187dd_439_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b16ad0d8362e04622187dd_439_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b16ad0d8362e04622187dd_439_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b16ad0d8362e04622187dd_439_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b16ad0d8362e04622187dd_439_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66b16ad0d8362e04622187dd_439_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Build better user-centered websites with an iterative design approach</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ffae13" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Build better user-centered websites with an iterative design approach</h3><p class="u-mb-16 u-sm-mb-16">Learn the four stages of iterative design to continuously improve your website. Create a user-centered experience your audience will love.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/iterative-design" class="u-link-overlay w-inline-block"><div class="sr-only">Build better user-centered websites with an iterative design approach</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="iterative-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66a15a7ffd9d6671538450d4_426_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66a15a7ffd9d6671538450d4_426_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66a15a7ffd9d6671538450d4_426_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66a15a7ffd9d6671538450d4_426_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66a15a7ffd9d6671538450d4_426_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66a15a7ffd9d6671538450d4_426_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66a15a7ffd9d6671538450d4_426_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Lightbox popups: 5 examples and how to make one</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Lightbox popups: 5 examples and how to make one</h3><p class="u-mb-16 u-sm-mb-16">Lightbox popups are a modern take on an old-school design. Learn how to make them in five steps and check out some examples for a spark of inspiration.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/lightbox-popups" class="u-link-overlay w-inline-block"><div class="sr-only">Lightbox popups: 5 examples and how to make one</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="lightbox-popups" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6691bf55627ec88a5446257b_667ef9b2c7a078f661bb0d6c_207_BusinessBlogHeader_2400x1260.png" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6691bf55627ec88a5446257b_667ef9b2c7a078f661bb0d6c_207_BusinessBlogHeader_2400x1260-p-500.png 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6691bf55627ec88a5446257b_667ef9b2c7a078f661bb0d6c_207_BusinessBlogHeader_2400x1260-p-800.png 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6691bf55627ec88a5446257b_667ef9b2c7a078f661bb0d6c_207_BusinessBlogHeader_2400x1260.png 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Improve your website’s navigation with tree testing: When and how to do tree tests</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#00d722" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Improve your website’s navigation with tree testing: When and how to do tree tests</h3><p class="u-mb-16 u-sm-mb-16">Learn how tree testing reveals your target audience’s mental models and implement best practices to improve website navigation and meet their expectations.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/tree-testing" class="u-link-overlay w-inline-block"><div class="sr-only">Improve your website’s navigation with tree testing: When and how to do tree tests</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="tree-testing" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/667f0c71dafaa6754a5d8cfc_395_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/667f0c71dafaa6754a5d8cfc_395_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/667f0c71dafaa6754a5d8cfc_395_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/667f0c71dafaa6754a5d8cfc_395_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/667f0c71dafaa6754a5d8cfc_395_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/667f0c71dafaa6754a5d8cfc_395_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/667f0c71dafaa6754a5d8cfc_395_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Website redesign strategy: Top tips for keeping your site fresh</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#146ef5" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Website redesign strategy: Top tips for keeping your site fresh</h3><p class="u-mb-16 u-sm-mb-16">A website redesign is a full-scale transformation that helps your site evolve to match your growing business needs.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/website-redesign" class="u-link-overlay w-inline-block"><div class="sr-only">Website redesign strategy: Top tips for keeping your site fresh</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="website-redesign" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/666cd0586b92d1a4b79e913a_387_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/666cd0586b92d1a4b79e913a_387_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/666cd0586b92d1a4b79e913a_387_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/666cd0586b92d1a4b79e913a_387_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/666cd0586b92d1a4b79e913a_387_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/666cd0586b92d1a4b79e913a_387_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/666cd0586b92d1a4b79e913a_387_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Understanding cross-browser compatibility: 5 common issues & how to test</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#7a3dff" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Understanding cross-browser compatibility: 5 common issues & how to test</h3><p class="u-mb-16 u-sm-mb-16">Cross-browser compatibility tests ensure your website reaches its intended audience without inconsistencies that could poorly impact their experience.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/cross-browser-compatibility" class="u-link-overlay w-inline-block"><div class="sr-only">Understanding cross-browser compatibility: 5 common issues & how to test</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="cross-browser-compatibility" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f8b04aea892b284d200b_368_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f8b04aea892b284d200b_368_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f8b04aea892b284d200b_368_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f8b04aea892b284d200b_368_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f8b04aea892b284d200b_368_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f8b04aea892b284d200b_368_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f8b04aea892b284d200b_368_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">9 steps for creating a website visual design in the web design process</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#00d722" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">9 steps for creating a website visual design in the web design process</h3><p class="u-mb-16 u-sm-mb-16">Understand the importance of visuals in the web design process and create user-friendly layouts for varied website types and target audiences.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/the-web-design-process-creating-the-visual-design" class="u-link-overlay w-inline-block"><div class="sr-only">9 steps for creating a website visual design in the web design process</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="the-web-design-process-creating-the-visual-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div class="w-condition-invisible"><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="" class="new_cover-img w-dyn-bind-empty"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">ADA testing 101: How to create an accessible website</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#146ef5" class="u-p-8"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">ADA testing 101: How to create an accessible website</h3><p class="u-mb-16 u-sm-mb-16">ADA compliance ensures more people in your audience can use your site. Try these ADA testing techniques to ensure your site meets critical guidelines.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/ada-testing" class="u-link-overlay w-inline-block"><div class="sr-only">ADA testing 101: How to create an accessible website</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="ada-testing" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66566e36a5dced8911965da2_151_InternalCommunicationBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66566e36a5dced8911965da2_151_InternalCommunicationBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66566e36a5dced8911965da2_151_InternalCommunicationBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66566e36a5dced8911965da2_151_InternalCommunicationBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66566e36a5dced8911965da2_151_InternalCommunicationBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66566e36a5dced8911965da2_151_InternalCommunicationBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66566e36a5dced8911965da2_151_InternalCommunicationBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Empathy mapping: Bridging the gap between design and user experience</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Empathy mapping: Bridging the gap between design and user experience</h3><p class="u-mb-16 u-sm-mb-16">Learn how the four quadrants of empathy mapping uncover your audience’s preferences and use them to create user-centric website experiences.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/empathy-mapping" class="u-link-overlay w-inline-block"><div class="sr-only">Empathy mapping: Bridging the gap between design and user experience</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="empathy-mapping" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">7 examples of great intranet design to inspire your team</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ed52cb" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">7 examples of great intranet design to inspire your team</h3><p class="u-mb-16 u-sm-mb-16">Realize your organization’s full potential with an impeccable intranet design that puts everything your employees need right at their fingertips.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/intranet-design" class="u-link-overlay w-inline-block"><div class="sr-only">7 examples of great intranet design to inspire your team</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="intranet-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/663d4fa6d20337384f99e900_453_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/663d4fa6d20337384f99e900_453_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/663d4fa6d20337384f99e900_453_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/663d4fa6d20337384f99e900_453_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/663d4fa6d20337384f99e900_453_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/663d4fa6d20337384f99e900_453_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/663d4fa6d20337384f99e900_453_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">5 exit-intent pop-up ideas to increase conversions</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">5 exit-intent pop-up ideas to increase conversions</h3><p class="u-mb-16 u-sm-mb-16">Discover how exit-intent pop-ups keep visitors on your website and learn how to design attractive and convincing pop-ups to increase your bottom line.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/exit-intent-popups" class="u-link-overlay w-inline-block"><div class="sr-only">5 exit-intent pop-up ideas to increase conversions</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="exit-intent-popups" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f1f6ef5af4fac2f16536_72_BlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f1f6ef5af4fac2f16536_72_BlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f1f6ef5af4fac2f16536_72_BlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f1f6ef5af4fac2f16536_72_BlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f1f6ef5af4fac2f16536_72_BlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f1f6ef5af4fac2f16536_72_BlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f1f6ef5af4fac2f16536_72_BlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">10 best UX design portfolio examples that’ll inspire you in 2024</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#7a3dff" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">10 best UX design portfolio examples that’ll inspire you in 2024</h3><p class="u-mb-16 u-sm-mb-16">Every UX designer needs an online UX design portfolio to showcase their work and design process. These 10 stand out as the best sources of inspiration in 2024.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/ux-designer-portfolio" class="u-link-overlay w-inline-block"><div class="sr-only">10 best UX design portfolio examples that’ll inspire you in 2024</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="ux-designer-portfolio" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/662bdf6e8ead7afa307cf2bf_152_InternalCommunicationBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/662bdf6e8ead7afa307cf2bf_152_InternalCommunicationBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/662bdf6e8ead7afa307cf2bf_152_InternalCommunicationBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/662bdf6e8ead7afa307cf2bf_152_InternalCommunicationBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/662bdf6e8ead7afa307cf2bf_152_InternalCommunicationBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/662bdf6e8ead7afa307cf2bf_152_InternalCommunicationBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/662bdf6e8ead7afa307cf2bf_152_InternalCommunicationBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Creating a contact form on your website: A complete guide</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Creating a contact form on your website: A complete guide</h3><p class="u-mb-16 u-sm-mb-16">Placing a contact form on your website is a brilliant method for encouraging users to engage to offer feedback, schedule a demo, and raise concerns</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/contact-form-on-website" class="u-link-overlay w-inline-block"><div class="sr-only">Creating a contact form on your website: A complete guide</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="contact-form-on-website" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/662192aa0cc312407cdf72b7_365_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/662192aa0cc312407cdf72b7_365_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/662192aa0cc312407cdf72b7_365_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/662192aa0cc312407cdf72b7_365_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/662192aa0cc312407cdf72b7_365_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/662192aa0cc312407cdf72b7_365_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/662192aa0cc312407cdf72b7_365_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to create an event website: Tips for attracting attendees</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ed52cb" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to create an event website: Tips for attracting attendees</h3><p class="u-mb-16 u-sm-mb-16">An event site is more than just an informational brochure. Learn how to create an event website that makes a great first impression and drives ticket sales.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/how-to-create-an-event-website" class="u-link-overlay w-inline-block"><div class="sr-only">How to create an event website: Tips for attracting attendees</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="how-to-create-an-event-website" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660e8efed2d31c4952b5271_421_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660e8efed2d31c4952b5271_421_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660e8efed2d31c4952b5271_421_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660e8efed2d31c4952b5271_421_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660e8efed2d31c4952b5271_421_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660e8efed2d31c4952b5271_421_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660e8efed2d31c4952b5271_421_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">20 best graphic design software tools in 2024</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">20 best graphic design software tools in 2024</h3><p class="u-mb-16 u-sm-mb-16">Discover the best professional graphic design software and platforms for all types of designers, from solo entrepreneurs to well-staffed design studios.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/graphic-design-software" class="u-link-overlay w-inline-block"><div class="sr-only">20 best graphic design software tools in 2024</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="graphic-design-software" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/663d5ae73b4f55bf91555fdd_388_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/663d5ae73b4f55bf91555fdd_388_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/663d5ae73b4f55bf91555fdd_388_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/663d5ae73b4f55bf91555fdd_388_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/663d5ae73b4f55bf91555fdd_388_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/663d5ae73b4f55bf91555fdd_388_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/663d5ae73b4f55bf91555fdd_388_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">21 best UI & UX design tools to try in 2024</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jeff Cardello</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#146ef5" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">21 best UI & UX design tools to try in 2024</h3><p class="u-mb-16 u-sm-mb-16">Discover the best UI/UX design tools for designers — from prototyping to information architecture.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jeff Cardello</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/ui-ux-design-tools" class="u-link-overlay w-inline-block"><div class="sr-only">21 best UI & UX design tools to try in 2024</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="ui-ux-design-tools" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div class="w-condition-invisible"><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="" class="new_cover-img w-dyn-bind-empty"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to create a business style guide to boost branding consistency</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#00d722" class="u-p-8"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to create a business style guide to boost branding consistency</h3><p class="u-mb-16 u-sm-mb-16">Discover the key elements of a business style guide and learn how to create brand identity guidelines that embody your brand.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/business-style-guide" class="u-link-overlay w-inline-block"><div class="sr-only">How to create a business style guide to boost branding consistency</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="business-style-guide" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb1e653a3cc9c6ba57d643_442_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb1e653a3cc9c6ba57d643_442_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb1e653a3cc9c6ba57d643_442_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb1e653a3cc9c6ba57d643_442_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb1e653a3cc9c6ba57d643_442_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb1e653a3cc9c6ba57d643_442_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb1e653a3cc9c6ba57d643_442_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Design systems: What it is, examples, & how to create one</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Design systems: What it is, examples, & how to create one</h3><p class="u-mb-16 u-sm-mb-16">Learn everything you need to know about design systems to fully utilize them and build more consistent on-brand experiences.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/design-systems" class="u-link-overlay w-inline-block"><div class="sr-only">Design systems: What it is, examples, & how to create one</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="design-systems" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f8b04aea892b284d200b_368_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f8b04aea892b284d200b_368_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f8b04aea892b284d200b_368_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f8b04aea892b284d200b_368_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f8b04aea892b284d200b_368_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f8b04aea892b284d200b_368_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6660f8b04aea892b284d200b_368_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">10 stunning web design portfolio examples in 2025</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Naja Wade</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#00d722" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">10 stunning web design portfolio examples in 2025</h3><p class="u-mb-16 u-sm-mb-16">As a web designer, you need a portfolio to show your best work and land clients. Here are 10 web design portfolio examples for inspiration.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Naja Wade</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/web-design-portfolios" class="u-link-overlay w-inline-block"><div class="sr-only">10 stunning web design portfolio examples in 2025</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="web-design-portfolios" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div class="w-condition-invisible"><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="" class="new_cover-img w-dyn-bind-empty"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Building an effective enterprise UI: Core components and must-haves</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ee1d36" class="u-p-8"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Building an effective enterprise UI: Core components and must-haves</h3><p class="u-mb-16 u-sm-mb-16">Harness enterprise UI design systems to promote consistency and scalability in your enterprise web projects. Learn about the benefits of building an enterprise</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/enterprise-ui" class="u-link-overlay w-inline-block"><div class="sr-only">Building an effective enterprise UI: Core components and must-haves</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="enterprise-ui" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66357de1e37708e0ad1219c8_391_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66357de1e37708e0ad1219c8_391_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66357de1e37708e0ad1219c8_391_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66357de1e37708e0ad1219c8_391_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66357de1e37708e0ad1219c8_391_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66357de1e37708e0ad1219c8_391_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/66357de1e37708e0ad1219c8_391_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">26 best website design ideas for your 2024 projects</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jeff Cardello</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ff6b00" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">26 best website design ideas for your 2024 projects</h3><p class="u-mb-16 u-sm-mb-16">If you're looking for website ideas, here are 26 website projects that you can launch to bring in some extra revenue.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jeff Cardello</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/website-ideas" class="u-link-overlay w-inline-block"><div class="sr-only">26 best website design ideas for your 2024 projects</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="website-ideas" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div class="w-condition-invisible"><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="" class="new_cover-img w-dyn-bind-empty"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">What is graphic design? With examples for beginners</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Nikiya Palombi</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#7a3dff" class="u-p-8"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">What is graphic design? With examples for beginners</h3><p class="u-mb-16 u-sm-mb-16">What is graphic design? This beginner’s guide walks you through the definition of graphic design and shares examples of different types. </p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Nikiya Palombi</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/what-is-graphic-design" class="u-link-overlay w-inline-block"><div class="sr-only">What is graphic design? With examples for beginners</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="what-is-graphic-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div class="w-condition-invisible"><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="" class="new_cover-img w-dyn-bind-empty"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to learn web design in 9 steps (+ best practices)</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jeff Cardello</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#146ef5" class="u-p-8"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to learn web design in 9 steps (+ best practices)</h3><p class="u-mb-16 u-sm-mb-16">Discover how to learn web design and learn the basics of UI, UX, HTML, CSS, and visual design.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jeff Cardello</div><div class="u-mr-3">,</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/how-to-learn-web-design" class="u-link-overlay w-inline-block"><div class="sr-only">How to learn web design in 9 steps (+ best practices)</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="how-to-learn-web-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/660db9f5c58603f3f7ba066a_451_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/660db9f5c58603f3f7ba066a_451_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/660db9f5c58603f3f7ba066a_451_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/660db9f5c58603f3f7ba066a_451_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/660db9f5c58603f3f7ba066a_451_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/660db9f5c58603f3f7ba066a_451_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/660db9f5c58603f3f7ba066a_451_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Improve your site’s user experience with these 8 essential strategies</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Improve your site’s user experience with these 8 essential strategies</h3><p class="u-mb-16 u-sm-mb-16">Boost engagement and conversions with a refined user experience strategy. Learn how to make your website memorable and forge lasting customer connections.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/improving-user-experience" class="u-link-overlay w-inline-block"><div class="sr-only">Improve your site’s user experience with these 8 essential strategies</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="improving-user-experience" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div class="w-condition-invisible"><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="" class="new_cover-img w-dyn-bind-empty"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to use ARIA: A beginner’s guide</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#146ef5" class="u-p-8"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to use ARIA: A beginner’s guide</h3><p class="u-mb-16 u-sm-mb-16">Accessible Rich Internet Applications (ARIA) makes websites more accessible for people with disabilities. Learn how to use ARIA and why it’s so important.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/how-to-use-aria" class="u-link-overlay w-inline-block"><div class="sr-only">How to use ARIA: A beginner’s guide</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="how-to-use-aria" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e6322c89b9e6c4a4e5f420_444_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e6322c89b9e6c4a4e5f420_444_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e6322c89b9e6c4a4e5f420_444_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e6322c89b9e6c4a4e5f420_444_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e6322c89b9e6c4a4e5f420_444_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e6322c89b9e6c4a4e5f420_444_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e6322c89b9e6c4a4e5f420_444_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to become a UX researcher (and what UX researchers actually do)</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to become a UX researcher (and what UX researchers actually do)</h3><p class="u-mb-16 u-sm-mb-16">The UX design process usually begins with the UX researcher. Find out what the job entails and learn valuable advice on how to become a UX researcher.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/how-to-become-a-ux-researcher" class="u-link-overlay w-inline-block"><div class="sr-only">How to become a UX researcher (and what UX researchers actually do)</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="how-to-become-a-ux-researcher" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e0c942ac953c06d3a42696_379_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e0c942ac953c06d3a42696_379_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e0c942ac953c06d3a42696_379_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e0c942ac953c06d3a42696_379_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e0c942ac953c06d3a42696_379_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e0c942ac953c06d3a42696_379_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e0c942ac953c06d3a42696_379_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to build effective enterprise design systems for your company</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ed52cb" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to build effective enterprise design systems for your company</h3><p class="u-mb-16 u-sm-mb-16">Learn the benefits and challenges of introducing enterprise design systems into your workflow and use best practices to maximize productivity.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/enterprise-design-systems" class="u-link-overlay w-inline-block"><div class="sr-only">How to build effective enterprise design systems for your company</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="enterprise-design-systems" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e11a82815b1d9359dd7744_404_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e11a82815b1d9359dd7744_404_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e11a82815b1d9359dd7744_404_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e11a82815b1d9359dd7744_404_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e11a82815b1d9359dd7744_404_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e11a82815b1d9359dd7744_404_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65e11a82815b1d9359dd7744_404_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Navigating desirability, feasibility, and viability in web design</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ffae13" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Navigating desirability, feasibility, and viability in web design</h3><p class="u-mb-16 u-sm-mb-16">Implement design thinking in web development by balancing desirability, feasibility, and viability, and learn how they help you build powerful sites.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/desirability-feasibility-and-viability" class="u-link-overlay w-inline-block"><div class="sr-only">Navigating desirability, feasibility, and viability in web design</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="desirability-feasibility-and-viability" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65eba2333563b25b3e6c0d45_229_TeamworkBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65eba2333563b25b3e6c0d45_229_TeamworkBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65eba2333563b25b3e6c0d45_229_TeamworkBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65eba2333563b25b3e6c0d45_229_TeamworkBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65eba2333563b25b3e6c0d45_229_TeamworkBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65eba2333563b25b3e6c0d45_229_TeamworkBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65eba2333563b25b3e6c0d45_229_TeamworkBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">10 essential sections of a web design contract</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ffae13" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">10 essential sections of a web design contract</h3><p class="u-mb-16 u-sm-mb-16">Set your web design project up for success with these key web design contract elements to ensure mutual understanding between contractors and businesses.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/web-design-contract" class="u-link-overlay w-inline-block"><div class="sr-only">10 essential sections of a web design contract</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="web-design-contract" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65d7e5f10268e53639f59312_435_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65d7e5f10268e53639f59312_435_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65d7e5f10268e53639f59312_435_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65d7e5f10268e53639f59312_435_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65d7e5f10268e53639f59312_435_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65d7e5f10268e53639f59312_435_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65d7e5f10268e53639f59312_435_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to create a website style guide: 6 benefits & examples</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ed52cb" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to create a website style guide: 6 benefits & examples</h3><p class="u-mb-16 u-sm-mb-16">Explore the intricacies of a website style guide, its pivotal role in the quality of your website, and how to create one for your brand.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/website-style-guide" class="u-link-overlay w-inline-block"><div class="sr-only">How to create a website style guide: 6 benefits & examples</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="website-style-guide" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/661468ecdd3835c4bc922866_366_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/661468ecdd3835c4bc922866_366_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/661468ecdd3835c4bc922866_366_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/661468ecdd3835c4bc922866_366_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/661468ecdd3835c4bc922866_366_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/661468ecdd3835c4bc922866_366_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/661468ecdd3835c4bc922866_366_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Landing page design: 8 essential elements with examples</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#7a3dff" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Landing page design: 8 essential elements with examples</h3><p class="u-mb-16 u-sm-mb-16">Find out how to connect to the right audience and create high-converting web pages through effective landing page design.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/landing-page-design" class="u-link-overlay w-inline-block"><div class="sr-only">Landing page design: 8 essential elements with examples</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="landing-page-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65d52b70780a2378831ebe97_437_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65d52b70780a2378831ebe97_437_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65d52b70780a2378831ebe97_437_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65d52b70780a2378831ebe97_437_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65d52b70780a2378831ebe97_437_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65d52b70780a2378831ebe97_437_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65d52b70780a2378831ebe97_437_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to implement and optimize effective customer-centric design</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#146ef5" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to implement and optimize effective customer-centric design</h3><p class="u-mb-16 u-sm-mb-16">Implementing customer-centric design invites customers to collaborate with your brand and help shape truly unique products.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/customer-centric-design" class="u-link-overlay w-inline-block"><div class="sr-only">How to implement and optimize effective customer-centric design</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="customer-centric-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65fb7a1b2f18931a4b3557a3_372_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">20 best useless websites to visit when bored</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Naja Wade</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ed52cb" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">20 best useless websites to visit when bored</h3><p class="u-mb-16 u-sm-mb-16">Explore our list of the best, most useless websites on the web... only if you've got time to kill.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Naja Wade</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/useless-websites" class="u-link-overlay w-inline-block"><div class="sr-only">20 best useless websites to visit when bored</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="useless-websites" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65cfacdac15ee856a04dc8e1_377_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65cfacdac15ee856a04dc8e1_377_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65cfacdac15ee856a04dc8e1_377_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65cfacdac15ee856a04dc8e1_377_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65cfacdac15ee856a04dc8e1_377_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65cfacdac15ee856a04dc8e1_377_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65cfacdac15ee856a04dc8e1_377_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to create an engaging B2B website design</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ff6b00" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to create an engaging B2B website design</h3><p class="u-mb-16 u-sm-mb-16">Optimize your B2B website design to build long-term relationships, differentiating from B2C with strategies for enduring business connections.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/b2b-website" class="u-link-overlay w-inline-block"><div class="sr-only">How to create an engaging B2B website design</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="b2b-website" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65c18ae9e6d73803b4630917_341_MarketingBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65c18ae9e6d73803b4630917_341_MarketingBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65c18ae9e6d73803b4630917_341_MarketingBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65c18ae9e6d73803b4630917_341_MarketingBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65c18ae9e6d73803b4630917_341_MarketingBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65c18ae9e6d73803b4630917_341_MarketingBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65c18ae9e6d73803b4630917_341_MarketingBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">A comprehensive guide to effective customer journey mapping</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ffae13" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">A comprehensive guide to effective customer journey mapping</h3><p class="u-mb-16 u-sm-mb-16">A brand's user experience shapes its target audience's entire perception of your organization. Maximize audience engagement with customer journey mapping.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/user-journey" class="u-link-overlay w-inline-block"><div class="sr-only">A comprehensive guide to effective customer journey mapping</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="user-journey" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6581e182fd65de0b94142f09_200_BusinessBlogHeader_2400x1260.png" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6581e182fd65de0b94142f09_200_BusinessBlogHeader_2400x1260-p-500.png 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6581e182fd65de0b94142f09_200_BusinessBlogHeader_2400x1260-p-800.png 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6581e182fd65de0b94142f09_200_BusinessBlogHeader_2400x1260.png 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">15 small business website examples for inspiration in 2024</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jeff Cardello</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#00d722" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">15 small business website examples for inspiration in 2024</h3><p class="u-mb-16 u-sm-mb-16">The right website can help a small business thrive. Here are 15 of the best small business website examples on the web.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jeff Cardello</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/business-website-examples" class="u-link-overlay w-inline-block"><div class="sr-only">15 small business website examples for inspiration in 2024</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="business-website-examples" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65c28fda8a071e64c4ae94ff_374_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65c28fda8a071e64c4ae94ff_374_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65c28fda8a071e64c4ae94ff_374_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65c28fda8a071e64c4ae94ff_374_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65c28fda8a071e64c4ae94ff_374_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65c28fda8a071e64c4ae94ff_374_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65c28fda8a071e64c4ae94ff_374_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">12 best web design courses of 2024 (free + paid)</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#146ef5" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">12 best web design courses of 2024 (free + paid)</h3><p class="u-mb-16 u-sm-mb-16">Find the best web design courses, free and paid, to sharpen your skills as a web designer and visual developer.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/web-design-courses" class="u-link-overlay w-inline-block"><div class="sr-only">12 best web design courses of 2024 (free + paid)</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="web-design-courses" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65bad9a7ef9ebd2a5c33bc41_11_AIBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65bad9a7ef9ebd2a5c33bc41_11_AIBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65bad9a7ef9ebd2a5c33bc41_11_AIBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65bad9a7ef9ebd2a5c33bc41_11_AIBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65bad9a7ef9ebd2a5c33bc41_11_AIBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65bad9a7ef9ebd2a5c33bc41_11_AIBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65bad9a7ef9ebd2a5c33bc41_11_AIBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Human-centered design: 4 essential principles to bring into your web designs (plus tips and examples)</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#00d722" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Human-centered design: 4 essential principles to bring into your web designs (plus tips and examples)</h3><p class="u-mb-16 u-sm-mb-16">In human-centered design, designers and users co-create websites that add value for everyone. Follow these tips to weave HCD principles into your work.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/human-centered-design" class="u-link-overlay w-inline-block"><div class="sr-only">Human-centered design: 4 essential principles to bring into your web designs (plus tips and examples)</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="human-centered-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65a58a6876679c963bf5a790_49_BlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65a58a6876679c963bf5a790_49_BlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65a58a6876679c963bf5a790_49_BlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65a58a6876679c963bf5a790_49_BlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65a58a6876679c963bf5a790_49_BlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65a58a6876679c963bf5a790_49_BlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65a58a6876679c963bf5a790_49_BlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">A guide to mobile-first design: 5 best practices for designing for mobile</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ee1d36" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">A guide to mobile-first design: 5 best practices for designing for mobile</h3><p class="u-mb-16 u-sm-mb-16">Discover why mobile-first design is essential for present and long-term success and how to create mobile-friendly layouts for improved user experiences.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/mobile-first-design" class="u-link-overlay w-inline-block"><div class="sr-only">A guide to mobile-first design: 5 best practices for designing for mobile</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="mobile-first-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65a1d5b0bc6823c27ea2eb91_389_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65a1d5b0bc6823c27ea2eb91_389_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65a1d5b0bc6823c27ea2eb91_389_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65a1d5b0bc6823c27ea2eb91_389_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65a1d5b0bc6823c27ea2eb91_389_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65a1d5b0bc6823c27ea2eb91_389_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65a1d5b0bc6823c27ea2eb91_389_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">What’s rich content? Using different media formats to boost engagement</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#00d722" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">What’s rich content? Using different media formats to boost engagement</h3><p class="u-mb-16 u-sm-mb-16">Explore the different types of rich media content and learn how to make it a website mainstay for improved engagement, functionality, and visual appeal.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/rich-content" class="u-link-overlay w-inline-block"><div class="sr-only">What’s rich content? Using different media formats to boost engagement</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="rich-content" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/659f215dd7e77902baee43ae_414_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/659f215dd7e77902baee43ae_414_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/659f215dd7e77902baee43ae_414_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/659f215dd7e77902baee43ae_414_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/659f215dd7e77902baee43ae_414_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/659f215dd7e77902baee43ae_414_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/659f215dd7e77902baee43ae_414_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Discover complementary web design fonts with these 5 font pairing tools</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ed52cb" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Discover complementary web design fonts with these 5 font pairing tools</h3><p class="u-mb-16 u-sm-mb-16">Discover our top 5 font pairing tools to help you create the perfect font combination for your site design.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/font-pairing-tool" class="u-link-overlay w-inline-block"><div class="sr-only">Discover complementary web design fonts with these 5 font pairing tools</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="font-pairing-tool" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/651ed6b5bbb40052ce1a0aab_BlogHeader_26-best-color-combinations-2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/651ed6b5bbb40052ce1a0aab_BlogHeader_26-best-color-combinations-2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/651ed6b5bbb40052ce1a0aab_BlogHeader_26-best-color-combinations-2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/651ed6b5bbb40052ce1a0aab_BlogHeader_26-best-color-combinations-2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/651ed6b5bbb40052ce1a0aab_BlogHeader_26-best-color-combinations-2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/651ed6b5bbb40052ce1a0aab_BlogHeader_26-best-color-combinations-2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/651ed6b5bbb40052ce1a0aab_BlogHeader_26-best-color-combinations-2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">26 best color combinations for your next design</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Naja Wade</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ed52cb" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">26 best color combinations for your next design</h3><p class="u-mb-16 u-sm-mb-16">Color is the most powerful tool for designers — and the most vast. Here are 26 of the best color combinations to inspire your next design in 2024.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Naja Wade</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/best-color-combinations" class="u-link-overlay w-inline-block"><div class="sr-only">26 best color combinations for your next design</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="best-color-combinations" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/659f25010b3b2fe2ab761247_322_MarketingBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/659f25010b3b2fe2ab761247_322_MarketingBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/659f25010b3b2fe2ab761247_322_MarketingBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/659f25010b3b2fe2ab761247_322_MarketingBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/659f25010b3b2fe2ab761247_322_MarketingBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/659f25010b3b2fe2ab761247_322_MarketingBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/659f25010b3b2fe2ab761247_322_MarketingBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">7 free writing apps for designers and writers in 2024</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ee1d36" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">7 free writing apps for designers and writers in 2024</h3><p class="u-mb-16 u-sm-mb-16">Struggling to get words on the page? These 7 free writing apps can help you streamline your writing process and craft improved and refined content.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/best-free-writing-apps" class="u-link-overlay w-inline-block"><div class="sr-only">7 free writing apps for designers and writers in 2024</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="best-free-writing-apps" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6577e4da775bad0ed77551ef_23001_06_Trends_Blog_2400x1260%20(1).jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6577e4da775bad0ed77551ef_23001_06_Trends_Blog_2400x1260%20(1)-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6577e4da775bad0ed77551ef_23001_06_Trends_Blog_2400x1260%20(1)-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6577e4da775bad0ed77551ef_23001_06_Trends_Blog_2400x1260%20(1)-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6577e4da775bad0ed77551ef_23001_06_Trends_Blog_2400x1260%20(1)-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6577e4da775bad0ed77551ef_23001_06_Trends_Blog_2400x1260%20(1)-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6577e4da775bad0ed77551ef_23001_06_Trends_Blog_2400x1260%20(1).jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">7 emerging web design trends for 2024 and beyond</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jesse Sumrak</div><div class="u-mr-3">,</div><div class="new_h5">Liz Huang</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#7a3dff" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">7 emerging web design trends for 2024 and beyond</h3><p class="u-mb-16 u-sm-mb-16">Explore the trends that will take web design and development by storm in 2024.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jesse Sumrak</div><div class="u-mr-3">,</div><div class="new_h5">Liz Huang</div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/web-design-trends-2024" class="u-link-overlay w-inline-block"><div class="sr-only">7 emerging web design trends for 2024 and beyond</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="web-design-trends-2024" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div class="w-condition-invisible"><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/605a756c0c018c856ae57c5e_best-landing-pages.jpg" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">32 best landing pages from popular brands</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Naja Wade</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#00d722" class="u-p-8"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">32 best landing pages from popular brands</h3><p class="u-mb-16 u-sm-mb-16">The best landing pages are persuasive and increase conversion rates and engagement. Here are 31 beautifully designed landing page examples doing just that.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Naja Wade</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/best-landing-pages" class="u-link-overlay w-inline-block"><div class="sr-only">32 best landing pages from popular brands</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="best-landing-pages" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6555477049a1109200d12655_03_AIBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6555477049a1109200d12655_03_AIBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6555477049a1109200d12655_03_AIBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6555477049a1109200d12655_03_AIBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6555477049a1109200d12655_03_AIBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6555477049a1109200d12655_03_AIBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6555477049a1109200d12655_03_AIBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">12 useful AI design tools for web designers</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#146ef5" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">12 useful AI design tools for web designers</h3><p class="u-mb-16 u-sm-mb-16">12 AI tools for web designers that will save you time, make design more accessible, and inspire innovation.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/ai-design-tools" class="u-link-overlay w-inline-block"><div class="sr-only">12 useful AI design tools for web designers</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="ai-design-tools" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/651ed52fd3229a3920ff04c7_BlogHeader_Being-authentic-in-the-time-of-ai-2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/651ed52fd3229a3920ff04c7_BlogHeader_Being-authentic-in-the-time-of-ai-2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/651ed52fd3229a3920ff04c7_BlogHeader_Being-authentic-in-the-time-of-ai-2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/651ed52fd3229a3920ff04c7_BlogHeader_Being-authentic-in-the-time-of-ai-2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/651ed52fd3229a3920ff04c7_BlogHeader_Being-authentic-in-the-time-of-ai-2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/651ed52fd3229a3920ff04c7_BlogHeader_Being-authentic-in-the-time-of-ai-2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/651ed52fd3229a3920ff04c7_BlogHeader_Being-authentic-in-the-time-of-ai-2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to create a top-notch career website in 2024 and beyond</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jesse Sumrak</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#00d722" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to create a top-notch career website in 2024 and beyond</h3><p class="u-mb-16 u-sm-mb-16">Learn everything you need to know to create a high-quality, top-converting career website for your organization in 2024 and beyond.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Jesse Sumrak</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/how-to-create-career-website" class="u-link-overlay w-inline-block"><div class="sr-only">How to create a top-notch career website in 2024 and beyond</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="how-to-create-career-website" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65416393ee1d59998e98b699_427_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65416393ee1d59998e98b699_427_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65416393ee1d59998e98b699_427_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65416393ee1d59998e98b699_427_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65416393ee1d59998e98b699_427_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65416393ee1d59998e98b699_427_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65416393ee1d59998e98b699_427_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to use loading animations in web design (plus 12 superb examples)</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div class="u-p-8 w-condition-invisible"><div class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">How to use loading animations in web design (plus 12 superb examples)</h3><p class="u-mb-16 u-sm-mb-16">Page loading animations decrease bounce rates and engage visitors. Learn how to use these animations and check out 12 examples for inspiration.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/loading-animation" class="u-link-overlay w-inline-block"><div class="sr-only">How to use loading animations in web design (plus 12 superb examples)</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="loading-animation" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654c2e9549af7544339b9b12_448_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654c2e9549af7544339b9b12_448_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654c2e9549af7544339b9b12_448_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654c2e9549af7544339b9b12_448_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654c2e9549af7544339b9b12_448_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654c2e9549af7544339b9b12_448_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654c2e9549af7544339b9b12_448_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">The 6 best icon sets for UI design (plus tips for choosing one)</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div class="u-p-8 w-condition-invisible"><div class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">The 6 best icon sets for UI design (plus tips for choosing one)</h3><p class="u-mb-16 u-sm-mb-16">Icon sets offer a packaged and tailored experience for websites and apps. Learn why they’re essential and choose the right icons for UI for your project.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/icon-for-ui" class="u-link-overlay w-inline-block"><div class="sr-only">The 6 best icon sets for UI design (plus tips for choosing one)</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="icon-for-ui" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65498e7f5b003b366e6c2ee7_376_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65498e7f5b003b366e6c2ee7_376_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65498e7f5b003b366e6c2ee7_376_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65498e7f5b003b366e6c2ee7_376_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65498e7f5b003b366e6c2ee7_376_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65498e7f5b003b366e6c2ee7_376_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/65498e7f5b003b366e6c2ee7_376_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Presenting your web design portfolio: The complete guide for winning new clients</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ffae13" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Presenting your web design portfolio: The complete guide for winning new clients</h3><p class="u-mb-16 u-sm-mb-16">When presenting your portfolio to a potential web design client, focus on sharing your goals, ideas, and thought processes as you worked through the projects.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/presenting-portfolio" class="u-link-overlay w-inline-block"><div class="sr-only">Presenting your web design portfolio: The complete guide for winning new clients</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="presenting-portfolio" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/653a97aa57ca405e80aea68e_Frame%2048098127.png" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/653a97aa57ca405e80aea68e_Frame%2048098127-p-500.png 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/653a97aa57ca405e80aea68e_Frame%2048098127-p-800.png 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/653a97aa57ca405e80aea68e_Frame%2048098127-p-1080.png 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/653a97aa57ca405e80aea68e_Frame%2048098127.png 1200w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Show, don’t tell — create sites that do the talking for you</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Liz Huang</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div class="u-p-8 w-condition-invisible"><div class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Show, don’t tell — create sites that do the talking for you</h3><p class="u-mb-16 u-sm-mb-16">Advice from a seasoned web designer on how to design and build a portfolio site that will dazzle clients.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Liz Huang</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/create-sites-that-do-the-talking-for-you" class="u-link-overlay w-inline-block"><div class="sr-only">Show, don’t tell — create sites that do the talking for you</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="create-sites-that-do-the-talking-for-you" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654157aef77c4f50efe31a93_394_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654157aef77c4f50efe31a93_394_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654157aef77c4f50efe31a93_394_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654157aef77c4f50efe31a93_394_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654157aef77c4f50efe31a93_394_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654157aef77c4f50efe31a93_394_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654157aef77c4f50efe31a93_394_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Achieving design excellence through a 5-step iterative process</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#7a3dff" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Achieving design excellence through a 5-step iterative process</h3><p class="u-mb-16 u-sm-mb-16">Iterative processes allow you to move quickly, minimize costs, and stay on top of changing requirements. Follow these 5 steps to unlock their benefits.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/iterative-process" class="u-link-overlay w-inline-block"><div class="sr-only">Achieving design excellence through a 5-step iterative process</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="iterative-process" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6553c807387bef308722db77_381_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6553c807387bef308722db77_381_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6553c807387bef308722db77_381_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6553c807387bef308722db77_381_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6553c807387bef308722db77_381_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6553c807387bef308722db77_381_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6553c807387bef308722db77_381_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">9 excellent web design blogs to follow</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div class="u-p-8 w-condition-invisible"><div class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">9 excellent web design blogs to follow</h3><p class="u-mb-16 u-sm-mb-16">Web design blogs are fantastic sources of inspiration, resources, and information on current design trends. Here are 9 of our favorites.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/web-design-blogs" class="u-link-overlay w-inline-block"><div class="sr-only">9 excellent web design blogs to follow</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="web-design-blogs" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654192bee131bd74ce50774f_370_DesignBlogHeader_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654192bee131bd74ce50774f_370_DesignBlogHeader_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654192bee131bd74ce50774f_370_DesignBlogHeader_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654192bee131bd74ce50774f_370_DesignBlogHeader_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654192bee131bd74ce50774f_370_DesignBlogHeader_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654192bee131bd74ce50774f_370_DesignBlogHeader_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654192bee131bd74ce50774f_370_DesignBlogHeader_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">12 modern business color palettes to elevate your branding</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Naja Wade</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ff6b00" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">12 modern business color palettes to elevate your branding</h3><p class="u-mb-16 u-sm-mb-16">From theory to application — discover the psychology of color and how to strategically leverage its emotive abilities for your business’s branding.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Naja Wade</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/business-color-palettes" class="u-link-overlay w-inline-block"><div class="sr-only">12 modern business color palettes to elevate your branding</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="business-color-palettes" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654000a3b7acba31cc0ca49f_BlogHeader_NeedToKnowAboutProductListingPages_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654000a3b7acba31cc0ca49f_BlogHeader_NeedToKnowAboutProductListingPages_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654000a3b7acba31cc0ca49f_BlogHeader_NeedToKnowAboutProductListingPages_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654000a3b7acba31cc0ca49f_BlogHeader_NeedToKnowAboutProductListingPages_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654000a3b7acba31cc0ca49f_BlogHeader_NeedToKnowAboutProductListingPages_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654000a3b7acba31cc0ca49f_BlogHeader_NeedToKnowAboutProductListingPages_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/654000a3b7acba31cc0ca49f_BlogHeader_NeedToKnowAboutProductListingPages_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Everything you need to know about product listing pages with 6+ excellent examples</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#080808" class="u-p-8 w-condition-invisible"><div style="border-color:white" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Everything you need to know about product listing pages with 6+ excellent examples</h3><p class="u-mb-16 u-sm-mb-16">Product listing pages are an essential but often-neglected stepping stone between the homepage and product pages. Here’s how to make yours count.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/product-listing-pages" class="u-link-overlay w-inline-block"><div class="sr-only">Everything you need to know about product listing pages with 6+ excellent examples</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="product-listing-pages" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/652591c26ca1344d0066841c_BlogHeader_8ProfessionalFonts_2400x1260.jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/652591c26ca1344d0066841c_BlogHeader_8ProfessionalFonts_2400x1260-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/652591c26ca1344d0066841c_BlogHeader_8ProfessionalFonts_2400x1260-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/652591c26ca1344d0066841c_BlogHeader_8ProfessionalFonts_2400x1260-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/652591c26ca1344d0066841c_BlogHeader_8ProfessionalFonts_2400x1260-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/652591c26ca1344d0066841c_BlogHeader_8ProfessionalFonts_2400x1260-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/652591c26ca1344d0066841c_BlogHeader_8ProfessionalFonts_2400x1260.jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">13 professional fonts: Top business typefaces for a polished look</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div style="background-color:#ffae13" class="u-p-8 w-condition-invisible"><div style="border-color:#080808" class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">13 professional fonts: Top business typefaces for a polished look</h3><p class="u-mb-16 u-sm-mb-16">Your choice of typeface says a lot about your organization. Choose the best professional font for your business website.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/professional-fonts" class="u-link-overlay w-inline-block"><div class="sr-only">13 professional fonts: Top business typefaces for a polished look</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="professional-fonts" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6520569e4637a5b404094f30_BlogHeader_WebDesignerVsWebDeveloper_2400x1260%20(1).jpg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6520569e4637a5b404094f30_BlogHeader_WebDesignerVsWebDeveloper_2400x1260%20(1)-p-500.jpg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6520569e4637a5b404094f30_BlogHeader_WebDesignerVsWebDeveloper_2400x1260%20(1)-p-800.jpg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6520569e4637a5b404094f30_BlogHeader_WebDesignerVsWebDeveloper_2400x1260%20(1)-p-1080.jpg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6520569e4637a5b404094f30_BlogHeader_WebDesignerVsWebDeveloper_2400x1260%20(1)-p-1600.jpg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6520569e4637a5b404094f30_BlogHeader_WebDesignerVsWebDeveloper_2400x1260%20(1)-p-2000.jpg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/6520569e4637a5b404094f30_BlogHeader_WebDesignerVsWebDeveloper_2400x1260%20(1).jpg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Web designer vs. web developer: Differences and how they can help you</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div class="u-p-8 w-condition-invisible"><div class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">Web designer vs. web developer: Differences and how they can help you</h3><p class="u-mb-16 u-sm-mb-16">Build stunning websites by leveraging web designers and developers. Learn the differences and find out how to select the right professionals for your needs.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/web-designer-and-developer" class="u-link-overlay w-inline-block"><div class="sr-only">Web designer vs. web developer: Differences and how they can help you</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="web-designer-and-developer" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/64ff93d7dea8aa769d67ed87_64fb4d7e23acb88bb4aa0b62_side-scroll.jpeg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/64ff93d7dea8aa769d67ed87_64fb4d7e23acb88bb4aa0b62_side-scroll-p-500.jpeg 500w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/64ff93d7dea8aa769d67ed87_64fb4d7e23acb88bb4aa0b62_side-scroll-p-800.jpeg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/64ff93d7dea8aa769d67ed87_64fb4d7e23acb88bb4aa0b62_side-scroll-p-1080.jpeg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/64ff93d7dea8aa769d67ed87_64fb4d7e23acb88bb4aa0b62_side-scroll.jpeg 1200w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">8 stylish examples of news web design</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div class="u-p-8 w-condition-invisible"><div class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">8 stylish examples of news web design</h3><p class="u-mb-16 u-sm-mb-16">News web design can be sleek and modern or bring to mind the paper broadsheets of the past. These 8 sites showcase diverse ways to keep readers up to date.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/news-web-design" class="u-link-overlay w-inline-block"><div class="sr-only">8 stylish examples of news web design</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="news-web-design" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/60107fa11b2ada12894e044d_6002086f72b727104301e1b2_black-history-month.jpeg" sizes="(max-width: 479px) 85vw, (max-width: 767px) 90vw, (max-width: 991px) 43vw, (max-width: 1919px) 31vw, 400px" srcset="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/60107fa11b2ada12894e044d_6002086f72b727104301e1b2_black-history-month-p-800.jpeg 800w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/60107fa11b2ada12894e044d_6002086f72b727104301e1b2_black-history-month-p-1080.jpeg 1080w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/60107fa11b2ada12894e044d_6002086f72b727104301e1b2_black-history-month-p-1600.jpeg 1600w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/60107fa11b2ada12894e044d_6002086f72b727104301e1b2_black-history-month-p-2000.jpeg 2000w, https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/60107fa11b2ada12894e044d_6002086f72b727104301e1b2_black-history-month.jpeg 2400w" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">10 mega menu examples to inspire your design</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div class="u-p-8 w-condition-invisible"><div class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">10 mega menu examples to inspire your design</h3><p class="u-mb-16 u-sm-mb-16">Mega menus enhance the user experience with organized, intuitive navigation. These 10 mega menu examples offer a range of useful menu design ideas.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/mega-menu-examples" class="u-link-overlay w-inline-block"><div class="sr-only">10 mega menu examples to inspire your design</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="mega-menu-examples" /></div></div><div role="listitem" class="u-position-relative hover-underline w-dyn-item"><div><div class="new_u-img-wrapper cc-16-9"><img alt="" loading="lazy" src="https://cdn.prod.website-files.com/6009ec8cda7f305645c9d91b/601081a433a56bf59719f458_6002086f72b72745fc01dbcb_whats-new.jpeg" class="new_cover-img"/></div><div class="u-pt-16 u-sm-pt-16"><a href="https://webflow.com/blog/category/design" class="new_caption new_u-text-black u-mb-16 u-z-index-1">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">6 must-have pages on a website: What to include in yours</h3><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><div class="u-p-8 w-condition-invisible"><div class="new_b-color-container"><a href="/blog-category/design" aria-current="page" class="new_caption new_u-text-black u-mb-16 u-z-index-1 w--current">Design</a><h3 class="h3 u-mb-16 u-sm-mb-16">6 must-have pages on a website: What to include in yours</h3><p class="u-mb-16 u-sm-mb-16">There are six core pages on a website that every designer should feature. Learn which six pages are essential and why — and what to include on each.</p><div class="new_h5 u-flex-h"><div class="u-mr-3">by</div><div class="new_h5">Webflow Team</div><div class="u-mr-3 w-condition-invisible">,</div><div class="new_h5 w-dyn-bind-empty"></div><div class="u-mr-3 w-condition-invisible">, &</div><div class="new_h5 w-dyn-bind-empty"></div></div></div></div><a href="/blog/pages-on-a-website" class="u-link-overlay w-inline-block"><div class="sr-only">6 must-have pages on a website: What to include in yours</div></a><div class="w-embed"><input type="hidden" class="jetboost-list-item" value="pages-on-a-website" /></div></div></div><div role="navigation" aria-label="List" class="w-pagination-wrapper u-d-none"><a href="?57b5de58_page=2" aria-label="Next Page" class="w-pagination-next"><div class="w-inline-block">Next</div><svg class="w-pagination-next-icon" height="12px" width="12px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" transform="translate(0, 1)"><path fill="none" stroke="currentColor" fill-rule="evenodd" d="M4 2l4 4-4 4"></path></svg></a><link rel="prerender" href="?57b5de58_page=2"/></div></div><div class="u-text-center u-mt-48"><a href="#" class="button jetboost-pagination-next-q8p1 w-button">Show more</a></div></div></div></div><div class="new_section cc-blog u-overflow-hidden u-pb-64 u-pt-0"><div class="new_container"><div class="grid lg-col-1 cc-gap-2"><div class="new_u-bg-gray-100 u-p-48 u-sm-p-32 u-xs-p-16"><div class="grid cc-gap-16 md-col-1 cc-sm-gap-16"><h2 class="new_h2 u-w-90 u-w-100-md">Subscribe to Webflow Inspo</h2><div id="w-node-_23ec39f5-00a5-f202-cf01-dce046b72842-59edecb2" class="u-w-70"><p id="w-node-_23ec39f5-00a5-f202-cf01-dce046b72843-59edecb2" class="new_paragraph-l">Get the best, coolest, and latest in design and no-code delivered to your inbox each week.</p></div></div></div><div class="new_u-bg-gray-100"><div class="u-mb-0 w-form"><form id="wf-form-Blog-newsletter-subscribe" name="wf-form-Blog-newsletter-subscribe" data-name="Blog newsletter subscribe" method="get" class="u-position-relative" data-wf-page-id="656f87be9f5fac9659edecb2" data-wf-element-id="23ec39f5-00a5-f202-cf01-dce046b72847"><input class="new_form-field new_h3 w-input" maxlength="256" name="email" data-name="Email" placeholder="Enter your email address" type="email" id="email" required=""/><input type="submit" data-wait="Please wait..." class="button cc-text-only cc-form w-button" value="Submit"/></form><div class="new_u-bg-blue u-p-48 w-form-done"><div class="h4 u-text-white">Thank you! Your submission has been received!</div></div><div class="w-form-fail"><div>Oops! Something went wrong while submitting the form.</div></div></div></div></div><div class="new_paragraph-s u-mt-16 u-text-gray600">You can unsubscribe at any time, no hard feelings. <a href="https://webflow.com/legal/privacy" target="_blank" class="u-text-link">Privacy policy.</a><br/></div></div></div><footer class="g-footer"><div class="g-footer_container"><div class="g-footer-column_wrapper"><div class="g-footer-column"><div><div class="g-footer-section_title h6">Product</div><ul aria-label="Product" role="list" class="g-footer-list w-list-unstyled"><li class="g-footer-list_item"><a data-cta-text="platform" data-cta="footer CTA" data-cta-position="product section" href="https://webflow.com/platform" class="g-footer-list_item-link w-inline-block"><div>Platform</div></a></li><li class="g-footer-list_item"><a data-cta-text="design" data-cta="footer CTA" data-cta-position="product section" href="https://webflow.com/design" class="g-footer-list_item-link w-inline-block"><div>Design</div></a></li><li class="g-footer-list_item"><a data-cta-text="edit mode" data-cta="footer CTA" data-cta-position="product section" href="https://webflow.com/edit-mode" class="g-footer-list_item-link w-inline-block"><div>Edit mode</div></a></li><li class="g-footer-list_item"><a data-cta-text="interactions" data-cta="footer CTA" data-cta-position="product section" href="https://webflow.com/interactions-animations" class="g-footer-list_item-link w-inline-block"><div>Interactions</div></a></li><li class="g-footer-list_item"><a data-cta-text="page building" data-cta="footer CTA" data-cta-position="product section" href="https://webflow.com/page-building" class="g-footer-list_item-link w-inline-block"><div>Page building</div><div class="g-footer-list_item-tag">New</div></a></li><li class="g-footer-list_item"><a data-cta-text="cms" data-cta="footer CTA" data-cta-position="product section" href="https://webflow.com/cms" class="g-footer-list_item-link w-inline-block"><div>CMS</div></a></li><li class="g-footer-list_item"><a data-cta-text="hosting" data-cta="footer CTA" data-cta-position="product section" href="https://webflow.com/hosting" class="g-footer-list_item-link w-inline-block"><div>Hosting</div></a></li><li class="g-footer-list_item"><a data-cta-text="localization" data-cta="footer CTA" data-cta-position="product section" href="https://webflow.com/localization" class="g-footer-list_item-link w-inline-block"><div>Localization</div></a></li><li class="g-footer-list_item"><a data-cta-text="security" data-cta="footer CTA" data-cta-position="product section" href="https://webflow.com/security" class="g-footer-list_item-link w-inline-block"><div>Security</div></a></li><li class="g-footer-list_item"><a data-cta-text="ecommerce" data-cta="footer CTA" data-cta-position="product section" href="https://webflow.com/ecommerce" class="g-footer-list_item-link w-inline-block"><div>Ecommerce</div></a></li><li class="g-footer-list_item"><a data-cta-text="analyze" data-cta="footer CTA" data-cta-position="product section" href="https://webflow.com/analyze" class="g-footer-list_item-link w-inline-block"><div>Analyze</div><div class="g-footer-list_item-tag">New</div></a></li><li class="g-footer-list_item"><a data-cta-text="optimize" data-cta="footer CTA" data-cta-position="product section" href="https://webflow.com/optimize" class="g-footer-list_item-link w-inline-block"><div>Optimize</div><div class="g-footer-list_item-tag">New</div></a></li><li class="g-footer-list_item"><a data-cta-text="seo" data-cta="footer CTA" data-cta-position="product section" href="https://webflow.com/seo" class="g-footer-list_item-link w-inline-block"><div>SEO</div></a></li><li class="g-footer-list_item"><a data-cta-text="devlink" data-cta="footer CTA" data-cta-position="product section" href="http://webflow.com/devlink" class="g-footer-list_item-link cc-combo w-inline-block"><div>DevLink</div><div class="g-footer-list_item-tag">Labs</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df782-993df73a" class="g-footer-list_item"><a data-cta-text="figma to webflow" data-cta="footer CTA" data-cta-position="product section" href="https://webflow.com/figma-to-webflow" class="g-footer-list_item-link cc-combo w-inline-block"><div>Figma to Webflow</div><div class="g-footer-list_item-tag">Labs</div></a></li><li class="g-footer-list_item"><a data-cta-text="accessibility" data-cta="footer CTA" data-cta-position="product section" href="https://webflow.com/accessibility" class="g-footer-list_item-link w-inline-block"><div>Accessibility</div></a></li><li class="g-footer-list_item"><a data-cta-text="ai" data-cta="footer CTA" data-cta-position="product section" href="https://webflow.com/ai" class="g-footer-list_item-link w-inline-block"><div>AI</div></a></li></ul></div></div><div class="g-footer-column"><div><div class="g-footer-section_title h6">Solutions</div><ul aria-label="Solutions" role="list" class="g-footer-list w-list-unstyled"><li class="g-footer-list_item"><a data-cta-text="enterprise" data-cta="footer CTA" data-cta-position="solutions section" href="https://webflow.com/enterprise" class="g-footer-list_item-link w-inline-block"><div>Enterprise</div></a></li><li class="g-footer-list_item"><a data-cta-text="startups" data-cta="footer CTA" data-cta-position="solutions section" href="https://webflow.com/startups" class="g-footer-list_item-link w-inline-block"><div>Startups</div></a></li><li class="g-footer-list_item"><a data-cta-text="global alliances" data-cta="footer CTA" data-cta-position="solutions section" href="https://webflow.com/solutions/global-alliances" class="g-footer-list_item-link w-inline-block"><div>Global alliances</div></a></li><li class="g-footer-list_item"><a data-cta-text="agencies" data-cta="footer CTA" data-cta-position="solutions section" href="https://webflow.com/solutions/agencies" class="g-footer-list_item-link w-inline-block"><div>Agencies</div></a></li><li class="g-footer-list_item"><a data-cta-text="freelancers" data-cta="footer CTA" data-cta-position="solutions section" href="https://webflow.com/solutions/freelancers" class="g-footer-list_item-link w-inline-block"><div>Freelancers</div></a></li><li class="g-footer-list_item"><a data-cta-text="classrooms" data-cta="footer CTA" data-cta-position="solutions sections" href="https://webflow.com/for/classroom" class="g-footer-list_item-link w-inline-block"><div>Classrooms</div></a></li></ul></div></div><div class="g-footer-column"><div><div class="g-footer-section_title h6">Resources</div><ul aria-label="Resources" role="list" class="g-footer-list w-list-unstyled"><li id="w-node-_74197178-bde6-0291-d732-e413993df7b2-993df73a" class="g-footer-list_item"><a data-cta-text="university" data-cta="footer CTA" data-cta-position="resources section" href="https://university.webflow.com" class="g-footer-list_item-link w-inline-block"><div>University</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df7b6-993df73a" class="g-footer-list_item"><a data-cta-text="blog" data-cta="footer CTA" data-cta-position="resources section" href="https://webflow.com/blog" class="g-footer-list_item-link w-inline-block"><div>Blog</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df7ba-993df73a" class="g-footer-list_item"><a data-cta-text="customer stories" data-cta="footer CTA" data-cta-position="resources section" href="https://webflow.com/customers" class="g-footer-list_item-link w-inline-block"><div>Customer stories</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df7be-993df73a" class="g-footer-list_item"><a data-cta-text="webinars and ebooks" data-cta="footer CTA" data-cta-position="resources section" href="https://webflow.com/resources" class="g-footer-list_item-link w-inline-block"><div>Webinars and ebooks</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df7c2-993df73a" class="g-footer-list_item"><a data-cta-text="apps" data-cta="footer CTA" data-cta-position="resources section" href="https://webflow.com/apps" class="g-footer-list_item-link w-inline-block"><div>Apps</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df7c6-993df73a" class="g-footer-list_item"><a data-cta-text="libraries" data-cta="footer CTA" data-cta-position="resources section" href="https://webflow.com/libraries" class="g-footer-list_item-link w-inline-block"><div>Libraries</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df7ca-993df73a" class="g-footer-list_item"><a data-cta-text="templates" data-cta="footer CTA" data-cta-position="resources section" href="https://webflow.com/templates" class="g-footer-list_item-link w-inline-block"><div>Templates</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df7ce-993df73a" class="g-footer-list_item"><a data-cta-text="developers" data-cta="footer CTA" data-cta-position="resources section" href="http://developers.webflow.com/" class="g-footer-list_item-link w-inline-block"><div>Developers</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df7d2-993df73a" class="g-footer-list_item"><a data-cta-text="made in webflow" data-cta="footer CTA" data-cta-position="resources section" href="https://webflow.com/made-in-webflow" class="g-footer-list_item-link w-inline-block"><div>Made in Webflow</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df7d6-993df73a" class="g-footer-list_item"><a data-cta-text="glossary" data-cta="footer CTA" data-cta-position="resources section" href="https://webflow.com/glossary" class="g-footer-list_item-link w-inline-block"><div>Glossary</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df7da-993df73a" class="g-footer-list_item"><a data-cta-text="livestreams" data-cta="footer CTA" data-cta-position="resources section" href="https://webflow.com/events/livestreams" class="g-footer-list_item-link w-inline-block"><div>Livestreams</div></a></li></ul></div></div><div class="g-footer-column"><div><div class="g-footer-section_title h6">Company</div><ul aria-label="Company" role="list" class="g-footer-list w-list-unstyled"><li id="w-node-_74197178-bde6-0291-d732-e413993df7e3-993df73a" class="g-footer-list_item"><a data-cta-text="about" data-cta="footer CTA" data-cta-position="company section" href="https://webflow.com/about" class="g-footer-list_item-link w-inline-block"><div>About</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df7e7-993df73a" class="g-footer-list_item"><a data-cta-text="careers" data-cta="footer CTA" data-cta-position="company section" href="https://webflow.com/careers" class="g-footer-list_item-link cc-combo w-inline-block"><div>Careers</div><div class="g-footer-list_item-tag">We're Hiring</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df7ed-993df73a" class="g-footer-list_item"><a data-cta-text="press" data-cta="footer CTA" data-cta-position="company section" href="https://webflow.com/press" class="g-footer-list_item-link w-inline-block"><div>Press</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df7f1-993df73a" class="g-footer-list_item"><a data-cta-text="webflow ventures" data-cta="footer CTA" data-cta-position="company section" href="https://webflow.com/webflow-ventures" class="g-footer-list_item-link w-inline-block"><div>Webflow Ventures</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df7f5-993df73a" class="g-footer-list_item"><a data-cta-text="webflow shop" data-cta="footer CTA" data-cta-position="company section" href="https://shop.webflow.com" class="g-footer-list_item-link w-inline-block"><div>Webflow Shop</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df7f9-993df73a" class="g-footer-list_item"><a data-cta-text="terms of service" data-cta="footer CTA" data-cta-position="company section" href="https://webflow.com/legal/terms" class="g-footer-list_item-link w-inline-block"><div>Terms of Service</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df7fd-993df73a" class="g-footer-list_item"><a data-cta-text="privacy policy" data-cta="footer CTA" data-cta-position="company section" href="https://webflow.com/legal/privacy" class="g-footer-list_item-link w-inline-block"><div>Privacy policy</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df801-993df73a" class="g-footer-list_item"><a data-cta-text="cookie policy" data-cta="footer CTA" data-cta-position="company section" href="https://webflow.com/legal/cookie-policy" class="g-footer-list_item-link w-inline-block"><div>Cookie policy</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df805-993df73a" class="g-footer-list_item"><a id="show-cookie-preferences" data-cta="footer CTA" data-cta-position="company section" data-cta-text="cookie preferences" href="#" class="g-footer-list_item-link w-inline-block"><div>Cookie preferences</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df809-993df73a" class="g-footer-list_item"><a data-cta-text="accessibility statement" data-cta="footer CTA" data-cta-position="company section" href="https://webflow.com/accessibility/statement" class="g-footer-list_item-link w-inline-block"><div>Accessibility statement</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df80d-993df73a" class="g-footer-list_item"><a data-cta-text="sitemap" data-cta="footer CTA" data-cta-position="company section" href="https://webflow.com/sitemap" class="g-footer-list_item-link w-inline-block"><div>Sitemap</div></a></li></ul></div></div><div class="g-footer-column"><div><div class="g-footer-section_title h6">Community</div><ul aria-label="Community" role="list" class="g-footer-list w-list-unstyled"><li id="w-node-_74197178-bde6-0291-d732-e413993df816-993df73a" class="g-footer-list_item"><a data-cta-text="discover the community" data-cta="footer CTA" data-cta-position="community section" href="https://webflow.com/community" class="g-footer-list_item-link w-inline-block"><div>Discover the community</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df81a-993df73a" class="g-footer-list_item"><a data-cta-text="partner with webflow" data-cta="footer CTA" data-cta-position="community section" href="https://webflow.com/partners" class="g-footer-list_item-link w-inline-block"><div>Partner with Webflow</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df81e-993df73a" class="g-footer-list_item"><a data-cta-text="certified partners" data-cta="footer CTA" data-cta-position="community section" href="https://webflow.com/certified-partners" class="g-footer-list_item-link w-inline-block"><div>Certified Partners</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df822-993df73a" class="g-footer-list_item"><a data-cta-text="become a template designer" data-cta="footer CTA" data-cta-position="community section" href="https://webflow.com/templates/applications" class="g-footer-list_item-link w-inline-block"><div>Become a template designer</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df826-993df73a" class="g-footer-list_item"><a data-cta-text="become an affiliate" data-cta="footer CTA" data-cta-position="community section" href="https://webflow.com/affiliates" class="g-footer-list_item-link w-inline-block"><div>Become an affiliate</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df82a-993df73a" class="g-footer-list_item"><a data-cta-text="become a global leader" data-cta="footer CTA" data-cta-position="community section" href="https://webflow.com/community/global-leaders" class="g-footer-list_item-link w-inline-block"><div>Become a Global Leader</div></a></li><li id="w-node-_74197178-bde6-0291-d732-e413993df82e-993df73a" class="g-footer-list_item"><a data-cta-text="find a meetup near you" data-cta="footer CTA" data-cta-position="community section" href="https://webflow.com/events" class="g-footer-list_item-link w-inline-block"><div>Find a meetup near you</div></a></li></ul></div></div><div class="g-footer-column cc-last"><div><div class="g-footer-section_title h6">Get help</div><ul aria-label="Get help" role="list" class="g-footer-list w-list-unstyled"><li class="g-footer-list_item"><a data-cta-text="support" data-cta="footer CTA" data-cta-position="get help section" href="https://support.webflow.com/" class="g-footer-list_item-link w-inline-block"><div>Support</div></a></li><li class="g-footer-list_item"><a data-cta-text="pricing" data-cta="footer CTA" data-cta-position="get help section" href="https://webflow.com/pricing" class="g-footer-list_item-link w-inline-block"><div>Pricing</div></a></li><li class="g-footer-list_item"><a data-cta-text="status" data-cta="footer CTA" data-cta-position="get help section" href="https://status.webflow.com/" class="g-footer-list_item-link w-inline-block"><div>Status</div></a></li><li class="g-footer-list_item"><a data-cta-text="forum" data-cta="footer CTA" data-cta-position="get help section" href="https://forum.webflow.com/" class="g-footer-list_item-link w-inline-block"><div>Forum</div></a></li><li class="g-footer-list_item"><a data-cta-text="wishlist" data-cta="footer CTA" data-cta-position="get help section" href="https://wishlist.webflow.com/" class="g-footer-list_item-link w-inline-block"><div>Wishlist</div></a></li></ul></div></div></div><div class="g-footer-copyright"><div class="u-text-gray400">© <span class="footer-copyright_year">2025</span> Webflow, Inc. All rights reserved</div><a data-cta-text="webflow icon home" aria-label="Webflow's homepage" data-cta="footer CTA" data-cta-position="footer section" href="https://webflow.com/?r=0" class="g-footer-brand w-inline-block"><div class="g-brand-logo_footer w-embed"><svg width="39" height="24" viewBox="0 0 39 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M38.7475 0L26.4707 24H14.9392L20.077 14.0534H19.8465C15.6078 19.5558 9.28359 23.178 0.272522 24V14.191C0.272522 14.191 6.03712 13.8505 9.42596 10.2877H0.272522V0.000189575H10.56V8.46149L10.7909 8.46054L14.9947 0.000189575H22.7749V8.40784L23.0058 8.40746L27.3673 0H38.7475Z" fill="#146EF5"/> </svg></div></a><div class="g-footer-column-social"><ul role="list" class="g-footer-list cc-social w-list-unstyled"><li class="g-footer-list_item"><a data-cta-text="made in webflow icon" aria-label="Made in Webflow" data-cta="footer CTA" data-cta-position="footer section" href="https://webflow.com/discover/popular#recent" class="g-footer-list_item-link w-inline-block"><div class="g-footer-list_item-social w-embed"><svg width="22" height="14" viewBox="0 0 22 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Made in Webflow</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M21.9575 0.157898L14.9576 13.8421H8.3826L11.3121 8.1708H11.1806C8.76383 11.3081 5.15791 13.3734 0.0200195 13.8421V8.24927C0.0200195 8.24927 3.30685 8.05514 5.23909 6.02368H0.0200195V0.158006H5.88569V4.98244L6.01734 4.98189L8.41427 0.158006H12.8503V4.95185L12.982 4.95163L15.4688 0.157898H21.9575Z" fill="currentColor"/> </svg></div></a></li><li class="g-footer-list_item"><a data-cta-text="youtube icon" rel="noopener" aria-label="Webflow's YouTube channel" data-cta="footer CTA" data-cta-position="footer section" href="https://www.youtube.com/webflow" target="_blank" class="g-footer-list_item-link w-inline-block"><div class="g-footer-list_item-social w-embed"><svg alt width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>YouTube</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.1 1.83737C17.4829 2.32842 17.7311 2.91085 17.82 3.52713C17.9319 4.44288 17.992 5.36422 18 6.28674V7.57655C17.9924 8.50241 17.9323 9.4271 17.82 10.3462C17.7311 10.9624 17.4829 11.5449 17.1 12.0359C16.6125 12.4946 15.9694 12.7518 15.3 12.7558C12.78 12.9358 9 12.9358 9 12.9358C9 12.9358 4.32 12.9358 2.9 12.7658C2.16881 12.762 1.46173 12.5039 0.9 12.0359C0.515501 11.542 0.267246 10.9559 0.18 10.3362C0.0680335 9.42042 0.0079376 8.49908 0 7.57655V6.28674C0.00756015 5.36088 0.0676567 4.43619 0.18 3.51713C0.268925 2.90085 0.517095 2.31843 0.9 1.82737C1.38752 1.3687 2.0306 1.11151 2.7 1.10748C5.22 0.9375 9 0.9375 9 0.9375C9 0.9375 12.78 0.9375 15.3 1.11747C15.9694 1.12151 16.6125 1.3787 17.1 1.83737ZM13 6.9375L7 3.9375V9.9375L13 6.9375Z" fill="currentColor"/> </svg></div></a></li><li class="g-footer-list_item"><a data-cta-text="x icon" rel="noopener" aria-label="Webflow's Twitter account" data-cta="footer CTA" data-cta-position="footer section" href="https://twitter.com/webflow" target="_blank" class="g-footer-list_item-link w-inline-block"><div class="g-footer-list_item-social w-embed"><svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>X</title> <path d="M13.9389 0.316772H16.5457L10.8507 6.82584L17.5504 15.6832H12.3046L8.19581 10.3113L3.49447 15.6832H0.886112L6.97752 8.72103L0.550415 0.316772H5.92945L9.6434 5.22694L13.9389 0.316772ZM13.024 14.1229H14.4685L5.14458 1.7951H3.59454L13.024 14.1229Z" fill="currentColor"/> </svg></div></a></li><li class="g-footer-list_item"><a data-cta-text="facebook icon" rel="noopener" aria-label="Webflow's Facebook page" data-cta="footer CTA" data-cta-position="footer section" href="https://www.facebook.com/webflow/" target="_blank" class="g-footer-list_item-link w-inline-block"><div class="g-footer-list_item-social w-embed"><svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Facebook</title> <path d="M19 10.495C18.9998 8.67955 18.4794 6.90217 17.5004 5.37329C16.5215 3.84441 15.1249 2.62804 13.4761 1.86821C11.8273 1.10837 9.99534 0.836881 8.19704 1.08588C6.39875 1.33487 4.70945 2.09393 3.32915 3.27318C1.94885 4.45243 0.935345 6.00249 0.408625 7.73985C-0.118094 9.47721 -0.135971 11.3291 0.357111 13.0763C0.850194 14.8235 1.83359 16.3929 3.19087 17.5985C4.54814 18.8042 6.22247 19.5958 8.01563 19.8794V13.2413H5.60342V10.495H8.01563V8.40183C8.01563 6.02129 9.43429 4.70554 11.6035 4.70554C12.3161 4.71576 13.027 4.77767 13.7307 4.89079V7.22937H12.5321C12.1713 7.18148 11.8062 7.27883 11.5172 7.50003C11.2281 7.72123 11.0388 8.04817 10.9907 8.40896C10.9771 8.50999 10.975 8.61224 10.9844 8.71375V10.495H13.6167L13.1955 13.2413H10.9788V19.8794C13.2145 19.5271 15.251 18.3882 16.7215 16.6677C18.1921 14.9472 19.0001 12.7583 19 10.495V10.495Z" fill="currentColor"/> </svg></div></a></li><li class="g-footer-list_item"><a data-cta-text="linkedin icon" rel="noopener" aria-label="Webflow's Linkedin page" data-cta="footer CTA" data-cta-position="footer section" href="https://www.linkedin.com/company/webflow-inc-" target="_blank" class="g-footer-list_item-link w-inline-block"><div class="g-footer-list_item-social w-embed"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Linkedin</title> <path d="M16.2763 0.5H0.76377C0.33877 0.5 0.0200195 0.81875 0.0200195 1.24375V16.8625C0.0200195 17.1812 0.33877 17.5 0.76377 17.5H16.3825C16.8075 17.5 17.1263 17.1813 17.1263 16.7563V1.24375C17.02 0.81875 16.7013 0.5 16.2763 0.5ZM5.01377 14.95H2.57002V6.875H5.12002V14.95H5.01377ZM3.84502 5.8125C2.99502 5.8125 2.35752 5.06875 2.35752 4.325C2.35752 3.475 2.99502 2.8375 3.84502 2.8375C4.69502 2.8375 5.33252 3.475 5.33252 4.325C5.22627 5.06875 4.58877 5.8125 3.84502 5.8125ZM14.47 14.95H11.92V11.0187C11.92 10.0625 11.92 8.89375 10.645 8.89375C9.37002 8.89375 9.15752 9.95625 9.15752 11.0187V15.0562H6.60752V6.875H9.05127V7.9375C9.37002 7.3 10.22 6.6625 11.3888 6.6625C13.9388 6.6625 14.3638 8.3625 14.3638 10.4875V14.95H14.47Z" fill="currentColor"/> </svg></div></a></li><li class="g-footer-list_item"><a data-cta-text="instagram icon" rel="noopener" aria-label="Webflow's Instagram page" data-cta="footer CTA" data-cta-position="footer section" href="https://www.instagram.com/webflow/" target="_blank" class="g-footer-list_item-link w-inline-block"><div class="g-footer-list_item-social w-embed"><svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>Instagram</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M5.28999 0.991399C6.24999 0.941406 6.55999 0.941406 8.99999 0.941406C11.44 0.941406 11.75 0.941406 12.72 0.991399C13.4651 1.00749 14.2022 1.14947 14.9 1.41134C16.1042 1.8878 17.0518 2.84977 17.51 4.06096C17.7719 4.75865 17.9139 5.49561 17.93 6.24065C17.98 7.20051 17.98 7.51047 17.98 9.95012C17.98 11.4375 17.9614 12.1185 17.9469 12.65C17.9376 12.9903 17.93 13.2693 17.93 13.6596C17.9139 14.4046 17.7719 15.1416 17.51 15.8393C17.0426 17.0469 16.0878 18.0016 14.88 18.4689C14.1822 18.7308 13.4451 18.8728 12.7 18.8889C11.74 18.9388 11.43 18.9388 8.99027 18.9388H8.98999C7.50235 18.9388 6.82135 18.9203 6.28974 18.9058C5.94941 18.8965 5.67031 18.8889 5.27999 18.8889C4.53485 18.8728 3.79779 18.7308 3.1 18.4689C1.89018 17.9994 0.935014 17.0407 0.469999 15.8293C0.208096 15.1316 0.0660938 14.3946 0.0499999 13.6496C0 12.6897 0 12.3798 0 9.94012C0 7.50047 0 7.19052 0.0499999 6.22065C0.0660938 5.47561 0.208096 4.73866 0.469999 4.04096C0.939608 2.83132 1.8984 1.87629 3.11 1.41134C3.80779 1.14947 4.54485 1.00749 5.28999 0.991399ZM12.6406 2.61249C11.6906 2.5625 11.4006 2.5625 9.00061 2.5625V2.5825C7.52013 2.5825 6.84346 2.60136 6.32148 2.61592C5.99376 2.62505 5.72702 2.63249 5.36062 2.63249C4.79035 2.63982 4.22553 2.74465 3.69062 2.94245C2.91752 3.24733 2.30556 3.85921 2.00062 4.6322C1.8028 5.16704 1.69796 5.73177 1.69062 6.30196C1.64062 7.25183 1.64062 7.53179 1.64062 9.94144C1.64062 11.4217 1.65949 12.0983 1.67405 12.6202C1.68319 12.9479 1.69062 13.2146 1.69062 13.5809C1.69796 14.1511 1.8028 14.7158 2.00062 15.2507C2.30556 16.0237 2.91752 16.6355 3.69062 16.9404C4.22553 17.1382 4.79035 17.2431 5.36062 17.2504C6.31062 17.3004 6.59061 17.3004 9.00061 17.3004C10.4811 17.3004 11.1578 17.2815 11.6797 17.267C12.0075 17.2578 12.2742 17.2504 12.6406 17.2504C13.2109 17.2431 13.7757 17.1382 14.3106 16.9404C15.0837 16.6355 15.6957 16.0237 16.0006 15.2507C16.1984 14.7158 16.3033 14.1511 16.3106 13.5809C16.3606 12.6311 16.3606 12.3511 16.3606 9.94144C16.3606 8.46117 16.3417 7.78459 16.3272 7.26269C16.318 6.93502 16.3106 6.66832 16.3106 6.30196C16.3033 5.73177 16.1984 5.16704 16.0006 4.6322C15.6957 3.85921 15.0837 3.24733 14.3106 2.94245C13.7769 2.73783 13.212 2.62622 12.6406 2.61249Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M4.37891 9.93965C4.37891 7.38846 6.44735 5.32031 8.9989 5.32031C10.2242 5.32031 11.3993 5.80699 12.2657 6.67329C13.1321 7.53958 13.6189 8.71453 13.6189 9.93965C13.6189 12.4908 11.5505 14.559 8.9989 14.559C6.44735 14.559 4.37891 12.4908 4.37891 9.93965ZM6 9.94043C6 11.5973 7.34315 12.9404 9 12.9404C9.79565 12.9404 10.5587 12.6244 11.1213 12.0617C11.6839 11.4991 12 10.7361 12 9.94043C12 8.28358 10.6569 6.94043 9 6.94043C7.34315 6.94043 6 8.28358 6 9.94043Z" fill="currentColor"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M13.7988 6.2225C14.3952 6.2225 14.8788 5.73897 14.8788 5.1425C14.8788 4.54603 14.3952 4.0625 13.7988 4.0625C13.2023 4.0625 12.7188 4.54603 12.7188 5.1425C12.7188 5.73897 13.2023 6.2225 13.7988 6.2225Z" fill="currentColor"/> </svg></div></a></li><li class="g-footer-list_item"><a data-cta-text="tiktok icon" rel="noopener" aria-label="Webflow's TikTok" data-cta="footer CTA" data-cta-position="footer section" href="https://www.tiktok.com/@webflow" target="_blank" class="g-footer-list_item-link w-inline-block"><div class="g-footer-list_item-social w-embed"><svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"> <title>TikTok</title> <path d="M8.30373 8.65756V11.7284C7.93253 11.6265 7.54412 11.6126 7.16708 11.6877C6.79004 11.7628 6.43401 11.9251 6.12521 12.1625C5.81641 12.3999 5.56272 12.7064 5.38283 13.0595C5.20293 13.4125 5.10143 13.8031 5.0858 14.2024C5.06468 14.5462 5.11448 14.8907 5.23187 15.2128C5.34925 15.535 5.53151 15.8271 5.76637 16.0699C6.00124 16.3126 6.28328 16.5002 6.59355 16.6199C6.90381 16.7398 7.23512 16.7891 7.56521 16.7646C9.39728 16.7646 10.0446 15.4246 10.0446 14.1678V2.00391H12.9611C13.4572 5.216 14.9992 5.96137 17.0661 6.30587V9.3834C17.0661 9.3834 14.6141 9.20193 13.0437 7.96915V14.0488C13.0421 16.7998 11.4755 19.8706 7.5872 19.8706C3.97883 19.8706 2.13281 16.688 2.13281 14.0204C2.15583 13.23 2.33952 12.4536 2.67179 11.7426C3.00405 11.0315 3.47735 10.4018 4.06045 9.89507C4.64356 9.38832 5.32323 9.01601 6.05464 8.80271C6.78607 8.5894 7.5526 8.53993 8.30373 8.65756Z" fill="currentColor"/> </svg></div></a></li></ul></div></div></div></footer><script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=6009e6adcf8c45466fee3e56" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://cdn.prod.website-files.com/6009e6adcf8c45466fee3e56/js/webflow.schunk.b7cad701f94860c2.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/6009e6adcf8c45466fee3e56/js/webflow.f6eef625.3423741a3cba13f7.js" type="text/javascript"></script> <script type='text/javascript' src="https://webflow.com/resources/marketing-body.js"></script> <script type='text/javascript'> //-- Amplitude initialize if (!location.pathname.startsWith('/blog/')) { wf_analytics.init({ pageView: { name: 'Blog Viewed', data: {} }, page: 'blog' }); } // else: for blog articles we call initAnalytics from the page custom code // ---- Set a user logged in/out attribute in Intellimize ---- intellimize.ready(() => { wf_utils.getUser((user) => { const isLoggedIn = user ? 'true' : 'false'; const scope = 'user'; // or 'pageview' const attributes = { loggedIn: isLoggedIn }; intellimize.setAttributes(scope, attributes); }); }); </script>  <script> $('#search-icon').click(function(){ $('#search').focus(); }); </script>  <script> // Get UTM parameters from current URL function getUTMParams() { const urlParams = new URLSearchParams(window.location.search); const utmParams = {}; ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'].forEach(param => { if (urlParams.has(param)) { utmParams[param] = urlParams.get(param); } }); return utmParams; } // Check if domain is Webflow function isWebflowDomain(hostname) { return hostname.endsWith('webflow.com') || hostname.endsWith('webflow.io'); } // Check if URL already has UTM parameters function hasUTMParams(url) { return Array.from(url.searchParams.keys()).some(param => param.startsWith('utm_')); } // Apply UTM parameters to all links function applyStickyUTM() { const utmParams = getUTMParams(); if (Object.keys(utmParams).length === 0) return; document.querySelectorAll('a').forEach(link => { if (link.href.startsWith('#') || link.href.startsWith('javascript:')) return; try { const url = new URL(link.href); if (!isWebflowDomain(url.hostname) || hasUTMParams(url)) return; Object.entries(utmParams).forEach(([key, value]) => { url.searchParams.set(key, value); }); link.href = url.toString(); } catch (e) { console.warn('Invalid URL:', link.href); } }); } // Run when DOM is loaded document.addEventListener('DOMContentLoaded', applyStickyUTM); // Run when content changes if (window.MutationObserver) { new MutationObserver(() => applyStickyUTM()) .observe(document.body, { subtree: true, childList: true }); } </script></body></html>