Kembali ke demoBUKU KOMPONEN KHUSUS TEMA INIEN

Pijar Academy / DESAIN & KOMPONEN

Pijar Academy
Disusun dari bagiannya sendiri.

Coba dulu satu latihan. Kursus dan sekolah kecil dinilai dari rasanya belajar di sana, jadi papan latihan menjadi seluruh situs: papan nama di atas, tab jalur yang menggantung di papan, satu soal, dua versi, dan stempel.

01 / Palet & tipografi

Kuning ruang kerja untuk dinding, krem papan, garis tinta biru 2 px, dan bayangan tinta tegas; gambar latihan, stempel, dan butir yang dicentang berwarna hijau. Lambang perisai dengan percik (✳, “pijar”) menandai sekolah, stempel, dan setiap latihan selesai.

Latar#f3ce58
Tinta#203c4b
Penanda#23624c
Permukaan pendukung#f9e7ab

Lexend, yang dirancang agar lebih mudah dibaca, membentuk soal, wordmark, judul papan, dan tombol. DM Sans dipakai untuk latihan, tab, lembar program, dan kartu kelas coba. Tanpa huruf monospace.

02 / Komposisi & perilaku

Setiap halaman adalah satu papan di kelas: papan nama sekolah (lambang, wordmark, bab, dan pelat terisi Kelas coba), papan dengan tab yang menggantung di tepi atas dan catatan di kanan, lalu kaki bergaris. Pembuka menaruh soal di kiri dan versi A/B di kanan, dengan tiga cara ikut di bawahnya. Di ponsel papan nama jadi dua baris dan papan dibaca soal, pilihan, periksa, hasil.

Tanpa pustaka gerak. Setelah jawaban tepat, stempel mendarat dengan skala singkat, hanya bila gerak diizinkan dan perangkat tidak terbatas; reduced motion menampilkannya diam. Kemiringan kartu kelas coba statis.

Radio dan kotak centang asli, tombol tekan untuk tingkat dan jalur, hitungan langsung pada bekal, dan setiap hasil diucapkan di baris status (stempel hanya hiasan). Fokus terlihat, target 44 px, tidak ada keadaan yang hanya dibedakan warna, reduced motion.

03 / Kontrol hingga setiap detail

Setiap halaman adalah satu papan di kelas: papan nama sekolah (lambang, wordmark, bab, dan pelat terisi Kelas coba), papan dengan tab yang menggantung di tepi atas dan catatan di kanan, lalu kaki bergaris. Pembuka menaruh soal di kiri dan versi A/B di kanan, dengan tiga cara ikut di bawahnya. Di ponsel papan nama jadi dua baris dan papan dibaca soal, pilihan, periksa, hasil.

Daftar komponen (gulir untuk memeriksa)

  1. 01
    Latihan hari ini di layar pertama: dua versi, jawaban diperiksa, dan stempel ✳

    Setiap halaman adalah satu papan di kelas: papan nama sekolah (lambang, wordmark, bab, dan pelat terisi Kelas coba), papan dengan tab yang menggantung di tepi atas dan catatan di kanan, lalu kaki bergaris. Pembuka menaruh soal di kiri dan versi A/B di kanan, dengan tiga cara ikut di bawahnya. Di ponsel papan nama jadi dua baris dan papan dibaca soal, pilihan, periksa, hasil.

  2. 02
    Tiga tingkat pengalaman di tiga jalur, dengan unduhan rencana belajar

    Radio dan kotak centang asli, tombol tekan untuk tingkat dan jalur, hitungan langsung pada bekal, dan setiap hasil diucapkan di baris status (stempel hanya hiasan). Fokus terlihat, target 44 px, tidak ada keadaan yang hanya dibedakan warna, reduced motion.

  3. 03
    Bekal kelas coba: checklist empat butir, kartu yang ikut berubah, dan catatan TXT

    Halaman Next.js statis dwibahasa dengan dua draf browser tervalidasi (catatan latihan dan bekal kelas coba), ekspor TXT eksplisit, dan komponen berscope independen. Tanpa akun, pengiriman eksternal, atau transaksi produksi.

  4. 04
    Catatan latihan dengan refleksi lokal browser

    Halaman Next.js statis dwibahasa dengan dua draf browser tervalidasi (catatan latihan dan bekal kelas coba), ekspor TXT eksplisit, dan komponen berscope independen. Tanpa akun, pengiriman eksternal, atau transaksi produksi.

  5. 05
    Buku komponen dan status sendiri

    Halaman Next.js statis dwibahasa dengan dua draf browser tervalidasi (catatan latihan dan bekal kelas coba), ekspor TXT eksplisit, dan komponen berscope independen. Tanpa akun, pengiriman eksternal, atau transaksi produksi.

  6. 06
    Personalisasi merek lokal

    Halaman Next.js statis dwibahasa dengan dua draf browser tervalidasi (catatan latihan dan bekal kelas coba), ekspor TXT eksplisit, dan komponen berscope independen. Tanpa akun, pengiriman eksternal, atau transaksi produksi.

  7. 07
    Pilihan, tooltip & area gulir

    Perilaku papan ketik dibagikan; tema ini memiliki warna popup, batas, radius, tipografi, dan fokus sendiri.

  8. 08
    Ekspor & batasan

    Studi desain fiktif. Latihan, tingkat, dan jumlah pertemuan bersifat ilustratif; tidak ada jadwal, biaya, akreditasi, atau pendaftaran, dan ekspor tetap menjadi artefak perencanaan lokal.

BACA KEPUTUSAN DESAIN

Mengapa disusun seperti ini.

Tangkapan layar menunjukkan pembuka yang diimplementasikan. Catatan menghubungkan komposisinya dengan pengalaman yang berfungsi dan perilaku di ponsel.

Tangkapan layar desktop asli demo Pijar Academy.123
Tangkapan layar website asli. Ikuti catatan bernomor.
  1. 01

    Soalnya menjadi judul

    Layar pertama adalah latihan hari ini, bukan slogan: soalnya menjadi h1 halaman, dengan petunjuk dan tautan ke latihan lengkap. Tiga jalur menggantung di papan sebagai tab; di ponsel hanya tab aktif yang menyebut namanya.

  2. 02

    Dua versi, satu stempel

    Versi A dan B adalah radio asli yang digambar sebagai kartu. Jawaban tepat tercatat di catatan latihan dan mendapat stempel ✳ guru; hasilnya diucapkan di baris status, dan jawaban salah mendapat petunjuk, bukan merah.

  3. 03

    Kelas coba, bukan pendaftaran

    Pelat terisi di papan nama mengarah ke bekal kelas coba: empat hal untuk dibawa, kartu yang ikut berubah saat dicentang, dan catatan TXT. Tidak ada formulir, jadwal, biaya, atau data pribadi yang dikirim.

04 / Kontrak formulir & respons

Catatan persiapan lokal. Coba kirim kosong, perbaiki, lalu ekspor masukanmu sendiri.

10–1.000 karakter. Disimpan pada halaman ini.

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.