{"id":30335,"date":"2019-10-29T18:44:01","date_gmt":"2019-10-29T18:44:01","guid":{"rendered":"https:\/\/codewebbarcelona.com\/tendencias-en-diseno-web-2020\/"},"modified":"2026-04-21T01:20:54","modified_gmt":"2026-04-21T01:20:54","slug":"web-design-trends-2020","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/","title":{"rendered":"Web Design Trends 2020"},"content":{"rendered":"<p>If you want to stay ahead of the curve and kick off the new year on the right foot, this post covers the top web design trends for 2020: Canvas, 3D, oversized typography, bold contrasts, artificial intelligence, machine learning, voice recognition, and much more.<\/p>\n<p>[superfeatured]7076[\/superfeatured]<\/p>\n<p>Another year, another round of preparations for what\u2019s next. With November just around the corner, we\u2019re gearing up for the year ahead\u2014and we want our readers to be ready too. As always, we\u2019ve put together a post to highlight what\u2019s set to make waves in web design for 2020.<\/p>\n<h6>Keeping up with the evolution \u2192 <a href=\"https:\/\/codewebbarcelona.com\/blog\/tendencias-diseno-web-2026\/\">Web design trends for 2026<\/a> bring minimalism, AI, and more human-centered experiences.<\/h6>\n<p>This type of post is a cornerstone of our blog, consistently drawing a high volume of visitors and even quote requests throughout the year from users searching for the latest in web, graphic, and marketing design. That\u2019s why, year after year, we invest even more effort, attention, and dedication into creating it. Our goal: to deliver quality content for our audience\u2014whether you\u2019re a design professional or a potential client looking for inspiration for your next website. Plus, producing high-quality content helps us maintain strong search rankings. As the saying goes: Content is king!<\/p>\n<h6>WOW! The new post on <a href=\"https:\/\/codewebbarcelona.com\/blog\/tendencias-en-diseno-web-2021\/\">web design trends for 2021<\/a> is live!!!<\/h6>\n<p>Previous years\u2019 posts you might find interesting: <a href=\"https:\/\/codewebbarcelona.com\/blog\/tendencias-en-diseno-web-2019\/\" target=\"_blank\" rel=\"noopener\">Web Design Trends 2019<\/a> &#8211; <a href=\"https:\/\/codewebbarcelona.com\/blog\/tendencias-diseno-web-2018\/\" target=\"_blank\" rel=\"noopener\">Web Design Trends 2018<\/a> &#8211; <a href=\"https:\/\/codewebbarcelona.com\/blog\/tendencia-de-diseno-web-y-grafico-para-el-2016-vol-1\/\" target=\"_blank\" rel=\"noopener\">Web Design Trends 2016<\/a><\/p>\n<h2>Web Design Trends for 2020: Stay Ahead<\/h2>\n<h3>Even Bigger Typography<\/h3>\n<p><img decoding=\"async\" class=\"alignnone wp-image-3883 size-full\" title=\"tendencias en dise\u00f1o web 2020 big typos\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/bigtypos.jpg\" alt=\"\" width=\"1200\" height=\"631\" \/><\/p>\n<p>One of the standout trends for 2020 is the use of oversized typography\u2014not just for headlines, but throughout body text as well.<\/p>\n<p>With widescreen, high-resolution displays becoming the norm and prices dropping on screens that were once rare, the days of 12- and 14-pixel body text are long gone. Now, it\u2019s perfectly acceptable to use 20 pixels and up, as long as it suits the project and website.<\/p>\n<p>For headlines, there\u2019s really no upper limit\u2014just your taste and common sense. Don\u2019t be afraid to go huge for maximum contrast. Well-crafted, oversized headlines give any website a bold personality and help it stand out, not just in 2020 but for years to come.<\/p>\n<h4>How and When to Use It<\/h4>\n<p>Apply this trend to websites that:<\/p>\n<ol>\n<li>Need a highly visual, impactful design<\/li>\n<li>Lack strong imagery and need a visual boost\u2014bold, oversized type can deliver the punch you\u2019re after<\/li>\n<li>Aren\u2019t targeting a very conservative audience<\/li>\n<li>Have a modern user base, especially those using large screens<\/li>\n<\/ol>\n<p>Keep in mind:<\/p>\n<ol>\n<li>You\u2019ll need to adjust font sizes for different screen resolutions. Create responsive exceptions, from 2560px (large screens) down to the more common 1330px (laptops)<\/li>\n<li>Pay special attention to mobile\u2014make sure your sizes work well there, since most users now browse on their phones<\/li>\n<\/ol>\n<h4>Websites Using This Trend<\/h4>\n<p><strong>Rogue Studio<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone wp-image-3884 size-full\" title=\"tendencias en dise\u00f1o web 2020 tipografias 1\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-tipografias-1.jpg\" alt=\"\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"https:\/\/rogue.studio\/\" target=\"_blank\" rel=\"noopener\">Visit website<\/a><\/p>\n<p>This site is a clear showcase of not just large, but EXTRA large typography\u2014and it looks fantastic.<\/p>\n<p>I\u2019m sure this site will be a contender in our annual roundup of the year\u2019s best web designs.<\/p>\n<p><strong>Granyon Summer Party<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3885\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-tipografias-2.jpg\" alt=\"tendencias en dise\u00f1o web 2020 tipografias 2\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"https:\/\/granyonparty.webflow.io\/\" target=\"_blank\" rel=\"noopener\">Visit website<\/a><\/p>\n<p>Another great example of this trend done right. Here, not only the main headline but also the body text is set in a large size.<\/p>\n<p><strong>Team Elite Kickboxing<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3886\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-tipografias-3.jpg\" alt=\"tendencias dise\u00f1o web 2020 tipografias 3\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"https:\/\/teamelitekickboxing.org\/\">Visit website<\/a><\/p>\n<p>One last example where this trend is on full display. Plus, this site also nails the next trend we\u2019ll discuss for 2020.<\/p>\n<h3>Bold Contrasts, Negative Colors, and Vibrant Hues<\/h3>\n<p><img decoding=\"async\" class=\"alignnone wp-image-3887 size-full\" title=\"tendencias dise\u00f1o web 2020 contrastes 1\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-contrastes-1.jpg\" alt=\"\" width=\"1200\" height=\"631\" \/><\/p>\n<p>The use of strong contrasts and negative colors has been gaining traction in web design and development over recent years. For 2020, expect this trend to continue, with more sites making a statement through fearless use of color.<\/p>\n<p>Unleash your bold side with vibrant contrasts and lively colors. Apply filters to images\u2014either in Photoshop or similar tools, or directly in the browser using CSS blending modes or even the canvas element.<\/p>\n<h4>How and When to Use It<\/h4>\n<p>Apply this trend to websites that:<\/p>\n<ol>\n<li>Need a highly visual, impactful design<\/li>\n<li>Aren\u2019t targeting a very conservative audience<\/li>\n<li>Want to grab attention and leave a lasting impression<\/li>\n<\/ol>\n<p>Keep in mind:<\/p>\n<ol>\n<li>For corporate sites aimed at conservative businesses, use this technique sparingly<\/li>\n<li>Apply contrasts thoughtfully, considering the brand\u2019s visual identity and color palette<\/li>\n<li>Even with high contrast, maintain visual harmony by creating a coherent color scheme<\/li>\n<\/ol>\n<h4>Websites Using This Trend<\/h4>\n<p><b>Ninja guru<\/b><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3888\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-contrastes-2.jpg\" alt=\"tendencias en dise\u00f1o web 2020 contrastes 2\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"http:\/\/ninjaguru.eu\/\" target=\"_blank\" rel=\"noopener\">Visit website<\/a><\/p>\n<p>This site takes contrast to the max, using both negative colors (black\/white) and striking color pairings (blue\/orange).<\/p>\n<p><strong>Festa da Francofonia 2019<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3889\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-contrastes-3.jpg\" alt=\"tendencias en dise\u00f1o web 2020 contrastes 3\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"https:\/\/www.festadafrancofonia.com\/\" target=\"_blank\" rel=\"noopener\">Visit website<\/a><\/p>\n<p>Vivid colors, bold contrasts, moving geometric elements\u2026 This site won\u2019t leave visitors indifferent\u2014a perfect example of a key web design trend for 2020.<\/p>\n<p><strong>Kombu<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3890\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-contrastes-4.jpg\" alt=\"tendencias en dise\u00f1o web 2020 contrastes 4\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"https:\/\/www.kombudrinks.com\/\">Visit website<\/a><\/p>\n<p>Here, contrast is used in the packaging for each drink, visually representing each flavor. The \u201cwavy\u201d diagonal lines that match the packaging are a brilliant touch. This is a great example of not just contrast, but also meaningful JS effects that reinforce the product\u2019s formal brand message.<\/p>\n<h3>Mobile Experience: More Important Than Ever<\/h3>\n<div style=\"width: 420px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-30335-1\" width=\"420\" height=\"746\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/mobile-first.mp4?_=1\" \/><\/video><\/div>\n<p>&nbsp;<\/p>\n<p>By now, everyone knows about responsive web design. So, while it may not seem like a \u201ctrend\u201d for 2020, at least not in the sense of basic responsive layouts, there\u2019s more to consider.<\/p>\n<p>With the majority of users browsing on mobile devices, it\u2019s essential to deliver a tailored experience that fits both the device and the user\u2019s habits. In other words, responsive design needs to evolve.<\/p>\n<p>It\u2019s no longer enough to just make your site responsive. Now, you need to think beyond that\u2014take cues from mobile apps. If your site\u2019s navigation feels as seamless as an app, you\u2019re meeting users where they are. That\u2019s how you stay ahead.<\/p>\n<p>Another crucial factor for mobile users: lightning-fast load times.<\/p>\n<h4>Some Tips<\/h4>\n<ol>\n<li>Avoid autoplay on videos, as it can eat up users\u2019 bandwidth\u2014especially if they\u2019re not on WiFi<\/li>\n<li>Optimize images by serving device-appropriate sizes to improve loading speed<\/li>\n<li>Use a burger menu to condense navigation into an app-like format<\/li>\n<\/ol>\n<h4>Websites Using This Trend<\/h4>\n<p><strong>Nicholas Munt<\/strong><\/p>\n<div style=\"width: 420px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-30335-2\" width=\"420\" height=\"746\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-mobile-2.mp4?_=2\" \/><\/video><\/div>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/nicholasmunt.com\/\" target=\"_blank\" rel=\"noopener\">Visit website<\/a><\/p>\n<p>This site uses AJAX to load each page, making it extremely mobile-friendly and closely mimicking the navigation style of most apps.<\/p>\n<p><strong>Salmoon &amp; Sons<\/strong><\/p>\n<div style=\"width: 368px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-30335-3\" width=\"368\" height=\"656\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-mobile-3-1.mp4?_=3\" \/><\/video><\/div>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/wsalamoon.com\" target=\"_blank\" rel=\"noopener\">Visit website<\/a><\/p>\n<p>On mobile, this site stands out for its swipe-enabled slider, which lets you move the full image smoothly with your finger. The burger menu is also well executed, sliding in from the side.<\/p>\n<p><strong>Volia<\/strong><\/p>\n<div style=\"width: 420px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-30335-4\" width=\"420\" height=\"746\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/mobile-first.mp4?_=4\" \/><\/video><\/div>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/studiovoila.com\" target=\"_blank\" rel=\"noopener\">Visit website<\/a><\/p>\n<p>As you can see, this site uses large typography that\u2019s still well adapted for mobile. The burger menu is also nicely designed, with a smooth, engaging transition.<\/p>\n<h6>WOW! Check out our new post on the\u00a0<a href=\"https:\/\/codewebbarcelona.com\/blog\/mejores-disenos-web-2019-2020\/\">best web designs of 2019-2020<\/a>!\u00a0<a href=\"https:\/\/codewebbarcelona.com\/blog\/mejores-disenos-web-2019-2020\/\">Click here!<\/a><\/h6>\n<h3>Custom Cursors and Scrollbars<\/h3>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3895\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-scroll-cursores-1.jpg\" alt=\"tendencias en dise\u00f1o web 2020 cursores 1\" width=\"1200\" height=\"631\" \/><\/p>\n<p>One of the fastest-growing trends is replacing the default browser cursor with a custom one.<\/p>\n<p>These custom cursors often interact with elements on the site\u2014changing size, color, and more. It\u2019s a relatively new trend that\u2019s set to grow even more in 2020.<\/p>\n<p>The same goes for scrollbars. More and more sites are ditching the default browser scrollbar in favor of fully customized, smooth-scrolling versions.<\/p>\n<p>We\u2019re also seeing a rise in sites that don\u2019t display a scrollbar at all, even when there\u2019s more content below. This is becoming increasingly popular, and you can bet it\u2019ll be a big trend in 2020. Users are now so accustomed to scrolling that it\u2019s second nature. This opens the door to more minimalist interfaces. If hiding the scrollbar feels too radical, you can always meet halfway\u2014omit the scrollbar but guide users with a \u201cscroll down\u201d icon.<\/p>\n<h4>How and When to Use It<\/h4>\n<p>Apply this trend to websites that:<\/p>\n<ol>\n<li>Want to add extra personality<\/li>\n<li>Are aimed at advanced or web-savvy users<\/li>\n<\/ol>\n<p>Keep in mind:<\/p>\n<ol>\n<li>Test your custom scroll on all major browsers to ensure it works smoothly<\/li>\n<li>On mobile devices, custom scrolls can behave unpredictably\u2014consider hiding them entirely on mobile<\/li>\n<\/ol>\n<h4>Websites Using This Trend<\/h4>\n<p><strong>Aluxion<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3896\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-scroll-cursores-2.jpg\" alt=\"tendencias en dise\u00f1o web 2020 cursores 2\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"https:\/\/www.aluxion.com\/\" target=\"_blank\" rel=\"noopener\">Visit website<\/a><\/p>\n<p>Here, the custom scroll is made up of two circles\u2014one large, one small\u2014that follow your cursor with a slight delay and feature a striking hover effect. There\u2019s also a custom scrollbar, making the whole design feel cohesive.<\/p>\n<p><strong>Joseph Berry<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3897\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-scroll-cursores-3.jpg\" alt=\"tendencias en dise\u00f1o web 2020 cursores 3\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"https:\/\/joseph-berry.webflow.io\/\">Visit website<\/a><\/p>\n<p>This cursor is similar to the previous example but stands out for its typographic outer circle. As for the scrollbar, they\u2019ve opted not to use one at all\u2014a trend I expect to see more of in 2020, as users are increasingly conditioned to scroll instinctively.<\/p>\n<p><strong>Matt VBRG<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3898\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-scroll-cursores-4.jpg\" alt=\"tendencias en dise\u00f1o web 2020 cursores 4\" width=\"1200\" height=\"631\" \/><\/p>\n<p><a href=\"https:\/\/www.mattvbrg.com\/\" target=\"_blank\" rel=\"noopener\">Visit website<\/a><\/p>\n<p>On this site, the cursor interacts with all content, changing colors and triggering eye-catching visual effects like a chrome finish on images.<\/p>\n<h3>Canvas and 3D Elements with Three.js<\/h3>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3901\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-3d-3.jpg\" alt=\"tendencias en dise\u00f1o web 2020 3d 3\" width=\"1200\" height=\"631\" \/><br \/>\nThe use of Canvas in web design has been gaining momentum for years, and in 2020 it\u2019s set to be a defining trend for cutting-edge websites.<\/p>\n<p>Canvas lets you harness OpenGL to create experiences that go far beyond standard HTML. With Canvas, you\u2019re free to build anything you can imagine.<\/p>\n<p>One of the most popular uses of Canvas is adding depth and interactivity with 3D objects. Some sites are pushing the envelope so far, they feel more like video games than websites.<\/p>\n<p>To create these 3D experiences, there\u2019s the well-known Three.js library. With Three.js, you can build 3D objects or import models from 3D design software. The best part? You can make these elements interactive, delivering truly immersive experiences.<\/p>\n<p>Without a doubt, Three.js-powered 3D will be one of the top web design trends for 2020.<\/p>\n<h4>How and When to Use It<\/h4>\n<p>Apply this trend to websites that:<\/p>\n<ol>\n<li>Need a highly creative and visual experience<\/li>\n<li>Want to make a strong impression on visitors<\/li>\n<li>Are looking to explore new, innovative ways to communicate messages<\/li>\n<\/ol>\n<p>Keep in mind:<\/p>\n<ol>\n<li>With great power comes great responsibility\u2014focus on communication first, then apply design and creativity to serve that message (not the other way around)<\/li>\n<li>Pay close attention to compatibility across devices and browsers to ensure your experience works everywhere<\/li>\n<\/ol>\n<h4>Websites Using This Trend<\/h4>\n<p><strong>DMC2019<\/strong><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-3900\" src=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/10\/tendencias-diseno-web-2020-3d-2.jpg\" alt=\"tendencias en dise\u00f1o web 2020 3d 2\" width=\"1200\" height=\"631\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you want to stay ahead of the curve and kick off the new year on the right foot, this post covers the top web design trends for 2020: Canvas, 3D, oversized typography, bold contrasts, artificial intelligence, machine learning, voice recognition, and much more. [superfeatured]7076[\/superfeatured] Another year, another round of preparations for what\u2019s next. With [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12093,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[208,210,134],"class_list":["post-30335","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-disseny-desenvolupament-web","category-inspiracio","category-disseny-grafic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code<\/title>\n<meta name=\"description\" content=\"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code\" \/>\n<meta property=\"og:description\" content=\"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Barcelona\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-29T18:44:01+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-21T01:20:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1290\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"cd26Bc\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"cd26Bc\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Web Design Trends 2020\",\"datePublished\":\"2019-10-29T18:44:01+00:00\",\"dateModified\":\"2026-04-21T01:20:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/\"},\"wordCount\":1723,\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg\",\"articleSection\":[\"Disseny i desenvolupament web\",\"Inspiraci\u00f3\",\"Dise\u00f1o gr\u00e1fico\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/\",\"name\":\"Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg\",\"datePublished\":\"2019-10-29T18:44:01+00:00\",\"dateModified\":\"2026-04-21T01:20:54+00:00\",\"author\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"description\":\"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/#primaryimage\",\"url\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg\",\"contentUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg\",\"width\":1290,\"height\":700},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#website\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/\",\"name\":\"Code Barcelona\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codewebbarcelona.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g\",\"caption\":\"cd26Bc\"},\"sameAs\":[\"https:\/\/codewebbarcelona.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code","description":"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!","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:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/","og_locale":"en_US","og_type":"article","og_title":"Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code","og_description":"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!","og_url":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/","og_site_name":"Code Barcelona","article_published_time":"2019-10-29T18:44:01+00:00","article_modified_time":"2026-04-21T01:20:54+00:00","og_image":[{"width":1290,"height":700,"url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg","type":"image\/jpeg"}],"author":"cd26Bc","twitter_card":"summary_large_image","twitter_misc":{"Written by":"cd26Bc","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Web Design Trends 2020","datePublished":"2019-10-29T18:44:01+00:00","dateModified":"2026-04-21T01:20:54+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/"},"wordCount":1723,"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg","articleSection":["Disseny i desenvolupament web","Inspiraci\u00f3","Dise\u00f1o gr\u00e1fico"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/","url":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/","name":"Tendencias dise\u00f1o web 2020 - Estudio de dise\u00f1o web Code","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg","datePublished":"2019-10-29T18:44:01+00:00","dateModified":"2026-04-21T01:20:54+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"description":"Exploramos en profundidad las tendencias en dise\u00f1o web para 2020. \u00bfQu\u00e9 mejor que hacerlo con ejemplos? Inspiraci\u00f3n a tope!","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2020\/#primaryimage","url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg","contentUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2019\/11\/Active-Theory-01.jpg","width":1290,"height":700},{"@type":"WebSite","@id":"https:\/\/codewebbarcelona.com\/en\/#website","url":"https:\/\/codewebbarcelona.com\/en\/","name":"Code Barcelona","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b904e836584635855eaa0ee2922bae4fe2aa94ffb558048dcc5dac5f98f0fadc?s=96&d=mm&r=g","caption":"cd26Bc"},"sameAs":["https:\/\/codewebbarcelona.com"]}]}},"_links":{"self":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/30335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/comments?post=30335"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/30335\/revisions"}],"predecessor-version":[{"id":30360,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/30335\/revisions\/30360"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media\/12093"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media?parent=30335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/categories?post=30335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}