Portfolio de Arnau Larripa
Diseñar mi propia web
Contexto y reto
Un portfolio es el primer proyecto que un diseñador enseña sin que nadie se lo haya encargado y, a la vez, el único en el que no hay un cliente que ponga límites. Partía de una versión empezada en Framer y decidí rehacerla desde cero, diseñándola con Claude Design y llevándola después a código con Claude Code.
El reto era que quien llegara a la web (recruiters, equipos de producto, otros diseñadores) entendiera en pocos minutos cómo trabajo y cómo pienso. Y conseguirlo con una sola persona a cargo de todo: la visión, el diseño, el contenido y la puesta en producción.
Objetivos
- Presentar el trabajo con claridad, con casos de estudio fáciles de leer y de recorrer.
- Transmitir una forma de diseñar: cuidada, consistente y accesible desde el primer día.
- Mostrar también la dirección de arte, una parte que los otros casos de estudio apenas cubren.
- Salir con un MVP sólido: el portfolio con sus casos de estudio y un contacto que funcione bien.
Proceso
Partir de una visión clara
Antes de abrir ninguna herramienta, la dirección estaba definida: a quién se dirige el portfolio, qué tono transmitir y qué enseñar y qué dejar fuera. La idea era una web pequeña, minimalista y cálida, con un punto más formal que las referencias que gustaban, y con prioridades concretas: consistencia, accesibilidad y usabilidad por encima de cualquier efecto.
En la marca, la decisión fue presentarse como Product Designer y usar «Arnau Larripa» como nombre en toda la web.
Una primera versión que no me representaba
La primera versión que diseñé con Claude Design era cálida: fondo beige, acento verde oliva y una tipografía con serifa en el titular de la portada. No terminaba de convencerme: no me sentía representado por lo que se estaba diseñando, y por eso hice un cambio bastante radical de la dirección de arte.
La primera versión diseñada con Claude Design, en beige y verde oliva. Estilo suizo, tipografía y color
Los otros casos de estudio tienen un trabajo amplio de usabilidad, pero poca dirección de arte. Este permite explicarla.
El estilo es suizo y tipográfico: una retícula clara, mucho espacio en blanco y una jerarquía construida casi solo con la tipografía (tamaños, pesos y espacios), sin depender de adornos. Encaja con lo que se quería transmitir, que es orden, claridad y un punto formal, y deja el protagonismo a los casos de estudio.
En un estilo así, la tipografía hace casi todo el trabajo. La elegida es Inter Tight, por su buena legibilidad desde el primer vistazo y porque encajaba con el estilo buscado, gracias a su espaciado entre letras más ajustado. Para conocer mejor su origen, hay una entrevista a Rasmus Andersson, creador de Inter, sobre su nacimiento.
Para el color, una base neutra y clara con un único acento terracota, escogido porque se buscaba un color que representara el deporte, la salud, los estilos de vida y la naturaleza. Al ser el único color, además, sirve para guiar la vista hacia lo importante: enlaces, acciones y elementos activos.
Inter Tight en su jerarquía real y la paleta con el contraste de cada color. El amarillo de foco no se usa solo: va siempre con un borde o subrayado negro. Un design system para tener consistencia
Antes de dibujar pantallas definí un design system mínimo: tipografía, una escala de tamaños, una paleta corta y unas reglas de espaciado. Sirve para tener consistencia en todo el portfolio.
También puse el foco en la accesibilidad, comprobando los contrastes, y creé una serie de componentes básicos, como botones, enlaces y tags, con la idea de hacer crecer el sistema a medida que las necesidades lo vayan pidiendo.
Los componentes básicos en sus estados de reposo, hover y foco. El foco se marca en amarillo con un borde o subrayado negro, que es lo que aporta el contraste. Dirigir la herramienta en el diseño
Claude Design propone, pero no sabe hacia dónde quiero llevar el portfolio, ya que el foco y la dirección están en mi idea y concepto del proyecto. Por eso el trabajo no consistió en pedir y aceptar: pedía modificaciones de forma activa y corregía el rumbo cuando una propuesta no encajaba.
Por ejemplo, la web se llenó de separadores y decidí reducirlos al mínimo: es un recurso que me gusta, pero quería reservarlo para momentos concretos.
Con la numeración tipo 01, 02 en los apartados ocurrió algo distinto. Un compañero de diseño me hizo ver que es un recurso muy evidente y muy asociado a los asistentes de IA, y después encontré un par de portfolios que decían estar hechos con Claude y también la llevaban. Decidí quitarla: fue aplicar el feedback de un compañero.
La herramienta aportaba rapidez para explorar, y yo asumía la responsabilidad de qué se queda y qué no.
Los casos de estudio
Los casos de estudio tienen un peso jerárquico muy importante dentro del portfolio de un diseñador, porque es donde se enseña el trabajo realizado. Por eso cuidé especialmente las explicaciones y los textos.
Página de un caso de estudio en escritorio. Para ello creé dos skills, es decir, instrucciones reutilizables para Claude: una para definir el tono y otra para la redacción y la revisión de los textos. Aun así, repasé los textos en todo momento, hice modificaciones de forma activa y dejé siempre un último repaso antes de aprobar todos los textos e imágenes de cada caso de estudio.
Delegar la parte técnica
La parte técnica, tanto el backend como el código del front, la delegué en Claude Code. Es un terreno que desconozco: sé interpretar HTML y CSS, pero hay una parte técnica muy amplia, como el alojamiento o los dominios, que no domino. No tenía sentido asumir un papel tan activo como en el diseño, porque no es mi campo. Como mucho, repasaba algo de código.
Una decisión de diseño: el contacto
Mientras probaba la web, el botón de contacto me molestó especialmente: abría el correo por defecto del dispositivo, algo que no me gusta nada encontrarme en otras páginas. Era importante publicar el portfolio con esto resuelto, así que hice un sprint rápido, una versión 1.1, solo para solucionarlo.
La parte de diseño fue rápida. El botón de contacto sigue en su sitio, pero ahora abre una modal que se despliega por la derecha en escritorio y como bottom sheet, un panel que sube desde la parte inferior, en móvil. Dentro hay un formulario con nombre, correo y mensaje, y lo que se escribe llega directamente a la bandeja de entrada. Con el design system y sus componentes ya desarrollados, fue sobre todo trabajo visual y de usabilidad. Decidí no admitir adjuntos ni enlaces, para no abrir la puerta a archivos o enlaces maliciosos.
Lo que más tiempo llevó fue lo que no se ve: el desarrollo del backend para poder recibir y enviar correos desde una dirección propia. Mi perfil es el de diseñador, así que esa parte la delegué en Claude, supervisando cada paso y preguntando siempre que tenía dudas.
Resultados
El MVP está en producción: el portfolio con sus casos de estudio y un contacto que funciona como se quería.
Para comprobar el rendimiento y la accesibilidad se hizo una auditoría con Lighthouse, la herramienta de Google, sobre la web publicada, en móvil y en escritorio, en la home, en Trabajo, en Sobre mí y en un caso de estudio. Con tres ejecuciones por combinación, la mediana es de 100 en rendimiento, accesibilidad, buenas prácticas y SEO en las ocho. En móvil, el elemento principal de la home y del caso de estudio tarda entre 1,1 y 1,9 segundos en aparecer, y en escritorio entre 0,3 y 0,6. Según los umbrales de Core Web Vitals, un tiempo de hasta 2,5 segundos se considera bueno, así que el resultado queda por debajo del límite incluso en móvil, que es la simulación más exigente. Tampoco hay saltos de maquetación (0, cuando hasta 0,1 se considera bueno) y el bloqueo durante la carga es prácticamente nulo.
Son mediciones de laboratorio, con el móvil simulado, y una puntuación de accesibilidad de 100 no sustituye una revisión manual con teclado y lector de pantalla. Es un MVP: hay otras cosas que se han quedado fuera por ahora y llegarán poco a poco.
Qué me llevo
Un gran aprendizaje en el uso de Claude. Hasta ahora solo lo había usado en la parte de diseño, y aquí lo he usado también en la parte técnica, con Claude Code.
También, avanzar muy rápido con las herramientas actuales y ver de cerca cómo se está transformando el oficio de diseñador, en concreto el de Product Designer.
Y ver algo de luz en el futuro. Con la IA, tanto diseñadores como desarrolladores no sabemos cómo evolucionará nuestro oficio, pero estas herramientas me han hecho ver que podemos aumentar mucho nuestra velocidad y abarcar muchos más ámbitos. Eso sí, siempre hace falta alguien detrás que supervise: alguien que delegue con conocimiento y tenga claros el foco y los objetivos.
Más proyectos
Portfolio de Arnau Larripa
De la dirección de arte al código de mi propia web.
eSBARD Edu
De los wireframes de un experto a una plataforma que se entiende.
Buscador para una app sanitaria
Encontrar tu información de salud sin perderte.
Planificador de medicación imprimible
Del "papelito" de la nevera a un plan claro para cada día.
