Ilustraciones de tarjetas
La idea
Una tarjeta muestra la cosa en sí misma, simplificada a lo que el lector necesita, encuadrada con intención, y cada anotación tiene una razón. Un fragmento de interfaz o documento, plano, grande, sobre un fondo gris claro; alrededor, algunas notas técnicas en monospace unidas por una línea. Se debe entender el recurso sin leer el texto de la tarjeta.
El vocabulario
Cada escena se compone de tres a cinco de estas piezas, nunca todas.
Referencias visuales, a mirar antes de dibujar una escena:
references/vocabulario.png(y.svg): las doce piezas, cada una aislada en su panel, con su regla en una línea.references/ejemplo-noir-et-blanc.pngyreferences/ejemplo-accent-couleur.png(y.svg): la misma escena completa en los dos modos. Solo cambia el color del elemento acentuado.references/paleta-de-acento.pngy.json: los diez tonos de la paleta, con su versión suave.
| Pieza | Qué es |
|---|---|
| Fondo | Panel gris claro (#F3F3F2 a #F5F5F4), esquinas 16 a 24 px, formato 13:10. Ni sombra, ni borde marcado. |
| Escenario (stage) | Rectángulo punteado gray-300, con una rejilla muy pálida en el interior: la zona de trabajo. Opcional, para decir «esto es un espacio de diseño». |
| Ventana | Ventana blanca, barra de título con tres puntos grises, línea gray-200, sombra suave. Sobresale del escenario o del panel (cortada a la derecha o abajo): el encuadre es intencionado. Barra de dirección si la URL importa. |
| Esqueleto | El texto secundario en barras grises redondeadas (gray-200), las líneas de lista separadas por una línea, los avatares en discos grises. Solo el elemento que lleva el significado tiene palabras reales («Share», «Publish»). |
| Pila | Varias tarjetas apiladas con un ligero desplazamiento vertical, solo la parte superior de cada una visible (un nombre de archivo, un título); la de arriba está completa con título y párrafo. Para mostrar un conjunto de documentos. |
| Popover | Pequeña tarjeta blanca que superpone el borde de la ventana (un montante, una fila de casillas), sombra más marcada que la ventana: está por encima. |
| Anotación | Texto monospace gray-500, 11 a 13 px, colocado fuera del objeto: un atributo (data-target="share"), un estado ({ open: false } en una tarjeta pequeña), una ruta de archivo, una decisión. Nombra lo que la imagen muestra, en lenguaje de taller. |
| Línea de llamada | Línea fina gray-400 que parte de la anotación y termina en el elemento con un punto sólido de 4 px. Recta, o una sola curva suave. Una flecha punteada para un retorno. |
| Friso de pasos | Línea horizontal con círculos huecos y una etiqueta monospace debajo de cada uno; el paso actual está relleno. Para situar el recurso en un proceso. |
| Plancha contacto | Cuadrícula de pequeñas viñetas numeradas (01 a 06), solo una seleccionada, unida por una línea a su versión ampliada. Para una serie de la que se examina un elemento. |
| Cota | Una medida dibujada (línea, dos topes, «4px»), como en un maqueta anotada. Para un detalle de precisión. |
| Pastillas numeradas | Discos sólidos 1, 2, 3 colocados sobre los elementos, en orden de lectura. Con un cursor si hay una acción en curso. |
Dos modos
La skill se inicia en uno de dos modos, que solo cambian una cosa: el color del único elemento acentuado. Fondo, superficies, esqueleto, anotaciones, composición y gestos permanecen idénticos.
| Modo | Cómo llamarlo | El elemento acentuado |
|---|---|---|
| Negro y blanco | /card-illustrations noir et blanc, «en negro y blanco», «monocromo», «sin color» | tinta gray-900 sólida (texto blanco encima) |
| Acento color | /card-illustrations accent, «con color de acento», «en color» | un tono de la paleta, extraído de un identificador estable |
Elección del modo: el argumento o las palabras de la solicitud primero. Sin indicación, retomar el modo de las escenas ya en línea para que la biblioteca permanezca homogénea; si no hay ninguna, negro y blanco. No mezclar nunca los dos modos en una misma cuadrícula: cambiar de modo es volver a pasar todas las tarjetas visibles juntas. En el código, el modo es una sola constante (ACCENT_MODE: 'ink' | 'color') leída por todas las escenas, para cambiar la biblioteca en una línea.
El acento: gris, y un toque de color (modo acento color)
La escena permanece gris (fondo, superficies blancas, esqueleto, anotaciones). Un solo elemento lleva un color de acento: el paso actual, la viñeta elegida, la cota, la casilla marcada, el botón principal, el elemento retenido. Todo lo demás es gris o tinta. El acento reservado para las ilustraciones deja la interfaz del sitio (botones, enlaces, navegación) monocromática.
La paleta tiene diez tonos con la misma luminosidad y la misma saturación en OKLCH (L 0,655, C 0,11), solo cambia el tono. Es el ajuste más vivo que mantiene los diez colores dentro del gamut sRGB y a 3:1 como mínimo sobre blanco (umbral de elementos gráficos). Cada tono tiene una versión suave (L 0,95, C 0,03) para una pastilla teñida o un fondo ligero. Muestrario en references/paleta-de-acento.png, valores en references/paleta-de-acento.json.
| Nombre | Acento | Suave |
|---|---|---|
| rojo | #CB756E | #FFE7E4 |
| coral | #C87A56 | #FFE9DE |
| naranja | #BF8242 | #FDEBDA |
| ámbar | #AF8B37 | #F8EDD8 |
| verde | #63A266 | #E3F4E2 |
| esmeralda | #42A680 | #DDF5E9 |
| turquesa | #0DA5A5 | #D8F5F5 |
| cielo | #389DC7 | #DBF3FF |
| azul | #6B90D4 | #E4EFFF |
| violeta | #9284CE | #EEEBFF |
Reglas de uso:
- Un tono por escena, elegido al azar pero de forma estable: una función
accentFor(id)extrae el tono del identificador del recurso (un hash simple), para obtener el mismo color en el servidor y en el navegador, sin error de hidratación. No extraer conMath.random(). - Sobre un acento sólido, el texto es blanco y en negrita (11 px mínimo); sobre un fondo suave, el texto toma el acento sólido.
- Nunca dos tonos en la misma escena, nunca degradado entre tonos. Una barra de disponibilidad verde y naranja sigue siendo una excepción donde el color es el tema.
- Tonos de referencia: una plancha de elementos de interfaz donde la pestaña activa está teñida, el botón principal sólido, la casilla marcada coloreada y el cursor de un tono vivo sobre un fondo cuadriculado gris, en más suave.
Añadir un tono: calcularlo a L 0,655 y C 0,11, verificar que está dentro del gamut sRGB y a 3:1 sobre blanco, luego colocarlo entre sus vecinos de tono.
Composición
- El objeto a la izquierda o al centro, las anotaciones a la derecha o debajo, nunca sobre el contenido.
- El encuadre corta: una ventana que sobresale del panel se lee más grande y más real que una ventana entera reducida.
- Márgenes del panel generosos (8 a 10 %); tres a cinco piezas; si se duda en añadir una, no se añade.
- Legible al tamaño de la tarjeta (aproximadamente 350 px de ancho): texto 11 px mínimo, monospace incluido.
- Fuentes: una fuente sin serifa para la interfaz simulada, monospace del sistema (
ui-monospace,font-mono) solo para las anotaciones.
Lo que la escena debe mostrar
El fragmento dice lo que el recurso es y para qué sirve, sin mostrar su mecánica interna. Un taller de inteligencia colectiva se muestra por su tablero (post-it de varias manos, el post-it retenido con sus votos), en lugar de por su desglose horario; una lista de verificación por sus casillas marcadas; un ritual por sus dos reuniones en la semana. Si el fragmento requiere una explicación para ser entendido, es el fragmento equivocado. Las anotaciones precisan, no compensan una imagen borrosa.
Al pasar el ratón
Un solo gesto por escena, que dice lo que hace el documento: una casilla se marca, la siguiente pastilla se rellena, el popover se eleva, la siguiente viñeta se selecciona. Transform y opacidad, 300 ms, una curva de aceleración suave, solo dispositivos con puntero, unos pocos píxeles como máximo.
Implementación (React y Tailwind)
- Un componente por panel (el fondo) y un componente por escena, elegido por el identificador del recurso.
- Algunos bloques compartidos por todas las escenas: una superficie (tarjeta blanca, sombra suave), una pastilla, una barra de esqueleto, las constantes de gesto al pasar el ratón (duración, desplazamiento).
- La misma función de renderizado alimenta la cuadrícula, las tarjetas «para continuar» y los carruseles.
- La página de detalle de un recurso puede abrirse sobre la cosa en sí misma (diagrama de un modelo, diapositivas de un deck) en lugar de sobre su viñeta.
Añadir un recurso
- Una frase: qué fragmento representa el recurso, cuál es el único elemento que toma el color, qué anotación (como máximo dos) lo nombra.
- Elegir tres a cinco piezas del vocabulario. Escribir la escena en HTML y Tailwind, posicionada en porcentajes del panel, las palabras en un diccionario por idioma (espacios duros en francés).
- Añadirlo al selector de escenas, con su gesto al pasar el ratón.
- Capturar la cuadrícula a 1280 px en 2x y a 390 px, en reposo y al pasar el ratón. Verificar: legible al tamaño de la tarjeta, solo un color sobre un solo elemento, anotaciones fuera del objeto, nada cortado sin intención.
Lo que se ha descartado
- Hojas isométricas «papel»: se leen como material.
- Viñetas de un diagrama reducido: texto ilegible, demasiados elementos.
- Desglose horario para un taller: muestra la mecánica, no la cosa.
- Degradados, varios colores en una escena, colores saturados fuera de la paleta.