10 Tendencias de Diseño Web para 2017 y 2018

En este vídeo te voy a enseñar diez tendencias de diseño web que vamos a del 2017 al 2018 He analizado el diseño de las webs más populares y te voy a contar cuáles son sus secretos
Soy Diego Castaño y hoy vas a aprender qué es lo que se va a llevar en diseño web durante el próximo año ¡No te lo pierdas! Número uno: Carga progresiva Estamos viendo que páginas como Facebook o LinkedIn ya no muestran una animación de carga sino que están mostrando páginas esqueleto mientras se carga el contenido real También hay que tener en cuenta que podemos cargar de manera asíncrona ficheros CSS o JavaScript para agilizar el primer renderizado de la página Además existen tecnologías como el AMP de Google que buscan acelerar los tiempos de carga de las páginas web móviles
Las plataformas sociales más conocidas se están expandiendo a países con menos recursos, por lo que vamos a seguir viendo el uso de estas tecnologías Segunda tendencia: Vuelve el skeumorfismo En 2007, Apple puso de moda el Skeumorfismo, esto es, las aplicaciones que simulaban texturas de la vida real Años después, en 2010, Microsoft vuelve a un diseño mucho más minimalista y plano, el llamado Flat Design Más recientemente, en 2014, Google saca Material Design, en un intento de darle un giro de tuerca al Flat Design aportándole más profundidad
Durante 2016 muchas empresas han adoptado el estilo minimalista del Flat o Material Design, hasta el punto de que son demasiado parecidas, por eso, en 2017 vamos a ver cómo las empresas, en un esfuerzo de diferenciarse, van a volver a utilizar texturas del mundo real, es decir, va a volver el skeumorfismo Tercera tendencia: Más multimedia En sus inicios La Web estaba dominada por JPGs para las imágenes estáticas y GIFs para las animaciones Posteriormente surgió el PNG para añadir transparencia y en 2010 Google sacó el formato WebM, de modo que los vídeos ocupan ya tan poco que se están empezando a adoptar como fondos de páginas web Durante el próximo año va a ser normal encontrar vídeos como fondos de páginas web porque dan un aire más cinemático
Tendencia número cuatro: Micro-interacciones Las micro-interacciones definen cómo reaccionan los detalles de nuestro diseño web ante las acciones de los usuarios, como cuando hacen click o cuando escriben una contraseña incorrecta Es muy frecuente, por ejemplo, encontrar animaciones en las transiciones entre pantallas o en los estados vacíos, es decir, cuando en una sección todavía no hay contenido que mostrar También es muy frecuente el uso de animaciones en los botones, especialmente en las llamadas a la acción, es decir, aquellos en los que quieres atraer la atención del usuario para que haga click Quinta tendencia: Mayor adopción de las fuentes web
Los emojis se usan en cada vez más contextos y es muy común encontrarlos en el texto de las páginas web, por lo tanto, la manera más sencilla de implementar esto es mediante fuentes web Además, las fuentes web de Google se usan cada vez más, teniendo casi catorce billones de visualizaciones Sexta tendencia: Muere el menú de hamburguesa McDonalds y Burger King han quebrado (No
) Con menú de hamburguesa me refiero al icono con las tres barritas horizontales que sirve para ocultar todo un menú cuando no hay espacio suficiente A pesar de que este icono ya se ha convertido en una convención y que la mayoría de usuarios sabemos lo que significa, los expertos en usabilidad recomiendan no utilizarlo Y es que, aunque los usuarios sepan que hay un menú oculto no saben que opciones contiene y por tanto supone una carga mental mayor que no es necesaria Cuando no hay espacio para un menú completo los expertos recomiendan utilizar pestañas, a ser posible, con un texto que diga el título de la sección, si el texto tampoco cabe podemos usar pestañas que sólo contengan los iconos, y si no hay más remedio que poner un sólo botón para desplegar el menú, lo que se recomienda es poner el icono de hamburguesa y el texto "MENÚ", aunque, si es posible y las secciones son consecutivas, otra solución moderna sería hacer uso del scroll infinito Séptima tendencia: Muere la homepage
Llamamos homepage a las páginas de empresa que buscan condensar aglutinar todo su contenido en la página principal La mayoría de empresas están pasándose a otro tipo de página principal: las llamadas landing pages Una landing page es una página inicial con un objetivo muy concreto: convertir visitantes en clientes Octava tendencia: Menú horizontal de navegación con buscador Las webs más populares de la actualidad tienen una cosa en común, y es que tienen un menú de navegación horizontal que está en la parte superior y que tiene un campo de búsqueda
Éste es un patrón de diseño que viene de años anteriores pero ha unificado aún más Novena tendencia: Fondo de color blanco Puede parecer una tontería pero otra cosa que tienen en común las diez webs más visitadas del mundo es que todas ellas tienen fondo blanco o de todos muy claros de gris Esto tiene una explicación muy sencilla y es que el blanco es el color más luminoso y es el que los diseñadores utilizan para dirigir nuestra atención hacia el contenido de la web Décima y última tendencia: Declive del diseño responsive
De las webs más populares tan solo el 30% tiene un diseño completamente responsive La filosofía responsive es programar una sola página web que se adapte a todos los dispositivos El diseño responsive tiene la ventaja de que es menos costoso de desarrollar, sin embargo los resultados son de menos calidad porque no se adaptan a la experiencia nativa de cada dispositivo El enfoque que están tomando las empresas más populares es el adaptativo En el diseño adaptativo se sirve un versión distinta a cada tipo de dispositivo
Lo más común y lo que hacen Facebook o Twitter es tener una versión para escritorio y otra responsive que utilizan para móviles y tablets Si te ha gustado este vídeo acuérdate de compartirlo y darle a "Me gusta" Y si quieres aprender algo nuevo cada semana suscríbete al canal ahora mismo Quiero dar las gracias a @AlfonsooGG por la idea de este vídeo Si tú tienes otra idea déjamelo en un comentario aquí abajo