Mostrar interacciones del sitio web al cliente

Actualmente estoy diseñando un sitio web para mi cliente. Decidí usar Sketch para preparar mesas de trabajo y la aplicación web Invision para crear un prototipo y presentarlo.

Durante el proceso de diseño planeé que algunas partes del sitio presentaran desplazamiento de paralaje. Tengo un elemento parcialmente superpuesto por elemento en la parte superior, y se volverá más y más visible después de que el usuario se desplace hacia abajo.

Ahora, ¿cómo se lo muestro al cliente? Es solo un diseño, por lo que no quiero ensamblarlo en un entorno de prueba, ya que no estoy seguro de que le guste y decida usar esa opción de diseño de todos modos, pero si es estático, todo lo que verá es una superposición. , oscureciendo elementos importantes.

En este caso, mi problema es con el desplazamiento de paralaje, pero esto se puede preguntar fácilmente sobre otros elementos, como encabezados de video o botones de desplazamiento. ¿Hay alguna manera de presentarlo como un diseño coherente y que se explica por sí mismo?

No soy un usuario de Sketch, pero una búsqueda rápida arrojó este complemento: animatemate.com . Es gratis, por lo que podría valer la pena echarle un vistazo.
@Chris ¡Suena como una de las mejores respuestas y es un comentario!

Respuestas (4)

Eche un vistazo a las herramientas de creación de prototipos como Origami Studio, Principle o RelativeWave Form. Todos estos se importan de Sketch y están diseñados para mostrar interacciones enriquecidas en una pantalla. (La desventaja de eso es que requiere más trabajo y, aparte de Principio, administrar varias pantallas puede ser incómodo).

Supongo que esto tiene que ser. Investigué un poco más sobre el tema, y ​​la aplicación inVision tiene un módulo en producción llamado motion, que se adapta exactamente a lo que necesito, pero ha pasado algún tiempo desde el anuncio y no ha mostrado muchas actualizaciones. Entonces, hasta que se integre en inVision, para tener una solución simple y concisa para mostrar las interacciones, tengo que cambiar de herramienta. El principio se ve increíble.
Además, si está dispuesto a pasar por una curva de aprendizaje relativamente empinada y usar JavaScript, aparentemente framer.js permite mucha flexibilidad. También importa desde Sketch.

Dependiendo de la relación con tu cliente, muéstrale un ejemplo de otro sitio web. Hazle entender lo que quieres hacer y trata de convencerlo de esa manera. He hecho esto muchas veces, y si puedes transmitir la misma sensación que en el sitio de ejemplo, todos estarán felices al final.

Lo haría si pudiera, pero debido a la naturaleza de la agencia para la que trabajo, no seré yo quien se lo presente a un cliente, y la persona que se lo mostrará también debe entenderlo sobre la marcha. Me encantaría una solución concisa, preferiblemente que no involucre referencias externas como se propone en su respuesta.

Desde mi punto de vista, lo siguiente no vale la pena, pero podrías hacerlo:

  • Haz una pequeña animación/gif con tu diseño que muestre cómo funcionaría. Si tiene After Effects, es una cosa de 3 clics, 2 arrastrar, 1 guardar , por lo que no llevará mucho tiempo y puede agregarlo a su archivo y presentárselo al cliente. Lo mismo ocurre con los otros elementos principales de UI/UX.

  • Encuentre un gif de Internet de un paralaje que coincida con el suyo y muéstrelo a su cliente como un concepto.

No es mucho más con una página web
@joojaa Bueno, tampoco soy fanático de que alguien más presente el sitio web, como mencionó en uno de los comentarios.
claro, pero el hecho de que sea una página web no significa que no se pueda volcar en un archivo de video. Muchos usuarios no tienen acceso a una suite de animación decente. y mucho menos AE o incluso PS que pueden hacer simples desplazamientos de paralax.
@joojaa claro, incluso puedes usar Windows Movie Maker para lograr algo decente para una presentación.
Sin embargo, un usuario de Sketch está en una Mac... así que no. No se trata realmente de qué software puede usar para hacer que la animación esté más allá de muchas personas debido a la inexperiencia.
@joojaa Nota al margen: he visto Sketch en Windows con una máquina virtual que ejecuta OSX: D. De todos modos, tienes razón al pedirle a personas sin experiencia que creen una presentación animada.

XD (Diseño de experiencia) de Adobe es una herramienta fantástica para este tipo de cosas, aunque es probable que primero tengas que reconstruirlo en XD. Todavía está en Beta, pero tiene toneladas de excelentes opciones de presentación sin tener que construir el sitio real.

Si esa no es una opción para usted, le sugiero "guion gráfico" del sitio... es decir, tome capturas de pantalla del diseño en diferentes intervalos, mostrando lo que el usuario verá a medida que se desplaza y mostrándolos en orden. No es la presentación más completa y requerirá que el presentador haga un trabajo minucioso de explicación (y algo de imaginación por parte del cliente), pero puede ser su mejor apuesta.

¿Imprimir diapositivas 2-3 transparencias y colocarlas una encima de la otra?
La exportación de Sketch a XD es posible con algunas soluciones, no es necesario reconstruir por completo. Simplemente reconstruya las partes que desea animar y deje el resto como una pieza estática. Sin embargo, XD aún no tiene animaciones flotantes, etc., que yo sepa.
Buen punto sobre el vuelo estacionario, me perdí esa primera vez. Y nunca he usado Sketch, así que no sé cuáles son las capacidades. ¡Gracias por aclararlo!