Gilir / DESAIN & KOMPONEN
Gilir
Disusun dari bagiannya sendiri.
Ambil nomor. Di praktik kecil, yang pertama dipegang pengunjung adalah kartu dari loket; Gilir menjadikan kartu itu antarmukanya. Pelat g bertakik menamai loket, pembukanya adalah formulir loket itu sendiri — jalur layanan dan slot contoh sebagai radio biasa — dan hasilnya satu kartu sobek: nomor jalur besar, tiga baris label–nilai, dan sobekan yang selalu menyebut dirinya contoh fiktif. Tanpa potret, slogan, rating, atau janji soal menunggu.
01 / Palet & tipografi
Mint enamel, tinta hijau pekat, dan kertas tulang, seperti pelat loket dan kartu di tangan; aprikot hanya menandai pilihan yang berubah sesudah kartu dibuat, selalu dengan kata. Garis 1px, sudut siku, sobekan putus-putus dengan dua takik. Pilihan ditandai radio terisi, garis sisi, dan huruf jalurnya — tidak pernah dengan warna saja.
#eaf1ee#193a3a#bfe0cf#f8faf6#f3c5a9Atkinson Hyperlegible Next 600, digambar agar huruf dan angka mudah dibedakan, dipakai untuk wordmark, judul, huruf jalur, dan nomor kartu, tempat A-014 harus terbaca sekilas (nolnya bergaris miring). DM Sans membawa label, radio, dan catatan.
02 / Komposisi & perilaku
Papan nama dan tiga tautan halaman di atas satu garis, lalu satu baris yang menyatakan demo ini fiktif. Di layar lebar formulir di kiri dan draf kartu di kanan; halaman kartu melebarkan kartunya. Di bawah 700px tautan mengambil barisnya sendiri, formulir terbaca layanan → slot → ringkasan → tombol, dan kartu penuh muncul setelah dibuat, sesudah judul dan aksinya.
Tanpa animasi: pilihan, nomor, dan pemberitahuan berubah seketika, tanpa angka berputar dan tanpa bunyi panggilan; tidak ada yang bergerak sendiri.
Layanan dan slot berupa radio asli dalam fieldset ber-legend (Tab, Spasi, panah); kelompok slot menunggu layanan dan menyatakannya. Pilihan yang belum lengkap disebut di dekat kelompoknya, dihubungkan dengan aria-describedby, dan fokus pindah ke sana. Penanda langkah memadukan centang atau angka dengan kata dan aria-current; tautan halaman memakai aria-current. Kartu baru diumumkan dan judulnya menerima fokus; menghapus selalu bertanya dulu.
03 / Kontrol hingga setiap detail
Papan nama dan tiga tautan halaman di atas satu garis, lalu satu baris yang menyatakan demo ini fiktif. Di layar lebar formulir di kiri dan draf kartu di kanan; halaman kartu melebarkan kartunya. Di bawah 700px tautan mengambil barisnya sendiri, formulir terbaca layanan → slot → ringkasan → tombol, dan kartu penuh muncul setelah dibuat, sesudah judul dan aksinya.
Daftar komponen (gulir untuk memeriksa)
BACA KEPUTUSAN DESAIN
Mengapa disusun seperti ini.
Tangkapan layar menunjukkan pembuka yang diimplementasikan. Catatan menghubungkan komposisinya dengan pengalaman yang berfungsi dan perilaku di ponsel.
- 01
Tugasnya menjadi judul
Pembukanya formulir loket, bukan sambutan: h1 menyebut tugasnya, penanda langkah menyebut apa yang sudah selesai, dan baris fiktif hadir sekali di bawah papan nama. Di ponsel formulir dan tombolnya didahulukan.
- 02
Radio yang terbaca tanpa warna
Layanan dan slot berupa radio asli dalam kelompok berlabel. Pilihan ditandai radio terisi, garis sisi, dan huruf jalurnya; kelompok slot menunggu layanan dan menyatakannya. Pilihan yang belum lengkap disebut di samping kelompoknya dan menerima fokus.
- 03
Kartu yang menyebut dirinya contoh
Di samping formulir, draf menampilkan huruf jalur dan tanda pisah sampai dibuat; kartu yang sudah dibuat menampilkan nomor contoh tetap jalurnya. Sobekannya selalu menyatakan fiktif dan tanpa data pribadi, dan brand tidak bisa menghapus baris itu. Di ponsel ringkasan pendek menggantikannya sampai halaman kartu.
04 / Kontrak formulir & respons
Catatan persiapan lokal. Coba kirim kosong, perbaiki, lalu ekspor masukanmu sendiri.
Catatan yang disiapkan akan muncul di sini.
05 / Komponen yang benar-benar bekerja
Aktifkan ruang kerja lengkap saat ingin memeriksanya. Kode interaksinya dimuat sesuai kebutuhan.