Skip to main contentSaltar al contenido principal
Andrés Morales

Moda masculina · e-commerce editorial · Bogotá, Colombia

Juan Becerra — vitrina editorial de moda masculina con catálogo que se lee como una revista

Una marca colombiana de moda masculina premium necesitaba una vitrina que no se sintiera como una plantilla genérica. La reconstruimos como una experiencia editorial — hero con mood, tipografía clásica, flujo de catálogo completo y un checkout silencioso que respeta la marca.

Juan Becerra — vitrina editorial de moda masculina con catálogo que se lee como una revista

2024 — present

En vivo desde
2024
Región
Bogotá, CO
Tipo
Editorial
Audiencia
CO + US

El problema

La moda masculina premium vive o muere de contención. La vitrina anterior era una plantilla de e-commerce por defecto — grid de productos, tipografía genérica, sin voz de marca, y un checkout que interrumpía el flujo editorial con popups de marketing. Los visitantes rebotaban del home porque se veía idéntico a otras diez tiendas de moda masculina que habían visitado ese día. La conversión pasaba, pero a costa del patrimonio de marca — cada compra erosionaba la razón por la que el cliente quería comprar.

Lo que construí

Un único scroll editorial reemplaza la plantilla ruidosa. El hero es una sola imagen full-bleed con una línea corta de copy — sin carrusel, sin overlay, sin CTA compitiendo con la fotografía. Las categorías se presentan como una grid tipográfica plana para que el cliente lea la marca antes de leer el SKU. La página de producto usa la misma tipografía contenida, con un botón de agregar al carrito sticky que no se mueve al hacer scroll. El checkout vive en su propia página (sin drawers) y elimina todo lo que no es el formulario, el total y el badge de confianza. El resultado es una vitrina que se lee como el lookbook de la marca y convierte como un e-commerce normal.

Hero — una sola imagen full-bleed, una línea corta, sin carrusel. Deja que la fotografía haga la venta.
Hero — una sola imagen full-bleed, una línea corta, sin carrusel. Deja que la fotografía haga la venta.
Catálogo — grid tipográfica plana para que el cliente lea la marca antes del SKU.
Catálogo — grid tipográfica plana para que el cliente lea la marca antes del SKU.
Páginas de detalle — misma tipografía contenida, agregar al carrito sticky, sin carruseles.
Páginas de detalle — misma tipografía contenida, agregar al carrito sticky, sin carruseles.

Resultados

1 scroll
Editorial-first
Serif clásico
Sistema tipográfico
CO + US
Mercados
Editorial
Voz

Alcance y arquitectura

Sistema de diseño editorial — escala tipográfica, tokens de color, grid de layout
Vitrina single-page con navegación por anchors entre secciones
Flujo de catálogo: categoría → producto → variante → carrito → checkout
Grid responsive mobile-first con áreas táctiles cómodas
Tratamiento editorial de fotografía — full-bleed, sin overlays, sin carruseles
Checkout silencioso — una página, una columna, sin drawers

Construido con

Next.jsVercelStripeSanity CMSTypeScriptTailwind CSS
Automatización IA · UI/UX · Producción

Haz la cosa.Sin boilerplate.

Estudio independiente desde Cali. Flujos de automatización, UI hecha a mano y web end-to-end — para equipos que prefieren tenerlo listo a discutirlo.

Hablemos
2,014Fundado en 2014

Del brief al deploy, el estudio mantiene todo en un solo lugar: alcance, diseño, construcción, entrega. Los briefs llegan al escritorio, los entregables al cliente.

Andrés Morales

Agenda una llamada de 30 mino envíame un brief