Ilustración en interfaces: cómo dar personalidad a un producto digital sin añadir ruido

Hace un tiempo revisamos la aplicación interna de una empresa de reformas de la Costa del Sol. Funcionaba bien, pero al abrir un proyecto nuevo aparecía una tabla vacía con el texto «No hay datos». Técnicamente correcto. Emocionalmente, una puerta cerrada. Sustituimos esa pantalla por una ilustración pequeña de un plano a medio dibujar, una frase que explicaba qué iba a aparecer ahí y un botón para añadir la primera partida. Nadie del equipo volvió a preguntar «¿y ahora qué hago?».

La ilustración en interfaces tiene esa capacidad: convertir un momento neutro o incómodo en uno que acompaña. También tiene el riesgo contrario, cuando se usa como relleno decorativo, se cuela en todas las pantallas o cada pieza parece dibujada por una persona distinta. Entre un extremo y otro hay un trabajo de criterio que es de lo más bonito del diseño de producto.

Esta guía va de ese criterio: en qué momentos de una interfaz aporta una ilustración, cómo definir un estilo que sea de tu marca y no de una librería, qué medidas y formatos usar y cómo prepararla en código para que pese poco y funcione en modo oscuro.

01Para qué sirve la ilustración dentro de una interfaz

Conviene separar la ilustración de interfaz de la ilustración editorial o publicitaria. En una campaña, la ilustración es el mensaje. En una interfaz, acompaña al mensaje: la persona ha venido a hacer algo, y la imagen tiene que ayudarle a entenderlo o a sentirse bien haciéndolo.

Con esa idea en mente, la ilustración trabaja en cuatro frentes:

• →Explicar. Un concepto abstracto (sincronizar, compartir permisos, programar un envío) se entiende antes con un dibujo sencillo que con un párrafo.
• →Orientar. En una pantalla vacía o en un primer uso, la ilustración marca que ese espacio tiene un propósito y que hay un siguiente paso.
• →Suavizar. Un error 404, un pago rechazado o una conexión perdida son momentos tensos. Una imagen amable baja el tono sin quitarle seriedad al aviso.
• →Celebrar. Terminar un proceso largo, publicar algo, cerrar la primera venta. Un pequeño gesto visual hace que el logro se sienta como tal.

Fíjate en que ninguno de los cuatro es «decorar». Cuando una ilustración no cumple alguna de estas funciones, casi siempre sobra, y la pantalla respira mejor sin ella. Cada elemento visual pide un poco de atención a quien mira, y la ilustración es de los que más piden.

02Dónde colocarla: el mapa de momentos

En el estudio hacemos un inventario de pantallas y marcamos solo los momentos donde una ilustración cumple una función. Suele salir una lista parecida a esta.

Los tamaños son la referencia con la que solemos arrancar, no una norma. Lo importante es la relación con el texto: la ilustración no debería empujar la acción principal por debajo del primer pantallazo en móvil. Si en un estado vacío hay que hacer scroll para encontrar el botón «Crear», la ilustración es demasiado grande.

Los estados vacíos merecen más atención de la que reciben

De todos los momentos de la tabla, el estado vacío es el que más impacto tiene y el que menos se diseña. Es la primera impresión real de cada sección. Un buen estado vacío tiene tres piezas en este orden de importancia: una acción clara, una frase que explique qué aparecerá ahí y, por último, la ilustración. Si tienes que recortar, la ilustración es lo primero que se va.

Distingue también entre los tipos de vacío. No es lo mismo «todavía no has creado nada» (primer uso, tono de invitación) que «tu búsqueda no tiene resultados» (tono de ayuda, sugerir otros términos) o «lo has completado todo» (tono de celebración, la bandeja de entrada a cero). Cada uno puede tener su ilustración, o ninguno, pero el texto siempre cambia.

03Un estilo que sea tuyo: cómo construir un sistema de ilustración

Un producto rara vez tiene una sola ilustración. Tiene diez, veinte, cuarenta, dibujadas a lo largo de meses o años, a veces por personas distintas. Para que parezcan de la misma familia hace falta escribir las reglas, igual que se escriben las del color o la tipografía en un sistema de diseño.

Las decisiones que fijan el estilo

Estas son las variables que documentamos al definir un sistema de ilustración:

1. 01Nivel de abstracción. Desde formas geométricas puras hasta escenas casi realistas. Cuanto más abstracto, más fácil de mantener y más universal.
2. 02Trazo. Con contorno o sin él. Si lo hay, su grosor fijo (por ejemplo 2 px a tamaño de diseño) y su terminación, redondeada o recta. Que coincida con el de tus iconos ayuda muchísimo a la coherencia.
3. 03Paleta. Un subconjunto de los colores de marca, normalmente uno o dos protagonistas, un neutro para estructura y un acento. Entre cuatro y seis colores en total.
4. 04Perspectiva. Plana frontal, isométrica o con profundidad libre. Mezclar isométrico con frontal en el mismo producto se nota enseguida.
5. 05Figuras humanas. Si aparecen personas, cómo son: proporciones, rasgos, diversidad de edades, cuerpos y tonos de piel. Las figuras con rasgos mínimos envejecen mejor y representan a más gente.
6. 06Textura y sombra. Plano total, sombras sólidas, grano o degradados. Cada capa añade personalidad y también peso de archivo.
7. 07Composición. Encuadre, aire alrededor y si la escena tiene un fondo (una mancha, un círculo) o flota sobre la interfaz.

Con estas siete decisiones escritas y un par de ejemplos buenos y malos de cada una, cualquier ilustrador puede incorporarse al proyecto sin romper la familia.

Librerías, estilos de moda y voz propia

Hay recursos excelentes para empezar: unDraw, de Katerina Limpitsouni, o Humaaans y Open Peeps, de Pablo Stanley, tienen licencias muy abiertas y permiten cambiar colores en segundos. Para un prototipo o un producto que está validando su idea son perfectos.

El matiz está en que su popularidad es también su límite. El estilo de figuras planas con extremidades largas y colores pastel, que llegó a conocerse como Corporate Memphis tras el sistema Alegria que el estudio Buck creó para Facebook, se ha visto tanto que hoy se asocia más a «startup genérica» que a una marca concreta. Lo que funciona es usar estas librerías como andamio y llevarlas hacia tu territorio: tu paleta, un detalle gráfico propio, una forma de fondo característica, un grosor de línea que dialogue con tu tipografía.

Ilustración e identidad

La ilustración de interfaz debería sentirse como una extensión natural de la identidad. Si la marca es sobria y técnica, una ilustración geométrica y contenida; si es cercana y artesanal, quizá un trazo irregular o una textura de papel. Cuando definimos una identidad de marca con producto digital detrás, solemos incluir ya el arranque del sistema de ilustración para que no se improvise después.

04Ilustración, iconos y fotografía: cada uno en su sitio

Una duda frecuente es cuándo usar ilustración y cuándo un icono o una foto. La regla que aplicamos es sencilla:

• →Icono cuando hay que señalar una acción o un objeto de forma inmediata y repetible, a tamaños pequeños (16–32 px). Lo tratamos en detalle en la guía de iconografía en interfaces.
• →Ilustración cuando hay que explicar algo abstracto, crear un clima o acompañar un momento concreto, a tamaños medios.
• →Fotografía cuando importa la verdad: el producto real, el espacio real, las personas reales del equipo.

Las tres pueden convivir, pero conviene que no compitan en la misma pantalla. Un estado vacío con ilustración y, al lado, una tarjeta con foto y otra con un icono grande crea tres lenguajes visuales en un mismo vistazo. Lo que funciona es elegir un protagonista por zona.

Una pista útil para unir ilustración e iconografía: dibuja los iconos «ampliados» de la ilustración con las mismas reglas. Si tus iconos tienen trazo de 1,5 px con esquinas redondeadas, que los objetos pequeños de la ilustración (una lupa, un sobre, una campana) se parezcan a ellos. El ojo detecta esa coherencia aunque no sepa explicarla.

05Cómo preparar las ilustraciones para la web

El diseño puede ser precioso y aun así llegar a la web como un archivo de 400 KB que retrasa la carga. La parte técnica decide si la ilustración suma o resta.

SVG optimizado y con colores en variables

Para ilustración vectorial, el formato natural es SVG. Antes de entregarlo, conviene pasarlo por SVGO (o su versión visual, SVGOMG, de Jake Archibald), que elimina metadatos del editor, redondea decimales y fusiona trazados. Es habitual que un SVG exportado desde Figma o Illustrator baje entre un 30 % y un 60 % de peso sin cambio visible.

Para que la ilustración se adapte a temas y al modo oscuro, sustituimos los colores fijos por variables CSS. Así una misma pieza sirve para fondo claro y fondo oscuro:

<svg class="ilus" viewBox="0 0 200 160" aria-hidden="true" focusable="false">
  <circle cx="100" cy="90" r="64" fill="var(--ilus-fondo)"/>
  <rect x="62" y="50" width="76" height="92" rx="8" fill="var(--ilus-superficie)"/>
  <path d="M76 74h48M76 90h36" stroke="var(--ilus-trazo)" stroke-width="4" stroke-linecap="round"/>
  <circle cx="138" cy="52" r="14" fill="var(--ilus-acento)"/>
</svg>

:root {
  --ilus-fondo: #efe7da;
  --ilus-superficie: #ffffff;
  --ilus-trazo: #3c4a3e;
  --ilus-acento: #c96a43;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ilus-fondo: #2a2f2b;
    --ilus-superficie: #3a403b;
    --ilus-trazo: #d9e0d6;
    --ilus-acento: #e08a64;
  }
}
.ilus { width: 100%; max-width: 200px; height: auto; }

En modo oscuro no basta con invertir: los acentos suelen necesitar algo más de luminosidad y los fondos de la ilustración, un tono apenas por encima del fondo de la página. Si te interesa ese ajuste fino, lo desarrollamos en la guía de modo oscuro bien diseñado.

Presupuesto de peso orientativo

En nuestros proyectos trabajamos con estas referencias por pieza, ya optimizada:

• →Ilustración de estado vacío o éxito: por debajo de 10 KB en SVG.
• →Ilustración de onboarding o error: entre 10 y 30 KB.
• →Ilustración de cabecera de marketing: hasta 60–80 KB; si pasa de ahí, comparamos con un WebP o AVIF.

Si la ilustración de cabecera es el elemento más grande del primer pantallazo, se convierte en el candidato a LCP (Largest Contentful Paint, la métrica que mide cuándo se pinta el elemento principal; el objetivo de Google es 2,5 segundos o menos). En ese caso conviene incrustarla en línea o precargarla, y nunca cargarla de forma diferida.

Accesibilidad: decorativa o informativa

WCAG 2.2 pide en su criterio 1.1.1 que todo contenido no textual tenga una alternativa equivalente, y permite que lo puramente decorativo se oculte a las tecnologías de apoyo. La pregunta práctica es: si quito la ilustración, ¿se pierde información?

• →No se pierde nada: es decorativa. En un <img>, alt=""; en un SVG en línea, aria-hidden="true".
• →Se pierde algo: es informativa. En un <img>, un alt que describa lo que comunica, no lo que dibuja («Tres pasos: subir el archivo, revisar y publicar», mejor que «mujer con un portátil»). En un SVG en línea, role="img" y un <title>.

Si la ilustración contiene partes necesarias para entenderla, como las flechas de un diagrama, esas partes deberían tener un contraste de al menos 3:1 con el fondo, que es lo que pide el criterio 1.4.11 para elementos gráficos.

Movimiento con moderación

Una ilustración animada en el momento de éxito puede ser encantadora. En un estado vacío que se ve cada día, cansa a la tercera visita. Si animas, que sea breve, una sola vez y respetando la preferencia prefers-reduced-motion. En la guía de animación en UI hablamos de duraciones, curvas y de cómo respetar esa preferencia.

06Cómo producir el sistema paso a paso

Así lo organizamos cuando un cliente nos pide ilustración para su producto:

1. 01Inventario. Recorremos todas las pantallas y marcamos los momentos candidatos con la tabla de funciones. Suelen salir entre ocho y quince.
2. 02Priorización. Ordenamos por frecuencia de uso e impacto: el estado vacío de la pantalla principal va antes que el error 500.
3. 03Exploración de estilo. Tres direcciones distintas aplicadas a la misma pieza, siempre dentro de una pantalla real, no sobre fondo blanco. La IA generativa ayuda aquí a abrir caminos rápido; la elección y el redibujado son humanos.
4. 04Ficha del sistema. Una vez elegida la dirección, escribimos las siete decisiones con ejemplos de lo que encaja y lo que no.
5. 05Producción en tandas. Primero las tres o cuatro piezas más importantes, probadas en la interfaz; luego el resto.
6. 06Preparación técnica. SVG optimizado, colores en variables, versiones claro y oscuro revisadas, nombres de archivo descriptivos.
7. 07Documentación. Cada ilustración en el sistema de diseño con su uso previsto, tamaño mínimo y texto alternativo si lo necesita.

Lo que mejor funciona en el paso 3 es enseñar las propuestas con contenido real y a tamaño real. Una ilustración que enamora a 800 píxeles puede quedarse en un garabato a 140.

07Señales de que la ilustración está sumando

Para cerrar, una pequeña lista que usamos al revisar un producto con ilustración ya implementada:

• →Cada ilustración tiene una función que puedes nombrar en una palabra.
• →La acción principal sigue siendo lo primero que se ve en la pantalla.
• →Puesta junto a las demás, ninguna parece de otra familia.
• →Los colores salen de la paleta de marca y funcionan en modo claro y oscuro.
• →Ninguna pieza supera el presupuesto de peso de su categoría.
• →Las decorativas están ocultas a lectores de pantalla y las informativas, descritas.
• →Si alguien del equipo necesita una nueva, sabe a qué ficha acudir.

Cuando todo esto se cumple, la ilustración deja de ser un adorno y se convierte en parte de la voz del producto, igual que su tono al escribir o su manera de moverse.

En SIMA diseñamos sistemas de ilustración como parte del diseño web y de experiencia digital, siempre pensados para convivir con la marca y con el código desde el primer boceto. Si tu producto tiene pantallas que podrían acompañar mejor a quien las usa, escríbenos y lo vemos juntos.