Ecodeath NFT — UI Design

Ecodeath is presented as the first 100% socio-environmental NFT project: 4,444 collectible NFTs on the Solana blockchain, with the mission of reducing pollution and overcrowding in cemeteries. My work was the UI design of the website and the prototype.

The central challenge was to give a delicate subject (death and cemeteries) a light, attractive tone for the web3 audience while also educating people who have never bought an NFT.

The concept is "death reinvented, with humor and awareness". The 3D art of collectible coffins becomes the hero element, and the contrast between a deep purple and a vibrant lime turns the subject into something playful and connected to nature.

The look follows NFT-collection aesthetics (saturated colors, 3D, bold type) but organizes information like a clear landing page.

The palette is complementary (purple ~268° and lime ~100°, roughly opposite on the color wheel), which yields maximum hue contrast and energy. Purple carries ideas of mystery, spirituality and luxury, and lime brings life and nature, a fitting duality for the theme.

Proportional use (60-30-10 rule): purple as the dominant color, white for text and lime as an accent restricted to headings, the Connect button and roadmap markers, guiding the eye to actions.

• #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

Reading: lime on purple reaches AAA and white text on purple passes comfortably. The lime-on-white pair would sit near 1.8:1, so lime is never used as text on a light background.

Hex values sampled from the published final art; they may differ slightly from the original Figma tokens.

Two typographic voices: a rounded, heavy display face for the lime headings (playful personality, relaxed tone for a heavy subject) and a clean geometric sans-serif for body text, ensuring readability.

• Scroll storytelling: hero, collection and rarity, roadmap, mission, team and FAQ, in the order a new visitor's questions appear (what, why, how, who).
• A single focal point in the hero: the large-scale 3D coffin, a lime title, one value sentence and a single Connect button (Hick's law: few choices, quick decision).
• Minimal navigation: Home, Roadmap, FAQ and the CTA, with no overload.
• Vertical timeline in the roadmap: green nodes joined by a line use the law of continuity (Gestalt) to show progression (Q2 Phase I, Q3 Phase II).
• Accordion in the FAQ: progressive disclosure to explain NFTs and blockchain without cluttering the page.
• Mission cards with icon, short sentence and a "Know More" button: information in easily scannable blocks.

• Hero and wallet connection: the Connect CTA appears at the top and in the hero, repeating the main action at decision points.
• Rarity: explains that each NFT in the series is generated from over 130 combined traits and links to the Rarity Guide, making a technical concept understandable.
• Roadmap: reforestation, green burial and genealogy, organized by phases.
• Team: presents the responsible company and its purpose, helping credibility, a critical point in the web3 ecosystem.
• Clickable prototype in Figma, to validate the sequence before development.

• Match with the real world: an FAQ that translates web3 vocabulary into plain language.
• Consistency and standards: lime buttons, rounded corners and standard social icons (Discord, Instagram, Twitter).
• Recognition rather than recall: a fixed menu and sections with clear titles.
• Aesthetics and minimalism: one hero, one action color, short texts.

• Check body text size (small in some blocks) and line height for mobile screens.
• Plan a responsive roadmap version, which today uses a horizontal composition.
• Add alt text to the 3D illustrations and visible focus states on buttons.
• Respect prefers-reduced-motion if the hero has animations.
• Explain costs and risks of purchase (fees, wallet) before the Connect button, for informed decisions.