glasskin NFT Landing page

glasskin NFT Landing page

Glasskin is a conceptual art-directed NFT character collection through structured AI prompting, then designed a cohesive visual system and landing page — positioning digital collectibles as emotional objects, not speculative assets.

Role

Website designer

Focus

AI art direction, UI design, Responsive design

Interaction Design

Scope

Live framer website

tools

Leonardo.AI , Framer

00 – AT A GLANCE

00 – AT A GLANCE

00 – AT A GLANCE

Process

Process

01

01

01

AI art direction

Built a structured prompt system controlling lighting, material, proportion, and aestetic. Iterated to eliminate style drift. Curated outputs for tonal consistency.

Decision

Decision

02

02

02

Emotional Positioning

NFT platforms default to urgency and hype. Chose glass as a material metaphor — fragility, transparency, calm — and designed every layer (palette, texture, pacing) to reinforce that emotional register.

System

System

03

03

03

Visual language

Paired Instrument Serif with Public Sans to balance poetic warmth and interface clarity. Built a pastel gradient palette that echoes morning mist without losing contrast.

Interaction design

Interaction design

04

04

04

New user onboarding for empty states

Used Framer to choreograph scroll-triggered parallax, card reveals, and transition movement on design elements, making the page feel alive without breaking the calm tone.

01 – the reason

Every NFT site I landed on gave me the same feeling

Every NFT platform I looked at felt the same – countdown timers, neon, discord links before you even know what you're looking at. The whole space is designed around urgency. I wanted to see if a digital collectible could work the opposite way: soft, personal, something you feel comfortable sitting with for awhile.

02 – character building

Building consistency in AI image generation

AI generation is easy but consistency is the real challenge. I built a structured prompt system to control lighting, material detail, proportions, and camera settings, then kept iterating until everything felt cohesive. The result is a series of translucent characters that share the same style, lighting, and visual language.

02 – visual language

Making everything real

From there I designed a visual system that carries that same feeling into the UI. Instrument Serif and Public Sans. Pastel gradients pulled from morning light. Glass-textured cards that blur and layer so the interface feels like an extension of the characters. Then I built the landing page in Framer to incorporate micro interaction to bring the page alive.

From there I designed a visual system that carries that same feeling into the UI. Instrument Serif and Public Sans. Pastel gradients pulled from morning light. Glass-textured cards that blur and layer so the interface feels like an extension of the characters. Then I built the landing page in Framer to incorporate micro interaction to bring the page alive.

From there I designed a visual system that carries that same feeling into the UI. Instrument Serif and Public Sans. Pastel gradients pulled from morning light. Glass-textured cards that blur and layer so the interface feels like an extension of the characters. Then I built the landing page in Framer to incorporate micro interaction to bring the page alive.

Check Out More Work

Check Out More Work

Binance Portfolio Dashboard

Binance Portfolio Dashboard

Binance Portfolio Dashboard

UX Research

Financial Dashboard

Usability Thinking

Generative UX/UI

Service

Binance Portfolio Dashboard

Binance Portfolio Dashboard

Binance Portfolio Dashboard

UX Research

Financial Dashboard

Usability Thinking

Generative UX/UI

Service

Flux Web3 Wallet

Flux Web3 Wallet

Flux Web3 Wallet

UX Research

UX/UI Design

Design System

Web3 Education

AI Image generation

Quick Links

Home, 

About, 

Works, 

Contact

Networks

LinkdIn, 

Email

Quick Links

Home, 

About, 

Works, 

Contact

Networks

LinkdIn, 

Email

Quick Links

Home, 

About, 

Works, 

Contact

Networks

LinkdIn, 

Email

Quick Links

Home, 

About, 

Works, 

Contact

Connect

LinkdIn, 

Email