De galería de pantallas a portafolio de decisiones
Un portafolio web con el objetivo de mostrarles a equipos de diseño y futuros clientes varios de mis trabajos y mi trayectoria como diseñador. En este caso de estudio explico cómo pasé de una vitrina de solo galería de pantallas con poco contexto a un sitio web propio que documenta mis decisiones.
01 - El problema
Elegir entre actualizar y migrar
02 - Hipótesis
Una hipótesis basada en criterios
Establecí algunos criterios para filtrar mejor cuál plataforma escoger. Tuve presente puntos como libertad de personalización, mi propia arquitectura de información, buen performance, responsive óptimo, curva de aprendizaje, low-code o no-code y dos limitantes claras: presupuesto limitado y poco tiempo.
Todo esto parte de una hipótesis: un portafolio con dominio, arquitectura de información y estructura propia deja una mejor impresión ante equipos de diseño y clientes que una plantilla o portafolio en canal prestado. Esta hipótesis solo podía ser confirmada o derribada cuando mi portafolio estuviera en producción y con feedback temprano de colegas diseñadores, que hacen parte de equipos de diseño, parte de mi público objetivo.
Luego de una muy breve investigación en la web, revisando comentarios en foros, reseñas en blogs sobre plataformas para portafolios, y sumando los criterios de aceptación que establecí, el resultado me llevó a escoger entre Framer y Webflow, siendo esta última la que seleccioné porque había experimentado con ella hace unos años. Luego de tener —por el momento— cubierto este punto, empecé a pensar en cómo diseñar los primeros bocetos de mi portafolio.
03 - Investigación de competidores
Conociendo a quienes resolvieron el mismo problema
Antes de pensar en el primer boceto, era necesario realizar un breve benchmark sobre el mercado de diseñadores. La investigación de portafolios que compiten en mi misma área la hice revisando plataformas que suelen calificar sitios web; un ejemplo de estas es Awwwards. Los que mejor resolvían el mismo problema los tuve como referentes, entre ellos el sitio de David Rodriguez, un product designer. Al tener una idea más clara, la terminé de aterrizar usando la IA, Figma Make, para que diseñara un portafolio con una serie de instrucciones:
Usar los colores rojo, blanco y negro.
Agregar un isotipo que he estado usando como mi marca personal.
Maquetar según las secciones que manejan los referentes: una corta introducción, sobre mí, trayectoria, habilidades, proyectos y cómo contactarme.
No replicar los contenidos de estos portafolios; solo tomarlos como referentes.
Con esa base ya lista y varias ideas de animaciones dadas por Figma Make, tenía mi “primer boceto en alta” para empezar a diseñar.
Figma Make con indicaciones para la construcción del portafolio.
Qué hice con IA
Definí la base, las animaciones y el estilo visual del portafolio usando Figma Make.
Qué hice manual
Reorganicé jerarquía, ajusté los contenidos y rediseñé todo el portafolio sin tocar el estilo visual.
04 - Proceso de diseño
Ordenando el sitio web con un sistema de diseño
Foundations definidos para el portafolio
Componentes tipo Button
De variables a tokens
La construcción del portafolio me llevó a realizar una serie de cambios, entre ellos los colores principales que había definido; ya no serían tres sino dos, blanco como primario, rojo como secundario, y el color negro pasó a ser el primario en el modo oscuro. Al tener esto claro, definir los colores primitivos era el primer paso.
Tokens primitivos de color — base del sistema
Tokens semánticos de color
Figma permite usar los colores como estilos o variables, pero se pueden usar ambas formas enlazando una variable de color a un estilo de color, como en el ejemplo de la imagen. Esto evita el doble trabajo de editar en ambas formas, además de que, por buenas prácticas, si un portafolio ya creado estableció sus colores desde los estilos, borrarlos no es el procedimiento correcto, sino enlazarlos a las variables.
Enlace de variables de color a estilos de color
Modo oscuro
El modo oscuro es una buena práctica de accesibilidad para aplicar porque le permite al usuario reducir su fatiga visual cuando está en entornos de poca luz y leyendo contenidos extensos. El primer paso para hacerlo es definir los tokens semánticos de color en el sistema de diseño, y luego en el diseño y maquetado del sitio web, se define que el usuario pueda alternar entre modo claro y modo oscuro las veces que quiera a través de un toggle.
Home de primera versión del portafolio en modo claro y modo oscuro.
Documentación de componentes
Este portafolio no es un producto grande que amerite documentar absolutamente todo. Este ejercicio de sistema de diseño busca mostrar mi proceso de creación de uno, y para la documentación solamente trabajé con el componente button, cambiando el proceso de cómo construirlo: usé Figma MCP con Claude.
La primera versión de documentación de este componente es un ensayo de instrucciones, referentes y restricciones dadas a Claude, los cuales se iban refinando hasta llegar a un resultado que cubriera lo básico de una documentación. El objetivo de esto es agilizar el proceso de documentación con la IA sin eliminar el criterio y las decisiones humanas.
Primera parte de la documentación del componente Button: funcionalidad, anatomía y variantes.
Segunda parte de la documentación del componente Button: reglas de uso, propiedades personalizables y accesibilidad.
05 - Construcción
Pasando el diseño en Figma a Webflow
La decisión de tener un sistema de diseño definido ayudó a agilizar la construcción del sitio web en Webflow. Todas las variables y estilos definidos previamente en el diseño fueron trasladados mediante el plugin Figma to Webflow, dando como resultado los colores ya listos para aplicar en lo que se construyera. Mi conocimiento básico de HTML & CSS me ayudó a maquetar rápidamente las secciones, componentes y estructuras que estaban en mi diseño en Figma.
Dos situaciones que al principio fueron una ventaja, llegaron a jugar en mi contra: mi experiencia previa en Webflow fue el factor que me hizo decidirme por usar esta plataforma, y esa misma experiencia, al ser limitada, me obligó a tener que aprender nuevas cosas sobre Webflow. Para mitigar esa situación, recurrí al MCP de Webflow que tiene Claude.
Espacio de trabajo del portafolio en Webflow
Todo lo que no podía resolver en Webflow, ya sea porque la misma herramienta se limitaba en sus funcionalidades, o por mi falta de conocimiento profundo sobre la plataforma, lo solucioné con código embebido que Claude me generaba y luego lo introducía en el canvas mediante la función code embed de Webflow.
Luego de definir el dominio web del sitio y revisar en el link de prueba que en performance y responsive fuera óptimo, mi portafolio oficialmente fue publicado. La experiencia de uso de Webflow me hizo notar varias situaciones complejas, llevándome a replantearme varias cosas:
Dependo mucho de la función code embed de la plataforma para solucionar lo que manualmente no puedo hacer.
Poder animar algunos componentes y diseñar varias microinteracciones era difícil de hacer en esta plataforma, ampliando cada vez más la curva de aprendizaje.
Debo seguir explorando todas las funciones de Webflow para agregar lo que me quedó faltando del diseño, y eso es tiempo extra que no tengo.
La conclusión de todo esto fue explorar Framer, la cual según comentarios y opiniones en la web, su interfaz y modo de uso son muy parecidos a Figma.
06 - Migración y publicación
Mudando todo a Framer
Para confirmar los comentarios y opiniones en la web sobre esta plataforma, revisé rápidamente algunos videos sobre cómo usarla y usé varias funcionalidades de Framer de manera intuitiva, llegando a la siguiente conclusión: es cierto, es más fácil de manejar, y mucho más fácil para usuarios de Figma.
Pasar todo el diseño en Figma a Framer significaba nuevamente construir desde cero, pero el resultado justificó ese esfuerzo porque la curva de aprendizaje —por mi experiencia en Figma— fue mucho más corta que en Webflow. También varias de sus funciones solucionaban lo que no podía resolver con Webflow, algunos de los ajustes de diseño los hacía primero sobre el mismo Framer y luego los replicaba en Figma. Todo lo nuevo que necesitaba agregar fue mucho más rápido hacerlo en Framer que en Webflow, pasando de dos días a uno solo. Y por último, en temas de presupuesto, Framer pasó a ser más económica porque Webflow subió de precio. La mudanza a esta plataforma ya era un hecho, solo quedaba publicar el portafolio nuevamente.
Espacio de trabajo del portafolio en Framer
07 - Conclusiones
Aprendizajes
Luego de publicar nuevamente el portafolio pero desde Framer, con el mismo dominio web y mostrarlo a equipos de diseño y colegas, y tener feedback, tomé varias decisiones:
Hallazgos tras feedback y análisis
La primera versión de mi portafolio tenía bastante contenido de IA, restando evidencia de criterio propio del diseñador. La IA es una herramienta que sirve para agilizar procesos, automatizar acciones repetitivas, resolver incógnitas técnicas y aterrizar ideas, pero no para que elabore todo el trabajo humano.Agregar un isotipo que he estado usando como mi marca personal.
El contenido de los casos no decía mucho: aún como diseñador UI, no había procesos profundos que justificaran un alto seniority.
La hipótesis principal fue derribada parcialmente: un portafolio con dominio, arquitectura y estructura propia sí puede dejar una mejor impresión ante equipos de diseño, pero de nada sirve todo esto si su contenido es pobre. Se vuelve un portafolio descartable.
Un portafolio que tiene gran parte de su contenido redactado por IA, aunque los casos sean reales, se vuelve poco sustentable en una entrevista si no maneja el mismo tono y pensamiento que refleja el candidato cuando habla.
Decisiones
Para justificar mis habilidades mencionadas en el portafolio, debo dejar alguna muestra. No borro mi portafolio en Webflow, lo dejo público aquí, con el dominio webflow.io para tener evidencia de conocimiento low-code con esta plataforma.
Mejorar el contenido reescribiéndolo. Evitar enfocarme en solo mostrar mis propuestas visuales. Resaltar mis procesos y decisiones. No inventar datos.
Evitar que la IA redacte todo por mí. Mejor usarla para auditar mi propio contenido: aterrizar ideas, organizarlas y mejorar redacciones. La voz y pensamiento propio del diseñador son lo que cuenta.
Este portafolio seguirá actualizándose y tendrá más casos de estudio con una prioridad clara: ajustar según la retroalimentación de quienes lo lean, sin descuidar el performance y la parte visual del sitio web. Pero hay algo que sí es seguro: puede que un portafolio atraiga visualmente y tenga un excelente performance, pero eso no es suficiente si su contenido es pobre, redactado por alguien distinto al diseñador, difícil de leer y sin explicarle al lector lo que está viendo. Quien lo lee abandonará rápidamente el sitio.
