Click To Tweet<\/a><\/p>\n Para muestra, basta por navegar un rato por la \u201cWayback Machine<\/a>\u201d, para comparar c\u00f3mo eran algunas de las p\u00e1ginas m\u00e1s famosas cuando empezaron y c\u00f3mo son ahora.<\/p>\n Hemos investigado un poco y hoy queremos hablarte de lo que se espera en dise\u00f1o web para el pr\u00f3ximo 2017, \u00bfnos sigues leyendo?<\/p>\n Durante el 2016, hemos denotado diferentes conceptos que poco a poco se han ido estableciendo y han encontrado su hueco en el mercado.<\/p>\n Algunas de las nuevas tendencias en dise\u00f1o web que han surgido en los \u00faltimos meses, parece que han venido para quedarse. Ir\u00e1n surgiendo nuevas corrientes, pero algunas de las que hemos visto \u00faltimamente van a continuar vigentes. <\/p>\n Click To Tweet<\/a><\/p>\n Aunque no se trata de nuevas tendencias en dise\u00f1o web, algunas se adaptar\u00e1n a los nuevos cambios para seguir pisando fuerte un a\u00f1o m\u00e1s.<\/strong><\/p>\n Vamos a ver cu\u00e1les son esos aspectos del dise\u00f1o que ya conocemos, y que se resisten a pasar de moda.<\/p>\n Aunque cuando empezaron a surgir las p\u00e1ginas web, \u00e9ste era un aspecto que no se ten\u00eda tanto en cuenta, poco a poco las tipograf\u00edas de \u201cpalo seco\u201d se han ido imponiendo en el sector.<\/strong><\/p>\n Esto se debe a varios factores:<\/p>\n Entre las tipograf\u00edas sans-serif, las m\u00e1s utilizadas en dise\u00f1o de p\u00e1ginas web son:<\/p>\n \u201cEvita las tipograf\u00edas complicadas. La simplicidad manda a la hora de elegir tipo de letra.\u201d<\/em><\/p><\/blockquote>\n El flat design o dise\u00f1o plano, lleva siendo tendencia desde el 2014, m\u00e1s o menos, y resiste a\u00f1o a a\u00f1o. Y no es de extra\u00f1ar, ya que es otra de las nuevas tendencias en dise\u00f1o web que apuesta por la simplicidad y por la sencillez<\/strong>.<\/p>\n El Flat Design<\/u> elimina todas las sombras, relieves, ornamentos, texturas, degradados, difuminados y cualquier sensaci\u00f3n de tridimensionalidad.<\/em><\/p><\/blockquote>\n Se trata de una tendencia en dise\u00f1o que apuesta por la falta de profundidad, en beneficio de potenciar las formas y las siluetas.<\/p>\n Est\u00e1s m\u00e1s que acostumbrado a verlo en iconos e infograf\u00edas, tanto en p\u00e1ginas online, como dentro de aplicaciones m\u00f3viles. Y es que, el \u00faltimo a\u00f1o ha sido el gran potenciador de este tipo de soluci\u00f3n gr\u00e1fica.<\/p>\n Seguro que en lo que va de a\u00f1o has visto varias p\u00e1ginas web con un dise\u00f1o parallax. Ya sabes, cuando haces scroll y el fondo se mueve a una velocidad distinta que el resto de elementos.<\/p>\n Se trata de un dise\u00f1o que crea una falsa sensaci\u00f3n de profundidad, mostrando partes de la p\u00e1gina que en un principio no se ve\u00edan<\/strong>, pero sin obstaculizar la lectura del contenido.<\/p>\n El 2017, como veremos a continuaci\u00f3n, apuesta por incluir la animaci\u00f3n y los movimientos, sin abusar excesivamente de ellos. Por lo tanto, continuar con el dise\u00f1o parallax seguir\u00e1 siendo un acierto.<\/p>\n Es una de las nuevas tendencias en dise\u00f1o de p\u00e1ginas web que llegaron con los dispositivos m\u00f3viles y el dise\u00f1o responsive, y que poco a poco ha ido haci\u00e9ndose su propio hueco.<\/p>\n El Men\u00fa Hamburguesa<\/u> o \u201chamburger menu\u201d, es aquel icono compuesto por tres rayas horizontales de igual tama\u00f1o, que al clicar sobre \u00e9l abre un desplegable con el men\u00fa completo.<\/em><\/p><\/blockquote>\n Comenz\u00f3 utiliz\u00e1ndose m\u00e1s en las p\u00e1ginas web y aplicaciones destinadas a ser visitadas desde dispositivos m\u00f3viles, aunque hoy en d\u00eda es f\u00e1cil encontrarlo tambi\u00e9n en algunas versiones para escritorio.<\/p>\n Ahora que ya conoces qu\u00e9 elementos en dise\u00f1o web es muy posible que sigamos viendo durante los pr\u00f3ximos meses, es el momento de mirar hacia el futuro y ver qu\u00e9 es lo nuevo que viene pisando fuerte.<\/p>\n El 2017, en l\u00edneas generales, se va a caracterizar por incluir el movimiento en las p\u00e1ginas web<\/strong>, aunque teniendo siempre en cuenta que no se puede abusar de \u00e9l.<\/p>\n Se seguir\u00e1 apostando por la simplicidad, y por la usabilidad. Sin embargo, poco a poco se va a huir de las p\u00e1ginas absolutamente est\u00e1ticas, para apostar por incluir dinamismo.<\/p>\n Una de las principales factores que se va a tener en cuenta a la hora de hablar de nuevas tendencias en dise\u00f1o web, es que la apelaci\u00f3n a los sentimientos se aplicar\u00e1 a este \u00e1mbito en su m\u00e1ximo exponente.<\/strong><\/p>\n Habitualmente, este tipo de emotividad se ha utilizado mucho en publicidad, y dentro del marketing de contenidos. En 2017, se va a dar un paso m\u00e1s para que se vea reflejado en los propios elementos de dise\u00f1o web.<\/p>\n Se apostar\u00e1 m\u00e1s por im\u00e1genes emotivas que descriptivas, utilizando la cotidianidad y los sentimientos como tem\u00e1ticas habituales. Todo ello, en detrimento de las im\u00e1genes abstractas e imprecisas.<\/p>\n Las emociones venden, y eso debe reflejarse tambi\u00e9n en el dise\u00f1o de las p\u00e1ginas web.<\/em><\/p><\/blockquote>\n Se trata de una tendencia web que ya ha llegado a las redes sociales, y seguramente ya la habr\u00e1s visto en m\u00e1s de una ocasi\u00f3n.<\/p>\n Facebook, por ejemplo, ha lanzado la opci\u00f3n de subir fotograf\u00edas panor\u00e1micas tanto en horizontal como en vertical. Si sabes de lo que hablamos, habr\u00e1s visto que puedes \u201cnavegar\u201d por la imagen 360\u00ba, descubriendo todos los detalles de la misma.<\/p>\n Este mismo efecto llega al dise\u00f1o web, como una versi\u00f3n del dise\u00f1o parallax. Se va a utilizar de diferentes formas en funci\u00f3n del formato:<\/p>\n Ten en cuenta que la principal tendencia es la simplicidad, por lo que nunca debes abusar de este tipo de efectos.<\/strong><\/p>\n En este sentido, est\u00e1 bien incluir alg\u00fan elemento que cuente con movimiento 306\u00ba, pero siempre y cuando tenga una justificaci\u00f3n.<\/p>\n Esta nueva tendencia en dise\u00f1o gr\u00e1fico no lo es tanto, si tenemos en cuenta que Google la desarroll\u00f3 en 2014, pero es ahora cuando puede empezar a verse en otras p\u00e1ginas web.<\/p>\n El Material Design<\/u> es un dise\u00f1o donde la profundidad, las superficies, los bordes, las sombras y los colores juegan un papel principal, pero desde la sencillez y simplicidad.<\/em><\/p><\/blockquote>\n Se cre\u00f3 pensando en Android, y es una forma de intentar acercarse a la realidad, un paso m\u00e1s all\u00e1 del flat design<\/strong> tan vigente en los \u00faltimos tiempos.<\/p>\n Para entenderlo un poco mejor, veremos algunas de sus caracter\u00edsticas:<\/p>\n Al fin y al cabo, si dispones de un dispositivo Android o has utilizado alguno, ya conoces el material design. Google lo utiliza tanto para el sistema operativo como para sus aplicaciones.<\/p>\n El material design se basa en la simplicidad del flat design, pero aplicado a todo, y aport\u00e1ndole nuevos matices.<\/em><\/p><\/blockquote>\n Otra de las nuevas tendencias en dise\u00f1o web heredadas, precisamente de Google, es el uso de colores saturados. Se huye completamente de degradados, texturizados u otros efectos, para apostar por colores s\u00f3lidos y bien saturados.<\/p>\n Esto no quiere decir que haya que utilizar colores llamativos a toda costa. Ten en cuenta que muchos colores no funcionan bien a trav\u00e9s de la pantalla, o pueden ser dif\u00edciles de leer.<\/p>\n Se trata, en realidad, de utilizar bien los colores elegidos por la marca, no mostr\u00e1ndoles \u201clavados\u201d o aclarados, sino aprovechando todo su potencial.<\/strong><\/p>\n Si los colores corporativos son demasiado fuertes, puedes limitarte a usarlos en s\u00f3lo algunos elementos, y recurrir al negro sobre blanco cl\u00e1sico para los textos.<\/p>\n Est\u00e1 claro que los recursos visuales son indispensables en el dise\u00f1o web, as\u00ed como en la comunicaci\u00f3n online en general. Se utilizan emoticones para Facebook<\/a> y otras redes sociales, stickers, iconos, s\u00edmbolos\u2026<\/p>\n El contenido ya no es s\u00f3lo textual, y cada d\u00eda se hace m\u00e1s importante el saber c\u00f3mo hacer infograf\u00edas y contenidos audiovisuales en campa\u00f1as de v\u00eddeo marketing<\/a>.<\/em><\/p><\/blockquote>\n Hasta ahora, estas infograf\u00edas se utilizaban mayoritariamente planas, a pesar de que en Internet se pueden encontrar varias herramientas para darles animaci\u00f3n. Sin embargo, en 2017 se va a apostar por el movimiento, y eso afectar\u00e1 tambi\u00e9n a las infograf\u00edas.<\/p>\n No es necesario que cada elemento sea din\u00e1mico, es m\u00e1s, podr\u00eda ser contraproducente, ya que marear\u00eda al usuario y ser\u00eda dif\u00edcil de entender.<\/p>\n En 2017 se apostar\u00e1 por las transiciones o animaciones discretas, o por la interacci\u00f3n con el usuario, gui\u00e1ndole en diferentes pasos.<\/em><\/p><\/blockquote>\n En relaci\u00f3n al punto anterior, llega la \u00faltima de las nuevas tendencias en dise\u00f1o web (por el momento).<\/p>\n El movimiento y la animaci\u00f3n que veremos m\u00e1s que nunca en 2017, no deben aplicarse por el simple hecho de seguir una moda, sino con un motivo justificado, ya que se busca lo que se busca es la interacci\u00f3n con el usuario.<\/p>\n Las p\u00e1ginas web deben perseguir el objetivo principal de captar la atenci\u00f3n de los usuarios, y eso se puede conseguir con un buen dise\u00f1o y con un buen plan de marketing de contenidos<\/a>.<\/p>\n Y una vez que el usuario te presta atenci\u00f3n, dale las pautas para interactuar con tu p\u00e1gina web. Las microinteracciones deben ser claras y sencillas, y estar bien identificadas con llamadas a la acci\u00f3n.<\/strong><\/p>\n Pueden formarse con infograf\u00edas animadas, con elementos con movimiento 360\u00ba, o con cualquier otro recurso que se te ocurra. Pero recuerda, \u00a1nunca abuses!<\/p>\n Conclusiones<\/strong><\/p>\n Como ves, el dise\u00f1o web evoluciona r\u00e1pidamente y no deja de sorprendernos. Y sino, \u00bfqu\u00e9 fue del desarrollo web en flash<\/a>? Los usuarios son los que marcan sus necesidades, y los dise\u00f1os se adaptan a esas necesidades.<\/p>\nTendencias de dise\u00f1o web del 2016 que seguir\u00e1n en 2017<\/h2>\n
Tipograf\u00edas Sans-Serif<\/h3>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
![\"tipografia-san-serif-linkedin\"](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2016\/11\/tipografia-san-serif-linkedin.png\")
<\/a><\/p>\nDise\u00f1o minimalista: Flat Design<\/h3>\n
![\"flat-design2\"](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2016\/11\/flat-design2.png\")
<\/a><\/p>\nParallax<\/h3>\n
![\"parallax\"](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2016\/11\/parallax.png\")
<\/a><\/p>\nMen\u00fa Hamburguesa<\/h3>\n
![\"menu-hambuguesa-madridnyc-2\"](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2016\/11\/Menu-hambuguesa-MadridNYC-2.png\")
<\/a><\/p>\nNuevas tendencias en dise\u00f1o web que veremos en 2017<\/h2>\n
Im\u00e1genes emotivas<\/h3>\n
![\"imagenes-emotivas2\"](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2016\/11\/imagenes-emotivas2.png\")
<\/a><\/p>\nMovimiento 360\u00ba<\/h3>\n
\n
\n
\n
\n
\n
![\"movimiento-360-2\"](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2016\/11\/movimiento-360-2.png\")
<\/p>\nMaterial Design<\/h3>\n
\n
\n
\n
![\"material-design-2\"](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2016\/11\/material-design-2.png\")
<\/p>\nColores saturados<\/h3>\n
![\"colores-saturados-2\"](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2016\/11\/colores-saturados-2.png\")
<\/a><\/p>\nInfograf\u00edas animadas<\/h3>\n
![\"infografia-animada-2\"](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2016\/11\/infografia-animada-2.png\")
<\/a><\/p>\nMicrointeracciones<\/h3>\n
![\"microinteracciones-2\"](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2016\/11\/microinteracciones-2.png\")
<\/p>\n