Mejores sistemas de red en herramientas de diseño de interfaz de usuario.

Los diseñadores deben poder explorar visualmente las consecuencias de las cuadrículas, no solo en código.

En la primera parte de este artículo, "¿Los sistemas de red siguen siendo relevantes en el diseño de productos digitales?", Eché un vistazo a la historia de los sistemas de red y sus ventajas prácticas. En resumen: las cuadrículas siguen siendo útiles para el diseño de la interfaz, pero la pantalla es mucho más compleja que la página impresa, ya que tanto los medios de salida como el contenido son muy variables.

Entonces, ¿qué hay de malo con las cuadrículas en las herramientas de diseño de interfaz de usuario?

Los desarrolladores de software tienen herramientas para ayudar a gestionar la complejidad del diseño de la pantalla: sistemas de restricción como AutoLayout de iOS y ConstraintLayout de Android, Flexbox e incluso marcos específicos de cuadrícula como el próximo CSS Grid. Pero las decisiones de diseño deben ser tomadas por los diseñadores, no delegadas a los desarrolladores. Son fundamentales para la forma y función de una interfaz. Los diseñadores deben poder explorar visualmente las consecuencias de las decisiones de diseño de la cuadrícula, no solo en código.

El 75% de los diseñadores de interfaces utilizan principalmente Photoshop, Illustrator o Sketch. Cada una de estas herramientas fue creada alrededor de la metáfora de la página, no de la pantalla. Como era de esperar, los métodos para trabajar con cuadrículas en estas herramientas también se basan en la tradición de la impresión. Para los diseñadores de productos digitales, esto lleva a algunos grandes problemas en el uso diario.

Sensibilidad

Para crear una cuadrícula, generalmente establece parámetros como el ancho total, el número y el ancho de columnas, canales y márgenes:

Boceto y controles de cuadrícula de Photoshop

Esto crea un andamio de cuadrícula que se dibuja como un conjunto de líneas de guía en la parte superior de la mesa de trabajo. Los elementos se pueden ajustar manualmente a estas líneas de guía:

Esto funciona bien para imprimir. El diseñador sabe que su publicación va a utilizar, por ejemplo, el tamaño de papel A4. Pero, ¿qué sucede en digital cuando necesita simular un tamaño de dispositivo diferente? Cambiar las dimensiones de la mesa de trabajo significa que la cuadrícula es demasiado grande o demasiado pequeña:

La solución más común a este problema es crear múltiples mesas de trabajo, cada una correspondiente a una categoría de dispositivo única, como teléfonos inteligentes, tabletas y computadoras de escritorio. Las cuadrículas individuales se pueden crear por separado para cada dispositivo / mesa de trabajo:

Simulación de respuesta: la creación de cuadrículas para algunos tamaños de dispositivo diferentes puede ayudar, pero los detalles aún no se cumplen.

Sin embargo, esta es una simulación bastante pésima de los medios de salida, ya que solo representa tres posibles resoluciones del dispositivo. (En el ejemplo anterior, es el iPhone 7, el iPad y un Macbook Pro de 13 "). ¿Siguen siendo válidas las decisiones de la cuadrícula en un Google Pixel o un iMac 5K? ¿Qué pasa con las orientaciones horizontales o las vistas divididas?

Trabajar con solo unas pocas configuraciones de cuadrícula fija hace que sea fácil pasar por alto los problemas mientras trabaja. O el desarrollador los encontrará durante la implementación, lo que requerirá muchos molestos cambios de sentido, o los diseños rotos terminarán en su producto final.

Propagando cambios

En los influyentes sistemas de cuadrícula en diseño gráfico, Josef Müller-Brockmann pide que se especifiquen las cuadrículas al comienzo de un proyecto, antes de que ocurra cualquier diseño de página. De hecho, Müller-Brockmann sugiere conocer todas las variables de un proyecto antes de especificar la cuadrícula:

Antes de comenzar el trabajo, […] las preguntas relacionadas con el formato, el texto y las ilustraciones, el tipo de letra, el método de impresión y la calidad del papel deben aclararse.

Estas variables, por supuesto, pueden tener un impacto en el sistema de cuadrícula. Por ejemplo: la distancia de lectura influye en las decisiones de tamaño de fuente y los tamaños de fuente afectan los anchos de columna y las alturas de fila. En forma impresa, estas variables son conocidas y, por lo general, no cambian. Un libro no se convierte de repente en un periódico.

Por lo tanto, no es sorprendente que las herramientas de diseño visual heredadas de impresión nunca hayan sido diseñadas para manejar este tipo de cambios. Restar algunas unidades de ancho de las canaletas, o agregar un par de columnas más, significa que debe realinear manualmente todos los elementos a las nuevas líneas de cuadrícula:

Para los diseñadores de UI, los cambios de cuadrícula son a menudo necesarios Simplemente no es posible dar cuenta de cada salida y variable de contenido antes de comenzar el diseño visual.

Además, aunque los proyectos de impresión se completan cuando se imprimen, las interfaces de software nunca se "terminan". Se repiten y mejoran constantemente.

Sin embargo, como se muestra arriba, un simple cambio en la cuadrícula significa realinear manualmente cada elemento en un diseño. Multiplicado por cientos de pantallas, un cambio de cuadrícula puede significar horas (o días) de empuje de píxeles miserable.

Experimentación

Al construir una nueva cuadrícula, Müller-Brockmann haría pequeños bocetos manuales de configuraciones potenciales. La dificultad técnica del proceso era evidente incluso para él:

“Al dibujar una cuadrícula, se debe tener cuidado para garantizar que el bosquejo se corresponda lo más posible con las proporciones del formato impreso final. […] Solo de esta manera es posible adquirir gradualmente la capacidad de producir, incluso en bocetos muy pequeños, patrones tipográficos que sean realistas, es decir, que puedan transferirse al formato final sin dificultad ".
 - Josef Müller-Brockmann, Sistemas de cuadrícula en diseño gráfico, págs. 94, 49
Algunos de los bocetos a mano de Joseph Müller-Brockmann de Grid Systems in Graphic Design.

Por supuesto, este fue el único medio para que Müller-Brockmann experimente de manera económica con posibles diseños de cuadrícula: no tuvo acceso a la computadora en 1981. Sin embargo, es bastante desconcertante que casi 40 años después, las herramientas de diseño basadas en computadora todavía no facilites este tipo de experimentación.

La mayor parte del tiempo, desea dividir rápidamente algunos elementos en el espacio disponible, de manera uniforme o proporcional. Esta es una cuadrícula como cualquier otra, pero definir un andamio de cuadrícula para hacer esto se siente prematuro en el proceso inicial de exploración de diseños.

Es hora de sacar la calculadora. Obtenga el ancho del espacio contenedor, reste el número de canales multiplicado por su ancho, luego divida el resto por el número de elementos. Dibuje un elemento con el resultado, duplíquelo para cada columna, luego distribúyalos de manera uniforme:

Esto es bastante sencillo, pero hacer cálculos manuales como este no se mantiene al día con la velocidad del pensamiento. Cuando comienzas a hacer preguntas como "¿será demasiado pequeño si pongo 8 fotos en esta fila en lugar de 6?", Hacer los cálculos cada vez es tedioso y desalienta la experimentación rápida.

¿Cómo se verían las mejores herramientas de cuadrícula?

Todos estos puntos débiles conducen a una conclusión: los diseñadores de UI / UX necesitan mejores formas de trabajar con cuadrículas durante el diseño visual. Kevin Lynagh y yo hemos estado trabajando en algunas soluciones en nuestra herramienta de diseño de interfaz de usuario, Subform. Veamos los principios (y ejemplos) que hemos inventado hasta ahora. (Todas estas demostraciones se grabaron directamente desde Subform.)

Las cuadrículas deben ser receptivas por naturaleza.

Para que los sistemas de cuadrícula funcionen en muchos dispositivos diferentes, debe poder especificar valores en porcentajes y proporciones flexibles, no solo píxeles exactos.

Estos valores le permiten construir una grilla receptiva simple muy rápidamente, sin realizar ninguna aritmética. Simplemente establece una cantidad de columnas y le dice a cada columna que se estire. Las columnas luego dividen uniformemente el espacio disponible, en función del ancho de la mesa de trabajo:

Las columnas estirables se pueden mezclar con columnas fijas, canales y márgenes. Las canaletas en el ejemplo anterior están configuradas en 12px, por lo que su ancho permanece fijo a medida que la mesa de trabajo cambia de tamaño.

Una columna estirable también puede aceptar proporciones. Esto abre posibilidades interesantes para las cuadrículas no uniformes, como especificar que una columna siempre debe ser tres veces más ancha que las otras:

Trabajar de esta manera hace que sea mucho más fácil comprender cómo funcionará una cuadrícula en diferentes tamaños y orientaciones de dispositivos, y detectar cualquier caso límite antes de pasar al equipo de desarrollo.

Olvídese de guías y ajustes: los elementos deben tener una relación formal con la cuadrícula.

En las herramientas existentes, la cuadrícula es solo una colección de líneas de guía que se superponen a la mesa de trabajo. Los elementos se pueden alinear con estas guías, pero eso es todo. Los elementos no saben nada sobre su relación más amplia con la cuadrícula.

La cuestión es que una cuadrícula es la relación entre elementos. Las líneas de guía son un truco visual para ayudar a crear esas relaciones manualmente. Es mucho mejor construir esas relaciones directamente.

Por ejemplo, debe poder colocar un elemento usando una regla como "comenzar en la columna 2, luego abarcar 4 columnas". Esto puede hacerse implícitamente mediante manipulación directa, o explícitamente usando una taquigrafía como 2 / span 4. Ahora cuando la cuadrícula cambia, los elementos cambiarán automáticamente el tamaño y conservarán sus alineaciones:

Esto también abre nuevas posibilidades para la manipulación directa de la cuadrícula en sí, como cambiar el tamaño de las canaletas y columnas:

Las cuadrículas deberían permitir una experimentación rápida.

Poder definir cuadrículas de manera informal mientras se trabaja, sin usar una calculadora, también es una característica muy necesaria. Es posible que desee agregar algunos elementos a la mesa de trabajo que dividan automáticamente el espacio disponible, luego inserte canales de tamaño uniforme entre ellos:

Hacer que la herramienta de diseño haga estos cálculos sobre la marcha, en lugar de hacer los cálculos minuciosamente a mano, hace que la experimentación sea rápida y visual. Preguntas como "¿cuántas fotos deben mostrarse en una fila en el teléfono inteligente?" Se pueden probar fácilmente en segundos, en lugar de después de muchos esfuerzos tediosos y laboriosos:

Las cuadrículas bidimensionales no deben pasarse por alto.

Las cuadrículas de columnas cubren muchos casos de uso, pero muchos diseños requieren columnas y filas, de forma similar a la cuadrícula modular de Müller-Brockmann. Debería poder describir elementos en ambas dimensiones: “Horizontalmente, este elemento debe comenzar en la columna 3 y abarcar 2 columnas. Verticalmente, debe comenzar en la fila 1 y terminar en la fila 2 ".

Al igual que con las cuadrículas unidimensionales, al cambiar el tamaño de la cuadrícula en cualquier dirección, el contenido vuelve a fluir automáticamente. Subform también puede calcular cambios en la cuadrícula, como agregar canales, en tiempo real:

Cualquier cosa debería poder contener una cuadrícula.

Las herramientas existentes solo permiten definir una cuadrícula para toda la mesa de trabajo, pero ese es un límite arbitrario. Las cuadrículas son útiles para resolver muchos problemas de diseño, no solo el diseño a nivel de pantalla.

Cualquier elemento rectangular debe poder contener una cuadrícula. Una tabla, por ejemplo, podría necesitar una estructura de cuadrícula separada de la pantalla en la que vive:

La capacidad de usar múltiples cuadrículas y anidarlas también abre mucha expresividad creativa para el diseñador. (Karl Gerstner hizo un trabajo bastante bueno con múltiples cuadrículas superpuestas para Capital Magazine en 1962).

Conclusión

Mientras construimos Subform, Kevin y yo estamos constantemente explorando cómo podemos crear una herramienta que mantenga la inmediatez y la expresividad del diseño visual, pero que agregue el poder dinámico de la computación.

En Medios para pensar lo impensable, Bret Victor propone que para pensar en sistemas complejos, se necesitan nuevas representaciones, representaciones más poderosas que el medio en papel. Las representaciones que estamos desarrollando para el diseño basado en cuadrícula son, esperamos, un paso en la dirección correcta.

Y quizás incluso sean algo que Joseph Müller-Brockmann podría reconocer: herramientas de diseño para la "calidad claramente inteligible, objetiva, funcional y estética del pensamiento matemático".

Si está interesado en obtener más información sobre Subform, nuestra herramienta de diseño de interfaz de usuario, visite el sitio web. Y asegúrese de registrarse para obtener acceso temprano y recibir actualizaciones ocasionales como este artículo. ️