{"id":203050,"date":"2024-02-13T13:52:56","date_gmt":"2024-02-13T13:52:56","guid":{"rendered":"https:\/\/www.markup.io\/?p=203050"},"modified":"2024-02-14T19:01:01","modified_gmt":"2024-02-14T19:01:01","slug":"web-design-trends","status":"publish","type":"post","link":"https:\/\/www.markup.io\/blog\/web-design-trends\/","title":{"rendered":"14 web design trends to keep an eye on in 2024"},"content":{"rendered":"\n<p>In the web design universe, trends are like magical potions, equipping you with the powers needed to stand out from the competition.<\/p>\n\n\n\n<p>These design trends also possess the keys to transcending digital realms where user experiences are shaped.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-matrix.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/giphy.com\/gifs\/matrix-the-movie-gvBCi7aSRIn6pAARtU\" target=\"_blank\" rel=\"noreferrer noopener\">Giphy<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>They influence everything from impression to engagement and even conversion.\u00a0\u00a0<\/p>\n\n\n\n<p>Responding to them can be the missing link you need to take your website from good to great.&nbsp;<\/p>\n\n\n\n<p>Wondering how to find the right web design trend to hop on?&nbsp;<\/p>\n\n\n\n<p>Join us, as we embark on a design journey highlighting the latest trends that can bring the spark back to your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Table of Contents<\/strong><\/h2>\n\n\n\n<p><a href=\"#h-brutalism\">Trend #1: Neo-brutalism &amp; anti-design aesthetics<\/a> \ud83c\udf13<\/p>\n\n\n\n<p><a href=\"#h-retro\">Trend #2: Nostalgic retro &amp; Y2K<\/a> \ud83e\udea9<\/p>\n\n\n\n<p><a href=\"#h-hand-drawn\">Trend #3: Hand-drawn illustrations &amp; icons<\/a> \ud83c\udfa8<\/p>\n\n\n\n<p><a href=\"#h-accessibility\">Trend #4: Prioritizing accessibility<\/a> \ud83e\uddbe<\/p>\n\n\n\n<p><a href=\"#h-animations\">Trend #5: Animated graphics<\/a> \ud83d\ude36\u200d\ud83c\udf2b\ufe0f \u27a1 \ud83d\ude00<\/p>\n\n\n\n<p><a href=\"#h-gradient\">Trend #6: Monochromatic OUT; gradients &amp; glassmorphism IN<\/a> \ud83d\udc97<\/p>\n\n\n\n<p><a href=\"#h-cursors\">Trend #7: Custom cursors<\/a> \ud83d\udc7e<\/p>\n\n\n\n<p><a href=\"#h-app-ux\">Trend #8: App-like user experience (UX) patterns<\/a> \ud83d\udcf2<\/p>\n\n\n\n<p><a href=\"#h-dark-mode\">Trend #9: Dark mode<\/a> \ud83c\udf11<\/p>\n\n\n\n<p><a href=\"#h-microinteractions\">Trend #10: Microinteractions<\/a> \ud83d\udc49\ud83d\udc48<\/p>\n\n\n\n<p><a href=\"#h-bold\">Trend #11: Bold typography &amp; vibrant color palettes<\/a> \ud83d\udd20<\/p>\n\n\n\n<p><a href=\"#h-parallax-scrolling\">Trend #12: Parallax scrolling<\/a> \ud83d\udcdc<\/p>\n\n\n\n<p><a href=\"#h-horizontal-scrolling\">Trend #13: Horizontal scrolling<\/a> \ud83d\udea5<\/p>\n\n\n\n<p><a href=\"#h-asymetric-layouts\">Trend #14: Asymmetric layouts<\/a> \u25ab\ufe0f\u25fd<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-brutalism\"><strong>Trend #1: Neo-<\/strong><strong>brutalism<\/strong><strong> &amp; anti-design aesthetics \ud83c\udf13<\/strong><\/h2>\n\n\n\n<p>What exactly is brutalism?&nbsp;<\/p>\n\n\n\n<p>It takes its cue from the architectural design style of the 1950s \u2014 the one government buildings used.&nbsp;<\/p>\n\n\n\n<p>You know, with bare materials like concrete and steel, nothing fancy.&nbsp;<\/p>\n\n\n\n<p>In design terms, brutalism means a flat style that\u2019s all about making the design look raw and unattractive. Talk about a throwback to websites from the 90s.<\/p>\n\n\n\n<p>Now to the fun part.&nbsp;<\/p>\n\n\n\n<p>In the fashion industry, there&#8217;s this thing known as the 20-year rule.&nbsp;<\/p>\n\n\n\n<p>It\u2019s kinda like a time loop where \u2018old skool\u2019 trends that used to be cool come back in style after 20 years. People fall in love with an outfit, then hate it (old school), and go back to loving it.&nbsp;<\/p>\n\n\n\n<p>Guess what?<\/p>\n\n\n\n<p>This rule has found its way back into <a href=\"https:\/\/www.markup.io\/blog\/web-development-team-structure\/\" target=\"_blank\" rel=\"noreferrer noopener\">web development<\/a> in the form of neo-brutalism.<\/p>\n\n\n\n<p>Neo-brutalism takes brutalism to another level by adding funny, wacky color themes to the design. So, what you have is a design without the sleek modern typography or animation.&nbsp;<\/p>\n\n\n\n<p>A good example is this design from Gumroad:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"478\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-neo-brutalism.png\" alt=\"Screenshot of a design from Gumroad that showcases the neo-brutalism web design trend.\" class=\"wp-image-203096\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-neo-brutalism.png 888w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-neo-brutalism-300x161.png 300w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-neo-brutalism-768x413.png 768w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/gumroad.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Gumroad<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>In general, here\u2019s what you\u2019ll notice with neo-brutalism include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Static animations.<\/li>\n\n\n\n<li>Absence of gradients.<\/li>\n\n\n\n<li>Strange background color theme (like Gumroad\u2019s homepage).<\/li>\n\n\n\n<li>Basic shapes.<\/li>\n\n\n\n<li>Bold typography in <a href=\"https:\/\/www.markup.io\/blog\/design-review-checklist\/\" target=\"_blank\" rel=\"noreferrer noopener\">graphic design<\/a>.<\/li>\n<\/ul>\n\n\n\n<p>And then there\u2019s the anti-design trend that cranks brutalism and neobrutalism ideology up another notch.&nbsp;<\/p>\n\n\n\n<p>Some designers consider it a dig at minimalist design by intentionally creating ugly interfaces. What you\u2019ll see is an inconsistent <a href=\"https:\/\/www.markup.io\/blog\/markup-io-updates-q223\/\" target=\"_blank\" rel=\"noreferrer noopener\">visual flow<\/a> or a perfect example of 90s-inspired web design gone wrong.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"478\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-minimalist.png\" alt=\"Screenshot of a Bloomberg article that features a minimalistic black and white interactive design.\" class=\"wp-image-203104\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-minimalist.png 888w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-minimalist-300x161.png 300w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-minimalist-768x413.png 768w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/www.bloomberg.com\/features\/2018-government-sponsored-cyber-militia-cookbook\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bloomberg<\/a><\/figcaption><\/figure><\/div>\n\n\n<p>Now would this trend be a one-time thing?<\/p>\n\n\n\n<p>We think not. Chances are this trend will keep popping up in the fashion and art industry that are always up for drifting away from conventional patterns.&nbsp;<\/p>\n\n\n\n<p><strong>Practical tip<\/strong>:<\/p>\n\n\n\n<p>The neo-brutalist and anti-design trend functions best when you\u2019re trying to grab people\u2019s attention. Specifically when you\u2019re building a new product and your target audience are young people.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-retro\"><strong>Trend #2: Nostalgic <\/strong><strong>retro<\/strong><strong> &amp; Y2K \ud83e\udea9<\/strong><\/h2>\n\n\n\n<p>Trying out new tech or tricks is super cool but there are times when the lightning of nostalgia strikes and all you wanna do is go back in time to the 80s or 90s.<\/p>\n\n\n\n<p>\u2026and basically remember better times.&nbsp;<\/p>\n\n\n\n<p>This nostalgic trend kinda began during the pandemic when we were required to stay at home. Then people started remembering when things used to be better\u2026aka the good ol\u2019 days.&nbsp;<\/p>\n\n\n\n<p>Before you knew it, brands and designers had jumped on it too, creating modern <a href=\"https:\/\/www.markup.io\/blog\/web-design-challenges\/\" target=\"_blank\" rel=\"noreferrer noopener\">web designs<\/a> that evoked nostalgic feelings customers could relate to.<\/p>\n\n\n\n<p>The good thing about this trend is that it helps you create a connection with customers that they want and consider meaningful. A nostalgic retro and Y2K web design feature strong colors and funny-looking fonts that scream, \u201cThis here is from the 80s.\u201d&nbsp;<\/p>\n\n\n\n<p>Here\u2019s a good example from Simon Perini:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"478\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-nostalgic.png\" alt=\"Screenshot of a retro design from Simon Perini\" class=\"wp-image-203097\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-nostalgic.png 888w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-nostalgic-300x161.png 300w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-nostalgic-768x413.png 768w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/www.simonperini.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Simon Perini<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Now that just took you down memory lane, right? \ud83d\ude09<\/p>\n\n\n\n<p><strong>Practical tip<\/strong>:<\/p>\n\n\n\n<p>If you want to design a website that evokes a nostalgic feeling, focus on using bold classic colors, old imagery that depicts the site&#8217;s objective, and of course, fonts (slightly fancy and bold too).&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-hand-drawn\"><strong>Trend #3: Hand-drawn illustrations &amp; icons \ud83c\udfa8<\/strong><\/h2>\n\n\n\n<p>Traditional art lovers, this one&#8217;s for you.<\/p>\n\n\n\n<p>It\u2019s also another trip down memory lane to a time when drawings were done on cave walls, pottery, vases, and even in the tombs of pharaohs.&nbsp;<\/p>\n\n\n\n<p>But this time, it has come back as a digitized hand-drawn art.<\/p>\n\n\n\n<p>At the moment, this website design trend is being embraced by tech brands and startups looking to distinguish themselves from the competition.&nbsp;<\/p>\n\n\n\n<p>It\u2019s almost like they\u2019re giving their audience a handmade traditional art show.&nbsp;<\/p>\n\n\n\n<p>Just that this time around they\u2019ll be engaging with the art. This design style from Ramy Wafaa is a great example:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"478\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-hand-drawn.png\" alt=\"Screenshot of the Mendly homepage, an example of digitized hand-drawn art by Ramy Wafaa.\" class=\"wp-image-203092\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-hand-drawn.png 888w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-hand-drawn-300x161.png 300w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-hand-drawn-768x413.png 768w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/shots\/20930090-Custom-illustrations-for-website\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Now, here\u2019s why this trend is appealing to people:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Different artistic flavor:<\/strong> In a digital universe, hand-drawn illustration stands out from the conventional computer-generated illustrations most people use. A lot of emotions and time goes into it.&nbsp;&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>Simplicity:<\/strong> Hand-drawn art is simple and easy to recognize. Some might say they\u2019re the best way to convey brand identity more effectively.&nbsp;<\/li>\n\n\n\n<li><strong>Asymmetric:<\/strong> Hand-made art is imperfect but that\u2019s what makes it an attention-grabbing trend. That\u2019s what gives it character.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><strong>Practical tip<\/strong>:<\/p>\n\n\n\n<p>When you hop on this trend,&nbsp; make sure the icons and illustrations tell your brand\u2019s message. It\u2019s not about incorporating arts just because they\u2019re trendy, but ensuring they\u2019re part of your story.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-accessibility\"><strong>Trend #4: Prioritizing accessibility \ud83e\uddbe<\/strong><\/h2>\n\n\n\n<p>Thinking about making the world a better place as a web designer?<\/p>\n\n\n\n<p>Then embracing accessibility is the way to go. We\u2019re talking about designing websites so anyone can use it regardless of their<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Demography.<\/li>\n\n\n\n<li>Physical ability.<\/li>\n\n\n\n<li>Economic level.<\/li>\n\n\n\n<li>Age.<\/li>\n<\/ul>\n\n\n\n<p>An accessible website makes getting information and navigating a site\u2019s interface a walk in the park. Just like this \u2018The Built by Silo\u2019, a site that incorporates this trend.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"478\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-accessible.png\" alt=\"Screenshot of the Built By Silo site, which features an accessible black and white design.\" class=\"wp-image-203085\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-accessible.png 888w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-accessible-300x161.png 300w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-accessible-768x413.png 768w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/builtbysilo.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Built By Silo<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>It comes with parallax images, animated backgrounds, simple content, and text.<\/p>\n\n\n\n<p>In simple terms, accessibility levels the playing field for every internet user.&nbsp;<\/p>\n\n\n\n<p>And with more people online since the pandemic, there\u2019s a soaring need for accessible sites so no one\u2019s left out.&nbsp;<\/p>\n\n\n\n<p>The Department of Justice even released a <a href=\"https:\/\/www.ada.gov\/resources\/web-guidance\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">guideline on web accessibility<\/a> last year. That\u2019s how important this trend is.&nbsp;<\/p>\n\n\n\n<p><strong>Practical tip<\/strong>: To prioritize accessibility in your <a href=\"https:\/\/www.markup.io\/blog\/website-design-checklist\/\" target=\"_blank\" rel=\"noreferrer noopener\">web designs<\/a>, here are some pointers you can follow:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ensure there\u2019s a sharp contrast between text and background.<\/li>\n\n\n\n<li>Skip using only colors to share information.<\/li>\n\n\n\n<li>Add alternative text.<\/li>\n\n\n\n<li>Caption your videos.&nbsp;<\/li>\n\n\n\n<li>Embrace both mouse and keyboard navigation.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-animations\"><strong>Trend #5: Animated graphics \ud83d\ude36\u200d\ud83c\udf2b\ufe0f \u27a1 \ud83d\ude00<\/strong><\/h2>\n\n\n\n<p>How would you feel if every time web users visited your site, their faces lit up?<\/p>\n\n\n\n<p>Like you\u2019ve done a great job, right?&nbsp;<\/p>\n\n\n\n<p>This next trend may be the key to unlocking that possibility. Animated graphics are simply static art but manipulated so it looks like they\u2019re moving.&nbsp;<\/p>\n\n\n\n<p>Picture the rainbow art frame you\u2019ve got at home but this time imagine the colors forming one after the other when someone waves at it.&nbsp;<\/p>\n\n\n\n<p>This kinda art will be a great conversation starter whenever you have guests over.<\/p>\n\n\n\n<p>That\u2019s what animated graphics do for your page, they keep website visitors engaged on the site. They\u2019ll wanna keep exploring the page to see what else you\u2019ve got for them.<\/p>\n\n\n\n<p>As usual, we\u2019ve got a great example that describes what we mean:<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-basetis.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/www.basetis.com\/en\/\" target=\"_blank\" rel=\"noreferrer noopener\">Basetis<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Another perk of this trend is that it allows quick surfing \u2014 users can navigate without clicking several buttons.<\/p>\n\n\n\n<p>It\u2019ll also help minimize the images or videos used on the site, making it eco-friendly.<\/p>\n\n\n\n<p><strong>Practical tip<\/strong>: Ensure you stick to brand colors when building a website with animated graphics.&nbsp;<\/p>\n\n\n\n<p>Here are other things you can do:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Tell a story with the animations.<\/li>\n\n\n\n<li>Use subtle interactive elements so users are focused on the experience.<\/li>\n\n\n\n<li>Add directional pulls, e.g. arrows or fingers pointing in a direction.<\/li>\n\n\n\n<li>Match the speed of the animations to actions users should take.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-gradient\"><strong>Trend #6: Monochromatic OUT; <\/strong><strong>gradients<\/strong><strong> &amp; glassmorphism IN \ud83d\udc97<\/strong><\/h2>\n\n\n\n<p>A couple of years ago, monochromatic web design was all the rage, and for good reasons:&nbsp;<\/p>\n\n\n\n<p>It brought sophistication and simplified complex designs.&nbsp;<\/p>\n\n\n\n<p>But guess what?&nbsp;<\/p>\n\n\n\n<p>There\u2019s a new kid on the block aiming to dethrone monochromatic design.&nbsp;<\/p>\n\n\n\n<p>Meet gradients and glassmorphism. A high-quality design trend that throws in bold color progression (gradients) on a website.&nbsp;<\/p>\n\n\n\n<p>Gradients take users on a colorful journey through your eye-catching typography.&nbsp;<\/p>\n\n\n\n<p>Zoocha\u2019s website below is an example of the gradient trend.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"478\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-gradient.png\" alt=\"Screenshot of Zoocha\u2019s website\" class=\"wp-image-203090\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-gradient.png 888w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-gradient-300x161.png 300w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-gradient-768x413.png 768w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/www.zoocha.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Zoocha<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>On the flip side, Glassmorphism makes your design elements resemble inscriptions on glass marbles. This gives users a unique viewing experience.\u00a0<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"478\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-gradient2.png\" alt=\"Screenshot of Glassmorphism's sign-up page.\" class=\"wp-image-203091\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-gradient2.png 888w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-gradient2-300x161.png 300w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-gradient2-768x413.png 768w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/webflow.com\/made-in-webflow\/website\/sign-in-14842a\" target=\"_blank\" rel=\"noreferrer noopener\">Webflow<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p><strong>Practical tip<\/strong>: Take a deep dive into audience research to understand their preferences. Also, colors are a crucial element in this trend. You wanna choose a color palette the audience loves so you can convey the right emotions and message.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-cursors\"><strong>Trend #7: Custom <\/strong><strong>cursors<\/strong><strong> \ud83d\udc7e<\/strong><\/h2>\n\n\n\n<p>If you browse on a desktop, the cursor is one component that simplifies interactions. Like an invisible hand that lets you navigate computer screens.&nbsp;<\/p>\n\n\n\n<p>But did you know you could make the conventional cursor much \u2018cooler\u2019?<\/p>\n\n\n\n<p>Yup, by customizing it so it\u2019s catchy and memorable for users. You can pair it up with hovering micro-animation and moving objects. You know, to make navigation more fun.&nbsp;<\/p>\n\n\n\n<p>An example is this cursor on Cocota Studio.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-cocota.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/www.cocotastudio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cocota Studio<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Practical tip<\/strong>: You can\u2019t always use customized cursors for every site. Sure, it might be fun, but on E-commerce websites, NGO sites, or big brands? It won\u2019t be effective.\u00a0<\/p>\n\n\n\n<p>In addition, you don\u2019t wanna use a custom cursor for mobile. It might send your mobile site to digital purgatory because there\u2019s no need for cursors there.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-app-ux\"><strong>Trend #8: App-like <\/strong><strong>user experience<\/strong><strong> (UX) patterns \ud83d\udcf2<\/strong><\/h2>\n\n\n\n<p>Responsive designs are more than just a trend nowadays, they\u2019re a necessity.&nbsp;<\/p>\n\n\n\n<p>With more people surfing the net through to their smartphones, your <a href=\"https:\/\/www.markup.io\/blog\/how-to-write-a-web-design-proposal\/\" target=\"_blank\" rel=\"noreferrer noopener\">web design<\/a> needs to shine on mobile.&nbsp;<\/p>\n\n\n\n<p>Put simply, you need to create designs that can adapt to any screen.<\/p>\n\n\n\n<p>Why?&nbsp;<\/p>\n\n\n\n<p>Well, mobile phones are the go-to device where most people do stuff. From buying concert tickets or scheduling appointments, you name it.&nbsp;<\/p>\n\n\n\n<p>So your website needs to be prepped to give them a smooth app-like user experience when they come to visit. You know, like the screenshot below.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"478\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-responsive.png\" alt=\"Example of a responsive app for learning new things about UX.\" class=\"wp-image-203099\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-responsive.png 888w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-responsive-300x161.png 300w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-responsive-768x413.png 768w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/shots\/4417198-App-for-learn-new-things-about-UX-Daily-UI-Challenge\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p><strong>Practical tip<\/strong>: Ensure your design embraces the chameleon as its spirit animal \ud83d\ude09, adapting to any device. Also, buttons and images should be easy to tap with the user\u2019s thumb.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-dark-mode\"><strong>Trend #9: <\/strong><strong>Dark mode<\/strong><strong> \ud83c\udf11<\/strong><\/h2>\n\n\n\n<p>Designing sites with dark mode in mind isn\u2019t a new trend but it\u2019s gained popularity in recent years.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"478\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-dark-mode.png\" alt=\"Screenshot of Frame.io's homepage in dark mode.\" class=\"wp-image-203089\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-dark-mode.png 888w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-dark-mode-300x161.png 300w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-dark-mode-768x413.png 768w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/frame.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Frame.io<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Take the social media app Twitter (I mean <em>X)<\/em>; they hopped on this feature back in 2016. Now, almost every software is on the dark mode train.\u00a0<\/p>\n\n\n\n<p>Why?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Users dig reading on dark backgrounds. \u201cIt\u2019s easy on the eyes,\u201d they say.&nbsp;<\/li>\n\n\n\n<li>Dark mode gives battery life extra juice to keep it running.<\/li>\n\n\n\n<li>Designers can play around with different design elements and test them.<\/li>\n\n\n\n<li>Adds elegance and sophistication to your user interface.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p><strong>Practical tip<\/strong>: If you\u2019re going with a dark background, skip using pure black colors or plain white text on it.&nbsp;<\/p>\n\n\n\n<p>Instead, opt for colors between 200-500 on the color palette for your text. This way, you get the right contrast and the text is easy to read.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-microinteractions\"><strong>Trend #10: <\/strong><strong>Microinteractions<\/strong><strong> \ud83d\udc49\ud83d\udc48<\/strong><\/h2>\n\n\n\n<p>This is another trend that improves users\u2019 engagement and interaction with your website&nbsp;<\/p>\n\n\n\n<p>The idea is for them to get feedback when they perform an action. You know, like when you click a like button or upload a file and see a progress indicator showing the percentage left.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-microinteraction.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/dribbble.com\/shots\/10066653-Upload-File\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Another one is how swiping left in your Gmail inbox deletes an email and swiping right archives it.\u00a0\u00a0<\/p>\n\n\n\n<p>With this trend, you can add a human touch to the user\u2019s experience on your site. In a way, it\u2019s like your site is talking right back at users, but digitally.<\/p>\n\n\n\n<p><strong>Practical tip<\/strong>: Embrace a minimalist approach when using micro-interactions so you don\u2019t overwhelm the user. Your mantra should be usability over visuals. In other words, stick with interactions that improve engagement and not those that are only visually appealing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-bold\"><strong>Trend #11: Bold <\/strong><strong>typography<\/strong><strong> &amp; vibrant <\/strong><strong>color palettes<\/strong><strong> \ud83d\udd20<\/strong><\/h2>\n\n\n\n<p>Sure, minimalism is among the top <a href=\"https:\/\/www.markup.io\/blog\/website-design-best-practices\/\" target=\"_blank\" rel=\"noreferrer noopener\">web design<\/a> trends of 2024, but it\u2019s not alone. It\u2019s joined by bold typography and bright color schemes.<\/p>\n\n\n\n<p>Statistics already show that <a href=\"https:\/\/www.emerald.com\/insight\/content\/doi\/10.1108\/00251740610673332\/full\/html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">62-90% of users<\/a> assess products based on colors. Now imagine using vibrant colors such as yellow, orange, and red for your sites. You\u2019ll for sure capture users\u2019 attention.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"478\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-bold.png\" alt=\"Screenshot of a landing page using vibrant blue, yellow, and orange colors.\" class=\"wp-image-203103\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-bold.png 888w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-bold-300x161.png 300w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-bold-768x413.png 768w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/shots\/21712071-Clairo-Art-Exhibition\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a><\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p>Put simply, if you do your audience research well, you\u2019ll have higher chances of making your design stand out.\u00a0<\/p>\n\n\n\n<p><strong>Practical tip<\/strong>: Bold typography and vibrant colors don&#8217;t apply to all websites. So if you\u2019re gonna use them, do so appropriately on things like art or comedy sites.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-parallax-scrolling\"><strong>Trend #12: <\/strong><strong>Parallax scrolling<\/strong><strong> \ud83d\udcdc<\/strong><\/h2>\n\n\n\n<p>In our book, websites fall into two categories \u2014 memorable ones and forgettable ones.&nbsp;<\/p>\n\n\n\n<p>The main difference between them?<\/p>\n\n\n\n<p>User experience!&nbsp;<\/p>\n\n\n\n<p>Now, we\u2019re pretty sure you\u2019ll want your site to be a memorable one, right?<\/p>\n\n\n\n<p>One way to do that is by using parallax scrolling.&nbsp;<\/p>\n\n\n\n<p>It&#8217;s an immersive animation technique. Here, design elements in the foreground move quicker than those in the background, creating a realistic user experience.\u00a0 This landing page from The Goonies describes it perfectly.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-parallax-scrolling.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/the-goonies.webflow.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">The Goonies<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>In parallax scrolling, users don\u2019t experience horizontal or vertical scrolling. Instead, the page moves inward and outward, giving users a 3-D experience. It\u2019s like a journey into the site from your browser.\u00a0<\/p>\n\n\n\n<p><strong>Practical tip<\/strong>: This scrolling effect isn\u2019t appropriate for mobile devices, so consider limiting it or just turning it off. Avoid overcrowding the page to ensure users can navigate the site with ease.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-horizontal-scrolling\"><strong>Trend #13: <\/strong><strong>Horizontal scrolling<\/strong><strong> \ud83d\udea5<\/strong><\/h2>\n\n\n\n<p>Adding unconventional things to your user interface is one of the ways to bring a spark back to it.&nbsp;<\/p>\n\n\n\n<p>Horizontal scrolling is an example of those unconventional things. Instead of scrolling downwards the common way, users move sideways. Just like this site from D. Pofter Studio:<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-horizontal-scrolling.mp4\" playsinline><\/video><figcaption class=\"wp-element-caption\">GIF Source: <a href=\"https:\/\/dpotferstudio.com\/work\/cultural-art-and-commitments\/\" target=\"_blank\" rel=\"noreferrer noopener\">D.Potfer<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Practical tip<\/strong>: Even though it\u2019s quite engaging, try to use horizontal scrolling only on sections of a webpage. Plus, give users a clear signal when horizontal scrolling is possible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-asymetric-layouts\"><strong>Trend #14: Asymmetric <\/strong><strong>layouts<\/strong><strong> \u25ab\ufe0f\u25fd<\/strong><\/h2>\n\n\n\n<p>Wanna break out from the traditional <a href=\"https:\/\/www.markup.io\/blog\/web-design-process\/\" target=\"_blank\" rel=\"noreferrer noopener\">web design process<\/a> some more?<\/p>\n\n\n\n<p>Asymmetric layouts are the way to go. Here, you can use different shapes, colors, and grids to create a captivating uneven display.&nbsp;<\/p>\n\n\n\n<p>The conventional way of design is to have parts that share the same position and shape. In other words, there\u2019s visual balance and everything follows a pattern. So, you could have a rectangular-shaped site where everything is in order following the rectangular framework.&nbsp;<\/p>\n\n\n\n<p>Using asymmetric layouts introduces beautiful chaos to your design. There\u2019s an unequal arrangement of elements in a way that spurs the visual interest of users.\u00a0<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"888\" height=\"478\" src=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-asymmetric.png\" alt=\"Example of an asymmetric layout on a website for a jewelry brand called Limnia.\" class=\"wp-image-203086\" srcset=\"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-asymmetric.png 888w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-asymmetric-300x161.png 300w, https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-asymmetric-768x413.png 768w\" sizes=\"auto, (max-width: 888px) 100vw, 888px\" \/><figcaption class=\"wp-element-caption\">Image Source: <a href=\"https:\/\/dribbble.com\/shots\/9146343-Limnia-Fine-Modular-Jewelry-Animation\" target=\"_blank\" rel=\"noreferrer noopener\">Dribbble<\/a>\u00a0\u00a0<\/figcaption><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<p><strong>Practical tip<\/strong>: If you wanna jump on this trend, here are some pointers to follow:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Remove the spacing between columns and grids.&nbsp;<\/li>\n\n\n\n<li>Combine bold headers with small images.<\/li>\n\n\n\n<li>Embrace white space.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center\">***<\/p>\n\n\n\n<p>We can now bring this guide to a close.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Over to you<\/strong><\/h2>\n\n\n\n<p>By incorporating the top web design trends we\u2019ve outlined in this list, you can improve your site\u2019s user experience by a long mile.&nbsp;<\/p>\n\n\n\n<p>But that\u2019s only if <a href=\"https:\/\/www.markup.io\/blog\/how-to-get-web-design-clients\/\" target=\"_blank\" rel=\"noreferrer noopener\">design clients<\/a>, stakeholders, and most importantly, users give you the go-ahead. Their approval is crucial to your next move.&nbsp;<\/p>\n\n\n\n<p>Now, how do you get their approval?<\/p>\n\n\n\n<p>It\u2019s simple.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.markup.io\/blog\/website-mockup-template\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design a template or mockup<\/a> with any of the trends you think is <a href=\"https:\/\/www.markup.io\/blog\/creative-project-management-software\/\" target=\"_blank\" rel=\"noreferrer noopener\">appropriate for your project<\/a>.&nbsp;<\/li>\n\n\n\n<li>Upload the digital design to <a href=\"https:\/\/www.markup.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">MarkUp.io<\/a> and share it with clients for review.&nbsp;<\/li>\n\n\n\n<li>They give feedback and approval by clicking anywhere on the design to leave comments.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>The hack is to leverage MarkUp.io. So, what are you waiting for?<\/p>\n\n\n\n<p><a href=\"https:\/\/app.markup.io\/signup?trial=true?utm_source=website&amp;utm_medium=markup-blog&amp;utm_campaign=web-design-trends&amp;utm_content=free-trial\" target=\"_blank\" rel=\"noreferrer noopener\">Sign up for a free 14-day trial with MarkUp.io<\/a> to start getting approvals from stakeholders and create stellar web designs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the web design universe, trends are like magical potions, equipping you with the powers needed to stand out from the competition. These design trends also possess the keys to transcending digital realms where user experiences are shaped. They influence everything from impression to engagement and even conversion.\u00a0\u00a0 Responding to them can be the missing &hellip; <a href=\"https:\/\/www.markup.io\/blog\/web-design-trends\/\">Continued<\/a><\/p>\n","protected":false},"author":8,"featured_media":203051,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-203050","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>14 web design trends to keep an eye on in 2023<\/title>\n<meta name=\"description\" content=\"We identified 14 prominent web design trends that will get more and more traction in 2023. Read our blog to see if your website&#039;s design is still relevant today!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.markup.io\/blog\/web-design-trends\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"14 web design trends to keep an eye on in 2023\" \/>\n<meta property=\"og:description\" content=\"We identified 14 prominent web design trends that will get more and more traction in 2023. Read our blog to see if your website&#039;s design is still relevant today!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.markup.io\/blog\/web-design-trends\/\" \/>\n<meta property=\"og:site_name\" content=\"Markup.io\" \/>\n<meta property=\"article:published_time\" content=\"2024-02-13T13:52:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-14T19:01:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-hero.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mary\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mary\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.markup.io\/blog\/web-design-trends\/\",\"url\":\"https:\/\/www.markup.io\/blog\/web-design-trends\/\",\"name\":\"14 web design trends to keep an eye on in 2023\",\"isPartOf\":{\"@id\":\"https:\/\/www.markup.io\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.markup.io\/blog\/web-design-trends\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.markup.io\/blog\/web-design-trends\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-hero.png\",\"datePublished\":\"2024-02-13T13:52:56+00:00\",\"dateModified\":\"2024-02-14T19:01:01+00:00\",\"author\":{\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\"},\"description\":\"We identified 14 prominent web design trends that will get more and more traction in 2023. Read our blog to see if your website's design is still relevant today!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.markup.io\/blog\/web-design-trends\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.markup.io\/blog\/web-design-trends\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.markup.io\/blog\/web-design-trends\/#primaryimage\",\"url\":\"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-hero.png\",\"contentUrl\":\"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-hero.png\",\"width\":1280,\"height\":720},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.markup.io\/blog\/web-design-trends\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.markup.io\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"14 web design trends to keep an eye on in 2024\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.markup.io\/#website\",\"url\":\"https:\/\/www.markup.io\/\",\"name\":\"Markup.io\",\"description\":\"Easiest Way to Leave Feedback on Digital Content\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.markup.io\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864\",\"name\":\"Mary\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"14 web design trends to keep an eye on in 2023","description":"We identified 14 prominent web design trends that will get more and more traction in 2023. Read our blog to see if your website's design is still relevant today!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.markup.io\/blog\/web-design-trends\/","og_locale":"en_GB","og_type":"article","og_title":"14 web design trends to keep an eye on in 2023","og_description":"We identified 14 prominent web design trends that will get more and more traction in 2023. Read our blog to see if your website's design is still relevant today!","og_url":"https:\/\/www.markup.io\/blog\/web-design-trends\/","og_site_name":"Markup.io","article_published_time":"2024-02-13T13:52:56+00:00","article_modified_time":"2024-02-14T19:01:01+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/assets.markup.io\/app\/uploads\/2024\/02\/web-design-trends-hero.png","type":"image\/png"}],"author":"Mary","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mary","Estimated reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.markup.io\/blog\/web-design-trends\/","url":"https:\/\/www.markup.io\/blog\/web-design-trends\/","name":"14 web design trends to keep an eye on in 2023","isPartOf":{"@id":"https:\/\/www.markup.io\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.markup.io\/blog\/web-design-trends\/#primaryimage"},"image":{"@id":"https:\/\/www.markup.io\/blog\/web-design-trends\/#primaryimage"},"thumbnailUrl":"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-hero.png","datePublished":"2024-02-13T13:52:56+00:00","dateModified":"2024-02-14T19:01:01+00:00","author":{"@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864"},"description":"We identified 14 prominent web design trends that will get more and more traction in 2023. Read our blog to see if your website's design is still relevant today!","breadcrumb":{"@id":"https:\/\/www.markup.io\/blog\/web-design-trends\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.markup.io\/blog\/web-design-trends\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.markup.io\/blog\/web-design-trends\/#primaryimage","url":"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-hero.png","contentUrl":"https:\/\/www.markup.io\/app\/uploads\/2024\/02\/web-design-trends-hero.png","width":1280,"height":720},{"@type":"BreadcrumbList","@id":"https:\/\/www.markup.io\/blog\/web-design-trends\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.markup.io\/"},{"@type":"ListItem","position":2,"name":"14 web design trends to keep an eye on in 2024"}]},{"@type":"WebSite","@id":"https:\/\/www.markup.io\/#website","url":"https:\/\/www.markup.io\/","name":"Markup.io","description":"Easiest Way to Leave Feedback on Digital Content","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.markup.io\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.markup.io\/#\/schema\/person\/617a46a460aa879c1898d69ee16e5864","name":"Mary"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/203050","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/comments?post=203050"}],"version-history":[{"count":9,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/203050\/revisions"}],"predecessor-version":[{"id":203121,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/posts\/203050\/revisions\/203121"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media\/203051"}],"wp:attachment":[{"href":"https:\/\/www.markup.io\/api\/wp\/v2\/media?parent=203050"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/categories?post=203050"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.markup.io\/api\/wp\/v2\/tags?post=203050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}