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 una arquitectura SCSS compartida en la que el 97 % del código es común a todas las marcas.

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.

OFICIO VISUAL / SPORT

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

Siete de los diecisiete recursos de SPORT, compuestos como un solo campo visual en vez de como un catálogo: lo justo para leer el registro, 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

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 →

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 un core compartido por todo el grupo. Sistemas multimarca3.1 años

Tesis

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

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-endPeso de CSS con presupuestos duros: cores de marca de 33 KB frente al techo de 75 KB de AMP.

Herramientas

Diseño & fundamentos

Figma
Affinity
Storybook

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é Periodismo (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 y la arquitectura SCSS compartida que hay detrás de 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 de trabajo)
Formación: Periodismo (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.