¿Conoces las nuevas tendencias en diseño web?

Publicada en Marketing Online.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparte este artículo

Lo último que quieres es que cuando un visitante llegue a tu web, se vaya por patas porque tu web no le gusta. Para asegurarte de que tu web es lo más atractiva posible tanto en diseño como en contenido, debes saber lo que se lleva, lo que es actual. Conocer las últimas tendencias en diseño te será útil para definir los requisitos del diseño de tu web o también para generar ideas sobre qué tipos de tests A/B puedes realizar y asegurarte de que tu web gusta a tus visitantes.

La forma más sencilla para ponerte al día sobre este tema o cualquier otro es realizar una búsqueda en Google y leer unos cuantos artículos que hablen sobre el tema. Pero si quieres asegurarte de encontrar buenos ejemplos y con gusto sobre la aplicación de las últimas tendencias en diseño, mi recomendación es que vayas directamente a ver una web cuyo diseño te pueda servir de fuente de inspiración. Y esto es lo que he hecho para escribir esta entrada: ver qué elementos encontramos en la web de una empresa icónica en diseño. Así que, ¡vamos para allá!

Diseño minimalista, simple y con espacios en blanco

Todas las páginas de la web de Apple son muy acogedoras, modernas, sencillas y limpias, lo que le permite a la marca mostrar sus productos y convertirlos en el centro de atención. Su principal objetivo es vender y anunciar sus productos. Y sus diseños siempre se han basado en que la simplicidad es la máxima sofisticación.

En cuanto a la web y con este mismo principio, nos encontramos con un estilo desenfadado, con un uso extensivo de espacios en blanco y sin elementos que distraigan la atención de la jerarquía visual.

La página del iPad es un buen ejemplo del uso de los espacios en blanco y el diseño minimalista.
La página del iPad es un buen ejemplo del uso de los espacios en blanco y el diseño minimalista.

Elementos sobredimensionados

Además, para que el visitante pueda conocer los detalles de cada uno de los productos viéndolos y sintiendo que casi los puede tocar con sus propias manos, encontramos muchas imágenes sobredimensionadas, pudiendo incluso ocupar más del tamaño de la pantalla.

Imagen más grande que la pantalla
La imagen no cabe en la pantalla.

Efecto de cristal helado

El efecto de cristal helado es el aspecto semi-transparente y borroso de los elementos que se encuentran en la parte de atrás. Apple lo usa continuamente cuando las imágenes van desapareciendo detrás del menú al hacer scroll. Ayuda a que la transición sea más suave y agradable a la vista.

Efecto de cristal helado.
Fíjate cómo queda el reflejo de la imagen detrás del menú.

Gradientes o degradados multicolor

Los gradientes o degradados son las transiciones graduales de un color a otro. Ya hace unos cuantos años que los vamos encontrando en las webs. Si antes los encontrábamos con colores más intensos, ahora los vemos con colores suaves.

Uso de los degradados en la web de Apple.
Degradado multicolor en la tarjeta de crédito.

Esta forma de diluir el color crea en la audiencia una sensación serena y ayuda a la contemplación de su mensaje. Apple no ha dudado en usarla para transmitir una imagen de seguridad en la realización de los pagos a través del móvil.

Tipografías a mano

Aunque parece una contradicción al minimalismo comentado antes, ya hace un tiempo que estamos viendo que la tipografía pasa a ser un elemento artístico en vez de un elemento puramente informativo. Añadir tipografías a mano añade personalidad a la información e invita al visitante a hacerlo más partícipe de la imagen que está visualizando.

Uso de diferentes tipografias en la descripción del iPad.
Las distintas tipografías sirven para remarcar que puedes tomar notas a mano con el iPad.

Tipografías animadas

En el momento en el que se decide que el texto pasa a ser un elemento artístico, ya lo podemos incorporar en todo tipo de animaciones. A continuación vemos un ejemplo de cómo transmitir un mensaje de texto de forma impactante.

Cuando el texto se convierte en una animación.

Modo oscuro o «Dark Mode»

Nunca antes había sido tan importante el ecologismo como lo es actualmente. Así que la tendencia de usar apps en modo oscuro para ahorrar energía de dispositivos cada vez va adquiriendo más peso en webs de muchas empresas, incluida, por supuesto, la de Apple.

Las páginas del iPhone Pro las encontramos en modo oscuro.
Las páginas del iPhone Pro las encontramos en modo oscuro.

El modo oscuro no sólo conserva la energía del móvil o tablet ya que los píxeles se muestran con menos brillo, sino también reduce el cansacio de la vista de los usuarios.

Y como habrás observado en la imagen anterior, el modo oscuro invita a que se incluyan imágenes de un estilo más vintage.

Desplazamiento horizontal

Si lo habitual es que al hacer scroll la web se desplace verticalmente, ¿habías pensado que el desplazamiento horizontal es una muy buena opción para mostrar el detalle de cualquier producto?

Uso del desplazamiento horizontal para mostrar los detalles del iPad Pro.
Uso del desplazamiento horizontal para mostrar los detalles del iPad Pro.

Animaciones con elementos 3D

Y como ya has visto en los GIFs anteriores, ¡olvídate de páginas aburridas sin movimiento! Nuestros visitantes ya no están acostumbrados a leer contenidos, están acostumbrados a ver vídeos y que haya un continuo movimiento. Y Apple esto lo tiene claro.

Es por eso que a lo largo de su web encuentras todo tipo de efectos especiales y animaciones que no te dejan para nada indiferente. Te animan a que tengas ganas de seguir navegando en su web, resultando en una experiencia entretenida y agradable para tus ojos.

A continuación te dejo algunos ejemplos de otras animaciones que vas encontrando lo largo de su web: micro-animaciones de iconos, videos integrados en imágenes, efectos 3D, etc.

¿Que no ves nada? Vuélvete a fijar en la micro-animación de los iconos.
¿Qué no ves nada? Vuélvete a fijar en la micro-animación de los iconos.
Vídeo integrado en imagen para mostrarnos detalles del iMac.
Vídeo integrado en imagen para mostrarnos detalles del iMac.
Y aquí para que veas la capacidad de imagen del iMac.
Y aquí para que veas la capacidad de imagen del iMac.
Efecto visual 3D del Apple Watch.
Las animaciones de fluidos son siempre las más impactantes.

Conclusión

Si quieres que tu web resulte atractiva a tus visitantes, la web de Apple es un buen recurso como fuente de inspiración. Seguramente no dispones de los recursos que ellos tienen para implementar todas las animaciones y demás virguerías que ellos incorporan en su web, pero tener como referencia lo que es tener buen gusto en diseño siempre es útil para mejorar tu web.

¿Tenías la idea de añadir grandes cantidades de texto explicando detalles sobre tus productos? Recuerda que una imagen o vídeo puede ser mucho más enriquecedor para un usuario. Y no te olvides de la máxima de Apple: la simplicidad es la máxima sofisticación.

Imagen destacada de Alice Achterhof en Unsplash.

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.