{"id":85642,"date":"2017-09-26T07:51:53","date_gmt":"2017-09-26T07:51:53","guid":{"rendered":"https:\/\/codewebbarcelona.com\/tendencias-diseno-web-2018\/"},"modified":"2026-06-11T02:50:00","modified_gmt":"2026-06-11T02:50:00","slug":"tendencias-design-web-2018","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/pt-pt\/tendencias-design-web-2018\/","title":{"rendered":"Tend\u00eancias de design web 2018"},"content":{"rendered":"

Para acompanhar as novidades e garantir aos nossos clientes os melhores projetos web, \u00e9 fundamental estar sempre atento \u00e0s \u00faltimas tend\u00eancias de design.<\/p>\n

Como gostamos de estar um passo \u00e0 frente, neste artigo vamos apresentar as tend\u00eancias de web design que v\u00e3o marcar o ano de 2018.<\/p>\n

Atualiz\u00e1mos a nossa s\u00e9rie: descobre as tend\u00eancias de web design para 2026<\/a> que v\u00e3o definir a pr\u00f3xima gera\u00e7\u00e3o de sites digitais.<\/h6>\n

Tend\u00eancias web design 2018: performance e intera\u00e7\u00e3o<\/h2>\n

Objetos vetoriais animados<\/h3>\n

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

O design vetorial est\u00e1 cada vez mais em voga. E quando lhe juntamos anima\u00e7\u00e3o, conseguimos um equil\u00edbrio perfeito entre simplicidade e sofistica\u00e7\u00e3o.<\/p>\n

\u00c9 poss\u00edvel adicionar elementos interativos que respondem ao hover ou ao clique do rato, tornando a experi\u00eancia mais envolvente e captando a aten\u00e7\u00e3o do utilizador.<\/p>\n

Para integrar este tipo de experi\u00eancias no teu site, podes recorrer a SVG ou ao elemento Canvas.<\/p>\n

Recomendamos explorar bibliotecas como Lazy Line Painter para SVG e P5JS para Canvas.<\/p>\n

Sem d\u00favida, esta ser\u00e1 uma das grandes tend\u00eancias de web design em 2018.<\/p>\n

Uso do espa\u00e7o negativo<\/h3>\n

O espa\u00e7o negativo vai ganhar destaque em 2018 na cria\u00e7\u00e3o de sites. Seja atrav\u00e9s de imagens, v\u00eddeos ou tipografia, saber utilizar bem o espa\u00e7o negativo confere um toque contempor\u00e2neo e sofisticado ao design.<\/p>\n

Negritos e tipografias com personalidade<\/h3>\n

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

Tipografias marcantes e com presen\u00e7a continuam em alta, tend\u00eancia que j\u00e1 se vem afirmando nos \u00faltimos anos. As fontes finas j\u00e1 n\u00e3o dominam \u2014 agora, o destaque vai para os negritos e para tipos de letra com peso visual.<\/p>\n

Combina\u00e7\u00f5es entre Serif e Sans tamb\u00e9m v\u00e3o estar em evid\u00eancia, criando contrastes interessantes quando bem aplicadas. O segredo est\u00e1 em escolher com crit\u00e9rio o peso de cada fonte para alcan\u00e7ar um resultado visualmente apelativo.<\/p>\n

Cinemagraphs<\/h3>\n

Os cinemagraphs resultam da fus\u00e3o entre uma imagem est\u00e1tica e um v\u00eddeo em movimento, criando um efeito visual que capta imediatamente a aten\u00e7\u00e3o.<\/p>\n

Apesar de serem tend\u00eancia em 2018, o uso de cinemagraphs deve ser ponderado e justificado, j\u00e1 que estes elementos, por envolverem v\u00eddeo, podem aumentar significativamente o peso da p\u00e1gina. \u00c9 importante considerar as limita\u00e7\u00f5es de largura de banda, sobretudo para utilizadores mobile, que tendem a evitar v\u00eddeos fora de redes Wi-Fi.<\/p>\n

Uma boa utiliza\u00e7\u00e3o dos cinemagraphs pode ser como efeito hover num bloco ou como imagem de cabe\u00e7alho. Acreditamos que a criatividade vai trazer ainda mais aplica\u00e7\u00f5es surpreendentes para este recurso.<\/p>\n

Segue-nos no Facebook<\/a> para ficares sempre a par das nossas novidades e inspira\u00e7\u00f5es… e aten\u00e7\u00e3o, porque estamos a preparar algo especial e exclusivo para os nossos seguidores<\/strong> para o final de 2018! Segue-nos!<\/a><\/h6>\n

Scroll e anima\u00e7\u00f5es<\/h3>\n

O carregamento de conte\u00fado \u00e0 medida que se faz scroll \u00e9 uma tend\u00eancia que j\u00e1 se observa h\u00e1 algum tempo, mas que vai ganhar ainda mais for\u00e7a.<\/p>\n

Um site que apresenta o conte\u00fado de forma animada \u00e0 medida que o utilizador navega cria uma experi\u00eancia mais din\u00e2mica e envolvente, fazendo com que o utilizador se sinta parte integrante do site.<\/p>\n

Elementos fixos na parte inferior do site<\/h3>\n

Com o crescimento do uso de dispositivos m\u00f3veis, come\u00e7a a ser cada vez mais comum ver menus fixos n\u00e3o s\u00f3 no topo, mas tamb\u00e9m na parte inferior do ecr\u00e3.<\/p>\n

A raz\u00e3o \u00e9 simples: em termos de usabilidade, o gesto mais natural para navegar num smartphone \u00e9 com o polegar, que alcan\u00e7a mais facilmente a parte inferior do ecr\u00e3.<\/p>\n

Se olharmos para as apps como refer\u00eancia m\u00e1xima em design e usabilidade mobile, percebemos que todas seguem esta l\u00f3gica: menus fixos na base do ecr\u00e3.<\/p>\n

Elementos 3D interativos<\/h3>\n

Os elementos 3D animados ou interativos continuam a destacar-se nos melhores projetos web. Estes objetos captam a aten\u00e7\u00e3o dos utilizadores, j\u00e1 que n\u00e3o \u00e9 habitual v\u00ea-los num navegador, tornando a experi\u00eancia mais imersiva.<\/p>\n

Uma das bibliotecas mais interessantes para criar anima\u00e7\u00f5es 3D \u00e9 a Three.js. Vale a pena explorar \u2014 n\u00e3o te vais arrepender.<\/p>\n

Poder\u00e1 tamb\u00e9m interessar-te…<\/h2>\n

Se procuras inspira\u00e7\u00e3o, espreita o nosso artigo sobre os melhores designs web 2017 2018<\/a>!<\/p>\n

Segue-nos no Facebook<\/a> para ficares sempre a par das nossas novidades e inspira\u00e7\u00f5es… e aten\u00e7\u00e3o, porque estamos a preparar algo especial e exclusivo para os nossos seguidores<\/strong> para o final de 2018! Segue-nos!<\/a><\/h6>\n","protected":false},"excerpt":{"rendered":"

Para acompanhar as novidades e garantir aos nossos clientes os melhores projetos web, \u00e9 fundamental estar sempre atento \u00e0s \u00faltimas tend\u00eancias de design. Como gostamos de estar um passo \u00e0 frente, neste artigo vamos apresentar as tend\u00eancias de web design que v\u00e3o marcar o ano de 2018. Atualiz\u00e1mos a nossa s\u00e9rie: descobre as tend\u00eancias de […]<\/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":[481],"class_list":["post-85642","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sem-categoria"],"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\/pt-pt\/tendencias-design-web-2018\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\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\/pt-pt\/tendencias-design-web-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-06-11T02:50:00+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=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/tendencias-design-web-2018\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/tendencias-design-web-2018\\\/\"},\"author\":{\"name\":\"cd26Bc\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\"},\"headline\":\"Tend\u00eancias de design web 2018\",\"datePublished\":\"2017-09-26T07:51:53+00:00\",\"dateModified\":\"2026-06-11T02:50:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/tendencias-design-web-2018\\\/\"},\"wordCount\":741,\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/tendencias-design-web-2018\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codewebbarcelona.com\\\/wp-content\\\/uploads\\\/2017\\\/09\\\/tendencias-diseno-web-2018-featured.jpg\",\"articleSection\":[\"Sem categoria\"],\"inLanguage\":\"pt-PT\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/tendencias-design-web-2018\\\/\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/tendencias-design-web-2018\\\/\",\"name\":\"Tendencias dise\u00f1o web 2018 - Dise\u00f1o web Barcelona Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/tendencias-design-web-2018\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/tendencias-design-web-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-06-11T02:50:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/#\\\/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\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/tendencias-design-web-2018\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/tendencias-design-web-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\\\/pt-pt\\\/#website\",\"url\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/\",\"name\":\"Code Barcelona\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codewebbarcelona.com\\\/pt-pt\\\/#\\\/schema\\\/person\\\/3af5f44aaf0de2919e9225aa5ca32567\",\"name\":\"cd26Bc\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@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\/pt-pt\/tendencias-design-web-2018\/","og_locale":"pt_PT","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\/pt-pt\/tendencias-design-web-2018\/","og_site_name":"Code Barcelona","article_published_time":"2017-09-26T07:51:53+00:00","article_modified_time":"2026-06-11T02:50:00+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":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/tendencias-design-web-2018\/#article","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/tendencias-design-web-2018\/"},"author":{"name":"cd26Bc","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567"},"headline":"Tend\u00eancias de design web 2018","datePublished":"2017-09-26T07:51:53+00:00","dateModified":"2026-06-11T02:50:00+00:00","mainEntityOfPage":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/tendencias-design-web-2018\/"},"wordCount":741,"image":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/tendencias-design-web-2018\/#primaryimage"},"thumbnailUrl":"https:\/\/codewebbarcelona.com\/wp-content\/uploads\/2017\/09\/tendencias-diseno-web-2018-featured.jpg","articleSection":["Sem categoria"],"inLanguage":"pt-PT"},{"@type":"WebPage","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/tendencias-design-web-2018\/","url":"https:\/\/codewebbarcelona.com\/pt-pt\/tendencias-design-web-2018\/","name":"Tendencias dise\u00f1o web 2018 - Dise\u00f1o web Barcelona Code","isPartOf":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/tendencias-design-web-2018\/#primaryimage"},"image":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/tendencias-design-web-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-06-11T02:50:00+00:00","author":{"@id":"https:\/\/codewebbarcelona.com\/pt-pt\/#\/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":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codewebbarcelona.com\/pt-pt\/tendencias-design-web-2018\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/tendencias-design-web-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\/pt-pt\/#website","url":"https:\/\/codewebbarcelona.com\/pt-pt\/","name":"Code Barcelona","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codewebbarcelona.com\/pt-pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Person","@id":"https:\/\/codewebbarcelona.com\/pt-pt\/#\/schema\/person\/3af5f44aaf0de2919e9225aa5ca32567","name":"cd26Bc","image":{"@type":"ImageObject","inLanguage":"pt-PT","@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\/pt-pt\/wp-json\/wp\/v2\/posts\/85642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=85642"}],"version-history":[{"count":2,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/posts\/85642\/revisions"}],"predecessor-version":[{"id":85644,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/posts\/85642\/revisions\/85644"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/media\/3882"}],"wp:attachment":[{"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=85642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codewebbarcelona.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=85642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}