Presentamos el Design Lab

Bienvenidos al Design Lab, un espacio donde exploro soluciones creativas a los desafíos de diseño cotidiano. Esta sección de mi sitio web está dedicada a experimentos de UI/UX en pequeñas dosis, donde abordo problemas comunes y replanteo soluciones en plazos de tiempo limitados.

No, no estoy diciendo que a veces "no haya tiempo para el diseño"…

Aparte de las bromas, el objetivo es potenciar la creatividad, la eficiencia y las habilidades para resolver problemas, probando diferentes herramientas y enfoques a lo largo del proceso.

El Desafío

Para este desafío, estoy creando una página de aterrizaje solo de texto. ¿El tema? Mi perfil profesional adaptado para una posición de UX. El objetivo principal es diseñar una página que ayude a los reclutadores a comprender rápidamente por qué soy una excelente opción para sus roles de diseño UX.

Utilizaré Figma y Framer para este ejercicio. Figma se encargará de la fase de investigación y diseños de baja a media fidelidad, mientras que Framer dará vida a todo con una versión receptiva lista para producción.

Análisis de Competencia

Para este caso, realicé una sesión rápida de investigación—teniendo en cuenta que estos ejercicios están destinados a completarse en unas pocas horas. Si buscas un análisis más profundo, tengo un post de Análisis de Competencia más detallado que explica el proceso completo paso a paso.

He dividido la investigación en dos partes: páginas de aterrizaje solo de texto y portafolios excepcionales de otros diseñadores para inspiración.

Me encontré con tres portafolios de otros diseñadores.

Alexander Vilinskyy - Diseñador digital y fundador de Super Clear 

Muy limpio y directo, con un fuerte enfoque en un mensaje claro (que encaja con su marca "Super Clear"). El equilibrio entre tipografía y espacio en blanco facilita la lectura. Se percibe como el sitio de una agencia moderna.

Francesco Fagioli, Diseñador de Producto Senior en SubbyX

 Un enfoque más personal y basado en la narrativa. Tiene un tono amigable y muestra el trabajo con suficiente detalle sin ser abrumador. Las páginas de proyectos se sienten bien pensadas y estructuradas.

Hanson Wu, Diseñador Principal de Producto en Yahoo Sports

Una mezcla de personalidad y profesionalismo. El diseño es limpio pero tiene toques sutiles que lo hacen único. Se siente pulido pero no genérico, lo cual es difícil de lograr.

Wireframes de Baja Fidelidad

Para los Wireframes de Baja Fidelidad, me concentré en estructurar el contenido de manera clara y comprensible, asegurando que los reclutadores puedan entender rápidamente mi perfil. Los wireframes priorizan la jerarquía, la legibilidad y la colocación de información clave sin distracciones. Dado que esta es una página de aterrizaje solo de texto, experimenté con diferentes diseños para guiar eficazmente la atención del lector. En esta etapa, el objetivo es establecer una base sólida antes de refinar el diseño en etapas de mayor fidelidad.

Wireframes de Alta Fidelidad

Para los Wireframes de Alta Fidelidad, estoy omitiendo la selección de colores y fuentes ya que esta página será parte de un sitio web existente con estilos establecidos. En su lugar, me enfoco en perfeccionar el diseño, la jerarquía tipográfica y el espaciado para garantizar una integración fluida con el sistema de diseño actual. El objetivo es crear una página estructurada y pulida que mantenga consistencia mientras comunica efectivamente mi perfil profesional a los reclutadores.

De Figma a Framer

Con el diseño estructurado en Figma, es hora de darle vida en Framer. Este paso es donde los wireframes estáticos evolucionan hacia una página de aterrizaje interactiva y completamente receptiva. Usando las herramientas de diseño intuitivas de Framer, me aseguro de que el diseño se adapte sin problemas a diferentes tamaños de pantalla mientras mantiene la jerarquía y la legibilidad deseadas.

Dado que esta es una página de aterrizaje solo de texto, me concentro en un espaciado preciso, tipografía y capacidad de respuesta para crear una experiencia fluida sin depender de elementos visuales pesados. La transición de Figma a Framer permite ajustes en tiempo real, asegurando que la página final se sienta igual de pulida en producción que en la fase de diseño.

Mira el resultado aquí

Concluyendo

Este desafío del Design Lab me impulsó a crear una página de aterrizaje solo de texto clara, estructurada y efectiva dentro de un marco de tiempo limitado. Desde la investigación rápida y wireframing en Figma hasta darle vida en Framer, el objetivo fue asegurar que los reclutadores puedan captar rápidamente por qué mi perfil es una opción sólida para roles de UX.

Al enfocarme en la jerarquía de contenido, legibilidad y capacidad de respuesta, creé una página que se alinea con un sistema de diseño existente mientras ofrece una experiencia de usuario impecable. Este ejercicio refuerza cómo incluso los diseños más simples requieren una estructura y ejecución reflexivas.

Ahora, ¡a por el siguiente desafío!