Este documento resume 12 tendencias en diseño web para 2019, incluyendo carga progresiva de páginas, diseños modulares, uso de colores brillantes, formas orgánicas, multimedia, interacciones, tipografías hechas a mano, reemplazo de menús hamburguesa por pestañas, conversión de páginas de inicio a landing pages, uso de cinemagrafías, notificaciones en tiempo real, y el uso continuo de fondos blancos. La tendencia adicional mencionada es moverse del diseño responsive al diseño adaptativo para cre

1. Juan Manuel Fernández Cuesta
https://www.linkedin.com/in/juanmafcuesta
Frontend Developer
12+1 tendencias en diseño web
para 2019
1. Carga Progresiva de las páginas
En la actualidad estamos viendo páginas como Facebook o LinkedIn, no muestran
la página web completa, sino que muestran páginas esqueletos que permiten cargar de
forma asíncrona de acuerdo al contenido que el usuario visualiza en ese momento.
Existen formas de cargar también de forma asíncrona el JavaScript y el CSS primero, esto
va a permitir que se cargue toda la estructura de la página, la tecnología AMP de
Google están ayudando a acelerar el tiempo de carga de las páginas web en dispositivos
móviles.
2. Bye a los estándares. Bienvenidos diseños
modulares.
La tendencia, se busca
cierta aleatoriedad visual, la colocación
de contenedores de información de
una manera alejada de los estándares
tradicionales como, por ejemplo, la
distribución de contenido en Pinterest.
Este tipo de acción hace que despierte
el interés de los usuarios.

2. Juan Manuel Fernández Cuesta
https://www.linkedin.com/in/juanmafcuesta
Frontend Developer
3. Paleta de colores brillantes
La utilización de degradados en el diseño de páginas web es una gran idea porque da
mogollón de exclusividad y frescura a nuestros trabajos. Pero debemos ser cautos
porque los degradados son unos elementos muy complejos que requieren un nivel
avanzado en diseño gráfico además de una gran experiencia.
Ejemplo: https://material.io/
4. Diseños orgánicos, oblicuos y patrones geométricos
Todo lo que sea formas redondeadas y curvas orgánicas serán muy populares en las
tendencias de 2019. Con este tipo de formas captarás aún más la atención del usuario y
dirigirlo a las áreas más importantes de tu página web.
Elegantes composiciones de diseño que proporcionarán una sensación de continuidad
y, si las combinas con fotografías, vídeos o ilustraciones hará las delicias de cualquier
visitante. Esta landing page de la empresa Sugar es un claro ejemplo:

3. Juan Manuel Fernández Cuesta
https://www.linkedin.com/in/juanmafcuesta
Frontend Developer
5. Multimedia.
Hoy en día con el WebM, los vídeos ocupan poco espacio por lo que ya es común ver
páginas con un vídeo de fondo, esto le permite al sitio web mostrar un diseño mas
cinematográfico.
Recordemos que en un inicio la web estaba dominada por los JPG para las imágenes
estáticas y GIFs para las animaciones, posteriormente apareció el PNG para añadir
transparencia a nuestros Desarrollos Web.
En el año 2010 Google popularizo el WebM, de modo que los vídeos ocupan tan poco
espacio, y no afectan la carga del sitio web.
Ejemplo: http://www.apart-collective.com/home
6. Interacciones.
Las interacciones nos permiten considerar como responde nuestro diseño web ante las
acciones de nuestros usuarios, como cuando hace click en algún botón o cuando ingresa
una contraseña incorrecta. Es muy frecuente por ejemplo encontrar animaciones en las
transiciones de las pantallas, en lo botones, sobre todo en los botones de llamadas a la
acción, estos son los botones en donde queremos atraer la atención del usuario y que
esté pueda registrarse o suscribirse a nuestro sitio web.
7. Tipografías hechas a mano: Tipografías handmade.
Otro tipo de elemento que me gusta y que está muy de moda son las tipografías hechas
a mano o llamadas también tipografías handmade.
Aunque son tipografías que se vinculan a sectores muy concretos, otorgan
una personalidad exclusiva, siendo muy positivo diferenciarse gracias a la utilización de
estas.
Descargar gratis tipografías: https://www.fontspace.com/category/handmade
Crear tipografía propia: https://www.calligraphr.com/es/?rtom=myscriptfont

4. Juan Manuel Fernández Cuesta
https://www.linkedin.com/in/juanmafcuesta
Frontend Developer
8. Bye Menú hamburguesa. Bienvenidas pestañas
El menú hamburguesa se convirtió en uno de los más utilizados, pero los expertos en
usabilidad indican que entorpece el diseño web, ellos recomiendan que es mejor utilizar
el diseño con pestañas para nuestro diseño web.
¿Cuáles son las ventajas y desventajas?
A lo largo de este 2017 veremos cómo es reemplazado por barras de pestañas, menús y
otras formas alternativas de navegación.

5. Juan Manuel Fernández Cuesta
https://www.linkedin.com/in/juanmafcuesta
Frontend Developer
9. Bye Homepage. Bienvenida LandingPage
Convertir visitantes en clientes es la tendencia actual y futura, es por ello que la gran
mayoría de empresas hoy en día están convirtiendo el famoso HomePage o página de
inicio en LandingPage, que son páginas para captar prospectos de clientes.
Se puede apreciar que las HomePage son páginas muy sobrecargadas, que mostraban
todo el contenido del sitio a veces en una sola página, está tendencia está cambiando.
Ejemplo: https://www.franshalsmuseum.nl/nl/
10. Cinemagrafías: un excelente reemplazo para los
gifs animados
Existen grandes diferencias entre la cinematografía y la animación gif habitual.
Las cinemagrafías son vídeos o archivos GIF de alta calidad que se reproducen de una
manera continua y automática cada vez que el usuario visita una página web.
Los gifs animados son elementos del diseño web que atrae la atención del usuario y lo
alientan a que se familiarice con el resto del sitio web.
Ejemplo 1: https://www.maldon.es/wp-
content/uploads/2016/01/Waving_reeds_cinemagraph.gif
Ejemplo 2: https://2.bp.blogspot.com/-
eb7cOILHCLA/WgMnW8tjnRI/AAAAAAAAPK8/LgpGxMiPI_kLZ7YCBAxLYKx-
SpI23c7bACLcBGAs/s640/Cinemagraf%2B2.gif
Ejemplo 3: https://1.bp.blogspot.com/-sPqz4r2i-
3c/WgMnWxcnI9I/AAAAAAAAPK0/v800H4PSw9Ac8PfMAkzf9Ob2xa4SexDVwCLcBGAs/s
640/Cinemagraf.gif

6. Juan Manuel Fernández Cuesta
https://www.linkedin.com/in/juanmafcuesta
Frontend Developer
11. Notificaciones en tiempo real
Esto antes solo se adoptaba en tecnologías de chat, pero ya no es así. Incluso los paneles
de datos de facturación necesitan actualizarse en tiempo real.
Hay más exigencias en este sentido dado que la mayoría de las aplicaciones en 2017
soportan puntos de acceso múltiples, y los demás usuarios necesitan saber cuál es el
estado actual de la información antes de tomar decisiones.
Las notificaciones en tiempo real quizás no sean un requisito en todos los casos, pero sí
en la mayoría.
12. Fondo blanco
Se fijaron en algo que tienen en común los sitios web más visitados hoy en día, pues
que tienen el fondo blanco, Facebook, LinkedInd, Twitter, Google, etc., nos dan un
ejemplo de que el fondo blanco es tendencia y lo seguirá siendo.
Hay que aceptar que el blanco es un color luminoso, y es por ello que es el preferido de
los diseñadores web para dirigir el contenido del sitio para sus usuarios.
Ejemplo Airbnb:

7. Juan Manuel Fernández Cuesta
https://www.linkedin.com/in/juanmafcuesta
Frontend Developer
12+1. Diseño web responsive
La filosofía responsive es programar una sola web que se adapte a todos los tamaños de
pantalla, pero se consigue menor calidad al no adaptarse a la experiencia nativa de cada
dispositivo. La tendencia actual es el diseño web adaptativo, que consiste en servir una
versión distinta a cada tipo de dispositivo. El tiempo del diseño responsive, que
consistía en crear una especie de página web que se adaptaba al formato móvil ahora
es totalmente pasado para dejar sitio a un nuevo modo de navegación: pensar
directamente apps para extenderse sobre las pantallas más grandes.