DESIGN PROTOTYPE LAB · STAGE 03
5 Design Directions for Randomy
Open each direction to test real interactive tools (Wheel, Number Generator, Password Generator, and Hub) in Light and Dark mode, on desktop and mobile.
📊 Full evaluation scorecard ready in:
design/CHOICE.md B1 · Aurora Glass Премиальная мягкость
Aurora Glass
Apple, Arc, Linear marketing — calm, airy, modern glassmorphism
Palette:
- ✓ Translucent glass cards with backdrop blur (18px)
- ✓ Drifting polar aurora gradient blobs
- ✓ Pill buttons with smooth fluid springs
- ✓ Glowing droplet wheel pointer & pastel slices
Live Interactive Pages:
B2 · Neo-Brutal Pop Дерзко и вирусно
Neo-Brutal Pop
Gumroad, Figma Community, TikTok streams — chunky, punchy, high contrast
Palette:
- ✓ Thick 2.5–3px black outlines with 4px hard offset shadows
- ✓ Vivid saturated color tiles (each tool tile its own color)
- ✓ Rotated sticker badges (-2° to +3°) & marquee ticker
- ✓ Punchy tactile buttons that depress into the page on click
Live Interactive Pages:
B3 · Swiss Precision Точность и скорость
Swiss Precision
Vercel, Teenage Engineering, Linear docs — technical, monochrome, razor-sharp
Palette:
- ✓ Visible 12-column hairline grid & section numbers (01 / 02 / 03)
- ✓ Monochrome palette with single International Safety Orange accent
- ✓ Split-flap / odometer tabular digits (200px+)
- ✓ Split-screen tool layout & zero box shadows
Live Interactive Pages:
Clay Toybox · Игрушечно и дружелюбно
Duolingo, Headspace, Mario Party — chubby, squishy, candy pastel, mascot
Palette:
- ✓ Claymorphism: soft dual inset shadows & chubby rounded corners (24–36px)
- ✓ Friendly mascot "Randi" with reactive expressions
- ✓ Candy pastel wheel slices with chasing rim lights
- ✓ Bouncy squash & stretch button animations
Live Interactive Pages:
Editorial Bento · Журнальный стиль
Stripe Press, Notion, Kinfolk, The Atlantic — literary, warm paper, serif elegance
Palette:
- ✓ Warm paper grain texture with rich ink typography
- ✓ Asymmetrical magazine cover bento grid
- ✓ Mad-libs natural language inline controls
- ✓ Numbered folios, small caps, and classic R monogram seal
Live Interactive Pages:
Design Evaluation Criteria Checklist
Review each direction against the criteria outlined in docs/DESIGN.md §B7:
| CRITERIA | WEIGHT | B1 AURORA | B2 BRUTAL | B3 SWISS | B4 CLAY | B5 EDITORIAL |
|---|---|---|---|---|---|---|
| 1. Visual Beauty / "Wow" Factor | ×3 | High (Apple vibe) | High (Bold & viral) | Subtle (Pro tool) | High (Cute & friendly) | High (Literary elegance) |
| 2. Brand Memorability | ×2 | Good (Glass glow) | Very High (Stickers) | Strong (Signal orange) | Very High (Mascot) | High (Editorial seal) |
| 3. Readability & UI Clarity | ×2 | Clean & modern | Punchy high-contrast | Maximum clarity | Large touch targets | Refined serif hierarchy |
| 4. Mobile Ergonomics | ×2 | Sticky bottom CTA | Chunky bottom CTA | Minimal sticky bar | Squishy thumb CTA | Refined sticky bar |
| 5. Versatility (Kids to Devs) | ×1 | Universal | Gamers / Creators | Devs / Technical | Schools / Families | HR / Professionals |
| 6. Ad Synergy (Live with Ads) | ×1 | Sunken glass slots | Chunky bordered slots | Hairline grid slots | Puffy sunken slots | Paper folio ad boxes |