Déjame mostrarte mi herramienta de creación de prototipos favorita

May 09 2022
Mientras estoy en eso, también lo guiaré a través de mi proceso de diseño de interacción.
Llevo más de una década diseñando productos digitales para saber que la herramienta es menos importante que el proceso. Creo que siempre que logre el resultado que está buscando, puede usar el software que más le convenga.
Imagen por autor

Llevo más de una década diseñando productos digitales para saber que la herramienta es menos importante que el proceso. Creo que siempre que logre el resultado que está buscando, puede usar el software que más le convenga.

No es mi intención hacer una lista de comparación de los pros y los contras de cada herramienta para ayudarlo a decidir cuál usar para sus necesidades de diseño de productos (pero si puedo ayudarlo con eso en el camino, excelente). Antes de compartir parte de mi experiencia en la construcción de prototipos interactivos, quiero enfatizar esto:

Cuando se trata de desarrollo de productos, donde el trabajo en equipo, la colaboración en tiempo real y la experiencia del cliente son fundamentales, debe considerar sus opciones y reevaluar continuamente si el software que eligió satisface mejor no solo sus necesidades. Trabajar con herramientas específicas con las que se siente cómodo no significa que hagan el mejor trabajo posible para todos los demás. Mantenlo en mente.

Ahora hablemos de algunas de mis herramientas de diseño favoritas.

He usado Sketch para diseñar interfaces de productos y sistemas durante muchos años, pero nunca miré hacia atrás una vez que cambié a Figma . La rápida colaboración en equipo y la gestión de archivos en la nube fueron las dos razones principales del cambio.

Aunque probé docenas de herramientas de diseño de interfaz de usuario además de Figma y Sketch, como InVision, Adobe XD, Marvel y Framer, por nombrar algunas, no sucedió lo mismo con la creación de prototipos. He sido un gran admirador de uno en particular desde que jugué con él por primera vez en 2015.

Antes de toparme con Principle , mis diseños eran muy estáticos. Para comunicar a los desarrolladores cómo deberían implementar las transiciones entre elementos o páginas, tenía que escribir las especificaciones o hacer varias pantallas cuadro por cuadro para demostrar cómo imaginé los eventos de interacción.

Pero, ¿y si, en lugar de contarlos, pudiera mostrárselos? Así que decidí aprender cómo.

Aprendizaje a través de pequeños experimentos e intercambio de conocimientos.

Cuanto más usaba Principio, más me obsesionaba con las microinteracciones. Crear esos pequeños experimentos me permitió expresar mi creatividad y pensamiento de producto y me convirtió en un mejor diseñador de UX.

Lee más sobre estos proyectos y otras animaciones de microinteracción en mi sitio web ‍

Una vez que entendí la mecánica de Principle, me sentí muy cómodo construyendo las animaciones con el nivel de detalle que quería. La complejidad de los prototipos se expandió exponencialmente con la calidad de los resultados. Me permitió llevar mi trabajo al siguiente nivel.

Recuerdo ser un ávido defensor de Principio cuando publiqué activamente en Dribbble hace un par de años. Solía ​​​​compartir los archivos de código abierto de cada proyecto personal en el que trabajaba, para que cualquiera pudiera probar y crear su versión.

Esa fue mi forma de retribuir a la comunidad por las interminables páginas de trabajo inspirador creado por personas de todo el mundo. Fue enriquecedor recibir comentarios positivos sobre el trabajo que compartí y ver a otros diseñadores aprender de mis prototipos. ¡Qué momento tan divertido!

Cómo construyo prototipos en Principio

Principio es una herramienta de creación de prototipos "sin código". Nunca diseño interfaces con él (aunque se puede, pero no creo que esté optimizado para eso). Siempre importo la interfaz de usuario de Figma.

Paso 1: Bases

Antes de profundizar en los detalles de la animación y las transiciones, trabajo en la base de la interfaz. Es fundamental conocer y comprender la estructura principal y la navegación del prototipo antes de centrarse en los elementos visuales.

  • Wireframes: dibujar en una hoja de papel me ayuda a ver el panorama general.
  • Interfaz de usuario de baja fidelidad: a veces, es útil hacer la transición de los esquemas a una interfaz más amigable antes de ejecutar una prueba de usuario de clics rápidos. No se necesitan colores ni imágenes en este punto.
  • Prototipo click-through: Es fundamental validar la idea y asegurarse de que la navegación tenga sentido para evitar reelaboraciones.
  • Interfaz de usuario de alta fidelidad: una vez que tengo la interfaz de usuario final, es hora de llevar el prototipo al siguiente nivel.

Esta siempre ha sido mi parte menos favorita del proceso. No encuentro la función de "importación" incorporada lo suficientemente coherente, ya que a veces desalinea elementos o presenta otros problemas. Por lo tanto, tengo que reconstruir la interfaz yo mismo.

Sí, sé que es mucho trabajo, pero merece la pena, al menos para mí. Cuando necesito incorporar videos, animaciones en bucle y eventos interactivos complejos, no puedo hacerlo todo con Figma.

Paso 3) Trabajar con controladores y paneles Animate

Ellos son tus mejores amigos. Comprender cómo funcionan es todo lo que necesita para comenzar.

Controladores : funcionan de manera similar a una línea de tiempo, animando en función de una propiedad cambiante (usando fotogramas clave) dentro de la misma mesa de trabajo. Son excelentes para arrastrar, desplazar o paginar eventos. Usé Drivers para crear el efecto de paralaje para elproyecto de conceptoNike Ads

Proyecto conceptual de un anuncio móvil de página completa de Nike. Este fue uno de mis tiros más populares en Dribbble
Captura de pantalla de la interfaz de Principle que muestra el panel "Controladores" y todos los eventos utilizados para crear el efecto de desplazamiento Parallax

Animate : Se utiliza para personalizar animaciones entre páginas. Similar a un evento de "antes" y "después". Si dos capas en diferentes páginas tienen el mismo nombre, pero diferentes propiedades, se animarán automáticamente durante una transición. Es ideal paraclic,desplazamientooprensa. Utilicé Animate para crear el efecto de transición entre páginas para elproyecto de conceptositio web de la clase de fotografía

Obra inspirada en el artículo Dribbble Trend de Muzli de 2017 — Mondrianizm. Lee más en mi sitio web ‍
Captura de pantalla de la interfaz de Principle que muestra los eventos del panel "Animar" para crear las transiciones de página

¿Por qué no utilizo otras herramientas de diseño de movimiento, como After Effects, para crear estas animaciones? Porque Principle es más rentable y tiene una interfaz sencilla. Fue diseñado principalmente para la creación de prototipos y tiene la ventaja de una aplicación móvil complementaria que me permite realizar pruebas directamente en el dispositivo para el que estoy diseñando.

notas finales

Figma es una excelente herramienta de diseño con poderosas capacidades de creación de prototipos que sigue mejorando con cada nueva actualización. Es mejor para la colaboración en equipo y la retroalimentación contextual. Por esa razón, Figma es mi herramienta preferida porque me permite construir un prototipo bastante decente y realista, todo en el mismo espacio de trabajo.

Por otro lado, Principle es mi elección personal para crear prototipos con eventos interactivos avanzados y animaciones de interfaz de usuario complejas combinadas con fragmentos de video y GIF animados. Es mi software de creación de prototipos sin código favorito que guardo en mi bolsillo trasero para proyectos especiales.

¿También eres fan de Principio? Házmelo saber en los comentarios.

Feliz creación de prototipos, y gracias por leer.

¡Mantente increíble!

© Copyright 2021 - 2022 | unogogo.com | All Rights Reserved