Marco Ramos · Product designer & developer Madrid, ES ·
← Todo el trabajo

Witty Wolf · 2026

La web que estás leyendo es el caso de estudio

El propio portfolio: una plantilla de Framer jubilada a favor de una web Astro escrita a mano. La misma alma en los textos, un envase nuevo, cada línea mía.

Rol
Product designer & developer
Disciplina
Art direction · Front-end · Design system
Año
2026
Estática Astro, escrita a mano, plantilla jubilada
2 Tipografías, ambas self-hosted
1 Color de acento, gastado con cuidado

El portfolio antiguo vivía en una plantilla de Framer. Cumplía como cumple un piso de alquiler: todo funciona, nada es tuyo. Los textos tenían alma. El envase tenía una suscripción.

El problema del envase

El envase de otro

La plantilla hablaba primero, y hablaba sobre todo en stock. La foto del hero era mía, un atardecer que hice en los Houthavens de Ámsterdam, pero la página de trabajo abría con un render 3D de una fototeca y el contacto se escondía tras un skyline de ciudad que podría vender cualquier cosa. Debajo había un logotipo en una tipografía display redondeada que ya ha sido retirada de la marca por completo.

La antigua landing de Framer: la foto de atardecer con veleros que Marco hizo en los Houthavens de Ámsterdam, con Witty Wolf Design en la antigua tipografía display redondeada
La antigua landing: mi atardecer de los Houthavens, la tipografía jubilada, los textos ya queriendo salir de ahí.
El antiguo hero de la página de trabajo: un render 3D genérico de stock con átomos y esferas orbitando La antigua página de contacto: una foto de stock de larga exposición de un skyline con un título gigante de Contact
Átomos de stock presentando los casos, un skyline de stock cogiendo el teléfono.

El pensamiento de marca era real y merecía conservarse: el ingenio como principio de trabajo, lenguaje llano, personalidad al servicio de la claridad. Merecía algo mejor que un layout que otra persona ya había vendido mil veces.

La antigua hoja de marca: visión de marca, tono de voz y principios de imagen de Witty Wolf Design
La antigua hoja de marca: el tono de voz sobrevivió a la mudanza, la tipografía no.
La web de Witty Wolf abierta dentro del editor de Framer, con paneles de variantes y un botón de Upgrade Now visible
El envase en persona: mi web, el editor de otro, un botón de upgrade donde debería haber un commit.

La mudanza

La misma alma, un envase nuevo

La decisión: jubilar la plantilla y escribir a mano una web Astro estática. Conservar la voz de los textos, sustituir todo lo que la sostenía. La dirección de arte se volvió field notes: papel cálido, tinta, una cuadrícula tenue, línea fina y un solo acento ámbar, gastado con cuidado. Dos tipografías, ambas self-hosted: Geist Mono como voz para títulos, navegación, etiquetas y números, Work Sans solo para lectura larga. La antigua display redondeada se jubiló en todas partes, también en la propia marca.

La nueva home en Astro con el tema claro: hero de máquina de escribir con la palabra tachada, el lobo de línea dibujado sobre papel cálido
La misma dirección después de la mudanza: papel, tinta, voz mono y el lobo dibujado a trazos.

01 · El oficio

Detalles que se ganan el sitio

El hero se escribe solo, comete un error a propósito, lo tacha y sigue: pantallas se convierte en personas. El lobo de al lado es el logo real dibujado como línea pura que se esboza a sí misma, sin rellenos salvo la lengua ámbar. Un rastro ámbar se dibuja página abajo mientras haces scroll, un reloj vivo marca la hora de Madrid en la línea de metadatos y el footer contesta en modo terminal. El modo oscuro llega sin destello del tema equivocado, respeta la preferencia del sistema, y cambiarlo se gana un momento: el lobo se inclina, tiembla, enciende un ojo ámbar, la lámpara parpadea y el tema aterriza. Toda animación se apaga cuando reduced motion está activo.

La nueva home en Astro con el tema oscuro: el mismo hero con la línea del lobo en tono papel sobre casi negro
El modo oscuro es un tema de pleno derecho, no una inversión: el lobo cambia tinta por papel.

02 · El sistema

Una sola fuente de verdad

Las páginas de caso corren sobre un sistema pequeño, no sobre un montón de decisiones. Las etiquetas de margen que ves en esta misma página son la única fuente de verdad del índice de secciones: el raíl con scroll-spy en escritorio, la píldora flotante en móvil y los enlaces ancla que siguen funcionando sin JavaScript, sellados en la build por un pequeño plugin de rehype. Las figuras comparten un solo tratamiento field-notes, cinta y chinchetas solo para imágenes, nunca para el texto. Cada caso abre bajo un sello de goma con la marca de su cliente, estampado cuando el título termina de escribirse.

Una doble página de caso en la nueva web: el raíl del índice a la izquierda, una etiqueta de margen y un título, y debajo una captura del producto vivo
El raíl de secciones, alimentado por las etiquetas de margen: escribe la nota una vez, el índice la sigue.

Mi peor cliente

Soy mi peor cliente

Publicar para ti mismo significa conocer a tu propio yo crítico, y el mío es el cliente más difícil que tengo. Sin briefing tras el que esconderse, sin nadie más a quien culpar. Un escaparate también te frena: el diseño tiene que apartarse del camino del trabajo, así que la contención es el encargo, no el compromiso.

La web de Framer llevó casi cuatro meses. La mayor parte no fue construir, fue decidir. Qué enseñar, qué cortar, qué imágenes se ganaban el sitio, dónde estaba el equilibrio. Esta reconstrucción fue más rápida, porque lo decidido ya estaba decidido. El trabajo fue redacción en el sentido de tachar: cortar lo que sobraba y lo que en silencio había empezado a detestar. Lo más difícil fue matar a mis favoritos.

La crítica de un cliente o de un jefe la encajo mejor que la mía. Soy implacable cuando me toca juzgar mi propio trabajo. Después, se pule.

Siendo honestos

La prueba más honesta que existe

Un portfolio no tiene cifras de conversión que merezcan citarse, así que no pienso inventarlas. El resultado es propiedad: cada línea de esta web es mía y cambiarla lleva minutos, no un ticket de soporte. Urbiqo me enseñó que construir tu propio diseño es la prueba de usabilidad más honesta que hay; aquí la lección volvió a casa, porque esta vez el cliente era yo, y el cliente se fija en todo.

Siguiente caso Verificar a hosts e inquilinos antes de que algo salga mal Urbiqo