El desplazamiento de Parallax no necesita presentación cuando se trata de discutir las prácticas de diseño más atractivas. En general, Parallax Scrolling se ve ampliamente en los sitios web de WordPress. Es un efecto en el que la imagen de fondo se mueve a un ritmo más lento que los elementos de primer plano. Esto da la ilusión de tener tres dimensiones en una superficie plana de dos dimensiones. Muchos juegos han estado usando esta tendencia durante mucho tiempo. Sin embargo, se abrió camino en el diseño web hace relativamente poco tiempo y ganó una gran popularidad. Está tan extendido que lo más probable es que lo hayas visto en alguna parte cuando navegaste por la web, incluso si no sabías de qué se trataba. El concepto de desplazamiento de paralaje funciona para crear una ilusión que se ve atractiva y única. Agrega valor estético al diseño web y llama la atención sobre el contenido en el desplazamiento de paralaje, lo que ayuda a resaltar el contenido valioso del desorden.
Tabla de contenido ocultar
1. La experiencia del usuario mejora significativamente:
2. Ayuda al proceso de narración:
3. Reducción significativa en las tasas de rebote:
1. Desplazamiento de fondo de paralaje:
2. Desplazamiento vertical de paralaje:
3. Efecto de transparencia de paralaje:
4. Desplazamiento horizontal de paralaje:
5. Efecto de escala de paralaje:
1. Recuerda siempre el objetivo principal de tu sitio web:
2. No abuses del efecto de desplazamiento de paralaje:
3. Cree prototipos de efectos de desplazamiento de paralaje y pruébelos: Pin
4. Planifica el contenido para uso móvil:
5. Capacidad de respuesta de su sitio web:
1. La historia de Los Goonies:
2. estudio de perros:
3. Vigilancia contra incendios:
Esta tendencia de diseño se originó cuando repuntó la tendencia del diseño plano. Antes de la tendencia del diseño plano, el diseño de realismo estaba de moda. Con esta tendencia, el énfasis estaría en las sombras paralelas, los reflejos y otros trucos similares para crear una sensación de profundidad y una apariencia tridimensional. El diseño plano era demasiado bidimensional y esos trucos no funcionarían con ellos para crear un aspecto tridimensional. Al ver esta brecha, el desplazamiento de paralaje surgió como un concepto para introducir tres dimensiones en un diseño plano.
Para comprender el desplazamiento de paralaje en mayor detalle, primero debemos ver por qué es una práctica en la que vale la pena invertir.
1. La experiencia del usuario mejora significativamente:
Alfiler
Algunas personas opinan que el desplazamiento de paralaje es una característica adicional que agrega complejidad a la interfaz de usuario sin ninguna contribución. Sin embargo, no es cierto, ya que las microinteracciones y las animaciones marcan una gran diferencia para crear interfaces de usuario atractivas en comparación con las caras planas de los usuarios. Tiene un valor excelente en la experiencia del usuario (UX).
2. Ayuda al proceso de narración:
Alfiler
Si tuviéramos que narrar una historia a otra persona, podríamos hacerlo sin esfuerzo. Sin embargo, tener la misma facilidad y fluidez en la narración de historias en el diseño de un sitio web puede ser un gran desafío. Conectar los puntos y facilitar la transición y mantener a la audiencia enganchada suele ser complicado. El desplazamiento de Parallax ayuda con este problema al crear una experiencia atractiva e inmersiva para que la historia fluya. Dado que hay una diferencia en la velocidad de los elementos de fondo y de primer plano, el ritmo de los elementos de manera eficiente puede mejorar significativamente la experiencia de narración.
3. Reducción significativa en las tasas de rebote:
Alfiler
La tasa de rebote se refiere a la cantidad de personas que hacen clic en el sitio web y hacen clic en el botón Atrás en la pestaña antes de navegar completamente por el sitio web. Las tasas de rebote frecuentes y altas pueden afectar significativamente la clasificación de SEO. Los sitios web de desplazamiento de Parallax tienen tasas de rebote significativamente menores, ya que la mayoría de ellos son sitios de desplazamiento de una sola página. La experiencia dinámica que obtienen los usuarios al presenciar el desplazamiento de paralaje los mantiene interesados.
Ahora que hemos cubierto las ventajas de usar el desplazamiento de paralaje, podemos discutir los diversos tipos de técnicas de desplazamiento de paralaje disponibles para los diseñadores web. Hay dos grandes categorías de efectos de paralaje. Efectos de paralaje basados en desplazamiento y efectos de paralaje basados en mouse.
Los efectos de paralaje basados en desplazamiento son efectos de paralaje que experimentaría cuando se desplaza hacia abajo en un sitio web. Cada tipo de desplazamiento de paralaje satisface una necesidad y un propósito diferentes. Algunos de los efectos de desplazamiento de paralaje son:
1. Desplazamiento de fondo de paralaje:
Es una de las formas más antiguas pero efectivas de usar el desplazamiento de paralaje. Con esto, cuando el usuario se desplaza por el sitio web, la imagen de fondo cambia. Esto ayuda a contar historias convincentes con estilo.
2. Desplazamiento vertical de paralaje:
Parallax Vertical Scroll es ideal para sitios web en los que desea que los usuarios sientan que el sitio web se mueve con ellos, mediante el uso de elementos flotantes que se moverían a diferentes velocidades. Esto también se puede hacer en varias capas.
3. Efecto de transparencia de paralaje:
El efecto de transparencia Parallax es un efecto suave en el que el texto o la imagen se desvanece lentamente cuando el usuario se desplaza hacia abajo. También volvería a aparecer cuando el usuario se desplazara hacia arriba.
4. Desplazamiento horizontal de paralaje:
El desplazamiento horizontal Parallax crea una sensación de movimiento horizontal cuando el usuario se desplaza hacia abajo en el sitio web. Los elementos de la izquierda se acercan al centro. Esto crea una sensación de movimiento.
5. Efecto de escala de paralaje:
El efecto de escala de paralaje permite al usuario crear un efecto de acercamiento y alejamiento del túnel. El zoom es proporcional a la relación de aspecto, por lo que crea una ilusión única que se ve bien. Se siente como un efecto de deformación que lleva al usuario a otra dimensión.
Ahora que hemos discutido las diferentes variaciones de los efectos de desplazamiento de paralaje, podemos pasar a discutir las prácticas de diseño esenciales que se deben tener en cuenta al diseñar un efecto de desplazamiento de paralaje para su sitio web:
1. Recuerda siempre el objetivo principal de tu sitio web:
Alfiler
El desplazamiento de Parallax es divertido y puede volverse cautivador. No solo para los espectadores sino también para el diseñador. Esto no debería traducirse en tener un sitio web que tenga un impresionante efecto de desplazamiento de paralaje y no se centre en el contenido. El desplazamiento de paralaje, como otros elementos de diseño, debería funcionar como señales visuales que deberían guiar al visitante a los lugares en los que desea que estén. Debería ayudar a lograr los objetivos comerciales, como vender un producto, difundir contenido o generar clientes potenciales.
Si usa demasiado el desplazamiento de paralaje sin ningún contexto o propósito en mente, puede impresionar a los espectadores en su sitio, pero no se traducirán en clientes potenciales o conversiones efectivos. Utilice el desplazamiento de paralaje para aumentar las posibilidades de lo que desea que haga el usuario. Un truco excelente para esto es colocar un CTA convincente pero sutil al pie de página. De esta manera, cuando los usuarios se desplazaran por el sitio, verían el desplazamiento de paralaje en acción. También tendrían uno o dos botones constantes que son estáticos y omnipresentes. Esto atraería al visitante a hacer clic en el botón para ver qué sucede.
2. No abuses del efecto de desplazamiento de paralaje:
Alfiler
El efecto de desplazamiento Parallax tiene un cierto factor sorpresa adjunto. Se rompe por la naturaleza mundana y estancada de cualquier sitio web que crea un interés repentino en el ojo del visitante. Dado que el desplazamiento de paralaje hace que los elementos del sitio web se muevan a diferentes velocidades, es esencial encontrar el equilibrio adecuado entre la diversión y el caos cuando se utiliza el desplazamiento de paralaje. Si el sitio web tiene muchos elementos que se mueven rápidamente o también demasiados elementos que se mueven, podría ser abrumador para el visitante mantenerse al día. Tiraría su guía visual por todo el sitio web y crearía confusión.
3. Cree prototipos de efectos de desplazamiento de paralaje y pruébelos: Alfiler
Siempre es una buena idea construir un prototipo interactivo antes de finalizarlo en la etapa de desarrollo. Esto ayuda a los diseñadores a probar su efecto de desplazamiento de paralaje antes de ponerlo en marcha. Los diseñadores deben probar el efecto sobre la usabilidad y la experiencia del usuario. Dado que el paralaje es tan versátil y diferente en su enfoque, puede afectar a diferentes personas de diferentes maneras. Es fácil desviarse del paralaje útil a la creación de efectos de desplazamiento de paralaje que causan distracción. Por lo tanto, pruébelo a fondo con usuarios reales que sean objetivos y tengan un sentido del diseño web. Además, pruébelo con una audiencia general, ya que son ellos para quienes está creando el efecto.
4. Planifica el contenido para uso móvil:
Alfiler
Navegar por la red ya no está restringido a las computadoras. En cambio, más de la mitad de los usuarios prefieren navegar en sus teléfonos inteligentes y tabletas. Google también ha cambiado los resultados de su motor de búsqueda en función de lo cual regula y clasifica los sitios web de manera diferente para dispositivos móviles en comparación con los de escritorio. Esto significa que si su sitio web se clasifica bien en la navegación de escritorio, pero tiene un diseño móvil poco amigable, no ocupará un lugar destacado en Google cuando lo busque a través de su teléfono. El desplazamiento de Parallax no es compatible con dispositivos móviles. Las tabletas lo admiten hasta cierto punto, pero no los móviles. La solución práctica para esto es no usar efectos de paralaje para su sitio móvil.
El diseño básico de su sitio debe diseñarse de tal manera que sea fácilmente traducible a dispositivos móviles. Se debe tener cuidado con cualquier sección que se superponga y se desborde. Los fondos no deben entrar en conflicto con la legibilidad del contenido. Para el sitio móvil, conserve solo los elementos de diseño necesarios. Esto lo ayudaría de dos maneras: los usuarios que usan el navegador en su móvil podrían estar usando datos móviles. Tener un sitio más ligero les ayudaría a cargar el sitio más rápido y gastar menos datos navegando por su sitio. Tampoco afectaría tu clasificación SEO de esa manera.
5. Capacidad de respuesta de su sitio web:
Alfiler
Ya no tenemos conexiones de red que tarden minutos u horas en cargar un sitio web. Todos tienen acceso a Internet a una velocidad en la que los usuarios pueden estar en un sitio web por un segundo y cambiar a otro en otro segundo que pasa. Con esta facilidad de la velocidad viene la facilidad de las opciones. Las personas navegan a través de varios sitios web cada día. Si su sitio web no se carga relativamente rápido, no se quedarán esperando a que su sitio web se cargue y muestre su increíble efecto de paralaje. Parallax es un truco pesado e incluso cuando lo optimizas; tendría un éxito en el tiempo de carga de la página. Se convierte en su deber optimizarlo tanto como sea posible si desea que el desplazamiento de paralaje contribuya significativamente a su sitio web.
Ahora que comprendemos todos los aspectos del desplazamiento de paralaje y cómo aprovecharlo al máximo, veamos algunos de los sitios web que han implementado con éxito el desplazamiento de paralaje en el diseño de su sitio web de manera eficiente:
1. La historia de Los Goonies:
Alfiler
Este sitio web usó un efecto de desplazamiento de paralaje dedicado para resaltar la película clásica The Goonies. Utiliza desplazamiento de paralaje inmersivo para hablar sobre la trama de la película y otros detalles, como el nombre del director, la fecha de lanzamiento, los perfiles de los personajes y más. Está creado usando WebFlow y funciona como un tributo a la película clásica. Cuando visita el sitio web, la primera interacción utiliza el efecto de escala de paralaje que ayuda al usuario a sentir que está viajando dentro de la historia con el sitio web. Cada efecto de paralaje se utiliza para dirigir la señal visual para el visitante, y se realiza sin esfuerzo. También utiliza audio para una experiencia de narración inmersiva.
2. estudio de perros:
Alfiler
Dogstudio es un estudio creativo que fusiona arte, tecnología y diseño. Para mostrar esto, han diseñado inteligentemente su sitio web. El centro del sitio web tiene un perro que se escala y gira a medida que el usuario sigue desplazándose por el sitio web. La luz del perro también sigue cambiando cuando pasas el mouse sobre sus proyectos recientes. También hay efectos de paralaje basados en el mouse. Al comienzo de la página web, si pasas el mouse hacia la izquierda, el perro se inclina hacia la derecha y viceversa. Es un uso efectivo del desplazamiento de paralaje.
3. Vigilancia contra incendios:
Alfiler
Firewatch es un juego creado por Campo Santo. Hay un sitio web para promocionar este juego que hace un uso sutil pero impresionante del desplazamiento de paralaje. Cuando visita el sitio, se le trata con una imagen de banner que se ve inmersiva tal como es. Cuando desplaza el sitio web hacia abajo, la imagen y el contenido se mueven hacia arriba, creando un efecto de desplazamiento de paralaje simple pero efectivo. El sitio web utiliza 6 capas para que sea tan suave como es. El resto del sitio web es estático, donde reside todo el contenido. Esto te ayuda a leer el contenido y a familiarizarte con el juego sin sentirte mareado con efectos de paralaje exagerados. Usan un efecto de paralaje para captar la atención y luego brindan información relevante para captar el interés del visitante.
Ahora sabe por qué el desplazamiento de paralaje es una tendencia de diseño tan popular en la actualidad. Tiene muchas ventajas que los diseñadores web pueden aprovechar. No hay posibilidad de repetitividad con otro sitio web debido a las muchas variaciones de desplazamiento de paralaje disponibles. Los sitios web mencionados en esta lista también cubren cómo el efecto se puede usar completamente para el propósito de contar historias o como un elemento adicional para mejorar la sensación del sitio web. Comprenda por qué y dónde necesitaría usar el desplazamiento de paralaje en su sitio web y utilícelo. No lo fuerce solo por valor estético.
