← Todos los proyectos
UX · Design Systems · Strategy · Code

Me contraté a mí misma como cliente.

Diseñar un portfolio para una diseñadora con 25 años de experiencia en industrias, disciplinas y continentes es más difícil de lo que parece. Así lo encaré: brief, decisiones, qué rompí y qué haría distinto.

Portfolio de Vale Quiroga — valeriaquiroga.com

El brief de cliente más difícil que escribí.

Problema

El desafío no era técnico. Era editorial: ¿cómo presentar 25 años de trabajo en música en vivo, medios editoriales, UX empresarial, identidad de marca y sistemas de diseño, sin que parezca un CV, un template de portfolio ni un sitio generado por IA?

El primer borrador me posicionaba como "Strategic Design Leader": un lenguaje que suena a gestión de DesignOps, no a diseño hands-on. Lo reescribí desde cero. El posicionamiento final: Senior Designer, pragmática, estratégica, todavía hands-on. Refleja lo que realmente hago y lo que me diferencia de la mayoría de los diseñadores de mi nivel: no solo dirijo, construyo.

Usuarios

Recruiters

Evalúan habilidades y experiencia rápidamente. Necesitan ver rango y nivel de un vistazo.

Hiring Managers

Evalúan el pensamiento estratégico y la ejecución. Buscan a alguien que construye, no solo dirige.

Clientes potenciales

Determinan si soy el partner correcto. Buscan rango, proceso y comunicación clara.

Limitaciones

  • 25 años de trabajo en industrias, disciplinas y países
  • Múltiples proyectos bajo NDA
  • Tres idiomas, tres mercados: localizado en tono, no solo traducido
  • Construido y mantenido en solitario, sin equipo, sin CMS
  • Sin plugins ni herramientas de pago

Requisitos del Producto

  • Funcionar en 3 idiomas con tono localizado, no copy traducido por máquina
  • Comunicar proyectos NDA sin casos de estudio protegidos por contraseña
  • Soportar tanto la búsqueda de empleo como la adquisición de clientes desde la misma homepage
  • Cumplir accesibilidad WCAG 2.1 AA en todas las páginas
  • Completamente mantenible por una sola persona sin CMS ni dependencias de plugins
Exploración de arquitectura de información: tres superficies principales — Home, Work Gallery y Case Study
Exploración temprana de arquitectura de información. Tres superficies principales: Home, Work Gallery y Case Study.
El desafío

Cómo posicionar 25 años de experiencia sin parecer un CV.

Un solo sistema que tenía que escalar en idiomas, audiencias y trabajo bajo NDA

El portfolio no fue diseñado como una colección de páginas. Fue diseñado como un sistema que conecta posicionamiento, diseño, implementación, contenido y medición.

Mapa del sistema portfolio: HTML, CSS tokens, componentes JS, analytics y casos de estudio

Tipografía

El sistema tipográfico original usaba Fraunces para display y DM Sans para el cuerpo. A principios de 2026, Fraunces se había convertido en la fuente por defecto de los portfolios generados por IA. Exploré Newsreader, Gloock, Bodoni e Instrument Serif, cada una con problemas de legibilidad en tamaños pequeños. La elección final fue Lora: cálida, editorial, legible en todos los tamaños, sin la asociación con los portfolios de IA. La lección: establecer los tokens tipográficos desde el principio. Un find-replace global es rápido; encontrar excepciones no lo es.

Comparación tipográfica: Fraunces vs Lora

Antes
Fraunces + estética de portfolio startup

Después
Lora + personalidad editorial

Color

Fondo crema, tinta casi negra, acento magenta, verde salvia como secundario. Cada color de texto tiene su ratio de contraste WCAG documentado en los comentarios del CSS. Los pasteles decorativos están explícitamente marcados como no-texto. El sistema abarca 70+ archivos sin ningún valor de color hardcodeado.

Sistema de tokens de color: ink, paper, warm, accent, accent2 y pasteles decorativos

Fuente de verdad única para el color en todo el portfolio.

Código

HTML, CSS y JavaScript vanilla. Sin React, sin Next.js, sin Webflow. Control total sobre el rendimiento y el comportamiento, y una demostración directa de que mis habilidades de implementación son reales. El código tiene mi huella: animaciones de garabatos, un swap de foto al hacer scroll, grids de stats que colapsan graciosamente en tablet sin una media query por componente.

VSCode mostrando el sistema de CSS tokens con los ratios de contraste WCAG documentados inline

NDA

La mayoría del trabajo empresarial está bajo NDA. El enfoque: visuales representativos que comunican decisiones de diseño sin revelar assets confidenciales, documentados claramente con un badge de NDA. Esto impuso una restricción útil: el texto carga con la responsabilidad. Si no podés mostrar la pantalla, tenés que explicar la decisión con suficiente claridad para que el lector entienda qué se construyó y por qué. Eso es una mejor prueba de comunicación que una galería de capturas pulidas.

Peer Feedback

"That's a great portfolio format. I'm going to reference it when some people ask what I mean by homepage tiles that have value and how to show NDA work without a silly blocking password."

Greg Niejadlik, ADPList Mentor

Este feedback importó porque comunicar el trabajo bajo NDA sin ocultarlo detrás de contraseñas era uno de los desafíos centrales del proyecto. El comentario validó el formato de tiles en la home y la estrategia NDA específicamente, no el portfolio en su conjunto.

No un generador. Un partner de pensamiento.

Usé IA durante todo el proceso de una manera más cercana a tener un partner senior de diseño disponible que a automatizar outputs. La distinción importa: los resultados solo funcionan si sabés lo que estás evaluando.

01
Crítica de diseño desde múltiples perspectivas

Críticas estructuradas desde la perspectiva de un hiring manager, un director creativo de agencia y un potencial cliente: tres audiencias con expectativas muy distintas. Cada una reveló diferentes brechas. El hiring manager señaló que el posicionamiento leía como gestión; la perspectiva del cliente señaló que los servicios estaban enterrados.

02
Auditoría de accesibilidad

Una auditoría WCAG 2.1 AA completa identificó siete problemas en contraste, navegación por teclado, jerarquía de encabezados y atributos aria, de manera más sistemática que una revisión manual. Los fixes se aplicaron en las tres versiones de idioma simultáneamente.

03
Brainstorming de copy en todo el portfolio

Taglines, títulos de sección, epígrafes, etiquetas de CTA, copy del about: todo pasó por múltiples rondas de iteración. El valor no estaba en las opciones generadas sino en la velocidad de eliminación. El copy final en cada caso vino de acotar, reformular y resistir el primer borrador.

También se usó para visuales representativos bajo NDA (briefeada con patrones de interacción y tono visual, no solo "hacé algo que parezca una app") y para testear color y visualizaciones de datos antes de tocar el CSS. La decisión siempre fue mía; la velocidad de iteración no.

Lo que no funcionó
Filtros MixItUp del portfolio.  Algunas decisiones técnicas no funcionaron en la práctica y se revirtieron a la versión más simple en favor de la simplicidad, legibilidad y el rendimiento general de la página.
Posicionamiento inicial como "Strategic Design Leader." Técnicamente preciso, pero atraía el tipo equivocado de atención y enterraba la ejecución hands-on que es el diferencial real. El posicionamiento no es sobre lo que hiciste. Es sobre lo que querés hacer a continuación.

Tres versiones. Un principio: publicar, después mejorar.

V1
MVP: Marzo 2026

Home, galería de work, tres casos de estudio, contacto. Sin pulido, sin microinteracciones, sin auditoría de accesibilidad. El objetivo: publicar con URLs reales. Imperfecto y público es mejor que perfecto e invisible.

V2
Contenido: Abril–Mayo 2026

Casos de estudio completos, reposicionamiento del copy del hero, sección de skills restructurada, testimoniales agregados. Versiones trilingües (ES/IT) desarrolladas completamente, localizadas en tono, no solo traducidas. Analytics integrado desde la primera semana.

V3
Sistema · Junio 2026

Auditoría WCAG 2.1 AA completa y fixes. Migración tipográfica de Fraunces a Lora en 70+ archivos. Refinamiento de copy en todo el portfolio. Animaciones de garabatos actualizadas para reposicionarse aleatoriamente cada ciclo. Swap de foto al hacer scroll. Ajustes de espaciado y tamaños de texto en todas las secciones. Lanzamiento de este caso de estudio: el portfolio en sí como proyecto de diseño, documentado y publicado. Barra de progreso de lectura en todos los casos. Un pequeño detalle de UX que señala respeto por el tiempo del lector.

328 usuarios. 10 países. Sigue iterando.

El éxito no se midió por el tráfico. Se midió por si cada audiencia podía encontrar lo que necesitaba.

Lanzado en marzo 2026. El tráfico directo domina: personas compartiendo la URL, no encontrándola a través de search. Eso dice algo sobre la red. Italia tiene el mayor tiempo de engagement con 2 min 23 segundos. 5 descargas del CV desde la sección de Experience. Los números son tempranos; el sistema está construido para crecer.

328
Usuarios activos, 3 meses
10+
Países alcanzados
42%
Tasa de interacción por sesión
5
Descargas de CV
Google Analytics — eventos: 394 user_engagement, 182 scroll, 5 file_download
Eventos. 394 interacciones sobre 401 sesiones. 5 descargas de CV.
Google Analytics — usuarios por país con tasas de interacción: Italia 57%, Canadá 85%, España 62%
Tasa de interacción por país. Italia 57% · Canadá 85% · España 62% · Argentina 44%.

Lo que diseñarte a vos misma te enseña

Diseñar tu propio portfolio elimina lo único que hace el diseño más fácil: la distancia. No hay cliente para hacer de contrapeso, no hay brief para anclar decisiones, no hay deadline externo para forzar elecciones. Cada decisión se vuelve personal y por eso más difícil de finalizar.

Tratarme a mí misma como cliente ayudó: escribir un brief real, definir una audiencia real, fijar una fecha real de publicación para V1. Los analytics de la primera semana me dijeron más sobre qué funcionaba que meses de deliberación.

Las horas invertidas en un tagline de cuatro palabras no eran una distracción del trabajo de diseño. Eran el trabajo de diseño.

El copy es diseño. El título es lo primero que alguien lee; si no aterriza, nada más se ve. Eso es verdad para cada proyecto que entregué en 25 años. Solo que esta vez no tuve cliente que me lo recordara.