Herramientas de diseño de interfaz de usuario: las que realmente necesita (edición de diciembre de 2018)

Este artículo apareció originalmente en Truth About Design, la plataforma para verdades sinceras y orientación para la industria del diseño.

Versión en video de este artículo:
https://www.youtube.com/watch?v=vqGxYZKTTw0

Una de las principales preguntas que recibo cuando estoy asesorando a los estudiantes es: "¿Qué herramientas debo usar para el diseño de la interfaz de usuario? ¿Bosquejo? Photoshop? ¿Qué pasa con Adobe XD? ”(Siempre preguntan sobre Adobe XD).

TL; DR: Use Sketch para trabajo de baja y media fidelidad, y Principio para trabajo de alta fidelidad. InVision pronto quedará obsoleto. Preste mucha atención a Figma y Framer X. A partir de diciembre de 2018, no vale la pena usar ninguna otra herramienta de diseño de interfaz de usuario en un entorno de trabajo de la vida real.

Para este artículo, nos estamos centrando en herramientas para enmarcar, crear prototipos y animaciones. Por supuesto, hay otras excelentes herramientas para la investigación de UX, colaboración, etc.

La verdad sobre las herramientas de diseño de interfaz de usuario: la mayoría de ellas son iguales

Hasta 2011, Photoshop era la única herramienta que los diseñadores de UX tenían a su disposición. Sin embargo, Photoshop no es una herramienta de diseño de interfaz. Es un editor de imágenes que tiene algunas características que son útiles para el diseño de la interfaz y muchas características que no lo son. Pero debido a que Photoshop era tan grande, y tan popular, y funcionaba lo suficientemente bien, nadie (incluyéndome a mí) pensó que alguna vez sería necesario usar algo más.

En 2011, se lanzó la aplicación Sketch. Fue la primera herramienta de diseño de interfaz dedicada. Debido a que no había nadie más haciendo herramientas de diseño de interfaz de usuario dedicadas en ese momento y las personas (incluido yo) eran muy escépticas sobre esta nueva herramienta no probada, Sketch pudo engullir toneladas de participación de mercado durante años antes de que nadie más pudiera responder. También lo jugaron de manera muy inteligente al convertir Sketch en una plataforma para la que otros podrían desarrollar complementos adicionales, expandiendo así rápidamente su alcance y ecosistema.

Sketch estaba en una posición muy especial en ese momento, porque ofrecían una herramienta que era realmente 10 veces mejor que la competencia, y hacía que valiera la pena que las empresas y los equipos gastaran dinero y tiempo en cambiar a un nuevo flujo de trabajo para sus organizaciones.

El coraje de los desarrolladores de Sketch para exponerse y crear una nueva herramienta, y su éxito posterior, condujo a una avalancha de seguidores de tendencias que construyeron nuevas herramientas de diseño de interfaz de usuario. Sin embargo, la mayoría de ellos ofrecen poca o ninguna diferenciación de Sketch.

Preguntar "qué herramienta de diseño de interfaz de usuario es mejor, X o Y" es como preguntar "qué ejercicio es mejor, Bosch o Dewalt". Todos hacen lo mismo de manera muy similar. El verdadero factor decisivo para la herramienta que va a utilizar no es lo que puede hacer, porque todas las herramientas pueden crear una interfaz de usuario con interacciones básicas.

Las preguntas reales que debe hacer son:

  • ¿Qué está usando mi equipo?
  • ¿Qué está usando mi empresa?
  • ¿Cuáles son los estándares de la industria?

Y en la mayoría de los casos, para la mayoría del trabajo, eso será Sketch. Las empresas no volverán a cambiar a una nueva herramienta, después de cambiar a Sketch hace dos o tres años, solo porque la nueva herramienta en el bloque hace una o dos cosas un poco mejor que Sketch.

Preguntar "qué herramienta de diseño de interfaz de usuario es mejor, X o Y" es como preguntar "qué taladro es mejor, Bosch o Dewalt".

Sketch está en la posición en que solía estar Photoshop, pero no descansan en sus laureles como lo hizo Photoshop. Sketch hace que InVision quede obsoleto lentamente al incluir herramientas de creación de prototipos basadas en la nube. Hay una serie de complementos de animación de terceros para Sketch que le permiten mantener todo su flujo de trabajo de baja a alta fidelidad dentro de Sketch. Sin embargo, aún no los he probado y no están viendo mucha tracción en la industria.

Para microinteracciones, animaciones y prototipos de alta fidelidad, utilice el principio

Sketch es el estándar de la industria para crear maquetas y prototipos estáticos con interactividad básica. Sin embargo, hacer prototipos y animaciones más complejas actualmente no es posible en Sketch. La herramienta que está viendo la mayor adopción para hacer ese tipo de animación compleja es el Principio. Principle le permite importar fácilmente sus archivos de Sketch y hacer animaciones complejas muy fácilmente. Hay una razón por la cual ha sido adoptada por todos los principales actores en el espacio de diseño.

Herramientas para ver: Framer X y Figma

La mayoría de las herramientas de IU no son lo suficientemente diferentes de Sketch como para darte una razón real para cambiar. Pero dos herramientas adoptan un enfoque muy diferente de Sketch para el diseño de la interfaz de usuario, y debido a que están construidas desde cero en torno a este nuevo enfoque, existe la posibilidad de que esto valga la pena de una manera que Sketch no podrá adaptarse.

Figma: Google Docs pero para diseño de interfaz

¿Sabes cómo en Google Docs, tú y tus amigos pueden trabajar juntos en ese ensayo o en esa presentación, al mismo tiempo, y siempre se guarda automáticamente en la nube y puedes acceder a él desde cualquier computadora? Eso es lo que Figma ha hecho para el diseño de la interfaz. Básicamente tomaron Sketch y lo pusieron en un navegador.

Figma es el principal contendiente en este momento porque:

  • Tiene mucho respaldo financiero de Silicon Valley
  • Lanzan actualizaciones cada semana
  • Es gratis para diseñadores en solitario.
  • Son independientes de la plataforma (funciona en cualquier computadora), por lo que pueden obtener participación de mercado de usuarios que no son Mac y personas que no pueden pagar Sketch
  • Tiene un punto legítimo de diferenciación de Sketch, con sus funciones de colaboración en tiempo real, que Sketch no puede copiar fácilmente

Framer X: cerrar la brecha entre diseño y código

Framer X es otra herramienta interesante para ver. Lo que lo distingue es su profunda integración con herramientas de desarrollo. Teóricamente, puede diseñar en Framer y exportar código listo para producción. Esto podría acelerar drásticamente el flujo de trabajo y la colaboración entre diseñadores e ingenieros. Pero, ¿la mejora en el flujo de trabajo es mucho mejor que vale la pena cambiar a otra herramienta? ¿Los diseñadores estarán dispuestos a jugar con el código? Es difícil saberlo en este momento.

Framer tampoco es gratis. Cuesta $ 15 / mes ($ 12 si paga anualmente), que es más costoso que una licencia anual de Sketch. Con su modelo y características de precios, no estoy seguro de a qué público se dirigen.

Mi hipótesis es que el lado de ingeniería de las cosas es demasiado complejo y profundo para ser asumido por una herramienta de diseño. Me recuerda mucho a lo que la gente intentó hacer hace 15 años con editores como Dreamweaver. Esos nunca funcionaron para verdaderos entornos de producción hardcore. Pero es una herramienta bien pensada con muchos recursos detrás, así que ya veremos.

¿Qué pasa con otras herramientas?

Para configuraciones de trabajo de la vida real, le recomiendo que ni siquiera se moleste con otras herramientas que no sean Sketch and Principle en este momento. A los principiantes en todas las industrias les encanta pensar demasiado qué herramienta usar porque es mucho más fácil hacer eso que hacer un trabajo de calidad. Sin embargo, si tiene curiosidad por experimentar un poco por su cuenta, el mejor recurso para encontrar nuevas herramientas relevantes para probar es http://uxtools.co/design: es una clasificación de todas las herramientas de diseño de interfaz de usuario más populares que existen. ahora mismo.

Y si está interesado en seguir una carrera en diseño de experiencia de usuario, actualmente soy mentor en Springboard y puedo garantizar la calidad de su plan de estudios. Ofrece tutoría personalizada por parte de expertos de la industria como yo y le permite trabajar en proyectos del mundo real para desarrollar una cartera única. También le garantizan que obtenga un trabajo dentro de los 6 meses posteriores a su graduación, o le devuelven su dinero.

Jamal Nichols dirige Truth About Design, la plataforma para verdades sinceras y orientación para la industria del diseño.