{"id":29347,"date":"2017-09-26T07:51:53","date_gmt":"2017-09-26T07:51:53","guid":{"rendered":"https:\/\/codewebbarcelona.com\/tendencias-diseno-web-2018\/"},"modified":"2026-04-21T01:08:09","modified_gmt":"2026-04-21T01:08:09","slug":"web-design-trends-2018","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/","title":{"rendered":"Web Design Trends 2018"},"content":{"rendered":"

To stay ahead and deliver the best web designs to our clients, it\u2019s essential to keep up with the latest web design trends.<\/p>\n

Since we like to stay one step ahead, in this post we\u2019ll take a look at the web design trends set to define 2018.<\/p>\n

We\u2019ve updated our series: discover the web design trends for 2026<\/a> that will shape the next generation of digital experiences.<\/h6>\n

Web Design Trends 2018: Performance & Interaction<\/h2>\n

Animated Vector Graphics<\/h3>\n

\"tendencias<\/a><\/p>\n

Vector graphics are more popular than ever\u2014and they sell. When you add animation, you get a blend of simplicity and sophistication.<\/p>\n

You can introduce interactive elements that respond to mouse hover or clicks, drawing users\u2019 attention.<\/p>\n

To implement these experiences, consider using SVG or the Canvas element.<\/p>\n

We recommend checking out libraries like Lazy Line Painter for SVG and P5JS for Canvas.<\/p>\n

Without a doubt, this will be one of the standout web design trends for 2018.<\/p>\n

Embracing Negative Space<\/h3>\n

Negative space will play a major role in web design this year. Whether through images, videos, or typography, making smart use of negative space gives your site a fresh, contemporary feel.<\/p>\n

Bold & Characterful Typography<\/h3>\n

\"tendencias<\/a><\/p>\n

Strong, impactful typefaces continue to be on trend, as they have for several years now. The era of ultra-thin fonts is behind us\u2014bold, weighty fonts are in.<\/p>\n

Mixing Serif and Sans-Serif fonts will also be a big trend in 2018. If you combine them with a keen eye for visual balance and choose the right weights, you\u2019ll achieve striking contrasts and a visually engaging result.<\/p>\n

Cinemagraphs<\/h3>\n

Cinemagraphs blend a static image with subtle, looping video motion, creating a captivating visual effect that grabs users\u2019 attention.<\/p>\n

While cinemagraphs will be a trend in 2018, use them thoughtfully and with purpose. Since they often involve video elements, they can be heavy on bandwidth\u2014something to consider for users with limited connections. Also, keep in mind that mobile users typically avoid video content when not connected to Wi-Fi.<\/p>\n

A smart use of cinemagraphs might be as a hover effect on a block or as a header image. From there, we\u2019re sure new and surprising applications will emerge that we haven\u2019t even imagined yet.<\/p>\n

Follow us on Facebook<\/a> to stay updated whenever we post new inspiration\u2014and stay tuned, because we\u2019re preparing something special and exclusive for our followers<\/strong> at the end of 2018!\u00a0Follow us!<\/a><\/h6>\n

Scroll-Based Animations<\/h3>\n

Progressive content loading as you scroll has been a growing trend in web design for several years, and it\u2019s only gaining momentum.<\/p>\n

Websites that reveal content as users scroll create a more immersive experience, making visitors feel engaged and part of the site. Animated content delivery as you scroll brings your site to life and makes it more appealing.<\/p>\n

Sticky Elements at the Bottom of the Site<\/h3>\n

With mobile devices on the rise, we\u2019re seeing a shift in web design: menus are increasingly being fixed to the bottom of the screen, rather than the top as in previous years.<\/p>\n

The reason is simple: from a usability standpoint, it\u2019s easier to navigate with your thumb, which naturally gravitates toward the bottom of the screen.<\/p>\n

If we look to apps as the benchmark for mobile design and usability, it\u2019s no coincidence\u2014they all feature bottom navigation menus.<\/p>\n

Interactive 3D Elements<\/h3>\n

Animated or interactive 3D objects continue to lead the way in cutting-edge web design. These elements grab users\u2019 attention, as we\u2019re not used to seeing them in browsers, and they draw visitors deeper into the site, making them feel part of the experience.<\/p>\n

One of the most interesting libraries for creating 3D animations is Three.js. We highly recommend checking it out\u2014it\u2019s well worth your time.<\/p>\n

You might also like…<\/h2>\n

Looking for more web inspiration? Check out our post on the best web designs of 2017\u20132018<\/a>!<\/p>\n

Follow us on Facebook<\/a> to stay updated whenever we post new inspiration\u2014and stay tuned, because we\u2019re preparing something special and exclusive for our followers<\/strong> at the end of 2018!\u00a0Follow us!<\/a><\/h6>\n","protected":false},"excerpt":{"rendered":"

To stay ahead and deliver the best web designs to our clients, it\u2019s essential to keep up with the latest web design trends. Since we like to stay one step ahead, in this post we\u2019ll take a look at the web design trends set to define 2018. We\u2019ve updated our series: discover the web design […]<\/p>\n","protected":false},"author":1,"featured_media":3882,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[208,211,134],"class_list":["post-29347","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-disseny-desenvolupament-web","category-marketing","category-disseny-grafic"],"acf":[],"yoast_head":"\nTendencias dise\u00f1o web 2018 - Dise\u00f1o web Barcelona Code<\/title>\n<meta name=\"description\" content=\"Hacemos un repaso de las tendencias en dise\u00f1o web para este a\u00f1o 2018. Elementos 3d, objetos vectoriales animados, preferencia a lo mobile.\" \/>\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-2018\/\" \/>\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 2018 - Dise\u00f1o web Barcelona Code\" \/>\n<meta property=\"og:description\" content=\"Hacemos un repaso de las tendencias en dise\u00f1o web para este a\u00f1o 2018. Elementos 3d, objetos vectoriales animados, preferencia a lo mobile.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Barcelona\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-26T07:51:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-21T01:08:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/09\/tendencias-diseno-web-2018-featured.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"800\" \/>\n\t<meta property=\"og:image:height\" content=\"572\" \/>\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=\"3 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-2018\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Web Design Trends 2018\",\"datePublished\":\"2017-09-26T07:51:53+00:00\",\"dateModified\":\"2026-04-21T01:08:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/\"},\"wordCount\":672,\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/09\/tendencias-diseno-web-2018-featured.jpg\",\"articleSection\":[\"Disseny i desenvolupament web\",\"M\u00e0rqueting\",\"Dise\u00f1o gr\u00e1fico\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/\",\"url\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/\",\"name\":\"Tendencias dise\u00f1o web 2018 - Dise\u00f1o web Barcelona Code\",\"isPartOf\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/09\/tendencias-diseno-web-2018-featured.jpg\",\"datePublished\":\"2017-09-26T07:51:53+00:00\",\"dateModified\":\"2026-04-21T01:08:09+00:00\",\"author\":{\"@id\":\"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567\"},\"description\":\"Hacemos un repaso de las tendencias en dise\u00f1o web para este a\u00f1o 2018. Elementos 3d, objetos vectoriales animados, preferencia a lo mobile.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/#primaryimage\",\"url\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/09\/tendencias-diseno-web-2018-featured.jpg\",\"contentUrl\":\"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/09\/tendencias-diseno-web-2018-featured.jpg\",\"width\":800,\"height\":572},{\"@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 2018 - Dise\u00f1o web Barcelona Code","description":"Hacemos un repaso de las tendencias en dise\u00f1o web para este a\u00f1o 2018. Elementos 3d, objetos vectoriales animados, preferencia a lo mobile.","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-2018\/","og_locale":"en_US","og_type":"article","og_title":"Tendencias dise\u00f1o web 2018 - Dise\u00f1o web Barcelona Code","og_description":"Hacemos un repaso de las tendencias en dise\u00f1o web para este a\u00f1o 2018. Elementos 3d, objetos vectoriales animados, preferencia a lo mobile.","og_url":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/","og_site_name":"Code Barcelona","article_published_time":"2017-09-26T07:51:53+00:00","article_modified_time":"2026-04-21T01:08:09+00:00","og_image":[{"width":800,"height":572,"url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/09\/tendencias-diseno-web-2018-featured.jpg","type":"image\/jpeg"}],"author":"cd26Bc","twitter_card":"summary_large_image","twitter_misc":{"Written by":"cd26Bc","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Web Design Trends 2018","datePublished":"2017-09-26T07:51:53+00:00","dateModified":"2026-04-21T01:08:09+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/"},"wordCount":672,"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/09\/tendencias-diseno-web-2018-featured.jpg","articleSection":["Disseny i desenvolupament web","M\u00e0rqueting","Dise\u00f1o gr\u00e1fico"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/","url":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/","name":"Tendencias dise\u00f1o web 2018 - Dise\u00f1o web Barcelona Code","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/09\/tendencias-diseno-web-2018-featured.jpg","datePublished":"2017-09-26T07:51:53+00:00","dateModified":"2026-04-21T01:08:09+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/en\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"description":"Hacemos un repaso de las tendencias en dise\u00f1o web para este a\u00f1o 2018. Elementos 3d, objetos vectoriales animados, preferencia a lo mobile.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codewebbarcelona.com\/en\/blog\/web-design-trends-2018\/#primaryimage","url":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/09\/tendencias-diseno-web-2018-featured.jpg","contentUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/09\/tendencias-diseno-web-2018-featured.jpg","width":800,"height":572},{"@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\/29347","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=29347"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/29347\/revisions"}],"predecessor-version":[{"id":29353,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/posts\/29347\/revisions\/29353"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media\/3882"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/media?parent=29347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/en\/wp-json\/wp\/v2\/categories?post=29347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}