La tensión principal
Una interfaz demasiado comercial podía volver genérica la marca; una experiencia demasiado editorial podía dificultar la exploración del catálogo.
Diseño UI · Landing editorial · E-commerce · 2026
NUDO
Sistema UI para mobiliario contemporáneo
Diseño de una experiencia digital para una marca de muebles contemporáneos: desde la dirección visual y la arquitectura de la landing hasta el sistema responsive, el catálogo y los flujos de interacción.
NUDO necesitaba una experiencia digital con identidad.
NUDO explora cómo una marca de mobiliario contemporáneo puede trasladar su carácter físico a una interfaz. El reto no era solo mostrar productos: era construir una experiencia editorial, cálida y clara que ayudara a imaginar cómo se sienten las piezas en un espacio.
La oportunidad
Diseñar un sistema que usara el ritmo visual, los materiales y las imágenes generadas con IA como parte de la navegación, no como decoración.
Objetivo: crear una landing con catálogo de complejidad media, capaz de presentar la colección, orientar la exploración y llevar a una consulta o pedido personalizado.
Decisión de alcance: el proyecto se concentra en UI, responsive, sistema visual y prototipo. No incluye pagos, login, inventario, dashboard ni backend.
De la dirección visual al sistema UI.
La documentación de Notion organizó el proyecto antes de entrar a Figma: propósito, alcance, referencias, colección, tokens, arquitectura, responsive y handoff. El trabajo se estructuró como un sistema, no como una sola pantalla.
01
Definir
Marca · alcance · tono
02
Arquitectura
Home · colección · producto
03
Diseñar
Tokens · componentes
04
Adaptar
Desktop · tablet · mobile
05
Prototipar
Estados · transiciones · handoff
Criterio de diseño
La interfaz debía sentirse contemporánea, cálida y editorial: suficiente personalidad para diferenciar NUDO y suficiente claridad para que comprar o consultar una pieza no se volviera difícil.
Una base visual para sostener toda la experiencia.
El sistema de NUDO se construyó con una paleta reducida, roles de color y una jerarquía tipográfica definida. La marca usa Fraunces en sus momentos editoriales y Manrope para UI, cuerpo y catálogo; esta ficha conserva la tipografía del portafolio para mantener la lectura consistente entre proyectos.
Tokens semánticos
Los colores no se aplican como valores sueltos: cada uno tiene una función dentro de la interfaz.
Fondo principalcolor/bg/primary · #FAF8F5
Fondo ciruelacolor/bg/strong · #2B2030
Superficie secundariacolor/surface/secondary · #D9C4D1
Acción principalcolor/action/primary · #C9523D
Escala tipográfica
La escala combina momentos editoriales con una lectura funcional y consistente para el catálogo.
Habitar con intención
Diseño para quedarse
Materiales honestos para espacios que se sienten propios.
VER COLECCIÓN
Espaciado, radios y elevación
La consistencia también está en las distancias, las esquinas y la profundidad de las superficies.
Spacing
xs · 4px
sm · 8px
md · 16px
lg · 24px
xl · 32px
2xl · 48px
3xl · 64px
Gutter · 80px
Border radius
none · 0
sm · 8
md · 16
lg · 24
full
Elevation
Subtle · cards
Medium · overlays
Strong · quick view
Componentes y estados
Los componentes se definieron con variantes para que la interfaz pueda responder a estados reales, no solo a una vista estática.
Buttons · Primary / Secondary / Disabled
Filter tags · Default / Selected
TodoSillasMesasIluminación
Material selector · Default / Selected
Product card · catálogo
Sillón NUDO
Roble claro · acabado mate
Una pieza envolvente para quedarse.
$2.400.000
La misma intención visual en cada breakpoint.
La pantalla principal reúne navegación, hero, colección especial, categorías, favoritos del taller, historia de la marca, pedido personalizado, testimonios y footer. El responsive conserva el orden de lectura y ajusta el ritmo de las imágenes, las columnas y los controles.
Composición editorial
Hero amplio, galería de contraste y categorías con diferentes escalas para crear ritmo.
Jerarquía flexible
Las secciones reducen columnas sin perder la relación entre imagen, nombre de pieza y acción.
Exploración vertical
La experiencia prioriza navegación simple, lectura corta, carruseles y acciones accesibles.
La interfaz también define cómo se explora.
El prototipo está planteado para mostrar el recorrido de una persona desde la landing hasta la decisión sobre una pieza. Cada interacción responde a una necesidad concreta del catálogo.
Navegación y categorías
Los enlaces llevan a colección, materiales y nuestra historia. Las categorías permiten entrar al catálogo desde diferentes puntos de la landing.
Quick view y selección
La vista rápida permite revisar una pieza sin perder el contexto. El detalle agrega selección de material y color antes de guardar o consultar.
Pedido personalizado
El flujo recoge medidas, materiales y acabados para que la persona pueda pedir una pieza que encaje en su espacio, sin simular un checkout que el proyecto no necesita.
Carrito simple y favoritos
Son herramientas de comparación y continuidad: ayudan a guardar piezas y retomarlas, sin inventario, pago ni cuenta de usuario.
“La interfaz no compite con los muebles: crea el espacio para que cada pieza tenga presencia.”
Principio de dirección visual de NUDOLo que aprendí diseñando una UI de producto.
1
Un sistema visual evita que la página se vuelva una colección de pantallas sueltas
Definir tokens, roles de color, tipos y componentes antes de cerrar todas las vistas hizo más fácil mantener consistencia entre landing, colección y producto.
2
Las imágenes generadas con IA también organizan la navegación
En el proyecto de mobiliario de NUDO, las imágenes no son solo contenido. Su escala, recorte y ritmo ayudan a separar momentos editoriales de momentos de compra.
3
Diseñar el responsive desde el inicio cambia las decisiones
Al pensar desktop, tablet y mobile como un mismo sistema, la jerarquía dejó de depender de una sola composición y las acciones se mantuvieron claras.
4
Definir lo que el proyecto no hace también es diseño
Excluir pagos, login, backend e inventario permitió concentrar el ejercicio en la calidad de la experiencia UI, el catálogo y el pedido personalizado.