Una predicción un tanto audaz: 2014 bajará como el año de paralaje. Antes de restarle importancia a esta tendencia reemergente, piénsalo. Con los desarrollos en HTML, CSS y jQuery, y más personas que utilizan conexiones de Internet de alta velocidad, no es exagerado pensar que esta ingeniosa técnica realmente explotará este año.
Los efectos de desplazamiento de paralaje son divertidos, fáciles de usar y permiten nuevos tipos de pensamiento creativo en el proceso de diseño del sitio web. El resultado final es una técnica que puede ser divertida de crear y puede crear una experiencia altamente visual e interactiva para los usuarios.
¿Qué es la paralaje?
El paralaje es una técnica en la que las capas de contenido están diseñadas para funcionar y moverse juntas. La forma en que funciona es que las imágenes de fondo, del medio y del primer plano se crean y diseñan para moverse a diferentes velocidades, de modo que los elementos en la pantalla se mueven.
Parallax puede funcionar con una función de clic o desplazamiento (llamada desplazamiento de paralaje) y los elementos pueden moverse hacia arriba y hacia abajo o de lado a lado. En algunos diseños de paralaje, todos los elementos se mueven al unísono, por lo que parece que se está moviendo de una pantalla a la siguiente. Otros diseños de paralaje permiten múltiples partes móviles de tal manera que casi crea animaciones activas.
Los efectos de paralaje no son nuevos. En realidad han existido durante años. (Piense en los videojuegos y los gifs animados). Pero hasta hace poco, estos efectos eran mínimos y, a menudo, ridículos. La técnica era difícil de crear y llegar a funcionar bien, y los diseñadores y desarrolladores se mantenían alejados de ella.
Pero Apple nuevamente ayudó a liderar la carga para hacer que esta tecnología sea más frecuente, utilizando efectos de paralaje en el lanzamiento de iOS 7 el otoño pasado. Y muchos diseñadores siguieron su ejemplo, con efectos de desplazamiento de paralaje apareciendo en toda la web y en una variedad de aplicaciones. Pero esta vez, la técnica fue mucho más refinada y proporciona una experiencia de usuario memorable.
Este será un año revolucionario
Un énfasis en la experiencia del usuario es por qué los efectos de paralaje realmente despegarán este año. La técnica se puede utilizar para crear un sitio web bastante memorable sin muchos clics. Los efectos de desplazamiento de la paralaje pueden crear una sensación de misterio para el usuario como una "historia". se desarrolla Con cada nuevo movimiento, algo nuevo se desarrolla para el usuario. Este efecto puede crear intriga y el deseo de continuar interactuando con un sitio web. (Siempre es un bono para aquellos de ustedes que rastrean el tiempo en el sitio).
Parallax ofrece un enfoque diferente para mostrar contenido y diseño. Los diseñadores están experimentando con paralaje porque:
- Es divertido
- Crea una experiencia de usuario nueva y distinta.
- Alienta a los visitantes a quedarse más tiempo.
- Apela a nuestro sentido de la curiosidad.
- Es una nueva forma de crear una historia visual.
Grandes efectos en 'Una página'
Los efectos de paralaje funcionan en armonía con otra tendencia de diseño web: el diseño de una sola página. Puede crear diferentes pantallas de contenido que se ven y actúan casi como páginas diferentes, pero en realidad están todas en una sola página.
¿Algunas de mis páginas de paralaje favoritas de desplazamiento? incluir efectos que hacen para distintas experiencias de visualización. A menudo, el color cambiará cuando llegue a un nuevo contenido, o se producirá un intercambio de imagen. Cyclemon hace un gran trabajo con este efecto de una manera súper simple. Con cada pantalla de desplazamiento, el usuario obtiene un nuevo fondo (en un color distinto) y un nuevo estilo de bicicleta en primer plano. El sitio es robusto pero nunca se atasca. ¿Puedes desplazarte por cada una de las 19 pantallas? Rápidamente o use la navegación ligera en el lado derecho de la página para saltar secciones. (Que bien, te muestra todo lo que saltaste en un instante.)
El New York Times también ha sido uno de los líderes en diseño de paralaje con características notables como "Tomate Can Blues". y el premiado 'Snow Fall'. El sitio web del periódico hace un gran trabajo al usar el paralaje para contar una historia con movimiento, texto, video e imágenes. En? Tomate Can Blues? Las imágenes de estilo cómic cobran vida con un movimiento simple gracias al paralaje. En? Snow Fall ,? La historia de larga duración se cuenta con una combinación de efectos que te mantienen en movimiento a través del contenido.
Paralla Plusses
Si bien hay distintas ventajas para una variedad de estilos de diseño diferentes, el paralaje tiene algunos propios. Simple, los efectos pueden ser muy divertidos. Eso solo es probable que comprometa a los usuarios.
Los efectos geniales harán que los usuarios se den cuenta. Pero las técnicas de paralaje también pueden tener otros beneficios:
- Estilo de narración distintivo: Con todo el énfasis en el contenido, este estilo de creación de contenido que cuenta una historia es una opción viable.
- Llamadas a la acción: Los efectos de paralaje se pueden usar para decirle a los usuarios lo que quieres que hagan. Desde hacer clic en un enlace para rellenar un formulario o comprar un artículo, los efectos de paralaje pueden llevar a los usuarios a una acción directa.
- Compromiso: No hay duda de que los sitios con efectos de paralaje eficaces y bien diseñados tienen mayores tiempos de interacción con los usuarios.
- Presentar un producto: Puedes usar efectos de paralaje para mostrar un producto. Piense en las vistas de 360 grados de los artículos en algunos sitios minoristas. Deje que los usuarios realmente vean un artículo antes de comprar.
Consejos de paralaje
Los efectos de paralaje no son para cada tipo de sitio. Debe saber qué quiere obtener de esta técnica antes de usarla solo porque está de moda.
Y mientras que los efectos de paralaje pueden complicarse rápidamente, el mejor consejo es mantener las cosas simples. Decida qué efecto desea utilizar y respételo en todo el sitio. Proporcione punteros a los usuarios si tiene alguna duda sobre cómo funciona el sitio. (Por ejemplo, si un desplazamiento hace que algo se mueva de izquierda a derecha en lugar de arriba y abajo, avise a los usuarios).
Usa paralaje para contar una historia. Es sin duda el mejor uso de la técnica. Asegúrese de que sus efectos reflejen las acciones que los usuarios realizarían al interactuar con su contenido.
Tenga en cuenta el peso en el sitio.Con tanto suceso en el fondo y el código, todo en este tipo de diseño del sitio debe optimizarse adecuadamente. Escale las imágenes correctamente, mantenga limpio su código y asegúrese de que su sitio se cargue rápidamente.
Apunte a los usuarios en la dirección correcta. Las llamadas a la acción deben estar claramente rotuladas en la pantalla con instrucciones fáciles de usar.
Escollos de la paralaje
Los sitios web de paralaje pueden volverse pesados rápidamente, plantean algunos problemas de SEO, a menudo son incompatibles con los marcos de diseño de respuesta, no permiten la vinculación interna de páginas y no funcionan tan bien para contenido considerable.Si bien hay cierto debate sobre si a todos los usuarios les gustan los efectos de paralaje o no, la respuesta obvia es no, no se puede complacer a todos todo el tiempo, hay algunas desventajas en las que pensar. Los sitios web de paralaje pueden volverse pesados rápidamente, plantean algunos problemas de SEO, a menudo son incompatibles con los marcos de diseño de respuesta, no permiten la vinculación interna de páginas y no funcionan tan bien para contenido considerable.
Un sitio web de paralaje pesado debe ser evitado. Si el sitio no se carga rápidamente, los usuarios no esperarán para ver su contenido. Cree el sitio de la manera más magra posible, teniendo especial cuidado con las imágenes y los efectos.
La optimización de motores de búsqueda tiene un gran éxito con sitios web de una sola página de cualquier tipo. Debido a que la naturaleza del sitio es simple, no se puede hacer mucho para reforzar las palabras clave, crear enlaces y contribuir a la búsqueda. Donde se puede ver un impulso de SEO es a través de las redes sociales, porque los sitios que son únicos y diferentes tienden a ser compartidos.
Cuando se trata de diseño responsivo y móvil, el paralaje aún no está ahí. A menudo necesitas una pantalla grande para ver realmente los efectos. Parallax es también una técnica que funciona mejor para un proyecto con un alcance estrecho. Con demasiado contenido, puede ser abrumador rápidamente.
5 grandes sitios de paralaje
Feria Mundial de Atlantis
Abogados Express
Mario Kart
Minhacidade.me
Soleil Noir
Conclusión
Gracias a su naturaleza divertida y simple, las técnicas de diseño de paralaje son algo que vamos a seguir viendo a medida que avanza el año. El número de sitios que ya utilizan algún tipo de acciones de paralaje está creciendo a diario con más diseñadores que intentan hacerse con efectos móviles.
Es una tendencia que estoy disfrutando. Me encanta visitar un sitio por primera vez y tengo muchas ganas de jugar con el contenido para ver qué sucede a continuación. Parallax habla sobre mi naturaleza generalmente curiosa y el elemento agregado de la narración hace que este tipo de diseño de sitios web sea más divertido.
Fuentes de imagen: Ben el guardaespaldas, Honda CRV, el Proyecto Ojo Negro, Peligros del fracking, Arnold Clark y Tinke. (Recomiendo hacer clic en las imágenes mencionadas para tener una idea del alcance completo de cómo funciona el paralaje de cada sitio. Las capturas de pantalla no transmiten la belleza de cómo funcionan estos sitios).