{"id":10727,"date":"2018-01-24T16:03:35","date_gmt":"2018-01-24T16:03:35","guid":{"rendered":"https:\/\/rubrika.es\/?p=10727"},"modified":"2020-02-20T18:56:50","modified_gmt":"2020-02-20T16:56:50","slug":"tendencias-en-diseno-web-para-2018","status":"publish","type":"post","link":"https:\/\/rubrika.es\/marketing-digital\/diseno-web\/tendencias-en-diseno-web-para-2018\/","title":{"rendered":"Tendencias en dise\u00f1o web para 2018"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"background-color: rgba(255,255,255,0);background-position: center center;background-repeat: no-repeat;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;margin-bottom: 0px;margin-top: 0px;border-width: 0px 0px 0px 0px;border-color:#e8eaf0;border-style:solid;\" ><div class=\"fusion-builder-row fusion-row\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-one-full fusion-column-first fusion-column-last\" style=\"margin-top:2%;margin-bottom:5%;\"><div class=\"fusion-column-wrapper fusion-flex-column-wrapper-legacy\" style=\"background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding: 0px 0px 0px 0px;\"><a class=\"mainbtn\" href=\"https:\/\/rubrika.es\/marketing-digital\/diseno-web\/tendencias-en-diseno-web-2020\/\"><span class=\"animaText\">Tendencias DISE\u00d1O WEB 2020<\/span>\n<\/a><div class=\"fusion-clearfix\"><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-1 fusion_builder_column_1_1 1_1 fusion-one-full fusion-column-first fusion-column-last\" style=\"margin-top:0px;margin-bottom:0px;\"><div class=\"fusion-column-wrapper fusion-flex-column-wrapper-legacy\" style=\"background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding: 0px 0px 0px 0px;\"><div class=\"fusion-text fusion-text-1\"><p>Las tendencias en dise\u00f1o web este 2018 vienen marcadas por el minimalismo, mejora en la velocidad de carga, efectos visuales y los dise\u00f1os responsive.<\/p>\n<h2>Animaciones y efectos visuales<\/h2>\n<p>Animaciones y efectos visuales pondr\u00e1n la chispa de car\u00e1cter en las web de 2018. Entretener al usuario dentro de la web es el principio de una visita exitosa, por eso la interactividad es cada vez m\u00e1s frecuente en las webs.<\/p>\n<p>Podemos ser creativos con animaciones que transformen la experiencia de usuario. Gracias a ellas es posible dirigir la atenci\u00f3n del usuario hacia la informaci\u00f3n, adem\u00e1s de conseguir interacci\u00f3n.<\/p>\n<p>Aqu\u00ed te dejamos algunos ejemplos de web que han conseguido implementar animaciones de original y divertida.<\/p>\n<p><img class=\"alignnone wp-image-10738 size-full\" src=\"https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/ejemplos-animaciones-1.jpg\" alt=\"\" width=\"790\" height=\"400\" srcset=\"https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/ejemplos-animaciones-1-200x101.jpg 200w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/ejemplos-animaciones-1-300x152.jpg 300w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/ejemplos-animaciones-1-400x203.jpg 400w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/ejemplos-animaciones-1-540x272.jpg 540w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/ejemplos-animaciones-1-600x304.jpg 600w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/ejemplos-animaciones-1-768x389.jpg 768w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/ejemplos-animaciones-1.jpg 790w\" sizes=\"(max-width: 790px) 100vw, 790px\" \/><\/p>\n<p>Las animaciones de burbujas de CSS con la que cuenta la p\u00e1gina web de 7UP, es un curioso ejemplo de c\u00f3mo utilizar las animaciones en beneficio de tu marca.<\/p>\n<p><a href=\"https:\/\/fournier-pere-fils.com\/home\" rel=\"nofollow noopener\" target=\"_blank\"><img class=\"alignnone wp-image-10739 size-full\" src=\"https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/tendencias-dise\u00f1o-web-2018-2.jpg\" alt=\"\" width=\"886\" height=\"336\" srcset=\"https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/tendencias-dise\u00f1o-web-2018-2-200x76.jpg 200w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/tendencias-dise\u00f1o-web-2018-2-300x114.jpg 300w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/tendencias-dise\u00f1o-web-2018-2-400x152.jpg 400w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/tendencias-dise\u00f1o-web-2018-2-600x228.jpg 600w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/tendencias-dise\u00f1o-web-2018-2-768x291.jpg 768w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/tendencias-dise\u00f1o-web-2018-2-800x303.jpg 800w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/tendencias-dise\u00f1o-web-2018-2.jpg 886w\" sizes=\"(max-width: 886px) 100vw, 886px\" \/><\/a><\/p>\n<p>La pagina web de Fournier ha sabido implementar animaciones cinemagraphs en su pagina web, aportando un estilo clasico y sobrio.<\/p>\n<h2>Dise\u00f1o Responsive<\/h2>\n<p>El dise\u00f1o web responsive o adaptativo, es una t\u00e9cnica de dise\u00f1o web que se centra en la correcta visualizaci\u00f3n de una misma p\u00e1gina en distintos dispositivos.<\/p>\n<p>Teniendo en cuenta que las b\u00fasquedas en dispositivo m\u00f3viles ya superaron a las de ordenador en el a\u00f1o 2016, esto ya no es una tendencia si no una obligaci\u00f3n en el dise\u00f1o web.<\/p>\n<p>Adem\u00e1s, si tu web no est\u00e1 adaptada a m\u00f3viles est\u00e1s perdiendo posicionamiento SEO. Google da mucha importancia al tr\u00e1fico m\u00f3vil (sobre todo en los \u00faltimos a\u00f1os) y ofrece herramientas como <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" rel=\"nofollow noopener\" target=\"_blank\">Speed Insights<\/a> para que puedas comprobar la rapidez y la eficacia del dise\u00f1o para cada dispositivo. Las webs con mejores estad\u00edsticas en estas herramientas lo tienen m\u00e1s f\u00e1cil para aparecer en los primeros puestos de b\u00fasqueda.<\/p>\n<p>Aqu\u00ed puedes informarte mejor sobre <a href=\"https:\/\/rubrika.es\/web-adaptada-a-movil\/\">dise\u00f1o web responsive.<\/a><\/p>\n<h1><\/h1>\n<h2>Dise\u00f1o minimalista<\/h2>\n<p>Este estilo de dise\u00f1o web lleva a\u00f1os de moda y parece que seguir\u00e1 en las tendencias en dise\u00f1o web para este 2018. Predominio de dise\u00f1os simples, fondos de color blanco o claro, unidad crom\u00e1tica en las tipograf\u00edas y pocos elementos en pantalla.<\/p>\n<p>Adem\u00e1s, los dise\u00f1adores UI\/UX son cada d\u00eda m\u00e1s. Centrados en mejorar la experiencia de usuario en webs y aplicaciones, podemos esperar webs cada vez m\u00e1s intuitivas y r\u00e1pidas. Interfaces sencillas con pocos elementos en pantalla son la base de este tipo de dise\u00f1o web.<\/p>\n<p><a href=\"https:\/\/ayuelajimenez.es\/\" rel=\"nofollow noopener\" target=\"_blank\"><img class=\"alignnone wp-image-10740 size-full\" src=\"https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/tendencias-dise\u00f1o-web-2018-3.jpg\" alt=\"\" width=\"886\" height=\"425\" srcset=\"https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/tendencias-dise\u00f1o-web-2018-3-200x96.jpg 200w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/tendencias-dise\u00f1o-web-2018-3-300x144.jpg 300w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/tendencias-dise\u00f1o-web-2018-3-400x192.jpg 400w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/tendencias-dise\u00f1o-web-2018-3-600x288.jpg 600w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/tendencias-dise\u00f1o-web-2018-3-768x368.jpg 768w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/tendencias-dise\u00f1o-web-2018-3-800x384.jpg 800w, https:\/\/rubrika.es\/marketing-digital\/wp-content\/uploads\/2018\/01\/tendencias-dise\u00f1o-web-2018-3.jpg 886w\" sizes=\"(max-width: 886px) 100vw, 886px\" \/><\/a><\/p>\n<h2>Im\u00e1genes y v\u00eddeos<\/h2>\n<p>Rompiendo con el t\u00edpico slider de varias im\u00e1genes, llegan las cabeceras <em>hero:<\/em> Una sola imagen muy llamativa a ancho y altos completos de pantalla. Adem\u00e1s de conseguir efectos visualmente atractivos, evitamos problemas de optimizaci\u00f3n para la velocidad de carga (que como hemos visto es un factor cada vez m\u00e1s importante).<\/p>\n<p>Por otra parte, los v\u00eddeos siguen siendo el formato audiovisual que triunfa en internet y eso se nota en la web. Los v\u00eddeos como fondo de elementos seguir\u00e1n siendo focos de atenci\u00f3n en las webs de 2018, pero cuidado: v\u00eddeos demasiado pesados pueden hacer que el tiempo de carga de la web aumente considerablemente.<\/p>\n<h2>Tipograf\u00eda llamativa<\/h2>\n<p>Fuentes en color negro junto con espacios en blanco, combin\u00e1ndolas con tipograf\u00edas llamativas con colores brillantes para resaltar informaci\u00f3n al lector.<\/p>\n<p>Los dise\u00f1os basados principalmente en la tipograf\u00eda adem\u00e1s permiten conseguir de una forma sencilla una buena velocidad de carga. Si el atractivo de la web est\u00e1 en los propios textos se puede prescindir en cierta medida de elementos audiovisuales pesados como im\u00e1genes o v\u00eddeos.<\/p>\n<p>Estas son algunas de las tendencias en dise\u00f1o web en este 2018, con las que podr\u00e1s tener tu web a la \u00faltima.<\/p>\n<\/div><div class=\"fusion-clearfix\"><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":8,"featured_media":10732,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[166],"tags":[],"_links":{"self":[{"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/posts\/10727"}],"collection":[{"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/comments?post=10727"}],"version-history":[{"count":8,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/posts\/10727\/revisions"}],"predecessor-version":[{"id":11906,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/posts\/10727\/revisions\/11906"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/media\/10732"}],"wp:attachment":[{"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/media?parent=10727"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/categories?post=10727"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rubrika.es\/marketing-digital\/wp-json\/wp\/v2\/tags?post=10727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}