Las herramientas de diseño se están quedando sin rumbo. Así es como podemos solucionarlos.

Rara vez pasa un día en el que no paso al menos un tiempo pensando en herramientas de diseño. Hace unos años, construí una herramienta de diseño que fue adquirida por Marvel. Eso fue hace más de dos años, pero desde entonces el panorama no ha cambiado mucho, ni mi pasión por mejorarlo.

Recientemente, tuiteé sobre herramientas de diseño, algo que se sabe que sucede de vez en cuando.

No fui el único en decir lo que pensé ese día, otros intervinieron también.

El 28 de julio de 2017 no fue un buen día para las herramientas de diseño.

Hay una gran cantidad de información oculta en estos hilos de Twitter, pero durante mucho tiempo, he querido tomarme el tiempo para profundizar en qué es lo que creo que también está fundamentalmente roto sobre el modelo actual de herramienta de diseño. como pista de la dirección, creo que deberíamos dirigirnos.

Todos solo estamos haciendo dibujos. Es una locura.

Casi todas las herramientas de diseño populares se exportan a imágenes. Esto es problemático por varias razones:

  1. No puedes interactuar con una imagen. Las herramientas de creación de prototipos nos permiten agregar transiciones de pantalla e interacciones simples a las imágenes. Sin embargo, a medida que nuestros productos continúan exigiendo transiciones de pantalla y micro interacciones más avanzadas, las imágenes simplemente no pueden seguir el ritmo.
  2. Las imágenes no son fluidas. Comunicar decisiones de diseño receptivas a través de imágenes suele ser una tarea difícil.
  3. Las imágenes no tienen estado. Para comunicar de manera efectiva los distintos estados de una interfaz de usuario, a menudo se necesitan muchas imágenes.
  4. Las imágenes de mapa de bits dependen de la resolución. Con el advenimiento de los dispositivos de retina, las imágenes a veces pueden reproducirse mal.
  5. Los archivos de imágenes tienden a ser pesados ​​y a menudo son difíciles de almacenar, administrar o compartir.

Mientras las herramientas de diseño continúen exportando imágenes, nunca podrán producir representaciones precisas de nuestros productos. Esta falta de precisión dificulta la comunicación entre diseñadores y desarrolladores. Mientras los diseñadores continúen utilizando un medio lamentablemente inadecuado para comunicar su trabajo, ese trabajo siempre estará abierto a malas interpretaciones.

Este es un punto muy significativo porque, en esencia, casi todas las herramientas de diseño convierten formas vectoriales en imágenes. Photoshop, Illustrator, Marvel, Adobe XD, Sketch y Figma son todos iguales a este respecto. Sin embargo, las imágenes solo pueden comunicar parcialmente la intención del diseño. A medida que nuestros productos continúen adoptando y admitiendo interacciones complejas, entrada de voz, entrada de video, realidad aumentada, realidad virtual, sensibilidad a la temperatura, etc., el valor que proporcionan estas herramientas disminuirá rápidamente. El diseño basado en imágenes es un callejón sin salida.

Nuestras herramientas de diseño deben manipular el producto real, no una imagen del mismo.

Nuestros productos son interactivos. Nuestras herramientas son estáticas.

Me referí a esto en mi punto anterior, pero es súper crítico, así que pensé en elaborar un poco más.

Piense en la cantidad de interacciones simples que son comunes en casi todos nuestros productos pero que no pueden comunicarse a través de nuestras herramientas de diseño. Aquí hay una breve lista en la parte superior de mi cabeza:

  • Desplazando un botón
  • Enfocando una entrada
  • Marcando una casilla de verificación
  • Contenido con pestañas
  • Áreas de desplazamiento
  • Índice de tabulación para estados enfocados
  • Atajos de teclado

Claro, algunas de estas características pueden imitarse con un poco de ingeniería hacky, pero uno tiene que preguntarse, ¿cuál es el punto? ¿Por qué los diseñadores no pueden simplemente diseñar el producto real? En definitiva, todas las maquetas son desechables, pero los diseñadores pasan meses modificándolas a la perfección. Ese tiempo sería mucho mejor dedicado a ajustar el producto real.

No iré demasiado lejos por el agujero del conejo de "deberían los diseñadores codificar", pero no estoy sugiriendo que todos escribamos código. Solo digo que no hay una buena razón por la cual nuestras herramientas de diseño no puedan soportar la manipulación directa de nuestros productos en vivo.

Framer hace un mejor trabajo que la mayoría en este departamento, apoyando interacciones avanzadas y detalladas. El resto de la manada está muy lejos.

Nuestras herramientas deben soportar el paradigma de diseño de la web

Hasta hace aproximadamente un año, la única forma de crear diseños en la web era usar la pantalla: propiedades de tabla y CSS de alineación vertical. Ahora tenemos Flexbox y pronto tendremos rejilla CSS. Estos tres motores de diseño funcionan de manera bastante similar, utilizando el flujo del DOM. Casi todos los sitios web se crean utilizando uno de estos tres sistemas de diseño.

Por lo tanto, tiene sentido que nuestras herramientas de diseño admitan el mismo modelo de diseño. ¿Derecho?

Bueno, casi todas las herramientas de diseño ignoran estos sistemas de diseño, en su lugar optan por colocar cada capa absolutamente dentro de su mesa de trabajo. Esto abre un abismo entre cómo funciona la web y cómo funcionan nuestras herramientas de diseño, presentando muchos problemas:

  • El diseño receptivo se vuelve muy difícil porque cada capa debe reorganizarse manualmente para cada punto de interrupción. Alternativamente, se puede introducir un sistema de diseño basado en restricciones pero que agrega complejidad, intensifica las curvas de aprendizaje y, en última instancia, evita que los desarrolladores transfieran el diseño directamente a la web.
  • Como cada capa está fuera del flujo del documento, manipular el contenido se vuelve complicado. Por ejemplo, si desea agregar un elemento a una lista, debe reposicionar manualmente los otros elementos en esa lista. Por supuesto, se pueden introducir funciones repetidas y otras características sofisticadas para aliviar el dolor, pero nuevamente, esto introduce una complejidad adicional y complica algo que el DOM nos brinda de forma gratuita.
  • El posicionamiento absoluto conduce naturalmente a coordenadas y dimensiones fijas de píxeles. Esto genera inflexibilidad y, de nuevo, es una gran desviación de cómo funciona la web. La web se basa en unidades fluidas como em, rem, vh, vw y%. Nuestras herramientas deberían admitir estas unidades por defecto.

Las herramientas de diseño no deberían necesitar parecerse o reflejar la web y sus matices, solo deberían ser la web.

Una herramienta monolítica no es el camino

El buen diseño ocurre por etapas. Un sistema de diseño bien estructurado tiene algunas capas distintas:

  1. Paleta de estilos Una colección de colores, sombras, espacios, radios de borde, tipos de letra, tamaños de fuente, animaciones y otros estilos que forman la identidad de su marca. Actualmente, la mayoría de las herramientas de diseño solo admiten paletas de colores. Hasta que admitan las otras propiedades de estilo, será extremadamente laborioso diseñar sistemáticamente.
  2. Activos Esto incluye elementos como iconos, ilustraciones e imágenes. Existen algunos editores de imágenes fenomenales y la herramienta vectorial de Figma es excelente, pero cuando se trata de soporte SVG, nuestras herramientas de diseño dejan mucho que desear.
  3. Biblioteca de componentes Un componente es una colección de estilos y activos que representa datos en un solo elemento en una variedad de variaciones. Los ejemplos incluyen botones, entradas, insignias, etc. Como mencioné, Figma y Sketch han abstraído recientemente este proceso del flujo principal de dibujo; es una pena que solo sean imágenes de componentes y no componentes reales.
  4. Módulos Un módulo / composición es una colección de componentes que procesa datos en una parte de la interfaz de usuario encapsulada en una variedad de estados. Los ejemplos pueden incluir barras de encabezado, menús de pestañas, formularios de inicio de sesión, tablas, etc. Dado que los módulos son solo componentes complejos, supongo que Figma y Sketch también pueden manejarlos. Aunque puede haber algún mérito para separar a los dos.
  5. Pantallas Una pantalla es una colección de módulos, componentes y datos para formar una IU completa con la que el usuario puede interactuar.

La mayoría de las herramientas de diseño proporcionan características que soportan cada una de estas etapas de diseño al menos en cierta medida. El problema es que todas las etapas están combinadas. Casi todas las herramientas de diseño ofrecen un solo modo: el modo de dibujo. Crea un conjunto de mesas de trabajo y simplemente comienza a dibujar imágenes. Solo recientemente, las herramientas como Sketch y Figma extrajeron componentes / símbolos del modo de dibujo principal, lo cual es extraño porque en el desarrollo front-end, los componentes se han abstraído durante muchos años.

Al diseñar una paleta de estilos, no necesito ver mesas de trabajo o herramientas vectoriales. Quiero ver herramientas para elegir colores armoniosos. Quiero presets para cosas como una escala de espaciado de 8dp o una selección de escalas de tipo.

Diseñar un icono requiere un modo de pensar completamente diferente para diseñar un flujo de usuarios. Un editor SVG simple que me permitiera dibujar rectángulos, círculos, líneas y caminos SVG nativos, luego exportar el código SVG optimizado sería ideal.

Al diseñar un componente, ya no debería pensar en estilos individuales, simplemente debería elegir estilos de mi paleta de estilos predefinida. No puedo comenzar a ajustar estilos para un componente porque eso introduciría inconsistencia, diluyendo la efectividad de mi sistema de diseño. Una vez que una paleta de estilos está en su lugar, solo debe ser editable en la fuente.

Del mismo modo, al componer un módulo, solo debería estar expuesto a mi biblioteca de componentes predefinida. No debe haber propiedades de estilo en una barra lateral. No hay herramientas de vectores. Solo una biblioteca de componentes reutilizables que puedo arrastrar y soltar para componer módulos.

Lo mismo vale para componer pantallas. En este punto, solo estamos reutilizando componentes y módulos para construir una interfaz de usuario. No estamos pensando en estilos o formas u otros esfuerzos creativos. Estamos enfocados principalmente en diseñar el contenido y los flujos de usuarios.

Cada una de estas etapas de diseño podría tener lugar en herramientas separadas completamente o simplemente en modos diferentes dentro de la misma herramienta. No creo que importe mucho. Sin embargo, una cosa es segura, la mayoría de las herramientas de diseño actuales ni siquiera reconocen el proceso.

Nuestras herramientas deben fomentar un buen diseño.

Los diseñadores tienen el raro lujo de poder agregar un número infinito de estilos únicos a un proyecto sin ninguna repercusión notable. ¿Necesita un tamaño de fuente ligeramente mayor? Solo dale un golpe. No es problema. ¿Necesita un color ligeramente más brillante? Solo modifícalo. Es genial. Incluso podría crear varias mesas de trabajo en el mismo proyecto, cada una utilizando valores ligeramente diferentes para estilos similares y probablemente pasaría desapercibido.

Su herramienta de diseño nunca le dirá que no puede hacer algo. Nunca te detendrá por usar un color fuera de marca. Nunca evitará que use un valor de espacio en blanco que no pertenezca a su escala de espaciado. Nunca te advertirá que el 20% de la población literalmente no puede ver ese texto gris claro que acabas de diseñar.

Y por qué no…? Porque a las herramientas de diseño no les importa.

Las herramientas de diseño están tan caprichosamente enamoradas de una visión de creatividad ilimitada que han perdido de vista lo que significa diseñar con sensatez, diseñar de manera inclusiva, diseñar sistemáticamente.

En pocas palabras, las herramientas de diseño nos permiten hacer lo que nos da la gana. Hasta cierto punto, este nivel de creatividad ilimitada es útil, especialmente en las fases de ideación. Sin embargo, como diseñadores de UI, la mayoría de nuestro flujo de trabajo no requiere mucha creatividad. Más bien, nuestro flujo de trabajo requiere reutilización, repetición, familiaridad y estandarización; necesita que nuestras herramientas hagan poco para satisfacer.

Esta libertad ilimitada está en desacuerdo con la realidad del desarrollo web. Dado que los desarrolladores están trabajando con el producto real, todos deben trabajar con el mismo código. Los desarrolladores no pueden simplemente agregar tamaños de fuente aislados o valores de color aleatorios a la base de código. En primer lugar, un linter (un mensaje de alerta que advierte sobre un código mal escrito) probablemente comenzará a gritar de inmediato. Si no, entonces su artesanía de mala calidad probablemente sería aprehendida durante una revisión del código. Si de alguna manera lograra pasar por las grietas, un impacto notable en el rendimiento eventualmente haría sonar la alarma.

Uno de los problemas más disruptivos que veo en los equipos de productos es la desconexión entre los equipos de diseño y desarrollo. Los desarrolladores han estado trabajando con pautas y limitaciones estrictas durante años. A menos que nuestras herramientas de diseño adopten estas mismas restricciones, la brecha nunca se reducirá.

Deberíamos diseñar con datos en vivo

Los datos en vivo han sido incorporados hasta cierto punto por muchas herramientas, lo cual es genial de ver. Adobe XD tiene algunas características realmente buenas para generar datos falsos que se asemejan a los datos en vivo típicos. Invision Craft también proporciona algunas características interesantes de datos en vivo para Sketch.

Sin embargo, los datos en vivo no deberían detenerse con el texto. Otros elementos como imágenes y video pueden tener un gran impacto en la experiencia del usuario al aumentar significativamente los tiempos de carga. Si está trabajando en la web, las herramientas de desarrollo del navegador le permiten acelerar la conexión para parecerse a una variedad de velocidades de Internet. Luego, puede ver de primera mano cómo una nueva pieza de contenido podría afectar la experiencia del usuario.

¿Nuestras herramientas de diseño nos proporcionan estos lujos?

En una palabra: no.

Cuanto más nos acercamos al diseño del producto real, más útil e impactante puede ser nuestro trabajo de diseño.

La web está abierta. Nuestras herramientas también deberían serlo.

Una de las cosas realmente hermosas de la web es su accesibilidad abierta. Un sitio web se puede ver en cualquier navegador web en casi cualquier dispositivo.

¿Cómo se compara eso con las herramientas de diseño? Bueno, hace unos días, mi hermano David me pidió una revisión de diseño de una aplicación que está construyendo. Me envió un archivo de croquis. Cuando lo abrí, esto sucedió ...

La mayoría de las herramientas de diseño son jardines amurallados. Si un colega está trabajando en Photoshop, otro colega no puede abrir ese proyecto en Sketch. Ni siquiera es suficiente que todo tu equipo use la misma herramienta; también deben usar la misma versión de esa herramienta.

Marvel y Figma hacen un buen trabajo aquí, ofreciendo planes gratuitos y funciones de colaboración innovadoras.

Entonces, ¿cuál es el futuro de las herramientas de diseño?

La innovación en herramientas de diseño es extremadamente valiosa y recientemente ha habido mucha. En las herramientas de diseño de Airbnb, Jon Gold y Benjamin Wilkins han estado trabajando en React-Sketchapp, que toma componentes React y los procesa dentro de Sketch. Jon y Ben también han estado trabajando en una nueva herramienta alucinante que toma bocetos de servilletas y de alguna manera los convierte en componentes React.

Adam Morse, Brent Jackson y John Otander están trabajando en un conjunto de herramientas en Compositor que básicamente resuelve todos los problemas de este artículo y tal vez el mundo.

Estoy trabajando en Modulz, una nueva herramienta de diseño y un sistema de diseño de código abierto que también tiene como objetivo resolver los problemas que mencioné en este artículo. Si está interesado, siga las actualizaciones en Twitter.

Si bien la innovación en herramientas es importante, el verdadero desafío es la educación. La comunidad de diseño simplemente no está lista para una herramienta de diseño sistemática. Muchos diseñadores tienen poco o ningún interés en construir sistemas. Para algunos, el objetivo final es JPG: a Dribbble le gusta.

Necesitamos de alguna manera inspirar una cultura de responsabilidad. Los desarrolladores han tenido una cultura de responsabilidad durante años. Tienen herramientas para mantener su código bajo control. Si un desarrollador se desvía repetidamente de sus estrictas pautas de código, puede estar seguro de que se resolverá el problema.

Mientras tanto, los diseñadores con frecuencia acumulan montañas de capas en completo desorden con poca consideración por el nombre, la agrupación y el orden de las capas. Es mucho para cada uno lo suyo. Dado que la salida (imagen ráster) no se ve afectada por la entrada (capas vectoriales), no existe una carga real sobre los diseñadores para organizarse. Los diseñadores a menudo disculpan esta falta de organización al romantizar el arte del diseño, pintándose a sí mismos como magos que necesitan ser abandonados a sus propios dispositivos para poder actuar.

También debemos inspirar una cultura de inclusión. Deberíamos desalentar activamente la mala práctica, como los colores de texto ultraligeros que hacen que el texto sea difícil de leer para muchas personas, o los tipos de letra de súper alta calidad que hacen que las páginas web se carguen lentamente, o los elementos de interfaz de usuario sin patrón que dificultan la comprensión de las personas daltónicas. Actualmente, este tipo de mala práctica es aplaudido entre la comunidad de diseño. Si queremos dar la bienvenida a una herramienta de diseño inteligente, debemos invertir esta cultura.

Si una herramienta de diseño sistemática es ganar nuestros corazones, primero debe educar.