UX Mastery LabBelajar UI/UX Profesional

Design Playground

Belajar dengan Mencoba, Bukan Cuma Membaca

Sembilan alat interaktif untuk melatih intuisi desainmu. Eksperimen bebas — setiap perubahan langsung memberi feedback, banyak yang bisa langsung kamu salin sebagai CSS. Hasil eksperimenmu otomatis tersimpan di perangkat.

Visual

Typography Playground

Atur skala teks dan rasakan kapan hierarchy jadi jelas. Salin CSS-nya.

Hierarchy sudah cukup jelas

Mata akan menangkap judul lebih dulu, lalu turun ke body. Pertahankan rasio ini.

Preview langsung

Desain mahal selalu punya alasan

Hierarchy yang baik memandu mata user: mana yang dibaca lebih dulu, mana yang sekunder. Atur ukuran dan jarak hingga prioritas terasa jelas tanpa perlu dijelaskan.

Caption — informasi pendukung
Visual

Spacing Playground

Geser padding & jarak, cek keselarasan dengan grid 8pt.

Selaras dengan grid 8pt

Spacing memakai kelipatan 8. Layout akan terasa rapi dan konsisten.
Visual

Shadow & Elevation Playground

Racik bayangan halus ala desain premium, lalu salin box-shadow.

Preview
box-shadow: 0px 12px 32px -6px rgba(15, 23, 42, 0.14); border-radius: 20px;

Tips shadow premium

Shadow yang mahal biasanya halus: opacity rendah, blur besar, dan spread negatif agar bayangan tidak melebar kaku.
Warna

Color Palette Playground

Hasilkan skala warna 50–900 dari satu warna + saran accent.

Preset cepat

Primary scale (50–900)

Saran accent (komplementer)

Preview UI dengan palet ini

Paket Pro

Bangun standar internasional

Lihat bagaimana warna dasar bekerja sebagai teks, latar, dan tombol aksi.

Warna

Kontras Warna Playground

Uji pasangan warna teks-background terhadap standar WCAG.

Rasio kontras

18.06:1

Lulus AA teksLulus AA besarLulus AAA

Kontras sangat baik. Aman untuk semua ukuran teks.

Aa

Teks judul contoh

Body text untuk mengecek kenyamanan baca pada pasangan warna ini.

Caption kecil 12px
Warna

Gradient Playground

Bangun gradient untuk hero, kartu, atau tombol.

linear-gradient(135deg, #3461ff, #8b5cf6)

UX Mastery Lab

Gradient untuk hero, kartu, atau tombol.

Komponen

Component State Playground

Jelajahi semua state button dan input.

Button States

Default

Hover

Active

Disabled

Input States

Setiap komponen profesional punya state lengkap. Jangan lupakan disabled dan error.

Struktur

User Flow Playground

Susun node alur: Start, Action, Decision, Success, Error.

Tambah node:
Start
Action
Decision

Tip: flow yang baik selalu punya jalur Success dan Error, bukan cuma happy path.

Struktur

Wireframe Playground

Seret blok untuk menyusun struktur halaman.

Tambah blok

— Canvas Wireframe —
  • Header
  • Hero
  • Cards