Ilustraciones de producto: dibujarlas, comprarlas o dejarlas

Un sistema de ilustración es un conjunto cerrado de dibujos, un estilo definido y las reglas que dicen en qué pantallas pueden aparecer. Casi ningún producto lo tiene. Tiene ilustraciones: dos compradas durante un rediseño, tres dibujadas por quien tenía una tarde libre, una heredada de una landing que ya no lleva nadie. Al pasar de una pantalla a otra se nota: decoración aplicada en momentos distintos por manos distintas.

La decisión es de presupuesto y de mantenimiento antes que de gusto. Una ilustración a medida, de las que van en cabeceras y páginas de lanzamiento, cuesta entre 300 y 1.200 dólares por pieza. Una serie de doce se va a cinco cifras antes de hablar de revisiones y derechos de uso. Con ese dinero encima hace falta una regla, no una preferencia.

Qué contiene de verdad un sistema de ilustración

Cuatro partes. En los productos que se ven desparejos suelen faltar dos.

• La definición de estilo. Grosor de línea, comportamiento de los rellenos, límites de paleta, perspectiva, si aparecen figuras humanas y cómo se dibujan. Escrita, no "mira estos tres archivos".
• El inventario con sus ubicaciones. Cada dibujo atado a la pantalla o al estado donde puede salir.
• Las reglas de producción. Formato de exportación, comportamiento del viewBox, color desde los tokens en lugar de hexadecimales fijos, paso de optimización, gestión del tema.
• Un responsable y una partida de presupuesto. Quién encarga el siguiente dibujo y con qué dinero.

Sin la cuarta parte, las tres primeras se deshacen en un par de trimestres. Hace falta una imagen un viernes, el ilustrador está ocupado, entra un archivo de stock, y la definición de estilo pasa a describir medio producto.

Cuándo dibujar

Encarga trabajo a medida cuando el dibujo tiene que sostener un concepto que inventó el producto. Un pipeline, un lienzo de trabajo, un modelo de permisos, una forma de dato que solo existe dentro de tu aplicación: ninguna librería la tiene, y encajar ahí una imagen genérica no le enseña nada a quien mira.

Dibuja para las superficies que se repiten siempre. Onboarding, estados vacíos de los objetos centrales, la ruta de error, la cabecera de marketing. Se ven miles de veces y salen baratas por impresión. Dibuja cuando lo que está en juego es que te reconozcan: la ilustración es de las pocas capas que un competidor no copia en una tarde, y por eso pertenece a la dirección de arte y no a la decoración.

Cierra las condiciones comerciales en la misma conversación en la que hablas de estilo. Los ilustradores cobran casi siempre el dibujo y la licencia por separado, y el uso comercial arranca bastante por encima de la tarifa editorial antes de que exclusividad, plazo y territorio la suban más. Deja cuatro cosas por escrito: exclusividad, duración, territorio y si te llevas el archivo fuente editable.

Cuándo comprar

Las librerías funcionan cuando el concepto es genérico. Búsqueda, pagos, seguridad, un grupo de gente alrededor de una mesa: eso ya se ha dibujado diez mil veces y repetirlo no aporta. Recolorea una serie con tu paleta, déjala en superficies de poco tráfico (404, documentación, páginas de marketing secundarias) y mueve el presupuesto a las pantallas que importan.

Lee la licencia antes que el estilo. Las tres librerías gratuitas más usadas se diferencian justo en lo que pesa dentro de una interfaz:

• unDraw permite uso comercial sin atribución, y prohíbe redistribuir las ilustraciones en packs o usarlas para entrenar modelos de machine learning (licencia).
• Storyset es gratis solo con un crédito visible y un enlace en cada uso; una suscripción premium de Freepik o Flaticon quita esa obligación (términos).
• Blush admite uso comercial, incluido el trabajo que entregas a un cliente, y prohíbe revender, redistribuir o juntar los dibujos en una librería competidora (licencia).

Una serie que exige crédito visible no sale gratis dentro de un producto. Es una obligación permanente en cada pantalla que la lleva, y sobrevive a la persona que la eligió.

Cuándo dejarlo

Pantallas densas de datos. Una ilustración al lado de un número de dashboard compite con ese número y suele ganar, que es justo lo contrario de para lo que existe la pantalla.

Estados vacíos que ya funcionan. Una frase clara y un botón ganan muchas veces al dibujo de la persona con la lupa; la imagen aporta algo solo cuando el estado es de verdad ambiguo. Los cuatro estados que toda pantalla debe prever los tratamos en otro artículo.

Cualquier superficie donde el dibujo repite el titular. Si el H1 dice "Todavía no hay facturas" y la imagen enseña una carpeta vacía, esa imagen son bytes y atención gastados en una segunda copia del mismo mensaje.

Pantallas en pleno rediseño. La ilustración es la última capa. Dibujar sobre un layout que aún se va a mover es la vía rápida para repetir el trabajo.

Qué hacer

Fija el número antes de encargar. Doce dibujos mantenidos valen más que cuarenta a la deriva. El tope obliga a discutir las ubicaciones pronto, cuando sale barato.

Haz pasar el color por los tokens. Llama a las custom properties de CSS dentro del SVG en vez de escribir hexadecimales. Un solo archivo cubre tema claro y oscuro, y un cambio de paleta no se convierte en reexportar la serie entera.

Optimiza a la entrada y de forma automática. Las exportaciones de las herramientas de diseño arrastran metadatos del editor, comentarios, grupos vacíos y una precisión decimal absurda. SVGO lo quita sin mover un píxel, y los ahorros que se reportan suelen ir del 30% al 80%. Ponlo en CI y así nadie tiene que acordarse.

Marca como decorativo lo que es decorativo. Una ilustración que repite el texto lleva el atributo alt vacío o aria-hidden, para que los lectores de pantalla la salten. Si aporta información que el texto no da, decorativa no es, y necesita una descripción real según el criterio WCAG 1.1.1.

Saca el texto del dibujo. Las palabras metidas en un SVG no se traducen, ignoran el tamaño de letra que ha elegido quien lee y convierten cada idioma nuevo en una exportación nueva. La etiqueta va en el DOM, encima del dibujo.

Compra el archivo fuente. Pide el original editable junto con la licencia. Sin él, la segunda versión de cualquier dibujo es un encargo nuevo.

Escribe la regla de ubicación al lado del dibujo. Un "solo para el estado vacío de proyectos" en los metadatos del archivo evita que el mismo personaje aparezca en seis pantallas sin relación año y medio después.

Qué no hacer

Nada de dos estilos a la vez. Una serie geométrica plana en una pantalla y otra dibujada a mano en la siguiente cuentan una migración que alguien dejó a medias. Si merece la pena cambiar de estilo, merece la pena terminarlo.

Nada de ilustración para tapar el layout. Una imagen tirada en un hueco raro oficializa el hueco raro. Arregla los espaciados y luego decide si el dibujo se gana el sitio.

Marketing y producto no encargan por separado. Dos presupuestos, dos proveedores, dos estilos, un solo producto. La serie de ilustraciones es un activo con un responsable, o no es una serie.

No publiques la exportación en bruto. Una sola ilustración de cabecera sin optimizar, de unos cuantos cientos de kilobytes, aparece en la medición de Largest Contentful Paint, y es el peso más fácil de quitar de toda la página.

Las figuras humanas no son la opción por defecto. Los personajes meten edad, complexión, tono de piel y género en cada pantalla donde salen. Es una decisión de marca con consecuencias reales sobre quién se siente aludido, y merece una respuesta pensada en vez del criterio de la librería que te descargaste.

Qué cambia en 2026 con la ilustración generada

Hay dos hechos que conviene tener claros antes de generar una serie.

El primero es la propiedad. La Oficina de Copyright de Estados Unidos concluyó el 29 de enero de 2025 que los prompts por sí solos no dan al usuario control suficiente sobre el resultado para considerarlo autor, y que el material generado sin aportación humana suficiente no es registrable; los elementos de mano humana dentro de una obra mixta sí siguen protegidos (informe Parte 2). Una serie generada del todo es material que puedes usar y que con casi total seguridad no puedes impedir que usen otros.

El segundo es el marcado. El artículo 50 del Reglamento europeo de IA obliga a quien provee sistemas que producen imágenes sintéticas a marcar los resultados en formato legible por máquina y a hacerlos detectables como generados por IA. La obligación se aplica desde el 2 de agosto de 2026, con multas de hasta 15 millones de euros o el 3% de la facturación mundial anual, la cifra que sea mayor.

Ninguno de los dos hechos prohíbe la ilustración generada. Marcan dónde encaja bien: presentaciones internas, exploración, campañas de usar y tirar. Para la firma visual que un producto quiere conservar cinco años, el terreno es más flojo.

La decisión de una pasada

• Concepto inventado por el producto, superficie que se ve a diario, el reconocimiento importa: dibújalo.
• Concepto genérico, superficie de poco tráfico, presupuesto ajustado: cómpralo, recolorea y lee antes la licencia.
• Pantalla densa de datos, o el texto ya hace el trabajo: deja el espacio como está.

La regla vale igual para la fotografía, y la lista de tomas equivalente la escribimos en fotografía para la web de un producto software. Medio distinto, principio idéntico: primero se decide qué tiene que decir la imagen, después quién la hace.