Diseño antes de codear, no después.

UX/UI con criterio editorial: jerarquía clara, tipografía consciente y motion solo donde aporta. Sin templates, sin lookbook genérico.

De wireframe a visualilustrativo

Wireframe· baja fidelidad

proceso

Visual· aplicado

¿Cómo lo abordo?

Mi forma de trabajar.

Diseño y código son dos pasos del mismo proceso. Cuando los hace la misma persona, las decisiones quedan justificadas: si el ícono pesa 12kb, lo cambio. Si el componente es difícil de mantener, lo simplifico. No hay tickets de "puedes ajustar 2px este botón".

Mi background es híbrido: tengo perfil activo en Behance y construyo en producción. Eso cambia la conversación con el cliente — hablamos de trade-offs reales, no de mockups que después rompen al implementar.

Trabajo casi todo en Figma: wireframe, visual, prototipado e iteración. Si el proyecto necesita un design system, lo entrego como tokens reutilizables que se mapean directo a Tailwind, no como capturas que tu dev tiene que adivinar.

Proceso

De idea a producto.

Cinco pasos claros, con entregables y fechas en cada uno.

Discovery + research

Entender al usuario: qué busca, qué hace cuando llega, qué obstáculos encuentra. Datos antes de diseño.

Wireframe baja fidelidad

Estructura primero. Si el flujo no funciona en blanco y negro con cajas grises, no funciona en color.

Visual + sistema

Tipografía, color, spacing. Si el proyecto crece, lo entrego como design system con tokens reutilizables.

Prototipo interactivo

Click-through navegable en Figma. Validamos con stakeholders antes de codear, no después.

Handoff o build

Specs claros para tu equipo, o lo construyo yo con los mismos componentes. Sin pérdida en la traducción.

Stack

Lo que uso y por qué.

Sin buzzwords. Solo herramientas que justifico con un trade-off claro.

Figma: Trabajo nativo. Wireframe, visual, prototipo e iteración en el mismo lugar. Sin tools intermedias que se queden a medias.
Auto Layout: Componentes responsive desde Figma. Lo que ves en mockup es lo que se construye, no una aproximación.
Variables + Tokens: Sistema de diseño escalable. Cambio en un token y propaga a todo el archivo. Listo para mapear a CSS variables.
Behance: Portfolio público con casos visuales. El cliente puede ver el rango de mi trabajo antes de la primera llamada.
Tailwind CSS: Cuando paso al build, los tokens de Figma se mapean directo a Tailwind config. Sin pérdida en el handoff.
WCAG + a11y: Contraste, focus rings visibles, navegación por teclado, aria-labels. No es opcional, es trabajo bien hecho.

Proyectos

Trabajos en esta categoría.

Ver todo el portafolio

Plataforma + Apps

Colectyred

Plataforma de control de colectivos en Chile: landing, dashboard con mapeo de rutas en tiempo real, y dos apps móviles publicadas en Play Store (pasajero y conductor) con tracking GPS y sockets.

NextJsNestJsReact Native+6

Web + Dashboard

Controles Vídeo Técnicos

Empresa de monitoreo de medios en Costa Rica: web corporativa con noticias y formularios de contacto, sumada a un dashboard interno con stack AWS completo para gestión de notas, medios digitales y contratos.

NextJsAWS AmplifyAWS App Runner+3