Haces todo mal: usar paralaje para hacer que tu sitio de WordPress aparezca

Durante muchos años, los sitios web se han compuesto por los mismos componentes, presentados de manera similar. Básicamente tenías tu mensaje de texto y medios. Eso es todo. Pero luego hubo elementos interactivos que permitieron a los usuarios interactuar con el texto. Efectos de desplazamiento y tales cosas. De ese deseo de interactuar con el usuario con el contenido, nacieron los efectos de Parallex. Casi todos han visto el paralaje en acción hasta ahora, pero eso no significa que todos sepan qué es, cómo funciona o para lo que se usa. Aquellos que están familiarizados con el efecto tienden a amar o odiarlo. Raramente hay un camino medio.
Cuando un elemento de diseño se ve desafiado, me hace preguntarme por qué. ¿Qué pasa con el paralaje que hace que la gente sea tan apasionada? ¿Por qué no los que no lo son? ¿Y por qué los abogados son tan entusiastas? Lo que sigue es una explicación del paralaje, qué es, cómo funciona, además de una defensa de su uso como una técnica de diseño cautivadora. Aquí, argumentaré que esta tendencia de diseño puede cautivar a su público y atraerlo a su historia o marca personal de maneras realmente sorprendentes. Y, por supuesto, incluiré muchos ejemplos de la vida real.
¿Qué es el paralaje? Parallax se atribuyó por primera vez a una estética de diseño, cuando aparecieron los videojuegos con el desfile lateral. Se refería al efecto visual creado cuando la imagen de fondo se movía más lenta que las imágenes en primer plano, creando una sensación de profundidad. Esto se aplicó luego al mundo del diseño web en 2011 a través de una combinación de HTML5 y CSS3.
El New York Times ha implementado un ejemplo popular temprano de desplazamiento de paralax en su historia de nieve.La combinación de antecedentes animados y de video creó una experiencia de historia que se sintió realmente cautivadora.Realmente no había tal cosa en la web antes.Más allá de los efectos del paralaje, la historia en sí se dividió en capítulos.Todavía hay algo para mirar.La historia del New York Times, Snowfall, es un ejemplo popular de una historia de paralaje.El concepto de diseño de Paralax es en realidad bastante simple.Agrega un elemento de tridimensionalidad a un sitio web, lo que hace que el fondo se descubra a un ritmo más lento que el primer avión cuando un usuario toma una página hacia abajo.Esto hace que parezca que el texto y las imágenes flotan sobre el fondo, agregando un elemento de interactividad que no está presente en un sitio de texto estándar en un fondo plano.
Pero el concepto es tan simple que es frustrante para algunos. El paralaje puede considerarse como un truco. Después de todo, nada sobre el contenido o sustancia de su sitio es necesariamente diferente. ¿Pero agregue ese efecto de animación y de repente todo se vuelve más atractivo? Esa noción podría estar equivocada. Un estudio en la Universidad de Purdue mostró que, aunque popular, Paralx Parade no siempre mejora la experiencia del usuario. ¿Pero cuándo sucede? ¡Oh, chico, trabajo! Los negocios y el arte de contar historias todos los negocios con una misión tienen una historia que contar. Esta historia no necesariamente tiene que ser un tipo de comprensión literal “fue una vez”, pero debe enviar un mensaje sobre su empresa de una manera que pueda relacionarse. Para algunas empresas, la historia involucra a los empresarios de la edad universitaria que construyen un negocio en su hogar. Como Facebook. Su historia tiene una narrativa sólida con la que las personas pueden relacionarse, que pueden aspirar y pueden inspirarse. Incluso hasta que su eslogan estuviera “pensando de manera diferente”, su mensaje fue sobre ser el rebelde, pensar fuera de la caja (beige) y abrazar la creatividad . Pero la historia de una empresa ni siquiera debería tener una conexión directa con su establecimiento. Más bien, puede enviar un mensaje sobre cómo los clientes y los clientes usan sus productos. La historia puede estar relacionada con el estilo de vida que conducirá a los productos de la compañía en la mano. Piensa en Apple. Su historia es de innovación y estilo.
La campaña “Think Differting” de Apple funcionó porque utilizó los mejores componentes de la historia. La historia que una empresa cuenta sobre sí misma o cómo será la vida de un cliente con su producto es un componente esencial del desarrollo de la marca y el marketing. Gran parte del trabajo de la historia estaba ocurriendo en los comerciales de las revistas, en las tiendas y en los materiales de marketing distribuidos profesionalmente. Ahora, una empresa puede transmitir su historia a una fracción del costo en línea, utilizando sus sitios web como plataformas de historias. La historia como táctica de marketing no es nueva. De hecho, cualquier buen marketing cuenta una historia u otra. Pero la historia de una historia con un narrador o personajes, una decoración y una prosa expresiva no es algo que cualquier negocio distraiga. En muchos casos, debería, y un sitio web es el lugar perfecto para hacerlo. ¿Por qué? Bien pensar:

Los sitios web son las mismas posibilidades. Cualquiera tiene una conexión a Internet puede ver su sitio. Hay muy poco muro de pago para acceder a su contenido, lo que significa que su historia puede resonar con un público más amplio.
Los sitios web proporcionan acceso ilimitado. Cualquiera puede visitar su sitio en cualquier momento del día. Un anuncio de televisión se ejecuta solo en ciertos momentos durante todo el día o de la noche, pero se puede acceder a un sitio web las 24 horas, los 7 días de la semana, aumentando exponencialmente su audiencia potencial.
Los sitios web ofrecen una plataforma interactiva. El marketing tradicional no es tan interactivo como un sitio web. Los visitantes pueden ejecutar su historia, pueden hacer clic en enlaces, ver videos, ver galerías de imágenes, etc. Pueden interactuar con su contenido de manera práctica haciendo que su mensaje sea mucho más memorable que si fueran pasivos. . Hay algunas desventajas en el uso del parallex que se ejecuta en su sitio para contar historias o incluso para proporcionar un método alternativo de navegación. El principal problema está vinculado al SEO. Los sitios de una sola página (que son la mayoría de los sitios con desfile paralelo) consisten en una sola página HTML, lo que significa que su sitio está indexado en Google. Solo tienes una etiqueta de encabezado y una sola URL. Esto puede hacer que su sitio obtenga un golpe significativo en los resultados de búsqueda, lo cual es un problema real para las empresas.
Sin embargo, muchos desarrolladores evitan esto utilizando el formato de una página para proporcionar la historia principal del sitio y continúan ofreciendo un blog tradicional para crear páginas adicionales y actualizar el contenido. Los tiempos de carga lentos también son un problema. Un sitio con antecedentes de video integrados, numerosas imágenes de alta resolución y audio puede tardar mucho tiempo en cargarse, lo que aumenta el riesgo de que los visitantes salten antes de beneficiarse de la experiencia completa.
Eso es lo que vi a Yes, una pantalla blanca, cuando intenté ver el sitio para una campaña de inicio con Gisele Bundchen. Sí. Por qué Parallax es perfecto para las historias ahora que tenemos claro por qué los sitios web hacen plataformas de historias perfectas (y por qué cada negocio tiene una historia que contar), podemos volver al tema en cuestión: Paralax. Si no está claro hasta ahora, creo que el pergamino de paralaje es el acompañamiento perfecto para una buena historia en línea. Se puede supervisar, sí, pero en su mayor parte es una herramienta efectiva. Es inmersivo una de las mayores atracciones de la contaminación de Paralax para la historia es que es totalmente cautivador. Atrae al lector desde el principio y lo alienta a correr por la página para revelar la siguiente parte de la historia. El pergamino es como girar la página del libro. Y todos sabemos lo cautivadores que pueden ser los libros.
Los peligros del fracking te llevan directamente a la historia.
Ofrece al visitante una sensación de control como se mencionó anteriormente, el desarrollo en un sitio de Paralax puede ser similar al regreso de las páginas de un libro, lo que significa que el visitante del sitio tiene control sobre lo que veo. Esto es diferente de hacer clic porque la acción del desfile no tiene interrupciones. Un movimiento simple y repetitivo revela continuamente varias partes de la historia.

Tomemos, por ejemplo, el sitio web de la NASA Prospect. Aquí hay elementos de audio y visuales en el juego, lo que lo convierte en una verdadera historia interactiva. Hay partes para hacer clic, música para tocar y leer entradas en el diario, todo en la historia desplegable creada por estudiantes de la Universidad de Dakota del Norte en colaboración con la NASA y el Programa de Humanos en Arte Espacial. También tiene un gran sonido. Permite experiencias de contenido únicas Los dos ejemplos que ya hemos proporcionado son ciertamente únicos, pero el desplazamiento por su sitio de salud es un buen ejemplo de cómo presentar información familiar de una manera original puede tener un gran impacto. A medida que avanza por este sitio, se le presenta diferentes frutas.
Como una ilustración de una naranja, combina una rebanada, aprende los atributos saludables de esta fruta. Y a medida que continúa pasando, aprenda los beneficios de una variedad de otras frutas y permanezca con la sabiduría divisoria para “comer más frutas”. Este sitio tiene un concepto simple, pero es muy efectivo como una obra de arte interactiva.

El desplazamiento por su salud está lleno de color e informativo. Hace que su contenido sea alto si intenta establecer su negocio como diferente del resto del nicho, ¿puede hacerlo creando un sitio web que se destaque en comparación con sus competidores? ¿Cuántos diseñadores web tienen un sitio de cartera estándar? Muchos, ¿verdad? Pero lo que Alquimia hizo fue crear un diseño que los distingue.
La empresa de diseño crea sitios web, aplicaciones y experiencias de diseño interactivo y elegante para una amplia variedad de clientes.Pero lo que hace que su sitio se destaque es el pergamino de paralaje y los efectos de seguimiento del cursor en su página inicial.Al desplazarse y mover el cursor alrededor de la pantalla, las estrellas de fondo se mueven en la dirección opuesta, agregando una mayor profundidad de campo.
El sitio de Alquimia agrega una capa de interactividad. Usando Parallax para contar una historia y mejorar UX ahora que comprende por qué el paralaje es tan efectivo, podemos comenzar a discutir algunas de las formas en que podemos implementarse en sitios web, especialmente en los sitios WordPress. Aquí hay algunos consejos para usar la historia de paralaje de tal manera que mejorar la experiencia general del usuario. Ofrece algo único de antemano para que una historia que utilice el desarrollo de paralaje sea realmente efectivo, debe aclarar a tiempo que su sitio es diferente de los demás. A primera vista, no debería parecerse a todos los demás sitios allí, con un menú de navegación en la parte superior y una imagen de encabezado. Quiero decir, él puede tener esas cosas, pero es una idea mucho mejor usar algo diferente para captar la atención de inmediato. Un buen ejemplo proviene del laboratorio, un portal en línea creado por Alzheimer’s Research UK para proporcionar una experiencia de aprendizaje interactiva para educar al público sobre la demencia. Una vez que haya aprobado el video introductorio, se le presenta un sitio activado para el desfile de paralaje que lo lleva a una caminata virtual a través de un laboratorio. Ayuda a las personas a comprender lo que los científicos están trabajando actualmente en la investigación de demencia e informan a las personas sobre cómo pueden ayudar. A medida que avanza a través de “Tour”, hay círculos que le permiten hacer clic en más información sobre varios temas, como la investigación sobre la demencia y cómo se ve el cerebro del microscopio. La idea es que este sitio se ve diferente de un sitio de investigación estándar, lo que lo hace alto.

Guíe al visitante a través de su historia, cualquier sitio de Paralax guiará a los visitantes por contenido de alguna manera. Sin embargo, no siempre es tan intencional como podría ser. Si intenta contar una historia, el diseño debe guiar a los visitantes a través de ella. Esto no puede ser una cosa pasiva. El pergamino debería llevar a los visitantes de un sujeto a otro de una manera lógica, como los capítulos en un libro o las oraciones en un párrafo. Particularmente me gusta el sitio web de la vida silvestre a este respecto. Wildlife está compuesto por un “equipo de pioneros digitales” que hacen sitios web y proyectos digitales que se destacan mediante el diseño de personajes, animación, medios ricos, UX e integración de UI. Su énfasis es contar la historia de una marca individual, y su sitio web guía a los visitantes a través de la historia de cómo cuentan historias. ¿Cómo es esto para meta? El cursor se transforma en un botón “abajo”, por lo que siempre sabe lo que seguirá y hay muchos widgets de presentación/video con los que los usuarios pueden interactuar. Con efectos de desfile de múltiples capas que lo llevan a través de una cronología, un lanzamiento de la transmisión y un aterrizaje en la luna, pronto olvidará este sitio o la historia que cuenta. Haga más de “una página” Hay una gran cantidad de una página, una gran cantidad de ellos utilizando el desplazamiento de paralaje para transportar a los visitantes de una sección a otra. Sin embargo, muchos son solo sitios básicos, pero en lugar de páginas, tienen secciones de desfile. Debe haber una narrativa real para el pergamino de paralaje que se eleva a una técnica de historia.
Brewlife adopta todo lo mejor en el paralaje de una página y los sitios tradicionales con múltiples páginas. Consulte el sitio web de la agencia de marketing de Brewlife. Es un sitio de cartera, seguro, pero aquí hay una historia clara. La forma en que el paralaje se usa sutil para alentar a los visitantes a profundizar sobre lo que es la empresa y la forma en que se acerca el trabajo del cliente es convincente. Y ni siquiera es un sitio de una página. Tiene un blog y páginas individuales para muestras. ¿Y la mejor parte? Fue construido usando el tema de los temas elegantes. Anime a los visitantes a preguntar “¿Qué sigue?” Cualquier buena historia debería hacer que el lector gire la página; Para preguntarse qué pasará después. Su sitio de Paralax debe hacer lo mismo a través del contenido y/o navegar. Algunos sitios optan por dejar navegando solo desplazándose. Sin embargo, esto no siempre es suficiente. A veces, incluida la navegación con contenido puede ser útil para que los visitantes descubran dónde están en la historia. Esto también les ofrece un cierto control para detenerse si lo desean.

La historia “Barça” hace que los visitantes pregunten literalmente “¿Qué sigue?” a través de imágenes convincentes e texto inmersivo e índices textuales.
Las flechas hacia abajo también son útiles para indicar literalmente a los visitantes a dónde deben ir. Y en casos como la experiencia de la historia narrativa del barco, existe la palabra “desplazamiento” con una flecha hacia abajo, por lo que no hay duda sobre lo que debe hacer a continuación. Haruki Murakami, es un novelista muy respetado, conocido por sus obras, como el país de Hard-Hered y el fin del mundo. Tiene un sitio que hace que los lectores pregunten “¿qué sigue?” Construido en el tema inicial subrayado, cada implementación en este sitio revela otra cita, otro libro, otra característica para explorar. Las conexiones anteriores lo dirigen a los mismos lugares, pero el pergamino es enigmático y bastante cautivador. Haruki Murakami utiliza un diseño único para mantenerse actualizado.

Mantenga a los visitantes de su sitio por más tiempo, esta es exactamente la idea de alentar a los lectores a preguntar “qué sigue”, discutido anteriormente. Un buen sitio de Paralax puede mantener a los visitantes en su sitio mucho más de lo que harían en un sitio tradicional. Debido a que el énfasis está en el pergamino, ¡es más probable que corra por la página y disfrute del viaje allí!

El estado prolongado del sitio significa que debe priorizar las exhortaciones y mostrarlas en diferentes puntos a lo largo de la página.El sitio web de la aplicación ahora falta a Ben the Bodyguard deja a CTA justo en la parte inferior de la página, que está de acuerdo con la copia tradicional de la forma larga.Y, en este caso, funciona seguro porque hay una narración clara que sigues mientras Ben camina por las desagradables calles de la ciudad.Sin embargo, si la historia que cuenta no es tan lineal, podría ser una buena idea presentar un CTA antes, o alejarse del contenido principal, para capturar a los clientes potenciales a medida que los visitantes corren hacia abajo (y abajo y hacia abajo).). Este sitio de bebidas lúdicas mantiene a los visitantes involucrados en la parte inferior de la página.
Otro ejemplo proviene de los creadores de Seltzer de Cepinos, Cornelius Kump. El sitio fue creado como un tema secundario para el tema de una sola página, Tides. Todo sobre este sitio imita los sitios web de los mejores proveedores de alcohol, mientras mantiene una ventaja juguetona. ¿Mustati Green Pepinos, alguien? Antes de correr, está la palabra “¿Curioso?” Con una flecha hacia abajo, lo que te atrae a obtener más información. Una vez que hace clic, se lo lleva a la historia de origen de la compañía y, a medida que ejecuta, las imágenes en negrita, los fondos texturizados y la personalidad se desvanecen. Mantiene que la revista Pitchfork de los elementos de navegación tradicionales es una revista musical en línea que cubre lo que está sucediendo en el mundo de la música (con un poco de nostalgia introducida) que ofrece artículos de estilo tradicionales y contenido de noticias. La navegación en todo el sitio es como era de esperar, con un menú principal en la parte superior y los títulos e imágenes presentadas en un aspecto de mampostería. Hemos estado hablando de historias de portada de Paralax de Pitchfork y es fácil entender por qué.

Pero también tiene una función llamada “historias de portada” que es muy impresionante (si no lo ha revisado antes, ¡hágalo ahora!). Las historias se enumeran al estilo del blog, pero una vez que hace clic, ya no es como lo vio antes. Estas historias de paralaje son súper simples, pero la combinación de texto en dos columnas, grandes citas, imágenes y videos de fondo las hacen destacar. Hay mucho que decir sobre el cine sutil aquí, pero la forma en que todo se combina con los efectos de paralaje es simplemente hermoso. Además, hay un menú de cajones en el lado izquierdo de la pantalla para el acceso directo a la música del artista presentado. Sea creativo en la forma en que usa los efectos estratificados debido a la ilusión de la profundidad que le brinda el diseño, puede crear un efecto de múltiples capas cuando se ejecuta un usuario. Sí, el fondo se mueve más lento que el texto anterior, pero puede jugar aún más con esto con imágenes que se pliegan en primer plano, un texto que se desliza y secciones que parecen rodar sobre el fondo. Es bastante fácil superarlo.
Risen Church utiliza una estratificación sutil para construir una experiencia de usuario dinámica e interactiva. El sitio web de la Iglesia Risen es un buen ejemplo de cuán efectiva puede ser la estratificación mínima. Fue construido usando un tema personalizado. Para empezar, hay un fondo de video con un título en negrita y un enlace a un elemento similar. Pero a medida que ejecute, notará que la navegación principal para las secciones en la página de inicio es pegajosa en la parte inferior de la ventana de observación. A partir de ahí, se le recibe con más imágenes en todo el ancho con texto y enlaces superpuestos. No pasa realmente nada aquí, pero el aspecto general es efectivo y cautivador. Además, la navegación es lo suficientemente familiar para no confundir a los visitantes. Los efectos de estratificación desencadenados por la oferta del desfile son la campaña más humana de Reebok More Dimension.

“Be más experiencia humana” en el sitio web de Reebok es otro buen ejemplo. Aunque no hay tantas ilusiones de profundidad de campo en el juego aquí, cada desplazamiento desencadena un efecto deslizante. El fondo cambia y el nuevo contenido aparece en el lugar. Es dinámico y ligeramente no tradicional, lo que hace que las capas sean aún más atractivas. Herramientas de trabajo Si desea implementar la narración de paralax en su sitio web de WordPress, es una buena idea familiarizarse con cómo funciona todo su concepto. Siguiendo algunos tutoriales básicos, le dará una idea de cómo todas las partes van juntas. Si opta por construir un sitio desde cero, puede usar un tema o enchufe en cualquier momento, pero los alcanzaremos a la vez. Aquí hay algunos tutoriales y artículos útiles para consultar:
Sitios web de paralaje CSS puro: un hermoso tutorial para crear efectos de paralaje utilizando exclusivamente CS.

Una guía de bricolaje para llevar la historia de WordPress a nuevas alturas: si te gustó la historia de portada que mencioné de la revista Pitchfork arriba, aprenderás a crear una desde cero como aquí.
Ahora, en complementos y temas … arados y temas de paralaje han formado una maravillosa lista de temas y complementos de paralaje que atraen la atención que puede verificar. Hay una variedad bastante grande y definitivamente encontrarás una que se adapte a tus necesidades. La conclusión reconoce completamente que el diseño de Paralax no es para todos. Pero solo porque el estilo se puede usar mal, no significa que deba evitarlo. De hecho, como herramienta de historia, el paralaje puede ser sorprendente y puede capturar la imaginación del visitante de manera nueva y atrevida. Lo que significa que puede ser muy efectivo como medio para aumentar las visitas al sitio, las visitas de regreso y las conversiones. Créditos de imagen: Enrico Strocchi, George Vale
Ahora quiero saber de ti. ¿Crees que el paralaje tiene un lugar bien merecido en el diseño del sitio o lo has superado? ¿Pero como herramienta de historia? ¿Y cuáles son algunos de tus ejemplos favoritos? Sol de abajo.

Etiquetas:
diseño

Paralax
historia

WordPress