De uma imagem de briefing a uma página completa
Página institucional de uma marca de nutracêuticos nos EUA, feita pra loja na Shopify: minimalista, com toque de tecnologia e natureza — e rápida o bastante pra converter em qualquer aparelho e qualquer conexão.
Hair Growth
Immune Support
Joint CareTrês dos quatro cards de produto: Hair Growth, Immune Support, Joint Care — com a luz que segue o ponteiro.
Escopo do projeto
A Carevia é uma marca de nutracêuticos nos Estados Unidos, focada em longevidade e melhora da pele, com suplementação natural pra imunidade, articulações e multivitamínicos. Tudo com base em elementos naturais e acompanhado por um aplicativo próprio de tracking de saúde: scores de longevidade, check-ins diários a cada dose pra saber se a pessoa segue o tratamento à risca, e recompra automática — ou a volta pros outros produtos.
A marca já tinha credibilidade pela base científica. O que faltava era uma página inicial institucional que englobasse o produto central e, ainda dentro da identidade minimalista de consultório, mencionasse os outros produtos. Usei imagem gerada por IA pra criar os botões, os elementos da página e as animações, saindo do direct response pra uma experiência integrada e premium — e mantendo a página extremamente limpa, com o toque de tecnologia e natureza, numa performance que potencializa a conversão sem fricção em desktop, celular ou conexão muito lenta. E como a loja da marca roda na Shopify, a página foi desenhada pra ser compatível com ela: cada bloco é uma seção de tema, com os campos que o time da marca edita direto no Theme Editor.
Papel
Web Designer & Front-end
Direção de arte, geração das imagens com IA a partir da única arte do briefing, estrutura da página, copy de apoio e toda a coreografia de movimento — desenhada pra viver na Shopify, onde a loja da marca já roda: cada bloco corresponde a uma seção de tema, editável pelo Theme Editor sem tocar em código. Agosto de 2026.
Desafios
O que a marca precisava, e o que o briefing não trazia:
-
01
Uma arte só de briefing
Um conceito original e quase nenhum direcionamento — o resto tinha que ser decidido
-
02
Parecer ciência e natureza
Identidade de consultório, minimalista, sem perder o toque de tecnologia
-
03
Um produto central, vários produtos
A página é sobre o principal, mas precisa mencionar imunidade, articulações e multivitamínicos
-
04
Sair do direct response
A marca já tinha credibilidade científica; a página tinha que parecer premium, não urgente
-
05
Converter sem fricção
Desktop, celular e conexão muito lenta: nenhum cenário podia travar a compra
-
06
O app faz parte da história
Scores de longevidade, check-in diário e recompra automática precisavam aparecer na página
Soluções
-
01
Imagens geradas com IA
Botões, elementos e animações criados a partir da única arte do briefing, sem sair da identidade
-
02
Dez seções com um fio só
Herói, produtos, ciência, painel de acompanhamento, depoimentos, before/after, artigos, CTA
-
03
Limpa, clean, premium
Muito respiro, tipografia leve, cor de consultório — e movimento que carrega a marca sem gritar
-
04
O painel de acompanhamento na página
O anel de progresso, os check-ins e os scores do app aparecem como prova, não como promessa
-
05
Rápida de propósito
Toda fotografia reencodada pro tamanho em que aparece: 8,0 MB de arte viraram 600 kB na página
-
06
Movimento com calma
As animações são mais lentas que o padrão pra parecer cuidado; botões e menu respondem na hora
Um produto, um app e uma rotina
Uma troca necessária: percepção de valor sem abrir mão da performance
A primeira versão tinha o ritmo de um site comum: rápida, e por isso mesmo genérica. Uma marca de longevidade não tem pressa — ela pede calma, respiro, a sensação de cuidado. Na segunda versão a coreografia ganhou 600 milissegundos em cada movimento: a revelação das seções, o título do herói, a troca de depoimentos, a varredura do before/after. Foi uma troca de percepção: menos velocidade aparente, mais marca.
O que não entrou na troca foi o carregamento. As frações de segundo contam: quando uma página passa de 4 a 5 segundos pra carregar, a tendência é a pessoa sair no meio ou ficar pouco tempo — e isso cresce rápido. Então a calma ficou só na coreografia; a página continua leve (600 kB), e o que responde ao toque — menu, botões, links, o campo da newsletter — segue entre 300 e 500 milissegundos, porque um botão lento lê como quebrado.
Micro vitórias de UX
O card não recomeça do zero
Se o ponteiro sai no meio do movimento, o card continua de onde está — parece físico
Nada some no carregamento
Seção que já estava fora da tela e artigo fora do trilho revelam do mesmo jeito
Nada salta
Toda imagem reserva o espaço antes de chegar; o herói carrega primeiro
Celular baixa o que é de celular
Cada imagem tem versão pro aparelho — o menor nunca paga pela maior
Calma na coreografia, não no carregamento
Animações 600 ms mais lentas pra parecer cuidado; a página abre em menos de 4 s em conexão lenta
Movimento reduzido respeitado
Quem prefere menos movimento recebe a página inteira, parada
Cada bloco é uma seção Shopify
Herói, produtos, ciência, painel: seções de tema com campos editáveis, sem depender de dev pra trocar texto ou foto
As fotografias e os números
De uma arte a 47 fotografias
O briefing tinha uma arte. Todo o resto da página — produtos, ingredientes, a corredora do campo, o retrato, os artigos — nasceu de imagem gerada por IA a partir daquela referência: mesma luz, mesma paleta de consultório, natureza e ciência na mesma foto. São 47 fotografias, cada uma reencodada em WebP em duas medidas, pra o celular nunca pagar pela imagem do desktop.
8,0 MB → 600 kBde arte na origem, transferidos na página inteira
O app dentro da página
A Carevia vem com um aplicativo de acompanhamento: scores de longevidade, check-in a cada dose e recompra automática. Na página institucional ele aparece como um painel de vidro sobre a foto da corredora — anel de rotina, cápsulas, dias, progresso — e os números contam quando a seção entra na tela. É a peça que diz “isto não é só um pote”.
- Immune Support
- Joint Care
- Hair Growth
Nota S em movimento
A página foi medida com uma ferramenta de auditoria de animação e ficou com nota S (90/100) no desktop: animações, scroll, layout e GPU. No celular, A, pelo custo das camadas da folha sobreposta. A primeira medição deu 86; três ajustes finos levaram à nota final.
Resultados
1 → 10
uma imagem virou dez seções, 47 fotografias e uma página institucional que performa
Bonita e rápida: 600 kB na página toda
Sem fricção em desktop, celular ou conexão lenta: renderizada em 390, 834 e 1440 px, sem overflow, com todas as imagens carregando e zero erro.
Veja funcionando
A página inteira, dentro do portfólio — carrega do começo quando você pedir, porque a abertura faz parte do projeto. Os links de compra e de contato estão desativados nesta cópia.
