Proyecto - Lucas Poncino

Lucas Poncino

Sitio web profesional para asistente social, creado para transmitir cercanía, experiencia y abrir nuevas oportunidades en el extranjero.

UI Design

Figma

Webstudio

CSS

Google Formularios

Ago ´25

DESCRIPCIÓN

Diseño y desarrollo de un portfolio web responsive para un asistente social en búsqueda de nuevas oportunidades laborales en el extranjero. El proyecto se realizó en 1 semana utilizando Webstudio (similar a Webflow), plataforma no-code que me permitió aplicar lo aprendido en diseño y prototipado para llevarlo rápidamente a una versión funcional.

MI ROL

Me encargue de transformar información limitada en una experiencia digital clara y profesional, de investigar a otros colegas y el rubro, la arquitectura de la información, la creación de un sistema de componentes y la realización en Webstudio, garantizando coherencia visual y una navegación intuitiva.

PROBLEMA

El asistente social contaba únicamente con su perfil de LinkedIn y un PDF informativo, lo cual no transmitía todo su valor profesional ni facilitaba la búsqueda de oportunidades internacionales. Faltaba una herramienta digital que mostrara su experiencia de forma organizada, accesible y atractiva. El Objetivo es tener todo su trabajo de forma sencilla y que no sea agobiante para los reclutadores ya que es un proyecto con mucho texto.

SOLUCIÓN

Se creó una página web responsive que reúne su trayectoria, habilidades y proyectos en un solo lugar, con un diseño sencillo y enfocado en la legibilidad y confianza. La web funciona como carta de presentación profesional, potenciando su perfil para postularse a nuevas oportunidades y mostrar de una forma más atractiva su proyecto clave.

RECOLECCIÓN Y ANALISIS DE LA INFORMACIÓN

El punto de partida fue realizar una encuesta para definir exactamente lo que quería y el resultado que desea tener. Se me brindo referencias de otros colegas, su perfil de LinkedIn y un PDF informativo . A partir de esto pude identificar la información relevante, las secciones que debían estar presentes en la web, sus punto fuertes y como destacar. En un principio se habia definido que sea una landing page pero al ver que el proyecto era muy extenso y su punto fuerte se decidió que este tenga su propia pagina para poder mostrarlo en detalle y con claridad.

DEFINICIÓN DE LA ESTRUCTURA

Con los información ya organizados, diseñé una arquitectura de que sea clara y jerárquica:

HOME

Presentación breve, cercana y con su foto.

SOBRE MI

Resumen de su educación, profesión y personalidad.

PROYECTOS

Espacio para destacar lo principal de su proyecto como las herramientas utilizadas y a quien estaba destinado.

CONTACTO

Acceso con un formulario sencillo para reclutadores o instituciones.

WIREFRAME Y PRIEMERAS IDEAS

A partir de la estructura, realice un bocetos de baja fidelidad para visualizar la estructura de la página. Esto me ayudó a decidir la distribución de bloques, priorizar qué debía ir primero y establecer un diseño coherente que funcionara en distintos dispositivos.x

UI KIT

Para definir espaciados, tamaños y proporciones trabajé tomando como referencia la librería de Open Props, que es la que ofrece Webstudio para trabajar, lo que me permitió mantener consistencia visual en márgenes, tipografías y componentes. Esta guía fue clave para asegurar un diseño limpio y escalable. Igualmente, modifique y agregue las variables que eran necesarias como colores y tipografías, para lograr el diseño deseado.

Diseñé un set de componentes reutilizables (botones, formularios, menús, tipografías y módulos de contenido) para garantizar consistencia visual y acelerar el proceso de diseño en Webstudio. Este sistema permitió mantener coherencia en la interfaz y facilitar futuras iteraciones. Es algo sencillo pero funcional para lo que se necesitaba y el tiempo que se tenía.

ADAPTACIÓN RESPONSIVE

Uno de los objetivos principales fue asegurar que el portfolio funcionara en dispositivos móviles, considerando que muchos reclutadores revisan información desde el celular. Se ajustaron los tamaños de tipografías, las imágenes y la disposición de los bloques para una experiencia consistente en desktop, tablet y mobile. Al haber utilizado la librería de Open Props y creado los componentes que funcionen de forma responsive. Utilizando la modalidad Dev Mode en Figma facilitó la extracción directa del CSS de las secciones para poder utilizar directamente en la herramienta de forma sencilla y funcional.

Scroll

VALIDACIÓN Y AJUSTESTES FINALES

Al finalizar, se revisó el flujo de navegación completo para asegurar que cada sección fuera clara, accesible y transmitiera una imagen profesional y confiable. Se realizaron ajustes luego de la entrega que incluyeron corrección de URLs, actualización de iconos de baja resolución y solución de errores al compartir la web. Estas iteraciones garantizaron un producto final pulido y funcional para los usuarios.

LO APRENDIDO

Este proyecto me permitió aprender y practicar el uso de Webstudio y mantener las buenas practicas del diseño y organización en Figma. El mayor reto fue transformar toda la información en un portafolio sólido, atractivo y no abrumador, y no intentar hacer un diseño muy elabora o vanguardista, lo que me enseñó a jerarquizar contenidos, simplificar y dar peso visual a lo realmente importante. Además, pude implementar diversos conocimientos adquiridos y mejorar la optimización del tiempo en el desarrollo del proyecto.

RESULTADOS

El proyecto demostró que incluso con recursos limitados se puede crear un portafolio digital funcional y profesional, capaz de abrir nuevas oportunidades laborales. También confirma que el diseño es un puente entre las personas y sus metas profesionales. El cliente gracias a este proyecto ya obtuvo nuevas entrevistas en en el extranjero y se encuentra en proceso de definir su nuevo camino profesional.

● Otros proyectos

Facundo Guse - Web personal