Ecodeath NFT — UI Design

Ecodeath é apresentado como o primeiro projeto NFT 100% socioambiental: 4.444 NFTs colecionáveis na blockchain Solana, com a missão de reduzir a poluição e a superlotação dos cemitérios. O trabalho foi o design de UI do website mais protótipo, em Figma.

O desafio central era dar a um tema delicado (morte e cemitérios) um tom leve e atraente para o público web3, e ao mesmo tempo educar quem nunca comprou um NFT.

O conceito é "morte reinventada, com humor e consciência". A arte 3D dos caixões colecionáveis vira o elemento herói, e o contraste entre um roxo profundo e um verde-limão vibrante transforma o assunto em algo lúdico e ligado a natureza e reflorestamento.

O visual segue a estética de coleções NFT (cores saturadas, 3D, tipografia chamativa), mas organiza a informação como uma landing page clara.

A paleta é complementar (roxo ~268° e verde-limão ~100°, em lados opostos do círculo cromático, aproximadamente), o que gera o máximo de contraste de matiz e energia. O roxo carrega ideias de mistério, espiritualidade e luxo, apropriadas ao tema da morte; o verde-limão carrega vida, natureza e renovação. Juntos, contam a narrativa morte e renascimento só com cor.

Uso proporcional (regra 60-30-10): roxo como cor dominante, branco no texto e verde-limão como acento restrito a títulos, ao botão Connect e aos marcadores do roadmap, guiando o olhar para as ações.

• #2E1053Roxo profundoFundo e sombras de seção
• #46177DRoxo de marcaSuperfície principal do site
• #75DB38Verde-limãoTítulos, CTA Connect e marcadores do roadmap
• #FFFFFFBrancoTexto corrido

Leitura: o verde-limão sobre roxo chega a AAA e o texto branco sobre roxo passa com folga. O par verde-limão sobre branco ficaria perto de 1,8:1 e por isso o verde nunca é usado como texto sobre fundo claro.

Hex amostrados da arte final publicada; podem diferir levemente dos tokens originais do Figma.

Duas vozes tipográficas: uma display arredondada e pesada nos títulos em verde-limão (personalidade lúdica, tom descontraído para um tema pesado) e uma sans-serif geométrica limpa para o texto corrido, garantindo legibilidade nos parágrafos educativos.

• Storytelling por scroll: hero, coleção e raridade, roadmap, missão, equipe e FAQ, na ordem em que a dúvida de um visitante novo aparece (o quê, por quê, como, quem).
• Ponto focal único no hero: o caixão 3D em grande escala, com título em verde, uma frase de valor e um único botão Connect (lei de Hick: poucas escolhas, decisão rápida).
• Navegação mínima: Home, Roadmap, FAQ e o CTA, sem sobrecarga de itens.
• Linha do tempo vertical no roadmap: nós verdes conectados por uma linha usam a lei da continuidade (Gestalt) para mostrar progressão (Q2 Fase I, Q3 Fase II).
• Acordeão no FAQ: divulgação progressiva para explicar o que são NFTs e blockchain sem poluir a página.
• Cartões de missão com ícone, frase curta e botão "Know More": informação em blocos fáceis de escanear.

• Hero e conexão de carteira: o CTA Connect aparece no topo e no hero, repetindo a ação principal em pontos de decisão.
• Raridade: explica que cada NFT da série é gerado por mais de 130 características combinadas e leva ao Rarity Guide, tornando um conceito técnico compreensível.
• Roadmap: reflorestamento, enterro verde e genealogia, organizados por fases.
• Equipe: apresenta a empresa responsável e seu propósito, o que ajuda na credibilidade, ponto crítico no ecossistema web3.
• Protótipo navegável em Figma, para validar a sequência antes do desenvolvimento.

• Correspondência com o mundo real: FAQ que traduz o vocabulário web3 para linguagem comum.
• Consistência e padrões: botões em verde-limão, cantos arredondados e ícones sociais (Discord, Instagram, Twitter) em padrão.
• Reconhecimento em vez de memorização: menu fixo e seções com títulos claros.
• Estética e minimalismo: um herói, uma cor de ação, textos curtos.

• Verificar o tamanho do texto corrido (pequeno em alguns blocos) e a altura de linha para telas de celular.
• Prever versão responsiva do roadmap, que hoje usa composição horizontal.
• Incluir texto alternativo nas ilustrações 3D e estados de foco visíveis nos botões.
• Respeitar prefers-reduced-motion se houver animações no hero.
• Explicar custos e riscos da compra (taxas, carteira) antes do botão Connect, para decisões informadas.