La caja de herramientas del diseñador del producto

Cuando cada pregunta tiene innumerables respuestas diferentes, las cosas se vuelven confusas. Rápido.

Prefacio

Los carpinteros usan sus martillos favoritos. Los desarrolladores usan sus IDEs favoritos. Los médicos usan sus ... estetoscopios favoritos?

¿Qué usan los diseñadores de productos?

Como diseñador relativamente nuevo, me siento abrumado cuando busco la herramienta adecuada para una tarea específica. Cuando hay múltiples respuestas para cada pregunta, las cosas se vuelven confusas. Rápido. Hasta que me aventuré en el maravilloso mundo del diseño de productos, mis principales herramientas fueron las siguientes:

  • Pluma y papel
  • Cortador de cajas
  • InDesign
  • Ilustrador

Por supuesto, estaba usando estas herramientas principalmente para mis cursos en la universidad, que estaba orientada a la artesanía física. Saqué mi parte justa de todas las noches midiendo, cortando y volviendo a cortar. Encolado, pelado y re-pegado. Fue un proceso doloroso y repetitivo, pero valió la pena. No me malinterpreten, me encanta el diseño de impresión y me encanta crear un diseño a partir de objetos físicos reales. No estoy tratando de llamar a los diseñadores que trabajan de esa manera, pero me he enamorado del producto y el diseño * ~ digital ~ *. Desafortunadamente, mi escuela no tenía un plan de estudios centrado en el diseño web / móvil aparte de un curso (Diseño de interfaz de usuario ... con Photoshop ).

Entonces, para alcanzar el título de Diseñador de Producto, tuve que sumergirme completamente y enseñarme lo básico. Como mencioné anteriormente, esta es una tarea desalentadora, especialmente para un nuevo diseñador, pero también divertida. Esperemos que este artículo responda algunas de las preguntas que los nuevos diseñadores puedan tener sobre el diseño del producto y las herramientas que lo acompañan.

Descargo de responsabilidad: no habrá opciones definitivas en este artículo. Cada diseñador trabaja de manera diferente, y las herramientas que recomiendo pueden no ser las mejores para usted. Este artículo solo tiene como objetivo ayudarlo a encontrar la herramienta adecuada para el trabajo correcto en su flujo de trabajo.

Foto: Štefan Štefančík

Lluvia de ideas e ideación

Pluma y papel

Cuando el autor inglés Edward Bulwer-Lytton inventó la frase, "El bolígrafo es más poderoso que la espada", en 1839, no estaba promocionando las ventajas del bolígrafo y el papel sobre el software de enmarcado. Pero el argumento aún se aplica.

La pluma y el papel siguen reinando sobre la alternativa digital de maneras importantes:

  • Creación rápida de prototipos: a menudo se le pedirá que presente una prueba de concepto dentro de un plazo ajustado. Eso puede sonar fácil si está diseñando para una o dos pantallas, pero ¿qué sucede si está diseñando para un mapa del sitio completo o un software empresarial? El bolígrafo y el papel son sus mejores amigos para realizar bocetos rápidos y anotaciones. Bonificación: Echa un vistazo a ¿Qué demonios es "Rapid Prototyping"? por Keaton Herzer.
  • Fácil transferencia: los bocetos del cuaderno se pueden pasar alrededor de la mesa de conferencias o escanearse y enviarse por correo electrónico a su equipo en cuestión de segundos. Los colaboradores pueden hacer comentarios, esbozar sus propias ideas o simplemente tirarlo a la basura y decirle que comience de nuevo. Ahora, ¿no te alegra no haber pasado tres horas en Sketch?
  • Inspira la creatividad: no hay peor sensación como diseñador que mirar un lienzo en blanco en la pantalla de tu computadora durante horas, sin poder pensar en la próxima gran idea. Cuando miras fijamente los píxeles, ellos también te devuelven la mirada. Si ese sentimiento golpea, abra su computadora portátil. Cuando su mano puede moverse libremente por la página y puede ver los resultados directos de su creatividad en la tinta del papel, se motiva. Te inspiras. Te das cuenta de que eres una persona creativa y que los píxeles no son solo miradas, sino que te están animando, esperando que transfieras tu increíble idea de la página a la pantalla.

Para obtener más ventajas de la creación de prototipos con lápiz y papel, consulte el artículo de Andrew couldwell.

Fotos: Andrew couldwell

Milanote

Milanote es una herramienta relativamente nueva, pero se ha convertido rápidamente en un recurso para mí. Es una aplicación y una extensión del navegador para la planificación creativa de proyectos, esencialmente, un panel digital. Milanote se puede utilizar para crear un mapa de viaje del cliente y una biblioteca de inspiración, o incluso un plan de contenido del sitio web. Cuanto más te sumerjas en Milanote, más útil se vuelve. Los tableros Milanote son de tamaño infinito, accesibles desde cualquier lugar, y permanecen justo donde los dejaste, incluso después de que el proyecto haya terminado.

Fotos: Milanote

Pinterest

Pinterest se vuelve muy negro, a veces de manera justificada, pero sigue siendo una herramienta poderosa para la inspiración del diseño. Una búsqueda de "diseño de interfaz de usuario" devuelve miles de resultados vinculados que contienen fuentes, kits de interfaz de usuario, paletas de colores, iconos y más. Es un recurso interminable para descubrir casi cualquier cosa.

Menciones honoríficas: Dribbble, Designspiration, Medium, pttrns.com, Muzli

Flujos de usuarios y tramas

Caprichoso

Whimsical es una aplicación web para diagramas de flujo y wireframing. Whimsical le permite crear flujos y colaborar en ideas rápidamente. Si su proyecto requiere colaboración en tiempo real para diagramas de flujo y tramas rápidas, Whimsical puede ser su mejor opción.

Diagramas de flujo caprichosos

Desbordamiento

Overflow llegó a la escena del diseño en marzo de 2018 y desde entonces se ha convertido en una herramienta favorita para muchos diseñadores de productos. Overflow, similar a Whimsical, es una herramienta multiplataforma que se integra y sincroniza a la perfección con las herramientas de diseño más populares para permitir a los diseñadores crear hermosos flujos de usuarios. Según los creadores, Overflow se enfoca en tres beneficios principales: sincronizar diseños, diseñar hermosos flujos de usuarios y presentarlos de la manera más eficiente y atractiva posible.

Balsamiq

Balsamiq es una herramienta de enmarcado rápido que reproduce la experiencia de la pizarra, pero en la computadora. Es posible que la estética de un boceto sea un disgusto para algunos diseñadores, pero creo que fomenta la lluvia de ideas y la creatividad (¿recuerdas lo que dije antes sobre el lápiz y el papel?). Una de las ventajas de Balsamiq es que viene con elementos de interfaz precargados, como botones, cuadros de alerta, menús y más, para que la estructuración de cables sea rápida, bueno, rápida. Balsamiq también ofrece control de versiones para una iteración fácil: ¡su aplicación web incluso tiene ramificaciones!

Descargo de responsabilidad: es posible que desee leer el artículo de James Hatfield aquí antes de comprometerse a comprar Balsamiq.

Foto: Balsamiq

Wireframe.cc

Wireframe.cc ofrece una interfaz simple y ordenada para diseñar flujos de usuarios rápidamente. Hay funciones para la colaboración en equipo, como editar y comentar, pero estas funciones solo se incluyen en la actualización premium. Wireframe.cc también ofrece lo que llaman control de versión simple: su trabajo se guardará en el estado actual y podrá recuperarlo o compartirlo enviando un enlace.

Foto: Fatbit Technologies

Menciones de honor: Moqups

Prototipos de baja fidelidad

La creación de prototipos de baja fidelidad (lo-fi) es una forma rápida y fácil de traducir conceptos de diseño de alto nivel en artefactos tangibles y comprobables. El primer y más importante papel de los prototipos de baja fidelidad es verificar y probar la funcionalidad en lugar de la apariencia visual del producto ".

Bosquejo

Ah, bosquejo. El campeón reinante de las herramientas de diseño de interfaz de usuario para muchos diseñadores. Mire cualquier "mejor lista de herramientas de diseño de interfaz de usuario" y Sketch generalmente estará en la parte superior, y por una buena razón.

Sketch es un kit de herramientas de diseño creado para ayudarlo a crear su trabajo, desde sus primeras ideas hasta su trabajo final. Cuando ejecutas Sketch por primera vez, parecerá sorprendentemente mínimo. La primera vez que abrí Sketch, pensé: "No hay forma de que pueda diseñar una aplicación completa en esto". Qué ingenuo era.

Sketch se ha convertido en una herramienta de diseño potente. Hoy en día, tenemos recursos a nuestra disposición para la creación rápida de prototipos, cientos de complementos para aumentar la funcionalidad y, lo mejor de todo, Sketch es compatible con algunas de las [otras] mejores herramientas de creación de prototipos, como InVision, Figma, Framer y más.

Foto: Newbird Design

Figma

Figma, como Sketch, es un kit de herramientas de diseño, pero está basado en un navegador (¡los usuarios de PC se regocijan!). Admite colaboración en tiempo real, historial de versiones detallado, espacios de equipo, integración con Slack y Framer, y más. Si usted o su equipo están basados ​​principalmente en PC, Figma puede ser una mejor alternativa a Sketch.

Foto: Matt Healy

Prototipos de alta fidelidad

Los prototipos de alta fidelidad (alta fidelidad) aparecen y funcionan de la manera más similar posible al producto real que se enviará. Los equipos generalmente crean prototipos de alta fidelidad cuando tienen una sólida comprensión de lo que van a construir y necesitan probarlo con usuarios reales u obtener la aprobación del diseño final de las partes interesadas.

Enmarcador (X)

Framer es una herramienta poderosa de diseño, afirmando ser la "única herramienta que necesita para construir para iOS, Android y la web". Framer es similar a Sketch, Figma e InVision Studio, ya que le permite crear -la interfaz de fidelidad con su potente editor de vectores. Con su generador de interfaz de usuario adaptativo, elementos preparados para CSS y bibliotecas de aplicaciones, puede crear cualquier interfaz con la que pueda soñar en Framer.

Framer lo mejora un poco con su prototipo de código implementado. Framer se ejecuta en CoffeeScript, un lenguaje de programación ligero que se compila en JavaScript. Con CoffeeScript, puede crear prototipos de casi cualquier cosa: animaciones, gestos e incluso solicitudes de datos en vivo.

Framer X se anunció recientemente y actualmente está en beta cerrada. Es un producto completamente nuevo, y más avanzado que Framer, que le permite usar componentes para construir sistemas de diseño interactivo completos, todos basados ​​en React y ES6.

Foto: MacUpdate

Principio

Principle es una herramienta enfocada en hacer que la animación de tus diseños sea fácil. La línea de tiempo de Principle hace que sea simple, ilustra la perfecta facilidad, pop o rebote. También te da la libertad de crear nuevas interacciones personalizadas, incluso si estás diseñando para múltiples pantallas.

Principle ofrece Principle Mirror, lo que hace que compartir su prototipo con otros sin esfuerzo. También puede exportar una aplicación Mac independiente para que otros la vean para facilitar la retroalimentación y la colaboración.

Bosquejo

Ya hemos mencionado los beneficios de Sketch para la creación de prototipos de baja fidelidad, pero ¿qué pasa con la creación de prototipos de alta fidelidad? ¡Bueno, Sketch también puede hacer eso!

Sketch implementó recientemente los prototipos, lo que le permite crear flujos de trabajo interactivos y obtener una vista previa de sus diseños tal como los verán sus usuarios. La creación de prototipos de Sketch le permite crear gestos e interacciones sin salir de la aplicación, pero es algo limitada en comparación con otras herramientas de creación de prototipos de alta fidelidad: no hay animaciones personalizadas y solo un puñado de gestos.

Foto: Bosquejo

InVision Studio

InVision Studio es algo nuevo en el mundo del diseño de productos, pero InVision ha existido durante bastante tiempo, y fue utilizado por millones de diseñadores y equipos de todo el mundo para crear prototipos fáciles y rápidos en la web.

Studio le permite diseñar, crear prototipos y animar, todo en un solo lugar. InVision tiene sus raíces en la creación de prototipos, y Studio lleva eso al siguiente nivel, con una potente edición de vectores, un estilo de capa flexible y diseños perfectos en píxeles. La creación rápida de prototipos es fácil con gestos integrales y reproducción instantánea.

Studio dio un paso más al incorporar animaciones. Puede usar las animaciones preestablecidas integradas o personalizarlas con líneas de tiempo y editores simplificadores.

Otra ventaja de Studio es el Administrador del sistema de diseño de InVision, que garantiza el acceso instantáneo a las bibliotecas de componentes compartidos globales de su equipo, lo que facilita mantener la coherencia y administrar sus diseños a escala.

Foto: UX Collective

Del prototipo al producto

Zeplin

Zeplin es otra de esas aplicaciones imprescindibles para equipos o diseñadores que codifican.

Zeplin es una aplicación para diseñadores de interfaz de usuario y desarrolladores frontend, que les permite colaborar de manera eficiente y ahorrar tiempo. Los diseñadores pueden convertir rápidamente sus diseños en especificaciones y directrices potentes, mientras que los desarrolladores pueden acceder a todos los recursos que necesitan en una única ubicación y generar fragmentos de código que se adaptan a la plataforma en la que están trabajando.

Zeplin se integra a la perfección con Sketch, Figma, Adobe XD y Photoshop para una colaboración sin esfuerzo en su herramienta de diseño favorita. Zeplin también cuenta con soporte para Slack y Trello para potenciar su flujo de trabajo.

Fotos: Zeplin

Avocode

Al igual que Zeplin, Avocode es una herramienta independiente de la plataforma que lo ayuda a compartir, acceder e inspeccionar archivos fuente de diseño. Avocode le permite obtener especificaciones, activos y código de Sketch, Figma, Adobe XD y Photoshop, y le permite a su equipo discutir los cambios y obtener comentarios al instante.

Avocode también ofrece un ingenioso sistema de control de versiones. Mantiene un historial de versiones de diseño ilimitado para cada archivo para evitar conflictos. Junto con el sistema de gestión de archivos de Avocode, es fácil realizar un seguimiento de los cambios y la ubicación de los archivos.

Foto: Avocode

Hotjar

¿De qué sirven todas estas herramientas de diseño si no nos ayudan a crear mejores experiencias para el usuario final? Hotjar es una aplicación de análisis y comentarios todo en uno que facilita la comprensión de los visitantes de su sitio web y móvil.

Hotjar presenta mapas de calor, grabaciones, embudos de conversión, análisis de formularios y más. Ya sea que trabaje solo o en equipo, Hotjar proporciona la información necesaria sobre sus usuarios para que pueda seguir iterando y mejorando su producto.

Fotos: Hotjar

Control de versiones y gestión de archivos

Dropbox / Google Drive

Nunca subestimes a los clásicos. Los servicios de almacenamiento en la nube sirven como un excelente punto de partida para un sistema de control de versiones para su producto. Anide carpetas, comparta con colaboradores, obtenga comentarios y siga iterando.

  • Dropbox: recupera versiones anteriores de archivos
  • Google Drive: ver actividad y versiones de archivo

Resumen

Resumen llegó a la escena el año pasado e hizo olas en la escena del diseño. Abstract es una plataforma para que los equipos de diseño moderno trabajen juntos, ofreciendo un centro seguro y controlado por la versión para sus archivos de diseño. Abstract ofrece accesibilidad a través de su navegador y también ofrece una aplicación para macOS.

Abstract se basa y extiende la tecnología estable de Git para alojar y administrar su trabajo. La guía práctica de resumen de Abstract ofrece una idea de lo fácil que es crear, mantener, colaborar y actualizar proyectos.

Actualmente, Abstract solo admite archivos de Sketch, pero se esperan más formatos de archivo pronto.

Planta

Plant es otra alternativa para el diseño de versiones. Plant mantiene un historial de versiones detallado y ofrece versiones de mesa de trabajo selectivas. A diferencia de Abstract, Plant ofrece un complemento directo para Sketch y una aplicación independiente. Plant es accesible en la web, lo que facilita invitar a los diseñadores a un proyecto, sincronizar los cambios entre ellos y ver crecer el proyecto.

El maletero

¡El recién llegado más nuevo en la escena! Parece que las aplicaciones de control de versiones de diseño se están volviendo tan ubicuas como las aplicaciones de gestión de proyectos, pero la competencia es algo bueno.

Trunk es otra alternativa para una plataforma de control de versiones segura, hecha específicamente con los diseñadores en mente. Trunk adopta el enfoque de control de versiones automatizado, diciéndole que olvide la jerga de "ramas, solicitudes de extracción y fusión". Este puede ser un buen punto de partida para aquellos que son nuevos en el control de versiones.

Trunk ofrece soporte para archivos de Sketch y Photoshop.

Mención de honor: Kactus

Conclusión

Elegir la herramienta adecuada para un trabajo específico no siempre es fácil, especialmente para los nuevos diseñadores. Esperemos que este artículo responda algunas de las preguntas que pueda tener sobre la gran cantidad de herramientas de diseño a su alcance. Mi consejo: use cada uno ampliamente para diferentes proyectos y descubra cuál se adapta a su flujo de trabajo. Busque en las bolsas de trabajo y vea lo que las compañías le piden que sepa antes de comenzar a postularse, para que pueda entrar a su entrevista con confianza y listo para diseñar. Por último, pero no menos importante, ¡diviértete!

¡Me encantan los comentarios! Si tiene algún comentario, pregunta o inquietud, siéntase libre de dejar una respuesta a continuación y hágame saber lo que habría cambiado o agregado. ¡Déjame saber qué herramientas usas en tu flujo de trabajo de diseño!

Un agradecimiento especial a Brandon Getty por corregir y editar este artículo.

Actualización: Hansel Wong creó un recurso súper útil que enumera algunas de las aplicaciones aquí, además de muchas otras. Compruébalo en https://neede.co/