A veces olvidamos que todo lo que hoy consideramos “diseño digital” tiene raíces mucho más antiguas. Antes de las pantallas, de los wireframes y los sistemas de diseño, hubo personas que se preguntaron algo esencial:
¿Cómo convertir los datos y la información en conocimiento visual?
Antes de que existieran los dashboards o los sistemas de diseño, el siglo XX ya había descubierto algo fascinante: la posibilidad de pensar visualmente.
En los años 30, Otto y Marie Neurath desarrollaron ISOTYPE (International System of Typographic Picture Education), un sistema gráfico que transformaba datos complejos en imágenes comprensibles para cualquier persona, sin importar su idioma o nivel educativo. ISOTYPE no era solo una colección de pictogramas. Era una gramática visual universal, basada en la idea de que el diseño debía hacer inteligible la información. Su equipo, liderado por Marie Neurath, fue pionero en traducir estadísticas y conceptos sociales a imágenes limpias, humanas y pedagógicas.
Cada icono, cada proporción, tenía un propósito: comunicar sin palabras.
Décadas más tarde, en 1967, el cartógrafo francés Jacques Bertin continuaría ese legado al publicar Semiología de los gráficos. Si ISOTYPE había dado forma al lenguaje, Bertin quiso comprender su estructura. Su obra definió las reglas de esa comunicación visual —las variables que hacen que una imagen transmita información— y abrió la puerta a lo que hoy llamamos visualización de datos o diseño de información.
La “gramática visual” de Bertin
En su libro, Bertin propuso que toda representación gráfica —desde un mapa hasta un dashboard o una app— se construye con una serie de variables visuales.
Estas variables (posición, tamaño, forma, valor, color, orientación y textura) son los elementos mínimos con los que se estructura el lenguaje visual.
Para Bertin, los gráficos no eran meras ilustraciones, sino sistemas de signos que, igual que las palabras, podían combinarse para generar sentido. Y ahí está el paralelismo con la interfaz digital: los diseñadores trabajamos con sistemas visuales que comunican, guían y estructuran la experiencia.
“El gráfico no es una imagen decorativa. Es un instrumento de pensamiento.”
— Jacques Bertin
De los mapas al diseño de interfaces
Si lo piensas, una interfaz digital es una forma de cartografía.
En lugar de representar territorios geográficos, representa territorios de interacción: botones, menús, secciones o jerarquías visuales que orientan al usuario. Los principios del UX y de la usabilidad han desarrollado técnicas y metodologías que tienen sus raices en esta semiología de los gráficos.
Así como un mapa guía al viajero por un terreno desconocido, una interfaz guía al usuario por una experiencia. Ambas requieren claridad, jerarquía y orientación, tres principios directamente vinculados con la semiología de Bertin.
En Micelia solemos comparar la estructura de una web con un sistema de capas visuales: color, contraste, forma, tipografía, posición. Cada una comunica algo, y todas deben hacerlo en armonía para garantizar una experiencia accesible, sostenible y coherente.
Las variables visuales aplicadas al UX/UI
Veamos cómo se traducen hoy las variables visuales de Bertin en diseño digital:
1. Posición
En un gráfico, la posición determina cómo interpretamos los datos. En una interfaz, define la jerarquía visual y la navegación.
Un botón colocado arriba comunica prioridad; un enlace en el pie, algo secundario. La posición guía la atención.
2. Tamaño
Bertin lo entendía como una escala visual. En UI, el tamaño indica importancia y acción.
Un CTA (call to action) más grande no solo destaca: invita. Pero cuidado: el tamaño no puede ser el único indicador, por accesibilidad y contraste.
3. Forma
En mapas, la forma diferenciaba categorías. En diseño digital, las formas (botones redondeados, tarjetas, iconos) comunican patrones de interacción.
Reconocemos un “input” o un “toggle” por su forma, no por un texto que lo explique. Es lenguaje visual en acción.
4. Valor (luminosidad)
El contraste lumínico permite distinguir niveles o énfasis.
En UX, el valor es clave para la accesibilidad visual: suficiente contraste entre texto y fondo, jerarquía tonal en elementos activos o inactivos.
Es también una cuestión ética: un diseño que no se ve, no se usa.
5. Color
Bertin lo utilizaba para agrupar o diferenciar categorías.
En UI, el color da significado emocional y funcional: el verde confirma, el rojo alerta, el azul informa.
En los sistemas de diseño sostenibles, como los que impulsamos en Micelia, la paleta se construye con propósito y contraste, reduciendo el ruido visual y la fatiga digital.
6. Orientación
Las direcciones (horizontal, vertical, diagonal) crean ritmo y sentido.
En interfaces, la orientación del contenido (cards, sliders, scrolls) afecta la fluidez y la comprensión. Diseñar es coreografiar el movimiento visual.
7. Textura o grano
Bertin lo usaba para mostrar densidad o diversidad.
En la web, lo podríamos traducir en densidad informativa, patrones o microinteracciones. Un fondo sutil o una sombra pueden dar profundidad sin recargar.
Menos es más… y mejor si es ligero en carbono.
Figma, los sistemas de diseño y la herencia de Bertin
Si Bertin viviera hoy, probablemente trabajaría en ese ecosistema de aplicaciones de diseño de producto digigital llamado Figma.
Su obsesión por crear un lenguaje visual normativo encaja perfectamente con lo que hoy llamamos Design Systems: conjuntos de reglas, componentes y variables que garantizan coherencia, accesibilidad y eficiencia.
En Figma, cada componente es un signo con un significado. Las variables (de color, espaciado, tipografía) son la traducción contemporánea de sus variables visuales.
Y cuando definimos tokens, jerarquías o patrones, estamos escribiendo, literalmente, una gramática del diseño.
En Micelia, entendemos los sistemas de diseño no como estructuras rígidas, sino como ecosistemas vivos, capaces de adaptarse y crecer como un micelio: interconectados, sostenibles y pensados para cuidar la experiencia del usuario y del planeta.
Usabilidad, accesibilidad y sostenibilidad: un triángulo visual
La semiología de Bertin no solo nos ayuda a diseñar interfaces con engagement, que enganchen emocionalmente, sino también comprensibles, inclusivas y eficientes.
Porque entender cómo percibimos la información visual es el primer paso para reducir fricción cognitiva, aumentar la usabilidad y diseñar con menor impacto ambiental.
Cuando un sistema de diseño es coherente:
- Carga más rápido.
- Se mantiene con menos recursos.
- Es más fácil de usar para todos los públicos.
Y cuando los gráficos y visualizaciones son claros, ayudamos a las personas a tomar decisiones más conscientes, tanto dentro de una web como fuera de ella.
De la semiología al diseño planetario
Releer a Bertin desde el diseño contemporáneo es reconocer que la visualización de información no es solo estética, es ética.
Cada elección visual —color, contraste, densidad— tiene un coste cognitivo y energético.
Diseñar bien es, en el fondo, comunicar mejor consumiendo menos.
En el estudio Micelia lo vivimos así: los principios de Bertin nos recuerdan que la claridad visual no es una moda, sino un compromiso. Diseñar para ver mejor es diseñar para vivir mejor.
“Ver es pensar.”
— Jacques Bertin
La obra de Bertin sigue siendo una brújula para el diseño UX/UI.
Sus variables visuales nos enseñan que detrás de cada botón, cada gráfico y cada patrón de interfaz hay un lenguaje, y que diseñar es traducir pensamiento en forma.
Porque si algo nos enseñó Bertin es que la claridad también puede ser sostenible.