halftone-ch/drawn-ui

Drawn UI

Una pantalla dibujada muestra un producto tal como un diseñador lo esbozaría para un caso de estudio: la interfaz real, simplificada hasta que solo queda su estructura, teñida en el color propio del producto. Se lee como trabajo de diseño donde una captura de pantalla se lee como algo pegado, y nunca muestra datos privados, porque todo el texto son barras.

El aspecto se mantiene calmado porque las reglas son pocas y estrictas. Cada proyecto sigue pareciéndose a sí mismo, porque el tinte, las pantallas y la parte levantada provienen del proyecto. Dónde van los dibujos (un héroe, una cuadrícula, una lista de funcionalidades, una diapositiva) depende de quien los use.

Trabajar en este orden

1. Lee el producto real. Sus pantallas actuales, desde el código, la aplicación o el archivo de diseño. Cada dibujo se remonta a una pantalla o componente real. Nunca inventes una metáfora (balanzas flotantes, puertas, flechas entre tarjetas): si el producto no la tiene, el dibujo no la muestra.
2. Elige los momentos. Para qué es cada dibujo: una pantalla, un componente, un estado. Un conjunto muestra diferentes componentes, no un mismo componente con más detalle cada vez.
3. Toma el acento. El tinte propio del producto o su color de marca. scripts/tint.py "#hex" muestra los tonos que genera. Más acentos solo cuando significan algo en el producto (colores de estado, un par de marca).
4. Escribe la especificación. drawings.json, formato en references/spec.md (lee sus secciones sobre tamaños, levantamiento y tonos antes de dibujar), con el ejemplo en examples/ledger/drawings.json al lado. Dimensiona cada dibujo para el espacio que ocupará.
5. Dibuja y revisa. python3 scripts/draw.py drawings.json --shots (la captura necesita Playwright con Chromium). Arregla cada problema que imprima, luego abre out/shots/sheet.png y mira. Los números alertan, los ojos deciden: esquinas vacías dentro de una tarjeta, un dibujo que se inclina hacia un lado, una pila que parece pastillas. Repite hasta que pase y se vea calmado.

Las reglas

1. Un dibujo no tiene palabras. Todo el texto se convierte en barras: alturas 12, 8, 6 o 4, anchos en pasos de 4, completamente redondeadas.
2. Tarjetas blancas, un radio por rol (tarjetas 12, cajas interiores 8, filas 4, teléfonos 32), una sombra de tarjeta, una sombra de levantamiento.
3. Una parte por dibujo puede levantarse de su tarjeta: sale solo por un lado, entre 16 y 72 (24 a 40 se lee mejor), nunca más allá de la parte superior o inferior de la tarjeta, con 8 o más alrededor. Un dibujo de 600 o más ancho puede levantar dos. La parte levantada reemplaza lo que levanta, no lo cubre a medias.
4. Un acento por dibujo, usado en lo que importa en esa pantalla.
5. Como máximo un glifo de línea por dibujo, dibujado a 1.5 con extremos redondeados.
6. Sin fondo por defecto: el dibujo viene solo con espacio para sus sombras y se coloca sobre cualquier página donde se ponga. Con "ground": true obtiene un fondo tintado, que llena entre el 65 y el 75 por ciento en ancho y alto, centrado.
7. Todo a 1:1 en una cuadrícula de 4. Los dibujos de un conjunto que se colocan uno al lado del otro comparten una escala: dibújalos al tamaño en que se muestran, y empareja alturas cuando estén en una fila.
8. Los teléfonos tienen una relación de aspecto de 1 a 2.05.

Usar la salida

Los archivos out/<id>.svg son autónomos, llevan su propio ancho y alto, y se ajustan a la página: claros sobre blanco, oscuros sobre negro. Siguen la configuración del sistema del espectador, y una clase dark o light (o data-theme) en cualquier elemento padre fuerza una. Son aria-hidden, con ids con espacio de nombres por dibujo, para que varios puedan estar en línea en una página. Las formas llevan clases de rol (p-ground, p-card, p-bar, p-dot, p-glyph, p-hi para la parte levantada) para movimiento al pasar el ratón; out/index.html muestra uno calmado con una respuesta Reduce Motion. Un dibujo demasiado ancho para un teléfono recibe un segundo dibujo más estrecho; nunca lo comprimas.

Diseñando en Figma en su lugar: se aplican las mismas reglas, y los valores de la especificación se corresponden uno a uno con frames (auto layout para tarjetas, posición absoluta solo para la parte levantada). Exporta cada fondo como SVG.

Cuando las reglas chocan con el producto

Un producto sin un solo acento puede usar su neutro más oscuro. Una pantalla que solo tiene sentido con dos resaltes puede ser dos dibujos. Dobla una regla a la vez y di cuál.