Skip to content

Latest commit

 

History

History
55 lines (40 loc) · 2.59 KB

File metadata and controls

55 lines (40 loc) · 2.59 KB

UI Design

A premium, non-custodial platform built to bridge the gap between creators and their supporters through instant, low-fee micro-transactions. Designed with a focus on high-performance UX and borderless accessibility.


🛠️ What I Worked On

1. Core UI/UX Architecture

  • Design System Foundation: Developed a comprehensive Figma library from the ground up, including semantic design tokens for colors, typography, and spacing.
  • Adaptive Component Library: Built reusable, state-aware components (Buttons, Inputs, Cards, Modals) with full support for hover, active, and disabled states.
  • Dark-Mode Aesthetics: Optimized the visual hierarchy for high-contrast environments, utilizing a deep violet and peridot palette to reduce eye strain while maintaining a "Cyberpunk" indie vibe.

2. Advanced Page Engineering

  • Explore Creators Page: Engineered a dual-layout discovery system featuring a "Featured Artist" hero card and a scalable list view for standard creators.
  • Landing Page Experience: Designed a high-conversion hero section and interactive category grid (Digital Art, Independent Music, Gaming & Stream) with real-time creator counts.
  • Responsive Breakpoints: Fully mapped out layouts for Mobile (375px), Tablet (1024px), and Desktop (1440px) to ensure a seamless cross-platform experience.

3. Stellar Network Integration (The Flow)

  • Non-Custodial Wallet Flow: Designed the end-to-end connection UX for Stellar-based wallets (Freighter, Albedo, LOBSTR), focusing on security and transparency.
  • Instant Tip Protocol: Mapped out the user flow for on-chain micro-donations, ensuring transaction status is clearly communicated via custom toast notifications and ledger-based activity logs.

🎨 Design System Specs

Token Category Values / Specs
Primary Palette Deep Violet #6C63FF, Midnight Gray, Neon Accents
Typography Sans-Serif (Modern), Dynamic Scale (12px – 48px)
Spacing Scale 4px, 8px, 16px, 24px, 32px, 48px, 64px
Grid System 12-Column Desktop / 4-Column Mobile

🚀 Key Features Implemented

  • Verified Artist Badge: Visual trust indicators for top-tier creators.
  • Network Stats: Live counters for "Active Wallets," "Value Distributed," and "0% Platform Fees."
  • Category Discovery: Filterable creator tags for niche-specific support (e.g., Ethereal Soundscapes, Botanical Illustration).