Fran Esbri
- CLIENTE: Fran Esbrí, Arquitecto
- ROL: Product Designer — UX/UI
EL PROBLEMA
Fran Esbrí es un arquitecto con un trabajo visual potente, pero sin presencia digital que lo representara. Necesitaba un portfolio online que no solo mostrara sus proyectos, sino que transmitiera su forma de entender la arquitectura: limpia, estructural y con atención al detalle. El reto no era solo diseñar una web bonita — era crear una experiencia donde las imágenes fueran las protagonistas absolutas y el diseño desapareciera para dejar hablar a la obra.
MI ROL Y OBJETIVO
Lideré el proceso completo de diseño UX/UI: desde el research inicial y el análisis de competidores, hasta la definición de la arquitectura de información, el wireframing en baja fidelidad y el prototipo final en alta fidelidad en Figma para desktop y mobile. El objetivo era crear un portfolio minimalista, elegante y funcional que reflejara la identidad profesional de Fran y le permitiera captar nuevos clientes y proyectos.
PROCESO
Fase 1 — Research y Benchmarking
Antes de diseñar ninguna pantalla, analicé en profundidad portfolios de arquitectos de referencia y estudios de diseño de alto nivel. El análisis reveló un patrón claro en los portfolios más efectivos del sector: menos texto, más imagen, navegación casi invisible y tipografía con carácter. También identifiqué lo que diferenciaba a los portfolios mediocres — exceso de información, galerías fragmentadas y falta de jerarquía visual — para evitar esos errores desde el principio.
Fase 2 — Arquitectura de información
Con los insights del research, definí una estructura de navegación radicalmente simple: el menor número de secciones posible para que el usuario llegara a los proyectos en el mínimo de clics. La arquitectura resultante priorizó los proyectos como entrada principal, seguidos de una sección sobre el arquitecto y un contacto directo. Cada decisión estructural respondía a la misma pregunta: ¿esto acerca al usuario a la obra de Fran o la interrumpe?
Fase 3 — Wireframes en baja fidelidad
Diseñé los wireframes priorizando la proporción y el peso visual de cada elemento antes de añadir ningún color ni tipografía. En esta fase tomé la decisión clave del proyecto: imágenes a pantalla completa como elemento estructural de la home y las fichas de proyecto, forzando al usuario a detenerse en cada obra antes de seguir navegando. Esta decisión se validó con Fran antes de avanzar al prototipo.
Fase 4 — Prototipo en alta fidelidad e iteración
Con la estructura validada, desarrollé el prototipo visual completo en Figma para desktop y mobile. El diseño se construyó sobre tres decisiones estéticas claras: imágenes a pantalla completa para máximo impacto visual, paleta neutra que no compitiera con las fotografías de los proyectos, y tipografía con personalidad que aportara carácter sin restar protagonismo a las imágenes.
El proceso no fue lineal — hubo iteraciones y cambios. Fran solicitó ajustes en la forma de presentar los proyectos individuales y en la sección de contacto, lo que llevó a refinar la jerarquía de información en las fichas de proyecto. Cada iteración mejoró la claridad y la coherencia del conjunto.
RESULTADO
El portfolio de Fran Esbrí quedó lanzado con una identidad digital coherente con su forma de entender la arquitectura: limpia, directa y centrada en la obra. La web funciona como una extensión de su trabajo — no como un catálogo, sino como una experiencia visual que comunica su nivel profesional desde el primer scroll.
