Internet se ha convertido en un aparato de información de gran tamaño evidente en las innovaciones de diseño que han cambiado la apariencia de la red mundial a lo largo de los años. Sobre todo, la revolución móvil ha obligado a los diseñadores web a repensar radicalmente su enfoque. Hoy, se supone que deben exhibir Internet en las pantallas más pequeñas sin retener información valiosa. Pero incluso en un nivel de diseño web más específico, surgen nuevas tendencias que ofrecen una idea de cómo será Internet del mañana. Presentamos nueve de estas tendencias para que pueda prepararse para el diseño web moderno en 2020.
¿Qué significa el diseño web en 2020?
En los últimos años, hemos visto un cambio en las prácticas de diseño web hacia un mayor énfasis en las adaptaciones móviles. Ahora se supone que los sitios web son aún más eficientes y fáciles de usar para mantenerse al día con el competitivo mercado en línea. Además, deben ser adecuados para todas las pantallas, ya sea una PC, una tableta o un teléfono inteligente. La nueva máxima se centra en lo esencial.
Los sitios web deben ser fáciles de usar, pero la «usabilidad» es tan importante en el diseño web moderno. El diseño web receptivo es una tendencia importante para el mercado móvil. Hace hincapié en la flexibilidad técnica al tiempo que tiene en cuenta el dispositivo del usuario. Por lo tanto, el diseño web moderno significa que un sitio web «reacciona» efectivamente al dispositivo del usuario y se presenta en consecuencia. El diseño web receptivo está diseñado conscientemente para que los sitios web puedan reaccionar bien a sistemas nuevos o desconocidos anteriormente. Los diseñadores web ya no desarrollan sitios solo para navegadores: muchos de los proveedores de sitios web más conocidos permiten un uso móvil más fácil a través de sus propias aplicaciones.
Algunas palabras de moda del diseño web nos siguen hasta 2020. En primer lugar, está Internet of Things, que ve una digitalización cada vez mayor de la vida cotidiana y quiere ofrecer a los usuarios aún más posibilidades de interacción.
En segundo lugar, ha habido avances significativos en la investigación de inteligencia artificial que han resultado en la mejora de los servicios web automatizados.
Por último, el creciente enfoque en el contenido snackable nos indica que los operadores web tienen como objetivo hacer que sus páginas webs sean lo más atractivas posibles y garantizar que la facilidad de uso sea una prioridad. Al mismo tiempo, estos «aperitivos» digitales muestran una tendencia que se remonta a la visión brillante y llamativa de la década de 2000.
Si estas dos tendencias, que se centran en la usabilidad y el contenido merienda, realmente funcionan juntas y otras innovaciones e ideas valientes se ponen de moda, 2020 debería ser un año emocionante para los diseñadores web.
Tendencias y contratendencias en diseño web
Las tendencias de diseño web no existen en el vacío; Han surgido contra-tendencias que tiran de ciertos elementos de diseño en una dirección diferente u opuesta. A veces, las contratendencias se desarrollan a partir de una reacción a ciertas tendencias a medida que se hacen más evidentes. Los diseñadores web a menudo confían en las contra-tendencias para destacarse como los diseñadores de Internet del futuro. Aquí hay algunos ejemplos de tendencias y contratendencias correspondientes que encontraremos en 2020.
-
Tendencia
-
- Imágenes de archivo: imágenes profesionales de agencias de valores que se pueden integrar en muchos sitios web diferentes, una forma segura de decorar su sitio web.
- Formas simétricas: formas de caja, cuadrículas planas, por ejemplo, páginas web horizontales y verticales que son muy fáciles de navegar. Estas páginas siguen la naturaleza probada y familiar «rectangular» de HTML y CSS.
- Diseños de una página: toda la información importante se presenta en una sola página y el usuario se ahorra tantos clics como sea posible; es mejor dejar que el usuario (cada vez más móvil) se desplace en lugar de hacer clic. Ciertos diseños estándar están ganando aceptación, especialmente para las empresas digitales.
- Diseño colorido: fuerte color complementario y gradientes de color que le dan al sitio un cierto toque; Además, existe un simbolismo de color o asociación de color utilizado deliberadamente (azul para productos digitales, verde para empresas de caridad, rosa para cosméticos, etc.) para «colorear previamente» la página de manera inconsciente para el usuario.
-
Tendencia contraria
-
- Imágenes individuales o auténticas: que irradian cercanía y muestran a las personas o empresas como realmente son para conectarse con los visitantes a un nivel más personal.
- Formas asimétricas: diseños experimentales, «cuadrícula rota», solo interfaces web de diseño innovador, que van en contra de las convenciones comunes y se destacan por el individualismo y la diversión.
- Tendencias de diseño nostálgico en la web: recupere los principios de las interfaces de Internet de la década de 2000 («brutalismo web» o minimalismo basado en texto) o barras y botones de menú de innovación técnica que todavía son necesarios para navegar por el sitio web, pero que no son demasiado voluminosos para uso móvil (menús de hamburguesas, micro interacciones).
- Minimalismo de color: y mucho espacio en blanco para distraer lo más posible de la información proporcionada. Los sitios web estrictamente bicolores («duotono») se centran en la facilidad de uso y renuncian a un diseño de color complejo. Por el contrario, a menudo se presta más atención a las marcas y los símbolos.
9 tendencias que influirán en el diseño web en 2020
El diseño web continúa evolucionando en la misma dirección que lo ha hecho durante los últimos años: un enfoque en dispositivos móviles con diseños web receptivos, contenido, interfaces orientadas a un propósito o interfaces de usuario reactivas e interactivas. Al mismo tiempo, los desarrollos en inteligencia artificial tienen un impacto creciente en los diseñadores web y las nuevas tecnologías son cada vez más accesibles. 2020 verá la continuación de varias tendencias de diseño web de años anteriores y el panorama de Internet no cambiará radicalmente. Sin embargo, algunas tendencias indican una mejora adicional en lo que respecta a la experiencia del usuario en las plataformas y ayudarán a dar forma a Internet del mañana de hoy.
Tendencia 1: la velocidad / rendimiento es cada vez más importante
Esto es menos una tendencia que un principio básico de un sitio web bien diseñado: la velocidad de carga de la página se está volviendo más importante impulsada por la revolución móvil. Después de todo, los operadores de páginas web quieren que sus páginas sean de fácil acceso y ahorrar espacio. Cuanto más rápido se cargue el sitio web, mejor será la experiencia del usuario. Sin embargo, los diseñadores web están renunciando cada vez más a elementos que consumen mucho tiempo y mucha memoria para permitir un uso más rápido de un sitio web.
Muchas otras tendencias en diseño web retoman desde aquí. Por ejemplo, hace un tiempo está de moda el minimalismo en el diseño de sitios web, esto conlleva que se eviten en gran medida los medios de memoria intensivos y se prefieren los formatos que no ocupan mucho almacenamiento. Sitios web de «desplazamiento largo», que colocan toda la información necesaria en una sola página desplazable, porque el usuario solo necesita cargar esta página.
Internet se ha vuelto significativamente más rápido dentro de un período de desarrollo relativamente corto. Pero todavía es criticado a menudo por no ser lo suficientemente rápido. Las redes de datos móviles, en particular, aún no son lo suficientemente potentes en muchas regiones. Sin embargo, los diseñadores web ya pueden contrarrestar deficiencias cómo estas diseñando sus sitios web de la manera más simple posible.
Otras tendencias del diseño web moderno, como por ejemplo las animaciones interactivas, los efectos o un fondo dinámico, parecen impresionantes y mejoran la entrada de información si sabemos cómo usarlas. Sin embargo, el diseño muy complejo de sitios web tiene un efecto negativo en el rendimiento de la página. Los diseñadores web deben, por lo tanto, considerar cuidadosamente qué contenido multimedia e interactivo ofrece un valor agregado para el usuario y que ralentiza innecesariamente el sitio web. La regla general es: menos es más.
Nota:
El rendimiento de un sitio web tiene un efecto directo en la experiencia del usuario Se debe hacer una distinción entre el tiempo de carga real y el percibido. Los retrasos solo son problemáticos si el usuario los percibe como tales. Los diseñadores web, por lo tanto, utilizan las siguientes medidas, entre otras, para interceptar tiempos de carga más largos:
Indicador de progreso
Si el visitante tiene que esperar, al menos debe saber por cuánto tiempo. La barra de progreso no acorta el tiempo de carga, pero puede hacerlo más entretenido si está diseñado de una manera interesante. El objetivo que debes tener es mantener al usuario en la página web, incluso si están obligados a esperar. Después de todo, hay que entender que los usuarios de Internet de hoy se están volviendo más impacientes cuando se trata de acceder a páginas web y por ello nosotros debemos adaptarnos.
Cargue los elementos clave primero
Las webs deben programarse de forma que el contenido «sobre el pliegue» se recupere primero y se muestre en el navegador. Estas son unas partes de la página que son visibles para el espectador sin que deban desplazarse hacia abajo. Mientras que este contenido esté libre, no le importa al usuario si el contenido complementario («debajo del pliegue») se carga después.
JPEG progresivos
Las imágenes incrustadas como archivos JPEG progresivos no se acumulan de arriba a abajo en la resolución final cuando se cargan. En su lugar, se utiliza el escaneo entrelazado: el visor primero se presenta con una imagen de vista previa de baja calidad, que se refina gradualmente hasta que los datos para la calidad de imagen deseada se han cargado por completo.
WebAssembly
Las aplicaciones web son una parte esencial de la experiencia de Internet y por una buena razón. JavaScript permite a los visitantes del sitio web interactuar con un sitio que mejora su experiencia. Pero muchas aplicaciones web todavía obstaculizan el rendimiento. WebAssembly (Wasm) es un lenguaje recientemente desarrollado que se ejecuta más rápidamente en un navegador porque está precompilado. Wasm aún no está muy extendido, pero los navegadores modernos ya pueden manejar la tecnología.
Tendencia 2: trucos CSS
CSS es ahora imprescindible al desarrollar sitios web. Casi todos los sitios web utilizan el lenguaje de hojas de estilo para adaptar el diseño. Afortunadamente, CSS continúa evolucionando, ofreciendo nuevas e innovadoras posibilidades para diseñar sitios web impresionantes. Los últimos desarrollos se han centrado en la flexibilidad de un sitio web. Eso es particularmente importante para los sitios móviles donde se espera que las imágenes y otros elementos multimedia tengan un tamaño y forma razonables.
CSS Grid y CSS Flexbox
Con el lanzamiento de CSS3, el lenguaje ahora incluye Grid y Flexbox. Ambos métodos permiten diseños que se adaptan automáticamente al tamaño de una pantalla. Los elementos se distribuyen y escalan mediante un sistema inteligente, pero los diseñadores web aún pueden ajustar manualmente los tamaños mínimos y máximos.
SVG
El formato de imagen SVG no es nada nuevo, pero ofrece algunas ventajas que están ganando importancia. El formato mantiene un tamaño de archivo pequeño, es flexiblemente escalable y puede formatearse con CSS. Eso hace que SVG sea una tendencia de diseño web para 2020. Debido a que es principalmente un formato de datos XML, el código fuente (y los gráficos) se pueden adaptar mediante CSS. Esta combinación permite a los diseñadores web integrar gráficos que adoptan la pantalla de un dispositivo o las necesidades individuales del usuario.
Tendencia 3: micro interacciones
Las micro interacciones son una tendencia en el diseño de UX donde las interacciones seleccionadas del usuario van acompañadas de pequeños efectos de animación. Por ejemplo, este podría ser un botón Me gusta que hace vibrar el teléfono inteligente de un usuario cuando hace clic en él. Para expertos en UX como Dan Saffer, estos son los detalles que distinguen la experiencia del usuario.
Propina:
Se pueden encontrar ejemplos de animaciones exitosas para realizar micro interacciones en Awwwards.com o Dribbble.
Tendencia 4: desplazamiento largo / infinito
El enfoque de «móvil primero» no solo se aplica a las ventanas gráficas y la representación sin pérdidas de contenido web en diferentes dispositivos, sino que también tendrá una influencia creciente en el contenido web en el futuro. Uno de los desarrollos más importantes en este contexto es la transición del clic al desplazamiento. En principio, el sitio web de desplazamiento es un viejo amigo. Sin embargo, los conceptos de diseño como el desplazamiento infinito o el efecto de paralaje continúan disfrutando de una gran popularidad y, por lo tanto, seguirán en tendencia en 2020.
Desplazamiento infinito
El desplazamiento infinito permite a los visitantes del sitio web descubrir nuevo contenido desplazándose, en lugar de hacer clic. Cuando se alcanza el final de una sección, la siguiente parte se muestra automáticamente. Las redes sociales, como Facebook, Instagram, Reddit y Quora, han empleado este método desde hace mucho tiempo para presentar a sus usuarios contenido en una fuente de noticias continua. El desplazamiento infinito también ha sido una herramienta común utilizada en los blogs desde hace algún tiempo y seguramente jugará un papel importante en el futuro.
El desplazamiento infinito es ideal para sitios web con una amplia gama de información. Si bien un blog con 100 a 200 publicaciones aún se puede paginar fácilmente, los beneficios de la división de páginas en grandes proyectos web disminuyen a medida que aumenta la cantidad de información. Es poco probable que un lector busque la página 812 de un total de 5782 páginas, por ejemplo. El desplazamiento infinito, por otro lado, generalmente se usa con algoritmos sofisticados que prefiltran la información y presentan primero a los usuarios las publicaciones de blog más relevantes.
Sin embargo, los operadores de sitios web que quieran subirse al carro de desplazamiento infinito en 2020 deben asegurarse de hacerlo de una manera amigable para los motores de búsqueda. Si bien Google inicialmente luchó con los sitios web de desplazamiento de rastreo, el desplazamiento infinito ahora se puede implementar sin preocupaciones gracias a las pautas de diseño detalladas del líder del mercado de motores de búsqueda . Deben tenerse en cuenta los siguientes puntos:
- URL individual para cada subpágina
- El contenido superpuesto debe evitarse estrictamente
- Los visitantes deben poder localizar fácilmente la información solicitada
- El tiempo de carga debe ser razonable.
Efecto de desplazamiento de paralaje
Aunque el desplazamiento de Parallax puede no estar entre las últimas tendencias de diseño web, los próximos años seguirán siendo importantes para la función cada vez más popular. Esta paralaje de movimiento ha sido un elemento esencial para los sitios web modernos en los últimos años. La capacidad especial de mover varios niveles de un sitio web a diferentes velocidades crea una percepción de profundidad. Estos efectos visuales especiales mantienen al visitante fascinado desplazándose y, como resultado, permanecen en la página más tiempo. Estos efectos se combinan idealmente con elementos que incitan al visitante a llevar a cabo una acción deseada. Por esta razón, el desplazamiento de paralaje es una característica excelente para usar junto con la narración interactiva. Un ejemplo particularmente ilustrativo de este tipo de uso es el sitio web, «Every Last Drop«.
Tendencia 5: experiencia de usuario personalizada
La presentación dirigida de contenido web es uno de los principios básicos del diseño web moderno. En especial en el comercio on-line, la selección de contenido y su presentación deben fundamentarse en los requisitos de los clientes del servicio potenciales. En el pasado, la atención se centró en grupos abstractos de personas, pero en 2020, la atención se ha desplazado a la experiencia del usuario.
Aunque casi todas las tiendas on-line emplean funciones como «Páginas que te pueden gustar», ciertas empresas dan un paso más al personalizar sus productos a los usuarios individuales. El servicio de transmisión de música, Spotify y el portal de vídeo a pedido Netflix son ejemplos de empresas que adaptan sus servicios a los clientes. Esto significa que dos usuarios casi nunca ven la misma selección de productos recomendados en el sitio web respectivo.
Una tendencia de diseño web de 2020 será sitios web personalizados donde los visitantes verán contenido que coincida con sus hábitos de uso. Las herramientas de análisis web como Google Analytics y Matomo proporcionan las bases para interfaces de usuario personalizadas. Brindan a los proveedores de contenido una visión general integral de cómo los usuarios web interactúan con el contenido web.
Tendencia 6: WebXR
La mayoría de los usuarios son conscientes de la realidad virtual (VR) dentro de un contexto de entretenimiento. Los desarrolladores de juegos informáticos y móviles, por ejemplo, invierten muchos recursos en tecnologías de realidad virtual para crear gafas y juegos de realidad virtual. Al mismo tiempo, un número creciente de teléfonos inteligentes permite el contenido de realidad aumentada (AR), fusionando el mundo real con el ámbito digital. La World Wide Web está siguiendo estas tendencias. La tecnología WebVR llena de fallas ahora ha sido reemplazada por la tecnología WebXR que muestra el contenido VR y AR en los navegadores.
Los usuarios ya pueden ver sitios web especialmente programados en tres dimensiones con gafas VR. Al igual que navegar por una habitación, pueden moverse entre las opciones del menú y el contenido. La tecnología es muy prometedora para el futuro del comercio electrónico, permitiendo a las tiendas en línea replicar la experiencia en la tienda en línea. Quienes poseen gafas de realidad virtual ya pueden probar WebXR de Mozilla.
Tendencia 7: Chatbots
Los programas de comunicación no son nada nuevo. Los chatbots se originan en el área de investigación de Inteligencia Artificial (IA) y ya se usan actualmente en sitios web corporativos o en tiendas en línea. Por lo general, estos son pequeños cuadros de diálogo que aceptan preguntas de los usuarios y generan respuestas automáticamente. El algoritmo de aprendizaje de la máquina crea respuestas personalizadas, lo que le da al usuario la impresión de que está hablando con un humano. Los chatbots se usan como asistentes de compras virtuales o como una alternativa a la clásica sección de preguntas frecuentes.
Los chatbots rara vez son intrusivos, pero generalmente se operan a través de pequeños elementos interactivos. El usuario, por lo tanto, tiene la impresión de que un empleado del servicio web se contacta con ellos en tiempo real. En la mayoría de los casos, el usuario puede responder a la solicitud sin abandonar el sitio web. La desconfianza de los socios de diálogo controlados por AI probablemente ha disminuido un poco desde el éxito de Siri, Alexa, Cortana, etc. Sin embargo, en la mayoría de los casos, los chatbots no son más que barras de búsqueda que reaccionan de manera más dinámica a las consultas de búsqueda. Será interesante ver cómo se desarrollan los chatbots en 2020.
Tendencia 8: interfaz ordenada
Los diseños bien planificados a menudo se copian y esa tendencia es evidente en el diseño web. Las interfaces de usuario de sitios web y aplicaciones web se basan cada vez más en prácticas comprobadas en el diseño y la disposición del contenido. El diseño siempre influye en la facilidad de uso de un sitio web .
En general, no puedes equivocarte con una interfaz de usuario (IU) ordenada. Del mismo modo, puede apegarse al diseño de un portal establecido desde hace mucho tiempo para sitios web extensos. Como ocurre también con los diseño de blog para sitios web más pequeños y puede estar seguro de que funcionará ya que estos diseños se han probado. Pero han surgido dos tendencias de diseño en diseño web que en 2020 se encontrarán en muchas interfaces gráficas de usuario.
Botón de hamburguesa
Este fenómeno se ha establecido tan rápidamente que muchos usuarios ya lo dan por sentado en su diseño de menú: el botón de menú pequeño, también conocido como el «botón de hamburguesa». Al principio, se utilizaba primordialmente para menús desplegables en páginas web y aplicaciones móviles. Ahora, el símbolo se está utilizando como botón de menú en muchas PC de escritorio. Como su nombre indica, el símbolo se asemeja a una hamburguesa en capas y, a menudo, se presenta con el símbolo matemático «≡», que significa «idéntico».
Diseños de tarjetas
La segunda tendencia de diseño web más reciente afecta la forma en que se presenta el contenido. Los diseños de tarjeta (también conocidos como «diseño basado en tarjeta») presentan texto o contenido basado en imágenes o botones de «llamada a la acción» en varios cuadros que se distribuyen a través de la interfaz de usuario. Esto ofrece varias ventajas: los sitios web se pueden presentar de forma clara y visual, y, desde un punto de vista pragmático, las cajas o tarjetas individuales actúan como contenedores para el contenido web, lo que significa que se pueden mover fácilmente dentro de la cuadrícula de diseño del sitio. La redistribución del contenido del sitio se hace mucho más fácil con un diseño web receptivo. El diseño de la tarjeta ha ganado popularidad principalmente debido a plataformas de imágenes como Pinterest o plataformas de diseño web como Dribbble.
Tendencia 9: modo oscuro
Una tendencia importante que no solo es evidente en la web, sino que todo el sector del software es el modo oscuro. Un número creciente de usuarios aprecia una alternativa a las pantallas brillantes. Cuando las luces circundantes son bajas, las interfaces brillantes pueden ser particularmente perjudiciales. Aunque muchas aplicaciones y programas ya pueden configurarse en modo oscuro, la mayoría de los sitios web todavía están configurados para el modo brillante.
Con CSS y JavaScript, los diseñadores web pueden proporcionar opciones para los visitantes del sitio web. Cualquiera que sea la preferencia del usuario individual, las páginas web se pueden mostrar en modo oscuro o brillante. Los diseñadores pueden, por ejemplo, integrar botones de ‘interruptor de luz’ en una página de inicio. Pero hay una solución más elegante: el comando CSS «prefer-color-esquema» reacciona a la configuración del navegador del usuario. Si, por ejemplo, un usuario ha configurado el modo oscuro en Firefox, Safari, Chrome o Edge, el sitio web se ajusta automáticamente. Es necesario agregar un esquema de color correspondiente al código fuente, pero el trabajo adicional merece la mejora en la experiencia del usuario.
Tendencias de diseño web: un camino hacia el éxito
Las tendencias de diseño web para 2020 tienen que ver con la usabilidad. Además de esto, las páginas web habrían de ser aún más simples de utilizar y ser más veloces para que los usuarios puedan acceder al mismo tiempo. El contenido web no está diseñado por separado para diferentes dispositivos, pero está optimizado con un diseño receptivo para que pueda mostrarse correctamente en todos los dispositivos.
Las técnicas modernas de diseño web brindan una oportunidad para que los diseñadores web creen sitios elegantes con los que los usuarios disfrutan explorando e interactuando. Pero es importante recordar que las tendencias cambian y que las nuevas tecnologías continúan desarrollándose rápidamente. Al mismo tiempo, el futuro usuario siempre debe estar en el centro de una buena estrategia de diseño. Los diseños deben coincidir con el grupo de usuarios p y ajustar automáticamente su contenido en consecuencia.
Si está creando su propio sitio web o desea actualizar su sitio existente, puede inspirarse en las tendencias de diseño web de 2020, preparando su sitio web para los requisitos y expectativas del mañana.
