El diseño web durante el 2020

business-busy-designer-laptop
business-busy-designer-laptop

A lo largo del año 2020 se han renovado muchos de los principales sitios web, tanto para mantenerse acorde a las nuevas necesidades de sus usuarios, como para no quedar atrás en las tendencias de este año.

Desde la integración del “Modo Oscuro”, hasta una mejora en sus tiempos de carga y uso de internet, todo ha sido implementado para mejor.

Te hablaremos un poco de las tendencias que marcaron este año.

Velocidad y rendimiento lo principal

El tener un sitio web vistoso, podría suponer el uso de muchas imágenes o contenido multimedia, es por ello que se le dio mucha importancia a los siguientes puntos:

Barras de Progreso

Si ya vas hacer esperar al usuario, mínimo debería de saber por cuánto tiempo esperará, esto debido a que cada vez es menos el margen de tolerancia que tienen los usuarios al visitar un sitio web.

Carga primero lo esencial

Gracias a la tecnología de ServiceWorker, y la memoria caché, es posible seleccionar qué es lo primero que deseamos que descargue el usuario, y a la vez guardar en su memoria caché (memoria temporal), aquellos archivos que sabemos que serán iguales durante la navegación del usuario, como pueden ser las hojas de estilos CSS, los archivos JS, he alguna información base de las opciones de los formularios.

- Anuncio -
Fuente: https://external-content.duckduckgo.com

Imágenes con carga progresiva

Esta forma de cargar las imágenes, es muy usada en sitios web donde su principal atractivo son las imágenes, como suele ser Instagram, Facebook o Twitter.


La carga progresiva hace referencia a que el usuario primero ve una imagen de baja calidad como vista previa, y a medida que se quede más tiempo viéndola o la seleccione, esta va aumentando su calidad hasta alcanzar su resolución original. También se le conoce como carga de imágenes entrelazada.

Trucos en CSS

El lenguaje de diseño CSS es sin duda una parte importante de un sitio web, y es por ello que es necesario saber el alcance de este, así mismo al estar en constante mejora, estar atento de sus nuevas funcionalidades.

Con CSS hemos visto que un sitio web diseñado para escritorio, fácilmente puede adaptar o cambiar su diseño para ser visto y usado en dispositivos móviles, dando la sensación de ser una aplicación más en tu dispositivo.

La Lucha de CSS Grid & CSS Flexbox

Muchos diseñadores web suelen discutir cuál de estos dos métodos para ordenar contenido es el mejor, pero a lo largo de los últimos años, no cabe duda que cuál usar, siempre ha sido tema de qué vas hacer, ya que ambos presentan sus similitudes, pero también unas características únicas que son buenas en ciertas circunstancias, y no tan buenas en otras.


Por ello es saber cuándo y cómo usar, tanto Grid, como Flexbox, se ha vuelto una excelente herramienta en estos tiempos.

SVG

Puede que los SVG no sean relativamente nuevos, pero su uso se empezó a popularizar en los últimos años, esto debido a su fácil modificación mediante propiedades CSS, y al ser un un archivo de texto, suele ser mucho más ligero que una imagen o icono PNG tradicional. Y al ser tan modificable, son perfectos para crear animaciones, las cuales se pueden usar de fondo o para alguna acción.

UX, Micro interacciones

En cuanto a la novedad en la experiencia del usuario (UX), tenemos las micro interacciones, las cuales son pequeñas animaciones al momento de realizar alguna acción. Para los expertos de UX como Dan Saffer, estos pequeños detalles le dan vida a la aplicación y proporcionan una mejor experiencia de uso al usuario.

Fuente: https://codepen.io/manuelalvarezco/pen/ExaqyKq

Scroll infinito

Esta característica se ha vuelto el pan de cada día, y lo vemos a diario en páginas como Facebook, Twitter, Reddit, entre otras.

El Scroll infinito o Infinite scrolling en inglés, se caracteriza de siempre ofrecernos un flujo constante y casi interminable de información. La implementación de esto se debe tener en cuenta que el usuario debe ver lo más relevante para él, ya que en el caso de los blogs de artículos como Talent Republic, seria un poco contraproducente mostrar un artículo tras otro, si este no cuenta con algo relacionado al anterior.

Fuente: https://codepen.io/dcorb/pen/eJLMxa

Pero al usar esta técnica también debemos de cuidar aspectos de SEO. Esto debido 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:

  • Un URL individual para cada subpágina.
  • Evitar el solapamiento de contenido.
  • Los elementos que busca el usuario deben encontrarse fácilmente.
  • Tiempo de carga adecuado.

Efecto Parallax

Ya viene utilizando hace unos años, este efecto le da un grado de profundidad al diseño del sitio web, se logra al usuario varias capas de fondo, las cuales se mueven a cierta velocidad según se requiera, se suele acompañar de elementos que motivan al usuario a realizar alguna acción, esto hace que se logre una buena combinación con el Storytelling (contar una historia).

La página de Every Las Drop, es un buen ejemplo de este efecto y el cómo puede ser utilizado.

Experiencia personalizada

Cada vez más los servicios de entretenimiento o incluso páginas de compras como Amazon, se enfocan a una experiencia personalizada, usando la interacciones pasadas y presentes del usuario; esto para poder brindarle una mejor experiencia, o que pueda encontrar aquello que busca y se mantenga el mayor tiempo promedio posible en sus servicios. 

Los ejemplos más claros son los sitios como Amazon, con sus recomendaciones de artículos. Netflix con recomendaciones de series y películas. Y Spotify con su recomendación de artistas y canciones.

WebXR, Realidad virtual en la Web

Puede que te suene el término de Realidad Virtual (RV) del sector del entretenimiento como los videojuegos, incluso de los recorridos a museos por medio de esta tecnología, pues he de mencionarte que esto no para en sólo videojuegos, o algún sector privado. La RV y la Realidad Aumentada ha llegado al internet con WebXR, que permite que los navegador web puedan mostrar contenido con RV y RA. Un ejemplo es la página de prueba de Mozilla, el cual si cuentas con equipo de RV, podrás interactuar con la sala, en caso de no contar con el equipo, el mouse te servirá para echar un vistazo sencillo.

La IA en la Web

La Inteligencia Artificial (IA), ha dado mucho de qué hablar estos años, pero si duda en los sitios web algo que ven como indispensable son los Chatbots, estas IAs nos permíteme que nuestro sitio web cuente con un pequeño asistente personal para nuestros usuarios, que les ayudará a resolver sus dudas. Los Chatbots, mostraron su gran utilidad en sitios los cuales se ofrece algún servicio.

Fuente: Adobe Stock.

La oscuridad reina en el internet

Sin duda los Temas Oscuros se han vuelto los favoritos de muchas personas, y más para las almas nocturnas, aquellos usuarios que suelen navegar en la web durante la noche. Es por ello que muchos sitios web han optado por darles una segunda opción a sus usuarios el Dark Mode. El modo oscuro no es más que una opción visual que nos permite no ser cegados por la blancura del sitio web durante la noche.

Pero es un poco tedioso el tener que decirle a cada sitio que queremos usar el Dark Mode, así que en la web, ya existe una forma de tomar el valor por defecto que pongamos en nuestros dispositivos móviles o ordenador, mediante el media query prefers-color-scheme.

Sin duda este 2020 trajo muchas sorpresas de todo tipo, pero para la Web, el poder ofrecer una mejor experiencia al usuario, siempre es algo en lo que no para de avanzar y de sorprendernos.

Artículo anterior¿Un APK es igual a una App?
Artículo siguienteTendencias en Marketing y Ventas para 2021
Tapatío, Ingeniero en desarrollo de software. Apasionado de la Tecnología, #Friki , #Geek de hobbie, y servicial de ideología.