Product Design · Design Systems · Front-End · IA

Estudié periodismo. Construyo los sistemas sobre los que construyen otros.

Proyectos

Proyectos seleccionados

Trabajo profesional en Prensa Ibérica: design systems, decisiones de producto guiadas por evidencia y productos interactivos para un grupo editorial multimarca.

EVIDENCIA REAL DEL PROYECTOUna arquitectura compartida · múltiples identidades editoriales

Cabecera y portada de El Periódico con la arquitectura de cabecera compartida. — El Periódico

Cabecera azul de una publicación de Prensa Ibérica con la arquitectura de cabecera compartida. — Prensa Ibérica

Cabecera de La Nueva España con la arquitectura de cabecera compartida. — La Nueva España

Cabecera de SPORT con la arquitectura de cabecera compartida. — SPORT

CASO PRINCIPALFundamentos → componentes reutilizables → producción multimarca → gobernanza de IA134 familias de componentes · 13 modos de IA especializados

01 Prensa Ibérica · 2023—2026Design Systems · Front-End · Accesibilidad

42DS — Diseñar a escala en un ecosistema multimarca

Trabajo en el design system compartido de un grupo editorial multimarca —arquitectura de tokens, accesibilidad y rendimiento front-end— mientras los productos legacy y el negocio del día a día siguen funcionando.

Arquitectura de design tokens de Figma a Style Dictionary, WCAG 2.1 AA en productos editoriales complejos y trabajo de rendimiento CSS en las cabeceras del grupo.

SPORT / TARJETAS MÓVILES279 tarjetas medidas

Prueba	Muestra	Observación	Resultado
Tipo A · 1:1	279	El texto supera el umbral	86%
Tipo A · 1:1	279	El texto supera la altura de la imagen	40.86%
Tipo A · 1:1	279	Encuadre significativo de la imagen	81.88%
Tipo B · 16:9	51	Encuadre significativo de la imagen	100%

02 Prensa IbéricaProduct Design · Investigación · Datos

SPORT — Convertir una creencia de producto en evidencia medible

Un benchmark y una prueba medida para entender si las tarjetas móviles ocupaban demasiado espacio vertical y qué se perdía al hacerlas más pequeñas.

Los criterios de altura, densidad de texto y encuadre que salieron de ahí se incorporaron a la tarjeta de noticia de 42DS, uno de los patrones centrales del sistema.

Mapa interactivo de medios · desarrollo originalCódigo real

03 Prensa IbéricaProduct Design · Datos · Front-End · IA

Mapa interactivo de medios — De un recurso estático a un producto mantenible

Cuestioné el encargo original de mapa estático y propuse una solución interactiva y responsive con tecnologías abiertas y datos estructurados.

El mantenimiento pasó de editar imágenes a trabajar con datos estructurados: Google Sheets → CSV, sobre Leaflet e IGN en lugar de una plataforma de mapas de pago.

Proyecto propio

Del pensamiento sistémico a la ejecución AI-native.

Tres proyectos personales construidos sobre SYX, mi propio design system. Están para probar hasta dónde puede llegar el desarrollo asistido por IA cuando trabaja dentro de reglas que yo defino. Están etiquetados como proyectos propios para que los casos profesionales de arriba no se confundan.

syx--mundial-2026Ver el proyecto ↗

Mundial 2026Vista previa del proyecto

04Producto de principio a fin

Mundial 2026 — Construir la experiencia que diseñé.

Un explorador interactivo hecho con SYX, GSAP, Three.js y Leaflet: un concepto de interacción llevado hasta un producto funcionando, con desarrollo asistido por IA.

Rol: Producto · Interacción · Desarrollo asistido por IA
Construido con: SYX · GSAP · Three.js · Leaflet

El entregable es un producto funcionando, no una entrega a desarrollo. Cartografía, 3D y motion coordinados en una sola experiencia navegable.

Explorar el proyecto ↗Leer el caso de estudio →

syx-atlas--reportajes/atelierVer el proyecto ↗

AtelierVista previa del proyecto

05ARegistro Atlas 01

Atelier — Un perfil editorial cinematográfico.

ATELIER usa el modelo mental ATLAS para un storytelling humano centrado en el perfil: atmosférico, tipográfico y con un ritmo emocional, mientras SYX mantiene la ejecución gobernada.

Rol: Diseño editorial · Motion · Dirección de arte
Construido con: SYX · ATLAS

Un sistema gobernado, una voz editorial propia. La tipografía, la paleta y el motion aportan el carácter; SYX mantiene la ejecución bajo control.

Explorar el proyecto ↗Leer el caso de estudio →

syx-atlas--reportajes/obsidianaVer el proyecto ↗

ObsidianaVista previa del proyecto

05BRegistro Atlas 02

Obsidiana — Un dosier forense guiado por datos.

OBSIDIANA aplica la misma lógica ATLAS + SYX a la investigación y los datos: un lenguaje visual más forense, tensión controlada y un ritmo editorial deliberadamente distinto.

Rol: Sistemas editoriales · Narrativa de datos · Motion · Gobernanza de IA
Construido con: SYX · ATLAS

Una arquitectura compartida no obliga a una estética compartida. Los mismos tokens, las mismas reglas de accesibilidad, un ritmo editorial deliberadamente distinto.

Explorar el proyecto ↗Leer el caso de estudio →

OFICIO VISUAL / SPORT

Un lenguaje visual construido para seguir siendo editorial, desenfadado y reconocible.

Siete piezas originales de SPORT, compuestas como un único campo visual en lugar de un catálogo: lo justo para leer el rango, el ritmo y el carácter del conjunto.

Ver el caso visual →

01Redes sociales

Ilustración de SPORT: Eurocopa 2024 — 02Eurocopa 2024

Ilustración de SPORT: Encuesta — 04Encuesta

Ilustración de SPORT: Comentarios — 05Comentarios

Ilustración de SPORT: Descuento — 06Descuento

Trayectoria

Diecinueve años.
La escala no dejó de cambiar.

Agencia, telecomunicaciones, inmobiliario y medios. El hilo conductor no son las herramientas que fui acumulando: es de cuánto producto me fui haciendo responsable, desde pantallas sueltas a sistemas compartidos, productos de principio a fin y flujos operables por IA.

01 2007–2011 Buleboo Estudio Digital Designer & Front-End HTML, CSS y jQuery para clientes como Barceló Viajes y Vodafone. Pantallas4.3 años
02 2012–2021 France Telecom España Senior UI/UX Designer & Front-End Developer Productos de alto tráfico, flujos y estructuras de conversión. Interfaces a escala9.7 años
03 2021–2023 Aliseda UI/UX Designer & Front-End (Design Systems) Creé Brickee, su design system interno, desde cero. Design systems1.2 años
04 2023–2023 Plexus Tech UI/UX Designer Interfaces responsive y arquitectura de componentes SCSS reutilizables. Design systems0.3 años
05 2023–actualidad Prensa Ibérica Product Designer & Front-End Engineer 42DS: design tokens, WCAG 2.1 AA y rendimiento CSS en todo el grupo. Sistemas multimarca3.1 años

Empecé usando IA para que me ayudara a escribir código. Después entendí que la palanca real no era el prompt, sino el sistema que lo rodea.

Diseñar → Sistematizar → Escalar → Construir → Orquestar

TARJETAS MÓVILES DE SPORT / EVIDENCIA

Producto creía que las tarjetas eran demasiado altas.
Yo empecé por medirlas.

La pregunta se volvió medible: ¿con qué frecuencia superaba la tarjeta el umbral de altura definido y qué pasaba al cambiar la proporción de la imagen?

86%de las tarjetas superó el umbral de altura definido
en el Tipo A

279 tarjetas analizadas · un punto por tarjeta

Dentro del umbralSupera el umbral

51tarjetas probadas en la
alternativa 16:9

3portadas
muestreadas

MAPA INTERACTIVO DE MEDIOS / DECISIÓN DE PRODUCTO

El encargo era simple: reproducir el mapa.
El problema real no lo era.

En lugar de rehacer una solución estática basada en imágenes, cambié el modelo de mantenimiento: contenido estructurado, UI reutilizable y un mapa interactivo capaz de escalar.

AntesUna foto de los datosmapa-medios-v7-FINAL.jpg · 1440×900

Mover una sola localización obliga a reabrir el arte final y volver a exportarlo. 82 localizaciones, y ninguna con enlace propio.

Las mismas localizacionesotro modelo de mantenimiento

DespuésLos datos en sílocations.csv · 82 filas · teselas del IGN

Cada localización es una fila. 16 cabeceras · 13 comarcas · actualizadas sin tocar el build.

Geometría de país y provincias: Instituto Geográfico Nacional, CC BY 4.0, vía es-atlas. Coordenadas: la propia tabla de localizaciones del proyecto, leída de la demo publicada durante el build.

01Investigaciónrestricciones
02Datos estructuradosGoogle Sheets → CSV
03UX/UImobile-first
04Leaflet + IGNcapa interactiva
0542DSintegración

TODO

Seis proyectos. Seis problemas distintos.

Todos los proyectos aparecen aquí para poder repasarlos rápido, y cada uno tiene su propia página con la narrativa completa, las decisiones y la evidencia. Los casos 01–03 y 06 son trabajo profesional; el 04 y el 05 son proyectos propios.

Stack

Con lo que trabajo de verdad

Cuatro prácticas que aporto a un design system y las herramientas con las que las llevo a producción.

Práctica

Arquitectura de design tokensFigma → JSON → Style Dictionary, para que diseño y código lean una única fuente.
WCAG 2.1 AAImplementado en productos editoriales complejos, no como una aspiración.
Arquitectura SCSSCapas de cascada, tokens semánticos y theming multimarca.
Rendimiento front-endReducción del peso del CSS y de la deuda técnica en productos de alto tráfico.

Herramientas

Diseño & fundamentos

Figma
Affinity
Storybook
Blender

Front-end

HTML5
SCSS
JavaScript
Vue

Interacción & datos

GSAP
Three.js
Leaflet
ECharts

Entrega & IA

GitHub
Jira
Confluence
Claude

Sobre mí

Diecinueve años entre la interfaz y el código que la pone en producción.

Soy Product Designer y Front-End Engineer, afincado en Madrid. Estudié Ciencias de la Información en la Universidad Complutense y después diseño gráfico en la Escuela Arteneo. Seguramente por eso mi trabajo vuelve una y otra vez a problemas editoriales: jerarquía, ritmo de lectura y cuánto significado sobrevive cuando un layout se comprime.

Empecé en una agencia en 2007, construyendo sitios para clientes como Barceló Viajes y Vodafone. Después, nueve años en France Telecom España en productos de alto tráfico, optimizando flujos y estructuras de conversión. En 2021 me pasé de lleno a los design systems en Aliseda, donde creé Brickee, su sistema interno. Desde 2023 estoy en Prensa Ibérica trabajando en 42DS: arquitectura de design tokens de Figma a Style Dictionary, WCAG 2.1 AA en productos editoriales complejos, rendimiento CSS y reducción de deuda técnica en las cabeceras del grupo.

En los últimos años, la IA ha ampliado ese alcance. En lugar de tratarla como un asistente, diseño el contexto en el que trabaja: las reglas, el conocimiento y la gobernanza que mantienen la ejecución asistida por IA dentro de un sistema en vez de alrededor de él.

Ubicación: Madrid, España
Idiomas: Español (nativo) · Inglés (nivel profesional)
Formación: Ciencias de la Información, UCM · Diseño gráfico, Escuela Arteneo
Enfoque: Design systems · arquitectura front-end · producto asistido por IA

Contacto

Si algo de esto te resulta útil, escríbeme.

Me gusta hablar de design systems, arquitectura front-end, productos editoriales o de cómo mantener el trabajo asistido por IA dentro de un sistema y no alrededor de él.

Estudié periodismo. Construyo los sistemas sobre los que construyen otros.

Proyectos seleccionados

42DS — Diseñar a escala en un ecosistema multimarca

SPORT — Convertir una creencia de producto en evidencia medible

Mapa interactivo de medios — De un recurso estático a un producto mantenible

Del pensamiento sistémico a la ejecución AI-native.

Mundial 2026 — Construir la experiencia que diseñé.

Atelier — Un perfil editorial cinematográfico.

Obsidiana — Un dosier forense guiado por datos.

Un lenguaje visual construido para seguir siendo editorial, desenfadado y reconocible.

Producto creía que las tarjetas eran demasiado altas.Yo empecé por medirlas.

El encargo era simple: reproducir el mapa.El problema real no lo era.

Seis proyectos. Seis problemas distintos.

Con lo que trabajo de verdad

Diseño & fundamentos

Front-end

Interacción & datos

Entrega & IA

Diecinueve años entre la interfaz y el código que la pone en producción.

Si algo de esto te resulta útil, escríbeme.

Producto creía que las tarjetas eran demasiado altas.
Yo empecé por medirlas.

El encargo era simple: reproducir el mapa.
El problema real no lo era.