Skip to main contentPular para o conteúdo principal
Andrés Morales

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

Juan Becerra — vitrine editorial de moda masculina com catálogo que se lê como uma revista

Uma marca colombiana de moda masculina premium precisava de uma vitrine que não parecesse um template genérico de e-commerce. Reconstruímos como uma experiência editorial — hero com mood, tipografia clássica, fluxo de catálogo completo e um checkout silencioso que respeita a marca.

Juan Becerra — vitrine editorial de moda masculina com catálogo que se lê como uma revista

2024 — present

No ar desde
2024
Região
Bogotá, CO
Tipo
Editorial
Audiência
CO + US

O problema

Moda masculina premium vive ou morre de contenção. A vitrine anterior era um template padrão de e-commerce — grid de produtos, tipografia genérica, sem voz de marca, e um checkout que interrompia o fluxo editorial com popups de marketing. Os visitantes saíam do home porque parecia idêntico a outras dez lojas de moda masculina que tinham visitado naquele dia. A conversão acontecia, mas ao custo do patrimônio da marca — cada compra corroía a razão pela qual o cliente queria comprar.

O que construí

Um único scroll editorial substitui o template ruidoso. O hero é uma única imagem full-bleed com uma linha curta de copy — sem carrossel, sem overlay, sem CTA competindo com a fotografia. As categorias são apresentadas como uma grid tipográfica plana pra que o cliente leia a marca antes de ler o SKU. A página de produto usa a mesma tipografia contida, com um botão de adicionar ao carrinho sticky que não se move no scroll. O checkout mora em sua própria página (sem drawers) e remove tudo que não é o formulário, o total e o badge de confiança. O resultado é uma vitrine que se lê como o lookbook da marca e converte como um e-commerce normal.

Hero — uma única imagem full-bleed, uma linha curta, sem carrossel. Deixa a fotografia fazer a venda.
Hero — uma única imagem full-bleed, uma linha curta, sem carrossel. Deixa a fotografia fazer a venda.
Catálogo — grid tipográfica plana pra que o cliente leia a marca antes do SKU.
Catálogo — grid tipográfica plana pra que o cliente leia a marca antes do SKU.
Páginas de detalhe — mesma tipografia contida, adicionar ao carrinho sticky, sem carrosséis.
Páginas de detalhe — mesma tipografia contida, adicionar ao carrinho sticky, sem carrosséis.

Resultados

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

Escopo e arquitetura

Sistema de design editorial — escala tipográfica, tokens de cor, grid de layout
Vitrine single-page com navegação por âncoras entre seções
Fluxo de catálogo: categoria → produto → variante → carrinho → checkout
Grid responsivo mobile-first com áreas de toque confortáveis
Tratamento editorial de fotografia — full-bleed, sem overlays, sem carrosséis
Checkout silencioso — uma página, uma coluna, sem drawers

Construído com

Next.jsVercelStripeSanity CMSTypeScriptTailwind CSS
Automação IA · UI/UX · Produção

Faça a coisa.Sem boilerplate.

Estúdio independente em Cali. Fluxos de automação, UI feita à mão e web ponta-a-ponta — para times que preferem ter pronto a debater.

Vamos conversar
2,014Fundado em 2014

Do brief ao deploy, o estúdio mantém tudo em um só lugar: escopo, design, construção, entrega. Briefs chegam na mesa, entregas vão pro cliente.

Andrés Morales

Agende uma chamada de 30 minou me envie um briefing