La presentación de diseños es uno de los requisitos centrales en el desarrollo de aplicaciones. Los desarrolladores dependen de tus diseños para implementar la aplicación con éxito. En esta guía, te mostraré cómo puedes publicar tus diseños sin esfuerzo en InVision, para que tu equipo de diseño siempre tenga acceso a las versiones más actuales. Con InVision, te aseguras de que tus ideas se visualicen y comuniquen de manera óptima, mientras puedes incorporar cambios de manera sencilla.
Principales conclusiones
- InVision permite una fácil sincronización y presentación de diseños.
- Puedes exportar tus diseños directamente desde Sketch y subirlos a InVision.
- La herramienta ofrece varios modos para ver e interactuar con prototipos.
- Las funciones de retroalimentación y comentarios apoyan la colaboración entre diseñadores y desarrolladores.
Guía paso a paso
Paso 1: Crear un nuevo proyecto en InVision
Primero, abre InVision y crea un nuevo proyecto. Para ello, selecciona la opción para crear un "Prototipo" y elige la plantilla de iPhone para presentar tus diseños de manera óptima en dispositivos móviles. Selecciona "Mobility Stream Udemy" como nombre del proyecto y haz clic en "Crear".
Paso 2: Exportar diseños desde Sketch
Después de configurar tu proyecto, importa tus diseños desde Sketch. En este proceso, debes asegurarte de seleccionar los artboards correctos y subirlos a InVision. Puedes arrastrar y soltar los archivos directamente en el proyecto de InVision. Es importante elegir el formato de exportación correcto en Sketch para evitar complicaciones.
Paso 3: Instalar el plugin de InVision
Para simplificar el proceso de sincronización, debes utilizar el plugin de InVision para Sketch. Instala el plugin, inicia sesión con tu cuenta de InVision y activa la opción de sincronización. Esto te permitirá transferir cambios de diseño directamente desde Sketch a tu proyecto de InVision, sin necesidad de subir los archivos manualmente.
Paso 4: Dotar de interfaces a los artefactos
Ahora puedes crear la interfaz de usuario de tu aplicación y dar forma interactiva a las distintas pantallas. Haz clic en los botones en el modo de construcción para crear hotspots que simulen la navegación en la app. Puedes seleccionar diferentes transiciones como "Deslizar" o "Instantáneo" para representar la experiencia del usuario de manera realista.
Paso 5: Definir las transiciones
Cuando hayas agregado interacciones, es importante definir las animaciones correctas para las transiciones entre las pantallas. Aquí puedes seleccionar el tipo de animación que se activará al cambiar a otra pantalla. Asegúrate de que estos detalles estén claros y precisos para los desarrolladores, para que puedan implementar el comportamiento deseado.
Paso 6: Definir colores y fondos
Debes asegurarte también de que todos los colores de fondo y detalles estilísticos sean correctos. A menudo se olvida definir los colores de fondo en los archivos de Sketch. Revisa cada pantalla y verifica si los fondos que has previsto en el diseño se muestran correctamente en InVision. Asegúrate de que todo se vea armonioso.
Paso 7: Sincronización y actualización
Después de realizar todos los cambios, es hora de sincronizarlos. Guarda los cambios en Sketch y haz clic en el botón de sincronización en el plugin. Esto actualizará automáticamente tus nuevas pantallas y ajustes en InVision. Ten en cuenta que este proceso puede llevar un tiempo.
Paso 8: Recoger feedback
Utiliza la función de comentarios y feedback en InVision para aclarar dudas generales sobre tus diseños. Puedes agregar un comentario directamente en el prototipo, que luego podrá ser respondido por otros miembros del equipo. Esto es especialmente útil para asegurarte de que tu diseño cumple con el briefing y se satisfacen todas las expectativas.
Paso 9: Cierre de la presentación
Por último, debes probar tus diseños y asegurarte de que todo funcione correctamente. Revisa todos los hotspots que has creado y simula la interacción para obtener experiencias desde la perspectiva del usuario. Así te aseguras de que la imagen general sea coherente antes de presentarla a tu equipo o a los desarrolladores.
Resumen - Publicar diseños con éxito en InVision
En esta guía has aprendido cómo publicar tus diseños paso a paso en InVision. Has visto lo fácil que es trabajar con InVision y cómo puedes aumentar la eficiencia de tus transferencias de diseño. Una preparación cuidadosa y el uso de funciones útiles te ayudarán a gestionar tus proyectos con éxito y proporcionar la información necesaria a tus desarrolladores.
Preguntas frecuentes
¿Cómo instalo el plugin de InVision para Sketch?Descarga el plugin desde el sitio web de InVision y sigue las instrucciones de instalación.
¿Cómo sincronizo diseños desde Sketch con InVision?Guarda tus cambios y haz clic en el botón de sincronización en el plugin de InVision para subir los diseños.
¿Qué fondos deben usarse en los diseños?Utiliza colores de fondo únicos para todas las pantallas, para asegurarte de que se muestren correctamente en InVision.
¿Puedo recoger feedback directamente en InVision?Sí, puedes añadir comentarios a tu prototipo y recibir retroalimentación de otros miembros del equipo.
¿Qué puedo hacer si las animaciones no funcionan correctamente?Revisa la selección de transiciones y prueba cada pantalla para asegurarte de que todo funcione como se desea.
