InVision Studio: descripción general y revisión

InVision Studio es una herramienta de creación de prototipos y animación que le permite crear rápidamente diseños de pantalla avanzados basados ​​en vectores gracias a capas flexibles y un lienzo infinito. Se considera una de las mejores herramientas de creación de prototipos de alta fidelidad que existen. Con InVision Studio, puede acelerar su flujo de trabajo; crear prototipos interesantes e interactivos; comunicar sus diseños al equipo y clientes; prueba tus diseños; y elimine preguntas, inquietudes 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 conectarse, almacenar y compartir su flujo de trabajo completo de diseño de productos, e InVision DSM, un administrador y biblioteca de sistemas de diseño donde puede almacenar y controlar todos sus componentes de marca y UX. InVision Studio se puede utilizar en Mac y Windows. También puede importar archivos de Sketch.

Características de InVision Studio

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

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.

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 inteligente de imágenes, recorta automáticamente las imágenes a medida que cambia de tamaño. Es similar a crear un relleno de imagen en Sketch y luego configurarlo para «rellenar», 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, un rectángulo o un 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.

Fuente: LearnInVisionStudio.com

Corrige los elementos a medida que te desplazas.

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

Vincule varias mesas de trabajo en una sola animación.

El temporizador le da control sobre varias mesas de trabajo que desea convertir en una sola 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 directa a otra parte de su diseño. Las animaciones complejas como esta son ideales para intros y outros de video.

Cree activadores de deslizamiento para animaciones de paralaje.

Los disparadores de deslizamiento pueden crear efectos de paralaje y otros tipos de animaciones que ocurren en el desplazamiento.

Cree prototipos receptivos sin escribir código.

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

Fuente: LearnInVisionStudio.com

Duplica 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.

Use atajos similares a Sketch.

Si actualmente usa Sketch, entonces ya estará familiarizado con los accesos directos que usa InVision Studio; casi todos son iguales, especialmente cuando se trata del inspector, las capas y la barra de herramientas.

Alternar entre temas claros y oscuros.

Es posible que los no diseñadores no se den cuenta de lo útil que es esta característica. Cuando está diseñando una interfaz clara, el contraste adicional 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 circuito.

Diseño con InVision Studio en un navegador

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

diseñar 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
  • Ajustes
  • Comentarios
  • Compartir

Editar encabezado

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

Reemplacé la imagen y el texto, los desdibujé un poco y agregué una ligera superposición para que el texto se destaque. Me encanta especialmente la opción «Tamaño»: simplemente pasa el mouse sobre él y selecciona entre tres tamaños.

Establecer tipo de diseño

Luego cambié el tipo de diseño a «Meticulous». Esto es para los bloques de contenido debajo del encabezado, que aparecerán a medida que te desplazas hacia abajo.

Edición de secciones adicionales

Si se desplaza a la derecha del título de la sección, verá tres iconos. 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.

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

Al pasar el cursor sobre un bloque de contenido, verá las opciones de cambio de tamaño nuevamente, 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.

Creación de un prototipo

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

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 comentario
  • Modo de inspección
  • Modo Historia
  • compartir social
  • Cargar pantallas
  • Configuración
  • Estado de la pantalla

Modo a mano alzada

El modo Freehand 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 pueden dibujar y agregar texto al proyecto en tiempo real.

Precios de InVision Studio

El plan gratuito incluye un prototipo con colaboradores y pantallas ilimitados. Si eso es todo lo que necesita, entonces 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, deberá actualizar para crear y usar prototipos adicionales. Si desea actualizar, aquí están sus planes:

Pensamientos finales

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

Sin embargo, cuando se trata de creación 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 a más orientación. (Ahora, dicho esto, he leído reseñas que dicen lo contrario, así que supongo que es una cuestión de gustos). Hay muy pocas conjeturas con InVision Studio, y puede ir directamente a lo que está allí para hacer: crear.

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

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