Click To Tweet<\/a><\/p>\n En MadridNYC sabemos lo importante que es estar actualizados y conocer hacia d\u00f3nde va el sector. Por eso, cada a\u00f1o preparamos un resumen de lo que est\u00e1 por venir. Tratamos de dar siempre a los clientes las mejores opciones, y en ellas siempre se deben ver reflejadas las modas en dise\u00f1o web<\/a>.<\/p>\n Quienes han trabajado con nosotros estos \u00faltimos meses, han visto implementadas en su web las tendencias en dise\u00f1o web 2017, y ahora estamos preparando ya lo que vendr\u00e1 en 2018<\/a>.<\/p>\n Lo que debe quedar claro antes de revisar estas 7 tendencias de dise\u00f1o web, es que no todas las tendencias son para todos. Lo que le funciona a otro no tiene porqu\u00e9 funcionar en tu web ni gustar a tu p\u00fablico objetivo.<\/p>\n Debes de elegir una tendencia que est\u00e9 en equilibrio con los objetivos de tu empresa. De no ser as\u00ed, el mensaje puede confundirse y apagarse.<\/p>\n Por ejemplo, una empresa que vende productos innovadores de tecnolog\u00eda, no debe de escoger el estilo vintage para su web por muy a la moda que est\u00e9, no concuerda. <\/p>\n Click To Tweet<\/a><\/p>\n En este art\u00edculo vamos a conocer siete tendencias del dise\u00f1o web, para que puedas renovar tu p\u00e1gina eligiendo la que m\u00e1s se adapte a los objetivos de tu empresa.<\/p>\n Las tendencias de dise\u00f1o web que analizaremos a continuaci\u00f3n son:<\/p>\n Una imagen animada que sale combinando fotograf\u00eda y v\u00eddeo. La mayor\u00eda de la imagen es est\u00e1tica, pero alg\u00fan elemento de la misma tiene movimiento. En el ejemplo todo es una fotograf\u00eda normal excepto el agua de cascada que se mueve. Puedes ver el efecto entrando en la web, la imagen est\u00e1 enlazada.<\/p>\n El fin de esta herramienta es sorprender al usuario, que se encontrar\u00e1 ante una imagen supuestamente normal que de repente se empieza a mover.<\/p>\n En este caso, el fondo de la web es un v\u00eddeo que ocupa toda la pantalla del navegador. Los men\u00fas de la p\u00e1gina, est\u00e1n sobrepuestos en el mismo v\u00eddeo. No quedan espacios en blanco en la pantalla. Estas web son m\u00e1s envolventes y atractivas para el usuario.<\/p>\n Son peque\u00f1as interacciones entre un dispositivo o web y el usuario. Puedes mejorar la experiencia de los visitantes a tu web con ellas.<\/p>\n Aunque creas que no sabes lo que es, las usas todos los d\u00edas, un ejemplo es el bot\u00f3n para poner en silencio un smartphone; cuando lo pulsas el m\u00f3vil queda sin sonido y sale un icono en la pantalla que te dice que el tel\u00e9fono est\u00e1 en silencio.<\/p>\n Tienen cuatro fases:<\/p>\n Un ejemplo son las im\u00e1genes que puedes comparar con un simple movimiento de rat\u00f3n, as\u00ed a un lado de la barra queda una imagen y al otro lado la otra imagen. Puedes moverla para ver m\u00e1s de un tipo o del otro.<\/p>\n Esta t\u00e9cnica permite que el usuario de tu web se desplace horizontalmente en ella y los contenidos se vayan mostrando de una forma animada. Hace la visi\u00f3n de tu website m\u00e1s divertida y amena para los posibles clientes.<\/p>\n La empresa Apple es una experta en este tipo de recursos inform\u00e1ticos.<\/p>\n Si \u200baccedes a una web, haces scroll y ves que el fondo se mueve a otra velocidad que el contenido puedes estar seguro de que el dise\u00f1ador de esta p\u00e1gina ha utilizado la t\u00e9cnica parallax.<\/p>\n Es un dise\u00f1o que ya se vi\u00f3 mucho en 2017 y que utiliza distintas capas que te ayudan a crear en tu website un peque\u00f1o efecto de profundidad y cada vez que los usuarios se desplacen por la pantalla ver\u00e1n partes del fondo que antes no se ve\u00edan.<\/p>\n \u200bSon las siglas en ingl\u00e9s de aplicaciones web progresivas. \u00bfPor qu\u00e9 progresivas? Porque son aplicaciones, que cambian su funcionalidad seg\u00fan la capacidad del dispositivo en el que se est\u00e9n ejecutando.<\/p>\n Esto quiere decir que si un usuario de tu web la abre desde un smartphone, usar\u00e1 las funciones necesarias para que el contenido se vea \u00f3ptimamente en \u00e9l; pero si otro usuario la abre en un ordenador, la web se adaptar\u00e1 y se optimizar\u00e1 a ese dispositivo.<\/p>\n La tipograf\u00eda en s\u00ed y la ordenaci\u00f3n de la misma, tiene mucho impacto en la experiencia de tus clientes y usuarios. Cuando se dise\u00f1a un sitio web, lo ideal es que la tipograf\u00eda sirva para complementar el dise\u00f1o del mismo.<\/p>\n7 Tendencias de dise\u00f1o web que debes conocer<\/h2>\n
\n
Cinemagraphs<\/h3>\n
![\"Imagen](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2017\/11\/cinemagrph-madridnyc.png\")
<\/a><\/p>\nFull screen v\u00eddeos<\/h3>\n
![\"\"](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2017\/11\/full-screen-video-madridnyc.png\")
<\/a><\/p>\nMicro-interacciones<\/h3>\n
\n
![\"Imagen](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2017\/11\/microinteraccion-madridnyc.png\")
<\/p>\nAnimaciones en scroll<\/h3>\n
![\"Imagen](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2017\/11\/animacion-en-scroll-madridnyc.png\")
<\/a><\/p>\nParallax<\/h3>\n
![\"Imagen](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2017\/11\/parallax-madridnyc.png\")
<\/a><\/p>\nPWA<\/h3>\n
Dise\u00f1o tipogr\u00e1fico<\/h3>\n
![\"Imagen](\"https:\/\/madridnyc.com\/wp-content\/uploads\/2017\/11\/diseno-tipografico-madridnyc.png\")
<\/a><\/p>\n