InVision Studio: una visión general y revisión


InVision Studio es una herramienta de creación de prototipos y animación que le permite crear diseños de pantalla avanzados basados ​​en vectores rápidamente gracias a capas flexibles y un lienzo infinito. Se considera una de las mejores herramientas de creación de prototipos de alta fidelidad. Con InVision Studio, puede acelerar su flujo de trabajo; crear prototipos interesantes e interactivos; comunique sus diseños al equipo y a los clientes; prueba tus diseños; y resolver preguntas, preocupaciones y cambios de diseño antes de la etapa de desarrollo.

InVision Studio es parte del conjunto de herramientas de InVision, que también incluye InVision Cloud, donde puede conectar, almacenar y compartir su flujo de trabajo de diseño de producto completo, e InVision DSM, un administrador de sistemas de diseño y biblioteca donde puede almacenar y controlar todos sus marca y componentes UX. InVision Studio se puede usar en Mac y Windows. También puede importar archivos de croquis.

InVision Studio

Características de InVision Studio

Después de descargar la aplicación InVision Studio, podrá elegir entre varios proyectos para crear. Después de elegir lo que desea diseñar, obtendrá un recorrido por la interfaz.

InVision Studio

InVision Studio

Para agregar una capa o componente, haga clic en el signo más en la parte superior. Cuando agrega un componente, todas sus opciones aparecen a la derecha.

InVision Studio

InVision Studio

Repasemos algunas de las características notables de InVision.

Cambiar el tamaño y recortar imágenes sin máscaras.

Esta característica, llamada recorte de imagen inteligente, recorta automáticamente las imágenes a medida que cambia el tamaño. Es similar a crear un relleno de imagen en Sketch y luego configurarlo como "relleno", pero en menos pasos y de una manera más intuitiva. El recorte inteligente de imágenes es para imágenes con un punto focal cerca del centro. También es mejor si desea recortar en un círculo, rectángulo o rectángulo redondeado. Para las imágenes que tienen un punto focal diferente o una forma más interesante, querrá crear una máscara para acceder a más opciones de personalización.

InVision Studio

Fuente: LearnInVisionStudio.com

Repara elementos a medida que te desplazas.

Arreglar el encabezado y el pie de página no es nuevo para InVision, pero arreglar otros elementos sí lo es. Establezca el desplazamiento en horizontal, vertical o ambos, luego elija el elemento que desea arreglar haciendo clic en el icono de pin en la esquina superior derecha.

Enlace varias mesas de trabajo en una animación.

El temporizador le da control sobre múltiples mesas de trabajo que desea convertir en una animación. También puede repetir una animación para que la última mesa de trabajo apunte a la primera. O bien, puede tener una animación de varios pasos directamente a otra parte de su diseño. Animaciones complejas como esta son ideales para introducciones de video y outros.

Crea disparadores de deslizamiento para animaciones de paralaje.

Los activadores de deslizamiento pueden crear efectos de paralaje y otros tipos de animaciones que se producen en el desplazamiento.

Cree prototipos receptivos sin escribir código.

Con prototipos receptivos, puede hacer que todo esté basado en porcentajes y cambiar el tamaño de cada elemento según el tamaño de la mesa de trabajo. Luego puede crear prototipos que respondan a todo tipo de pantallas. Esto facilita la creación de maquetas de diferentes tamaños. Además, establecer un diseño como "redimensionable" en Studio lo redimensionará automáticamente cuando se vea en el navegador.

InVision Studio

Fuente: LearnInVisionStudio.com

Refleja prototipos en tu teléfono.

Si desea probar una animación o prototipo en su teléfono, puede compartirlo, seleccionar "espejo" y luego escanear el código QR en la aplicación móvil.

InVision Studio

Use atajos similares a bocetos.

Si actualmente usa Sketch, ya estará familiarizado con los atajos que utiliza InVision Studio: casi todos son iguales, especialmente en lo que respecta al inspector, las capas y la barra de herramientas.

Alternar entre temas claros y oscuros.

Los no diseñadores pueden no darse cuenta de lo útil que es esta característica. Cuando diseña una interfaz clara, el contraste agregado de un tema oscuro puede ser útil (y viceversa).

Colabora con el equipo en tiempo real.

La colaboración y el flujo de trabajo se simplifican, y los miembros del equipo pueden diseñar y comentar en tiempo real. Con sincronización global y actualizaciones en tiempo real, nadie estará fuera del ciclo.

Diseñando con InVision Studio en un navegador

Quiero mostrarle rápidamente cómo es trabajar con la versión del navegador de InVision Studio. Repasaremos brevemente el diseño de un tablero, la creación de un prototipo y el uso del modo a mano alzada.

Diseñando un tablero

Su centro de comando está en la parte superior derecha de la pantalla. Los cinco iconos representan:

  • Editar encabezado
  • Establecer tipo de diseño
  • Configuraciones
  • Comentarios
  • Compartir

InVision Studio

Editar encabezado

Jugué un poco con el encabezado. Después de hacer clic en "Editar encabezado", aparecieron estas opciones:

Aplicación InVision

Reemplacé la imagen y el texto, lo borré un poco y agregué una ligera superposición para que el texto se destaque. Especialmente me encanta la opción "Tamaño": simplemente pasa el mouse sobre ella y selecciona entre tres tamaños.

Aplicación InVision

Aplicación InVision

Establecer tipo de diseño

Luego cambié el tipo de diseño a "Meticuloso". Esto es para los bloques de contenido debajo del encabezado, que se mostrarán a medida que se desplaza hacia abajo.

Aplicación InVision

Aplicación InVision

Edición de secciones adicionales

Si pasa el cursor a la derecha del título de la sección, verá tres íconos. La flecha hacia abajo es "Mover sección hacia abajo" y la "X" es "Eliminar título de sección". Si lo elimina y luego cambia de opinión, puede pasar el cursor sobre la misma área y tendrá la opción de agregar un nuevo título de sección.

Aplicación InVision

Al hacer clic en el signo más a la derecha de la flecha y "X", obtendrá un nuevo menú. De izquierda a derecha, los iconos representan:

  • Agregar una muestra de color
  • Agrega una nota
  • Subir archivo

Aplicación InVision

Al pasar el cursor sobre un bloque de contenido, volverá a ver las opciones de cambio de tamaño, como con el encabezado. Al seleccionar un tamaño diferente, se actualizará automáticamente el resto del diseño para volver a colocar los bloques. Al hacer clic en un bloque de contenido, se abre una ventana a la derecha.

Al pasar el cursor sobre uno de los colores de la barra, se mostrará su código de color. Esta ventana también es donde los miembros del equipo pueden dejar un comentario sobre este bloque de diseño en particular.

Crear un prototipo

También jugué con la demostración del prototipo, solo para mostrarles cuáles son las opciones.

Aplicación InVision

Aplicación InVision

Aquí, su centro de control está en la parte inferior. Comenzando con el ícono del ojo de izquierda a derecha, los íconos son los siguientes:

  • Modo de vista previa
  • Modo de construcción
  • Modo de comentario
  • Modo de inspección
  • Modo de historia
  • compartir social
  • Subir pantallas
  • Configuración
  • Estado de la pantalla

Modo a mano alzada

El modo a mano alzada comienza con una demostración interactiva para mostrarle rápidamente cómo usarlo. Luego, trabajas con un lienzo infinito para armar tu proyecto. Si está trabajando en la aplicación, puede enviar el enlace "Colaborar en vivo con Freehand" a un miembro del equipo y ellos pueden dibujar y agregar texto al proyecto en tiempo real.

InVision Studio

InVision Studio

InVision Studio

Precios de InVision Studio

El plan gratuito incluye un prototipo con colaboradores y pantallas ilimitados. Si eso es todo lo que necesita, nunca tendrá que pagar. Las demostraciones no cuentan para el límite. Si diseña más de un prototipo, obtendrá seis días de acceso gratuito para crear prototipos ilimitados. Después de eso, tendrá que actualizar para crear y usar prototipos adicionales. Si desea actualizar, estos son sus planes:

InVision Studio

Pensamientos finales

En comparación con otras herramientas de diseño, es posible que InVision Studio sea un poco lento y, a veces, tenga errores, eso no quiere decir que sea lento en general, simplemente más lento (a veces) que otras herramientas similares, como Adobe XD, Figma y Sketch. No experimenté personalmente ese problema, pero aparece mucho en las reseñas. Además, InVision Studio no ofrece soporte de complementos, así que si eso es algo que es importante para usted, considere Sketch en su lugar.

Sin embargo, cuando se trata de prototipos, InVision Studio es difícil de superar, especialmente si tiene que colaborar con un equipo. Puede que no sea tan potente como Adobe XD, pero sigue siendo una de las mejores herramientas de creación de prototipos que encontrará.

La interfaz de InVision Studio es fácil de aprender y usar, y los íconos son elegantes y modernos. También hay mucha ayuda con tutoriales, recorridos y enlaces para obtener más orientación. (Ahora, dicho esto, he leído reseñas que dicen lo contrario, así que supongo que es cuestión de gustos). Hay muy pocas conjeturas con InVision Studio, y puedes ir directamente a lo que estás allí para hacer: crear.

Al diseñar, una regla de oro es usar la proporción áurea. Echa un vistazo a mi guía definitiva para usar y comprender la proporción áurea.

Imagen destacada a través de Visual Generation / shutterstock.com