El desarrollo de Internet hasta convertirse en el colosal aparato informativo que es hoy en día puede rastrearse en las tendencias de diseño que han modificado el rostro de la World Wide Web a lo largo de los años. Por encima de todas ellas, la revolución móvil empujó a los diseñadores a cambiar de mentalidad y hoy su trabajo consiste en presentar un Internet que se ajuste a las pantallas más pequeñas sin dejar fuera información importante. Pero a un nivel más específico de diseño, también puede observarse cómo constantemente nacen tendencias nuevas que determinarán el Internet del futuro. A continuación, presentamos 8 de estas novedades para que el diseño web más moderno no te pille por sorpresa en 2019.
En la actualidad pueden observarse algunos cambios que nacen del ajuste móvil de los últimos años. Las páginas web han de ser hoy más eficientes e intuitivas aún para poder sobrevivir en un mercado online con una enorme competencia, ya sea en el PC de escritorio, la tablet o el teléfono móvil. El sobrecargado diseño de la década de los 1990 ya es historia: la nueva máxima es la concentración en lo esencial.
Hoy es necesario que las páginas sean fáciles de usar. En esta tendencia a la usabilidad, un elemento decisivo es el diseño responsivo, que prioriza la flexibilidad técnica basada en el dispositivo del usuario. Así, el diseño web moderno permite que una página web sea capaz de “responder” al dispositivo con el que se conecta el usuario y se presente correctamente. El diseño web responsivo se programa de tal manera que reaccione con soltura a sistemas desconocidos o poco habituales. Los diseñadores web ya no desarrollan solo para los navegadores y muchos de los operadores más conocidos permiten un uso móvil más liviano con sus propias apps.
Tampoco nos abandonarán algunos de los neologismos que se han colado en nuestro vocabulario en 2018. Por un lado, tenemos el Internet of things (Internet de las cosas, IoT), que define la creciente digitalización de la vida cotidiana y tiene la intención de proporcionar al usuario aún más posibilidades de interacción. Por el otro, los notorios avances en la investigación de la inteligencia artificial (Artificial Intelligence, AI) conllevan la mejora constante de los servicios web automatizados. Y no menos importante es la creciente atención al snackable content, que promueve una oferta online accesible con la usabilidad como prioridad, pese a que estos “bocaditos” de contenido representen un cierto retroceso al gusto por lo chillón de los años 1990. Si ambas tendencias (usability y snackable content) permanecen activas y se consolidan otras ideas nuevas, 2019 promete ser un año interesante para el diseño web.
Las modas en diseño web no existen en el vacío, sino que, además de amigas, también tienen contrincantes que utilizan un determinado elemento de diseño en un sentido diferente o incluso opuesto. A veces nacen tendencias que reaccionan a otras tendencias cuando estas ya se han utilizado demasiado. Con frecuencia los diseñadores web apuestan por una de estas modas con el propósito de adelantarse al futuro. En la siguiente tabla hemos resumido algunas de las tendencias y reacciones que nos acompañarán en 2019.
Tendencia | Reacción |
Imágenes de stock, fotografías profesionales que se compran a agencias y que pueden integrarse en cualquier tipo de web; una forma segura de dar buen aspecto a una página. | Imágenes propias y auténticas que transmiten cercanía y presentan a las personas o las empresas como son realmente para dirigirse a los usuarios que las visitan de la forma más personal. |
Formas simétricas, en cajas, flat grid, p. ej., páginas con un estricto diseño en cuadrícula en el que es muy fácil navegar; estas páginas se orientan por la conocida y probada naturaleza “cuadrada” de HTML y CSS. | Formas asimétricas, diseño experimental, broken grid, es decir, interfaces innovadoras que rompen con las convenciones habituales y destacan por su originalidad. |
Diseño en una página (one page) que presenta toda la información importante en una sola página, ahorrando clics a un usuario cada vez más móvil. Para las empresas del ámbito digital, algunos diseños se han consolidado como estándar. | Tendencias nostálgicas (brutalismo web, minimalismo) o afición por barras de menú y botones innovadores desde el punto de vista técnico que siguen siendo necesarios para la navegación pero no obstaculizan el uso móvil (menús hamburguesa, microinteracciones). |
Diseño colorido, contrastes fuertes y transiciones que otorgan un cierto aire a una página, a lo que se añade un simbolismo cromático utilizado conscientemente (asociaciones como azul para productos digitales, verde para empresas benéficas, rosa para la cosmética, etc.) para influir en el usuario a nivel del inconsciente. | Minimalismo cromático y mucho espacio en blanco para distraer lo menos posible de lo importante. Las páginas en dos colores (duotone) apuestan por la usabilidad y prescinden de diseños complejos con muchos colores. En estos casos se acostumbra a desviar la atención hacia marcas y símbolos. |
A grandes rasgos, el diseño web continúa la dinámica de los últimos años: una creciente focalización en los terminales móviles (diseño web responsivo), el contenido fácil de consumir y las interfaces interactivas que responden a un propósito explícito. Al mismo tiempo, y a medida que el acceso a las nuevas tecnologías va haciéndose más fácil, las innovaciones en el campo de la inteligencia artificial tienen cada vez más influencia en los diseñadores web. En definitiva, 2019 prolonga las tendencias de los años anteriores, de modo que, en lo más esencial, el paisaje no se modifica. Con todo, algunas tendencias apuntan a otra mejora de la experiencia de usuario en las plataformas que ya hoy pretenden diseñar el Internet del mañana. Lee a continuación nuestra selección de tendencias en diseño web para el año 2019.
Más que una tendencia, se trata de un principio fundamental de las páginas bien diseñadas: la velocidad crece en importancia. Esto se debe en parte a la revolución móvil porque, al fin y al cabo, cualquier administrador web aspira a que su página sea fácilmente accesible desde terminales móviles. Cuanto más rápido se cargan las páginas, mejor experiencia tienen los usuarios. Además puede observarse hoy que los diseñadores web van prescindiendo de elementos pesados para que sus páginas sean más ágiles, si bien esto ya era así hace diez años.
Muchas otras tendencias en diseño web parten de aquí. Así, el cada vez más popular minimalismo evita los archivos multimedia más pesados a favor de formatos menos exigentes en cuanto a almacenamiento. El éxito de las páginas long scrolling, que presentan la información en una única página que puede deslizarse con el dedo, se debe a que el usuario solo ha de cargar una página, y no varias subpáginas. En la misma línea, el concepto de white space, que también ve aumentada su popularidad, implica la ausencia de elementos superfluos que podrían ralentizar la velocidad de carga de la página.
En su relativamente corta vida, Internet ha visto aumentar su velocidad de forma progresiva, si bien hay voces que admiten que aún no ha alcanzado la velocidad que debería tener (las redes de datos móviles no son suficientemente potentes en muchas regiones). Pero los diseñadores web ya pueden poner remedio a estas carencias simplificando el diseño de sus proyectos.
Algunas de las tendencias más modernas del diseño web, como las animaciones interactivas, el parallax scrolling o los fondos dinámicos, llaman la atención y mejoran, bien aplicadas, la asimilación de la información, aunque con frecuencia repercuten en negativo sobre la performance de la web. Por eso, los diseñadores se ven en la necesidad de sopesar qué efectos ofrecen un valor añadido y qué elementos ralentizan la página gratuitamente. A rasgos generales, la máxima estética del “menos es más” sigue vigente, sin retroceder necesariamente al diseño plano.
Conviene no olvidar que el rendimiento de una página web tiene un efecto directo en la experiencia del usuario. Aquí es necesario diferenciar entre el tiempo de carga tal como se percibe y tal como es en la realidad. Los retrasos se convierten en problemáticos cuando el usuario los percibe como tales. Para evitarlo, los diseñadores recurren a las siguientes medidas:
Si el usuario ha de esperar, entonces debería al menos saber durante cuánto tiempo. La barra de progreso no acorta el tiempo en que se carga la página, pero si está diseñada de una forma atractiva, puede hacer la espera menos aburrida. El objetivo es evitar que el usuario abandone la página cuando se vea obligado a esperar a que se cargue. Es sabido que el margen de tolerancia del internauta moderno ha ido reduciéndose progresivamente a medida que las conexiones mejoraban.
Una barra de progreso puede representarse de una forma simple como en la imagen (fuente: http://www.cssflow.com/snippets/animated-progress-bar/demo).
Las páginas deberían programarse de tal forma que el contenido above the fold, el que se muestra al usuario a primera vista sin necesidad de hacer scroll, se cargue en primer lugar. Si se le muestra este contenido, al usuario no le importa demasiado que el contenido below the fold se cargue más tarde.
Las imágenes que se integran como progressive JPEG no se cargan de arriba abajo como las imágenes baseline, sino que, utilizando el llamado escaneado entrelazado, lo primero que se muestra al usuario es una vista previa en menor calidad que va detallándose poco a poco hasta que se cargan todos los datos de la imagen completa.
Si quieres conocer otros trucos con los que mejorar el rendimiento de tu página, no te pierdas nuestro manual informativo sobre la optimización de páginas web.
En definitiva, lo mismo que vale para los textos, vale también para el contenido visual: ha de ser único, de gran calidad y relevante para el usuario. Asimismo, conviene que se cargue solo cuando el usuario lo abra. Son sobre todo los usuarios de terminales móviles o de conexiones débiles los que más beneficio obtienen de los sitios bien estructurados sin carga superflua de datos.
Un breve recorrido por la Web basta para reconocer fotos de stock por doquier. Para la mayor parte de propietarios de sitios web, la opción más fácil durante los últimos años ha sido la de recurrir a las imágenes de las bases de datos de fotógrafos profesionales (relativamente más económicas), en lugar de utilizar fotografías propias, poniendo así en juego la originalidad. En estos casos, las fotos se limitan a una función de pausa visual intercaladas en los textos.
Pero es su uso masivo el que constituye una desventaja mayor. Es muy probable que los usuarios se topen con las mismas fotos en varias páginas diferentes, siendo así los sitios que utilizan material gráfico único y original los que más fácil lo tienen para diferenciarse de la competencia. Esto hace que una tendencia para el diseño web en 2019 fundamental sea la utilización de imágenes, gráficos y vídeos de fondo dinámicos.
Estos elementos ofrecen a los administradores la oportunidad de comunicar de una forma más directa que con texto, y es que los elementos audiovisuales se dirigen al nivel emocional del usuario. Los fondos dinámicos se aplican a menudo con la intención de despertar sentimientos y poner al usuario en el ánimo adecuado.
Las microinteracciones son una novedad en el diseño UX (user experience), con la que algunas interacciones del usuario en la página se acompañan de pequeños efectos de animación. Puede tratarse de un botón “like” que recompensa al usuario con un movimiento o una vibración del smartphone cuando hace clic en él. Para expertos en UX como Dan Saffer, son estos detalles los que conforman la experiencia del usuario.
En Awwwards.com o Dribbble los administradores web encuentran buenos ejemplos de animaciones para realizar microinteracciones.
El Mobile First no afecta solamente al tamaño de las pantallas y a la presentación íntegra del contenido web en diferentes terminales, sino que en el futuro verá aumentar su influencia cada vez más en el contenido en sí. Una de las novedades más significativas en este sentido es el paso del clic al scrolling, ciertamente ninguna novedad, pero que trae consigo conceptos de diseño como el infinite scrolling o el efecto parallax, que siguen cosechando adeptos, de modo que también dará que hablar en 2019.
El desplazamiento infinito permite al usuario descubrir contenido nuevo deslizándose por la página en lugar de haciendo clic. Cuando se alcanza el final de un fragmento, se carga el siguiente a continuación. Los blogs y las redes sociales, como Facebook, Instagram, Reddit o Quora utilizan este método para presentar al usuario el contenido en un hilo informativo continuo. También desempeñará un papel en el futuro.
El infinite scrolling es una técnica adecuada sobre todo para páginas con una oferta informativa muy amplia. Mientras que paginar un blog con cien o doscientas publicaciones no supone un gran problema, estructurar así un proyecto con un volumen de texto en constante crecimiento no tiene mucho sentido –es poco probable que un usuario quiera leer específicamente la página 812 de un total de 5 782 subpáginas. El scrolling infinito se implementa con elaborados algoritmos que filtran la oferta informativa y presentan al usuario los textos más relevantes en primer lugar.
Pero implementarlo supone también cuidar aspectos de SEO. Pese a que Google tuvo sus problemas iniciales con las páginas que lo aplicaban, hoy su utilización no acarrea ningún riesgo gracias a las recomendaciones que el propio buscador ofrece a los desarrolladores. En cualquier caso, no olvides estos cuatro factores:
Como ejemplo de una aplicación de infinite scrolling respetuosa con el buscador, Google remite a la demostración del analista de tendencias en diseño web John Mueller.
El parallax scrolling tampoco es la última tendencia en diseño web, pero va a continuar estando en boga. El efecto de paralaje viene utilizándose en las páginas más modernas desde hace algunos años, proporcionando un efecto de profundidad al hacer que las distintas capas que la conforman se muevan a diferente velocidad. En las mejores implementaciones, este efecto se acompaña de elementos que motivan al usuario a emprender alguna acción. Esto hace que haga tan buena pareja con el storytelling interactivo. La página Every Last Drop es un buen ejemplo para entender bien este efecto.
La presentación del contenido en función del target se integra en los principios fundamentales del diseño web moderno. Con la vista puesta sobre todo en el eCommerce, tanto el contenido que se selecciona como la forma de presentarlo visualmente debería ajustarse a la idiosincrasia de su público objetivo. Si antes se pensaba en grupos abstractos de personas, en 2019 la experiencia individual del usuario copará la atención.
Hoy en día la función “Esto también podría gustarle” no puede faltar en ninguna tienda online, pero ya hay proveedores como Spotify o Netflix que van un paso más allá diseñando la oferta informativa, los productos y las formas de presentación de acuerdo al individuo, de tal modo que difícilmente dos usuarios verán la misma selección de contenido individual, incluso ya en la página de inicio.
En la página de inicio que aparece tras ingresar en la plataforma, el proveedor de música a demanda Spotify basa sus propuestas en lo que el usuario ha escuchado recientemente.
Una tendencia en diseño web en 2019 será la página web personalizada en la cual el usuario obtiene el contenido que se ajusta a sus hábitos. Para determinar los datos sobre los que basar la interfaz de usuario personalizada, se utilizan herramientas de análisis web como Google Analytics o Piwik, que entregan a los proveedores de contenido una imagen muy certera de cómo interactúan los internautas con el contenido web.
Las pequeñas animaciones que se ejecutan en bucle experimentan, sobre todo desde 2018, un renacimiento inesperado, aguantando el tipo frente a formatos mucho más competentes como WebM. Presentes especialmente en las plataformas de comunicación, sus ventajas saltan a la vista: los archivos GIF son relativamente pequeños y se ejecutan de forma automatizada, de tal forma que no obstaculizan la experiencia del usuario. En contraposición a los vídeos WebM y otros formatos de imagen en movimiento, los GIF se entrometen menos al prescindir del sonido.
Gran parte de este éxito se debe a bibliotecas de GIF como Giphy, con cuya ayuda pueden integrarse en cualquier página. Estas bibliotecas ofrecen una selección de tal envergadura que es difícil no encontrar el GIF adecuado a cada ocasión. No es de extrañar que florezca en ellos la cultura del meme. En 2019 la comunicación digital seguirá estando marcada no tanto por los textos y los emojis como por los versátiles GIF.
Los programas que ejecuten tareas de comunicación no son ninguna novedad. Los chatbots han salido del campo de la investigación de la inteligencia artificial para integrarse ya a día de hoy en páginas corporativas o tiendas online. Generalmente se trata de una pequeña ventana emergente que lee las consultas de los usuarios y genera respuestas automáticas que pueden personalizarse empleando algoritmos de aprendizaje automático. Así, es posible dar la impresión al usuario de que se trata de un empleado de carne y hueso el que le está ofreciendo soporte. Suelen implementarse como asistentes en la venta virtual o como alternativa a las clásicas FAQ (preguntas habituales).
En g2crowd.com, en el borde inferior de la pantalla se activa un chatbot que ayuda al internauta a encontrar el contenido que busca (fuente: https://www.g2crowd.com/).
Los chatbots no acostumbran a ser intrusivos, sino que normalmente se activan por un elemento interactivo para dar la impresión de que es un empleado de la compañía el que ha escrito. Suelen tener la posibilidad de responder a las consultas sin abandonar la página web. Desde el éxito de Siri, Alexa y Cortana, parece que la desconfianza hacia los interlocutores basados en IA ha disminuido un poco. Pese a todo, aún hoy no pasan en la gran mayoría de la función de barra de búsqueda que, eso sí, reacciona de una forma más dinámica. Habrá que estar atentos a la evolución de los chatbots en 2019.
Es fácil observar en las tendencias en diseño web que no suele pasar mucho tiempo antes de que un diseño inteligente encuentre imitadores. Las interfaces de usuario de muchas páginas y web apps se orientan cada vez más en su diseño y composición del contenido a las prácticas que se han comprobado eficaces. Aquí, la usabilidad influye siempre en el diseño.
Es difícil equivocarse con una interfaz de usuario ordenada y clara. Del mismo modo que también cabe estar tranquilo si se confía en el consolidado formato de portal para páginas con mucho contenido o en el estilo de diseño típico de los blogs para páginas más pequeñas. Pese a todo, hay dos tendencias recientes en diseño web con las que también nos toparemos a menudo en 2019.
Este fenómeno se ha consolidado con tal velocidad que para muchos internautas este símbolo es sinónimo de menú. El pequeño icono de tres líneas, también llamado icono de menú hamburguesa (hamburger button), se utilizó al principio para menús desplegables de páginas móviles y aplicaciones. Hoy ya ha saltado a las versiones de escritorio, donde se encuentra a menudo como icono de menú. El símbolo recuerda a los tres niveles de una hamburguesa y se representa a menudo con el símbolo matemático ≡ (que significa idéntico).
La segunda tendencia en alza en diseño de interfaces de usuario guarda relación con la presentación visual del contenido: el card layout, también llamado card-based layout, cada vez se emplea más y consiste en presentar los textos, las imágenes o las llamadas a la acción en varias cajas o tarjetas que se reparten por toda la superficie de la interfaz. Esta forma de composición ofrece muchas ventajas y no se quedan en las muchas posibilidades que ofrece un diseño claro y visualmente atractivo. El diseño en tarjetas también es ventajoso desde un punto de vista mucho más pragmático y es que, al actuar como contenedores de contenido, las tarjetas pueden desplazarse libremente por la cuadrícula de la página. Esta forma de distribuir el contenido funciona especialmente bien en un diseño responsivo. Este formato de diseño se hizo popular por servicios web como Pinterest o plataformas de diseño web como Dribbble.
Card layout en el perfil de 1&1 IONOS en Pinterest (fuente: https://de.pinterest.com/1and1com/we-love-the-internet/)
Las tendencias en diseño web para 2019 tienen en común la interactividad. En el futuro también se espera que las páginas sean aún más fáciles de usar y se abran con rapidez, diseñando el contenido web no en función del terminal, sino optimizado para una implementación multidispositivo según el diseño responsivo.
El parallax scrolling y el infinite scrolling son dos técnicas estilísticas muy bien valoradas para acompañar al usuario por la página. Esta es también la clave del storytelling interactivo: la información no se presenta sin más al cliente sino mediante una pequeña historia. Si se utilizan ilustraciones dibujadas a mano, elementos de fondo de gran calidad estética y una caligrafía individual la página obtiene un toque personal adicional. Hoy es más importante que nunca dirigirse al usuario de una forma personal y seducirlo emocionalmente en base a un principio básico que no pierde vigencia: una página web diseñada para el usuario con un contenido de diseño atractivo constituye el primer paso para lograr el éxito en la red.
¿Estás poniendo en marcha tu proyecto o sopesas actualizar tu página? Déjate entonces inspirar por algunas de las tendencias en diseño web para 2019 y prepara a tu web hoy para las exigencias de mañana.
Hasta hace unos años, la tipografía era un tema poco interesante para los diseñadores web. Sin embargo, el panorama ha cambiado gracias a los avances tecnológicos de los últimos años. Ahora es posible valerse de tipografías modernas para destacar aspectos relevantes de una página web, así como para generar un impacto determinado en sus usuarios. Además, ya no es obligatorio instalar la fuente...
Las icon fonts permiten integrar pictogramas vectoriales en una página web. A diferencia de los tradicionales gráficos en mapa de bits, los iconos vectoriales tienen la ventaja de ser escalables sin perder su calidad. Además, la integración a través de CSS (Cascading Style Sheets) ofrece amplias y sencillas posibilidades de configuración dentro del mismo código fuente. Por otro lado, muchos...
La optimización móvil es para los diseñadores web un gran desafío, pero también les ofrece muchas oportunidades para conseguir una experiencia de usuario positiva. Si se lleva a cabo de forma incorrecta o insuficiente, la web móvil creada puede dar lugar a resultados totalmente contrarios a una buena experiencia de usuario. Para que una página web optimizada para móviles satisfaga las exigencias...
Para que las campañas de newsletters sigan siendo efectivas, es importante prestar atención a las tendencias de Email Marketing en 2019, destacando: opciones de automatización mayores, nuevas leyes de protección de datos y presencia creciente de la IA. En este artículo se tratan las tendencias de newsletters en 2019 junto a los aspectos que tener en cuenta al aplicar estrategias.
