Aprenderemos algunos recursos para lograr unos prototipos más fieles al producto final que buscamos, logrando una mejor simulación de la interacción que experimentará finalmente el usuario. También veremos cómo preparar los exports en sketch para lograr los efectos deseados.

1. 1
BCN MAD SCL MDE LIM MEXBOG MIA SFO LAX
Cómo sacar partido al prototipado con
BUE

2. 2
Mi nombre es Miquel Mir Miquel, soy de Mallorca y trabajo
en el equipo de Multiplica de Barcelona desde hace 6 años
participando sobre todo en la parte de conceptualización y
prototipado de experiencias digitales.
¿Quién soy?

3. 3
¿Qué veremos hoy?
Hoy aprenderemos algunos recursos de Invision para lograr
unos prototipos más fieles al producto final, logrando una
mejor simulación de la interacción que experimentaran
nuestros usuarios.
También veremos cómo preparar los exports en sketch para
lograr los resultados deseados.

4. 4
¿Qué es Invision?
Invision es, entre otras cosas, una
plataforma enfocada al diseño de
experiencias digitales que nos permite a los
diseñadores crear prototipos interactivos,
compartir diseños con el cliente para recibir
feedback, hacer moodboards de inspiración
y mucho más.

5. 5
Sketch Craft Plugin Invision
Herramientas

6. 6
Sketch Craft Plugin Invision
Herramientas

7. 7
Empecemos

8. 8

9. 9
1Template de hotspots
¿Qué?
Crear un template de hotspots (zonas clicables)
recursivos y reutilizables entre distintas páginas.
¿Porqué?
Porque queremos optimizar nuestro tiempo y esfuerzo
para evitar trabajar más de la cuenta.
¿Cuándo?
Cuando tenemos un menú o un bottom bar u otros
elementos interactivos que se repiten en varias páginas.

10. 10

11. 11
2Anclar cabeceras y footers
¿Cuándo?
Cuando queremos tener la navegación, un buscador o
el carrito de un ecommerce fijos, ya sea en la cabecera o
en una bottom bar en mobile.
¿Qué?
Crear elementos fijos que persiguen al usuario durante
el scroll de la página.
¿Porqué?
Porque mejoran la experiencia de navegación y pueden
fomentar la conversión manteniendo estos elementos
siempre visibles y accesibles.

12. 12

13. 13
3Anclar componentes en medio de la página
¿Cuándo?
Cuando necesitamos simular un resumen de compra en
un checkout o cuando queremos mantener un menú
lateral siempre visibles.
¿Qué?
Fijar algún elemento para que no se mueva al hacer
scroll y esté visible siempre.
¿Porqué?
Porque mejoran la experiencia de navegación y pueden
fomentar la conversión manteniendo estos elementos
siempre visibles y accesibles.

14. 14

15. 15
4Crear modales con fondo oscuro (pixel negro)
¿Cuándo?
Cuando necesitamos generar una capa modal que no
ocupa toda la pantalla y queremos mejorar el contraste
de la modal con el contenido de fondo.
¿Qué?
Crear capas modales con un fondo semitransparente
oscuro de manera rápida con el truco del pixel negro.
¿Porqué?
Porque es más rápido que configurarlo a través de los
controles de Invision.

16. 16

17. 17
5Temporizador para animaciones automáticas
¿Cuándo?
Cuando necesitamos simular animaciones o procesos
automáticos que no necesitan interacción por parte del
usuario y ocurren solas.
¿Qué?
Cambios de página automáticos que se activan
mediante un temporizador.
¿Porqué?
Porque estas animaciones o interacciones ayudan a dar
feedback y contexto al usuario de lo que pasa en
pantalla dándole más seguridad y control.

18. 18

19. 19
3 consejos extra

20. 20
1No cambies nunca el nombre de tus artboards
Porque manteniendo de manera constante el mismo
nombre de los artboards te aseguras que al sincronizar
tus archivos de Sketch con Invision, ya sea con el plugin
o de manera manual, siempre se sobreescribiran.
Si lo haces, evitarás tener páginas duplicadas en tu
proyecto de Invision o tener que replicar interacciones
que ya tenías hechas en la pantalla original.

21. 21
2Evita el típico movimiento de 1px
Muchas veces nos pasa que al copiar elementos de una
página a otra en Sketch, éstos no quedan colocados
exactamente en la misma posición.
En sketch, no nos daremos cuenta, pero al pasarlo a
invision, estos cambios de posición distraen y molestan.
Por ejemplo al cambiar de página con el menú que
hemos hecho, o en la barra de progreso, este
movimiento de 1 px generaría una distracción al usuario
que queremos evitar.

22. 22
3Vigila la resolución al exportar
Imaginemos que hemos subido a Invision todos nuestros
artboards a resolución 1x y otro día necesitamos exportar
puntualmente algún artbord a 2x para retina.
Si nos olvidamos de cambiar de nuevo a 1x, y sustituimos
los artboards de invision, el cambio de resolución
estropeará todos nuestros hotspots deformándolos.
Para solucionarlo, simplemente volvemos a subir el
archivo con la resolución original.

23. 23
¡Gracias!

24. 24
¿Preguntas?