E-commerces sob medida

Cinco anos desenhando e construindo lojas de e-commerce numa plataforma proprietária. Aqui vão três em que eu fiz a interface inteira sozinho, do primeiro conceito ao frontend que foi pro ar.

Insana

A home parece um slideshow mas não é. Cada lata aparece como um monte de partes animadas separadamente, e o fundo pega a cor daquela cerveja quando ela chega, então a página inteira muda de temperatura a cada slide.

A navegação segue a mesma lógica. Em vez de cortar entre páginas, os elementos atravessam. A lata que você tocou vira a lata da página de produto, e a paleta te acompanha até o catálogo.

Checkout, rastreio de pedido, conta e login, tudo feito sob medida na plataforma em vez de encaixado pronto. As partes de uma loja que normalmente saem do personagem, mantidas nele.

A verificação de idade da Insana, perguntando se você é insano há mais de 18 anos

A tela de login da Insana, dividida contra um padrão de lúpulo

O checkout sob medida da Insana, com o carrinho, as etapas e o total

O acompanhamento de pedido da Insana, com uma entrega a caminho

Receebaí

Um marketplace de saúde e suplementos, sob medida da home até a confirmação do pedido. A paleta da marca roda no talo em todas as telas, incluindo as que a maioria das lojas deixa no template.

Um pedido confirmado na Receebaí, com QR code do Pix, endereço e prazo de entrega

A categoria de suplementos da Receebaí, com seus filtros e a grade de produtos

Uma página de produto da Receebaí, com opções de sabor e tamanho e itens relacionados

use.moda

A home é um carrossel de vídeo, não de imagem. Filmagem em tela cheia gira como navegação principal com tipografia por cima, então a interface é construída em volta do movimento em vez de só decorada com ele.

O hover desenha. Texto clicável ganha um círculo de marca-texto que se desenha sozinho, então a grade inteira parece anotada à mão. Um gesto tosco contra um layout preto e branco durão.

Menu, carrinho e filtros entram todos pelas bordas. Cada um mantém o tempo e o peso do site, então abrir um parece parte da página em vez de um painel jogado por cima.

O menu da use.moda, com a lista de categorias ao lado de uma grade de estilos

O painel de filtros: tamanhos, cores, sub-categorias e preço

O painel do carrinho, com dois produtos e o controle de quantidade

Feito do zero pro conceito aguentar até o pagamento. Preto e branco, mesma linguagem de movimento, nenhum daqueles resets visuais que um checkout normalmente força.

O checkout sob medida da use.moda, numa das etapas entre conta, endereço, frete e pagamento

Três lojas, três linguagens visuais, uma pessoa nas duas metades do trabalho. Eu desenhei essas interfaces e construí os frontends que fizeram elas funcionarem: a animação, as transições, os checkouts sob medida, tudo.

Essa é a parte que me importa. Design que sobrevive a ser construído, porque quem desenhou sabia o que ia dar.