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 11 de estas novedades para que el diseño web más moderno no te pille por sorpresa en 2021.
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 años 2000 ya es historia: la nueva máxima es la concentración en lo esencial.
En 2021 sigue siendo de importancia crucial que las páginas web 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 implantado en los últimos años. Por un lado, tenemos el Internet de las cosas (Internet of things, 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.
Entre las novedades más importantes se encuentran la integración de efectos 3D interactivos y de elementos de realidad aumentada (AR) y realidad virtual (VR). Ambas tecnologías, que representan un estímulo visual clave para los visitantes, hacen que los proyectos web sean más interactivos. No por ello se puede olvidar el principio “menos es más”. Otro aspecto que influirá de forma decisiva en el diseño web de 2021 es el incremento de la conciencia social y ecológica. El interés creciente de la sociedad y los medios de comunicación por asuntos como el cambio climático y la crisis del coronavirus muestra a las empresas que también deben tomarse en serio estos temas. En definitiva, todas estas tendencias influyen de forma inevitable en el diseño de las páginas 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 2021.
MyWebsite. Crea tendencia
Desarrolla páginas web increíbles con secciones predefinidas, tipografía actual y paletas de colores escogidas por diseñadores expertos.
Sin saber códigoSecciones smartTipografía actual| 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 mayor focalización en los terminales móviles, 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, 2021 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 2021.
Hasta la fecha, las figuras y gráficos tridimensionales no han desempeñado un papel importante en lo que al diseño web respecta. Quienes han querido acompañar su proyecto web con elementos 3D han usado principalmente vídeos. Sin embargo, una nueva tendencia de diseño web está a punto de sustituir los elementos estáticos por contenido en tres dimensiones.
Cada vez con más frecuencia, los usuarios se encuentran en las páginas web con elementos 3D que se mueven al clicar con el ratón sobre ellos o, en las pantallas táctiles, al seleccionarlos con el dedo. Para el comercio electrónico este tipo de objeto interactivo muestra un gran potencial, pues los clientes interesados en un producto pueden verlo desde todos los ángulos posibles y así hacerse una idea más concreta de la apariencia real del objeto. Con los elementos 3D interactivos el proceso de compra online se asemeja al de los comercios locales, donde los clientes pueden inspeccionar los productos a su gusto.
En esta tendencia en diseño web, la tridimensionalidad también desempeña un papel importante. Con el neomorfismo (también nuevo eskeumorfismo) se aporta realismo a los diseños de páginas web, algunos muy abstractos. Especialmente en los diseños más planos y basados en tarjetas, este moderno enfoque puede aportar movimiento a la página web. Para ello, los componentes de la interfaz de usuario de una web se pueden presentar en 3D mediante un diseño con CSS en el que se use sombras y luces. Como resultado, cada uno de estos elementos parece sobresalir de la pantalla hasta que el usuario clica sobre ellos (acción que se percibe visualmente).
Los programas de gráficos clásicos, como Adobe Illustrator, son los mejores para implementar este tipo de efecto en 3D. Como alternativa, puedes encontrar gran cantidad de opciones online, tales como Neumorphism.io, que te ayudan a implementar esta tendencia en diseño web del 2021.
Dado que el sombreado es la base del neomorfismo, esta tendencia de diseño web puede usarse con aplicaciones web en modo oscuro. Por ello, es conveniente que pienses cuál de las dos tendencias puede ser más beneficiosa para tu proyecto.
Aunque el formato de imagen SVG no sea nuevo, cuenta con ventajas cada vez más atractivas: garantiza un tamaño de archivo pequeño, se puede escalar con flexibilidad y puede formatearse con CSS, motivo que lo convierte en una tendencia de diseño web en 2021. Dado que SVG es básicamente un formato de archivo XML, el código fuente (y por lo tanto el propio gráfico) puede modificarse directamente con CSS. Esta combinación permite a los diseñadores web incorporar gráficos en la página web que se adapten a la pantalla utilizada o que incluso los usuarios puedan modificar. Como alternativa también puedes encontrar en la Web varios gráficos vectoriales (tanto gratuitos como de pago) para usar directamente o puedes, si así lo prefieres, crearlos tú mismo.
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 teléfono 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.
Los temas sociales y ecológicos han ido ganando importancia en los últimos años. Cada vez con más frecuencia este hecho sirve a las empresas para tener un contacto más directo con sus clientes y conectar con ellos a un nivel más profundo. La pandemia del coronavirus, además, ha demostrado la importancia y la necesidad de tener una participación activa en la World Wide Web, ya sea a través de las redes sociales o en la propia página web.
Los esfuerzos para fomentar un desarrollo sostenible o el compromiso social son temas que tienen en la actualidad una influencia mucho mayor en el diseño de la web que hace unos años. Las imágenes, vídeos, fotos o simulaciones situadas en lugares destacados están en tendencia cuando se usan para mostrar la participación de la empresa en una determinada causa.
El paradigma 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 2021.
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 en blogs se aplica el scroll infinito desde hace tiempo, y seguirá estando de actualidad 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 5782 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 2021 la experiencia individual del usuario captará toda la atención.
Para proteger tu privacidad, el vídeo se cargará tras hacer clic.
Una tendencia en diseño web en 2021 será la página web personalizada en la cual el usuario obtendría 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 Matomo, que entregan a los proveedores de contenido una imagen muy certera de cómo interactúan los internautas con el contenido web.
¿Utilizas WordPress en tu proyecto web? Con WordPress Hosting de IONOS obtienes, junto al conocido CMS, el alojamiento, la certificación SSL/TLS y hasta tu propio dominio.
La mayoría de los usuarios conocen ya la realidad virtual (RV) en el sector del entretenimiento. Sobre todo, la industria de videojuegos está apostando por esta tecnología, invirtiendo en el desarrollo de gafas de realidad virtual y de los juegos correspondientes. No obstante, en los últimos tiempos han ido también saliendo al mercado aplicaciones en el sector de los smartphones en las que la realidad aumentada (AR) no solo se aplica como concepto lúdico, sino que se utiliza para objetivos prácticos. Así , por ejemplo, se fusiona el entorno real con información digital del dispositivo para planificar el diseño interior de un apartamento o para que el usuario pueda probarse la ropa de forma virtual. Ahora, la World Wide Web también está dando este paso. Con WebXR, W3C ha creado una interfaz que sustituye a la actual tecnología WebVR y permite que los navegadores muestren contenidos con VR y AR.
Para proteger tu privacidad, el vídeo se cargará tras hacer clic.
Con las gafas de RV es posible visitar un sitio web en tres dimensiones. Como si de un espacio físico se tratara, el usuario puede navegar entre las opciones de menú y el contenido. Para el comercio electrónico, esta tecnología presenta un gran atractivo, pues las tiendas online, por ejemplo, pueden imitar la experiencia de la tienda física. Si tienes las gafas adecuadas, puedes probar el funcionamiento de WebXR en la siguiente página de prueba de Mozilla.
Los programas que ejecutan 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).
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 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 2021.
Para proteger tu privacidad, el vídeo se cargará tras hacer clic.
El dark mode no solo es una tendencia en el diseño la web, se aplica sobre todo en el sector software. Cada vez más usuarios consideran importante utilizar una alternativa a las pantallas con luz radiante, especialmente molestas en los espacios poco iluminados. Por ejemplo, el sistema operativo Windows ofrece el modo oscuro a sus usuarios. El buscador Google Chrome tampoco se queda atrás, pues permite activar el dark mode para la pantalla. Mientras que en muchos programas y aplicaciones se puede cambiar al modo de pantalla oscuro sin problemas, la mayoría de los sitios weblas páginas web siguen optando por el color blanco. Sin embargo, esto no es necesario.
Con CSS y JavaScript es posible ofrecer esta opción a los usuarios. Cada visitante puede decidir, según prefiera, si quiere aplicar el modo oscuro o el claro en las páginas web. Para ello, la página de inicio puede contar con un botón donde se pueda configurar. Si bien existe otra opción más eficiente; con la orden “prefers-color-scheme” de CSS, las páginas web reaccionan a la configuración del navegador. Si el usuario ha activado el modo oscuro en Firefox, Safari, Chrome o Edge, el sitio web también se muestra automáticamente de esta forma. Para ello se requiere un segundo esquema de color que se almacene en el código fuente, un esfuerzo extra que se ve recompensado por una mayor satisfacción de los usuarios.
Para proteger tu privacidad, el vídeo se cargará tras hacer clic.
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, si bien esto ya era así hace 10 años. Además, puede observarse hoy que en 2021 los diseñadores web vancontinúan prescindiendo de elementos pesados para que sus páginas sean más ágiles, si bien esto ya era así hace diez años.y trabajan de forma intensiva con lazy loading para aumentar la agilidad de sus páginas web.
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.
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.
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, ael usuario no le importa demasiadono dará demasiada importancia a que el contenido below the fold se cargue más tarde.
Las imágenes que se integran como JPEG progresivo 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.
Las aplicaciones web se han convertido en un elemento esencial de la experiencia de navegación. Si bien con JavaScript se mejora la experiencia de los usuarios porque les permite interactuar con el sitio web, muchas aplicaciones pueden ver una reducción de su rendimiento. Con WebAssembly (Wasm), se creó no hace mucho un lenguaje que, gracias a la precompilación, se ejecuta rápidamente en el navegador. Si bien el estándar no está todavía tan extendido, los navegadores modernos soportan esta tecnología.
Para proteger tu privacidad, el vídeo se cargará tras hacer clic.
Las tendencias en diseño web para 2021 combinan la usabilidad y la interfaz de usuario estilizada con los elementos ópticos interactivos. Los objetos 3D de visualización y los elementos de control en tres dimensiones aportan nueva vida a un entorno online en ocasiones muy abstracto. Garantizar un acceso rápido y una presentación óptima en cualquier tipo de dispositivo tampoco debe desaparecer de la lista de prioridades de los webmasters este año.
Las nuevas técnicas de diseño web ofrecen nuevas posibilidades para aumentar el tiempo de permanencia de los usuarios, sin que afecte al rendimiento de las páginas. Por todo ello, es muy importante tener en cuenta que, aunque las tendencias cambien o surjan nuevas tecnologías, siempre hay que mantener al usuario en el centro. Es por eso que la web siempre ha de adaptarse al público objetivo y al contenido ofrecido.
¿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 2021 y prepara a tu web hoy para las exigencias de mañana.
Con MyWebsite de IONOS Now de IONOS y su moderno sistema modulareditor de páginas web con secciones inteligentes, puedes aplicar muchas de las tendencias de diseño web para obtener un éxito mayor en la World Wide Web.
Con el término web safe fonts se hace referencia a la tipografía que se puede usar en Internet sin problemas. La clave es plantearse el número de navegadores en los que se puede visualizar la webfont seleccionada. ¿Por qué no paran de crecer las web safe fonts? ¿A qué se debe la importancia de la tipografía web en el éxito de una página web corporativa?
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...
Para que las campañas de newsletters sigan siendo efectivas, es importante prestar atención a las tendencias de Email Marketing en 2021, entre las que se encuentran: mayores opciones de automatización, normativa de protección de datos y presencia creciente de la IA. En este artículo se tratan las tendencias de newsletters en 2021 junto a los aspectos que tener en cuenta al aplicar estrategias.
Los GIF son un recurso muy popular para promocionar publicaciones y noticias en las redes sociales. Sin las expresivas animaciones en el formato homónimo parece imposible imaginarse el mundo online y lo cierto es que APNG es un formato alternativo que en algunos aspectos supera incluso a GIF. ¿Cuál es el secreto de los PNG animados y cómo se crean animaciones en este formato?
Para darle vida a una idea de negocio, hay que priorizar las buenas ideas para crear una página web única. Pero ¿qué constituye una buena página web y dónde puedes encontrar ideas para tu web? Y ¿cómo aprovechar estas ideas para crear una web potente propensa a las ventas? A continuación, te damos consejos y ejemplos gráficos para crear tu web.
Ofrece un servicio fiable y de alto rendimiento a tus clientes con un pack hosting de IONOS.
