Kelas 10 · SMA

STUDY
MATCH

Platform edukasi modern untuk siswa SMA, temukan gaya belajarmu, tingkatkan prestasi, dan raih hasil terbaik dengan metode yang tepat.

APA ITU
ANASGAN?

📚

Tentang Web

ANASGAN adalah platform edukasi digital yang dirancang khusus untuk siswa SMA kelas 10. Kami hadir sebagai ruang belajar interaktif yang membantu setiap pelajar memahami karakteristik cara belajarnya sendiri agar dapat berkembang secara optimal.

🎯

Tujuan Web

Membantu siswa SMA mengenali gaya belajar personal mereka—Visual, Auditori, atau Kinestetik—sehingga proses belajar menjadi lebih terarah, efisien, dan menyenangkan. Kami ingin setiap siswa belajar sesuai potensi terbaiknya.

🚀

Manfaat Web

Dengan menggunakan ANASGAN, siswa mendapatkan rekomendasi metode belajar yang dipersonalisasi, tips belajar praktis, serta strategi efektif yang terbukti meningkatkan pemahaman dan performa akademik secara signifikan.

BELAJAR
LEBIH CERDAS

🧠

Tes Gaya Belajar

Kuis singkat berbasis psikologi pendidikan untuk mendeteksi gaya belajarmu secara akurat dalam hitungan menit.

Hasil Instan

Langsung dapatkan hasil analisis gaya belajar beserta saran metode belajar yang dipersonalisasi untukmu.

📈

Tingkatkan Prestasi

Gunakan metode yang sesuai karakter belajarmu untuk mempercepat pemahaman dan meningkatkan nilai akademik.

Web Design · ANASGAN

DESIGN
SYSTEM

Filosofi, prinsip, dan keputusan desain di balik website ANASGAN StudyMatch — dibangun dengan estetika modern dan pengalaman pengguna terbaik.

KONSEP
DESAIN

Website ANASGAN dirancang dengan pendekatan Dark Cinematic — terinspirasi dari antarmuka platform streaming modern. Setiap elemen dipilih secara sadar untuk menciptakan nuansa yang elegan, immersif, dan fokus pada konten.

Tujuan utamanya: membuat siswa merasa nyaman dan termotivasi ketika belajar, bukan sekadar menggunakan aplikasi biasa.

" Desain yang baik bukan tentang terlihat keren — tapi tentang membuat pengguna merasa seperti di rumah sendiri.
COLOR PALETTE
#E50914
Primary Red
#B2070F
Red Dark
#1A1A1A
Card BG
#141414
Dark BG
#0A0A0A
Black
#B3B3B3
Muted Text

PILAR
DESAIN WEB

01
🎨

Visual Identity

Dominasi warna merah, hitam, dan abu-abu gelap menciptakan kontras yang kuat dan berkarakter. Palet ini dipilih untuk memancarkan semangat, energi belajar, dan modernitas — selaras dengan identitas brand ANASGAN.

Contrast Branding Color Theory
02
✍️

Typography

Bebas Neue digunakan untuk heading besar — memberikan kesan bold, editorial, dan impactful. Poppins dipilih sebagai body font karena keterbacaannya yang excellent di layar digital dengan berbagai ukuran.

Bebas Neue Poppins Hierarchy
03

Motion & Animation

Setiap interaksi dirancang dengan transisi halus menggunakan cubic-bezier easing. Hero menggunakan Ken Burns effect untuk depth. Hover states memberikan feedback visual yang instan, membuat website terasa hidup dan responsif.

Ken Burns Hover Effects Fade Up
04
📐

Layout & Grid

Sistem grid CSS auto-fit memastikan konten mengalir secara natural di berbagai ukuran layar. Padding konsisten 8% horizontal memberikan breathing room yang elegan. Section dividers menggunakan gradient merah sebagai aksent visual.

CSS Grid Responsive Spacing System
05
📱

Responsive Design

Setiap komponen dibangun mobile-first dengan breakpoint di 640px. Ukuran font menggunakan clamp() untuk fluid scaling. Navbar, hero, dan card grid semuanya beradaptasi sempurna di smartphone hingga ultrawide monitor.

Mobile-First Fluid Type Breakpoints
06
🌟

Depth & Atmosphere

Efek glow merah pada elemen kunci, backdrop-filter blur pada navbar, dan radial gradient overlay menciptakan kedalaman visual yang kaya. Shadow bertingkat pada card memberikan ilusi tiga dimensi yang subtle namun terasa.

Glow Effects Backdrop Blur Box Shadow

ELEMEN
KUNCI UI

Navigation Bar

Navbar fixed dengan glassmorphism effect. Menggunakan backdrop-filter: blur dan gradient transparan yang berubah menjadi solid saat di-scroll. Active state ditandai dengan garis merah bawah dan background subtle.

Card Components

Card dengan border tipis dan background gelap. Hover mengaktifkan: translate -8px ke atas, border berubah merah, top accent bar muncul, dan radial glow dari sudut kanan atas. Semua transisi menggunakan timing yang sama untuk konsistensi.

🧠
Tes Gaya Belajar
Kuis singkat berbasis psikologi pendidikan...

Button System

Dua varian tombol: Primary dengan solid merah dan glow shadow, dan Outline dengan glassmorphism transparan. Keduanya memiliki hover yang mengangkat tombol 3px ke atas untuk feel interaktif.

SLIDE DECK
ANASGAN

Berikut adalah slide presentasi lengkap proyek ANASGAN StudyMatch — mencakup latar belakang, konsep desain, fitur produk, dan hasil riset gaya belajar siswa SMA.

PRESENTASI ANASGAN · CANVA
Behind The Scenes · ANASGAN

BEHIND
THE TEAM

Presentasi lengkap di balik pembuatan website ANASGAN StudyMatch — proses, ide, dan kerja keras tim Kelas 10.

OUR
PRESENTATION

Berikut adalah presentasi Canva resmi tim ANASGAN yang memuat seluruh proses riset, perancangan, hingga pengembangan website StudyMatch. Geser slide untuk melihat lebih lengkap.

Tidak bisa melihat presentasi? Buka di Canva ↗

STUDY
MATCH

Temukan gaya belajar terbaikmu melalui tes interaktif dan dapatkan strategi belajar yang dipersonalisasi khusus untukmu.

APA ITU
STUDYMATCH?

🎓

StudyMatch

StudyMatch adalah fitur unggulan dari platform ANASGAN—sebuah sistem tes gaya belajar berbasis psikologi pendidikan yang dirancang khusus untuk siswa SMA. Melalui serangkaian pertanyaan terstruktur, StudyMatch mengidentifikasi apakah kamu termasuk pelajar tipe Visual, Auditori, atau Kinestetik. Setelah mengetahui tipenya, kamu mendapatkan rekomendasi metode belajar yang paling efektif sesuai karakteristikmu—sehingga waktu belajar lebih singkat, pemahaman lebih dalam, dan hasil akademik meningkat signifikan.

CARA
MENGGUNAKAN

01

Kunjungi Halaman Product

Buka website ANASGAN dan navigasi ke halaman Product. Kamu akan menemukan tes StudyMatch di bagian bawah halaman, siap untuk dimulai kapan saja.

02

Jawab Pertanyaan dengan Jujur

Tes terdiri dari 5 pertanyaan seputar kebiasaan dan preferensi belajarmu. Pilih jawaban yang paling menggambarkan dirimu sehari-hari—tidak ada jawaban benar atau salah.

03

Dapatkan Hasil Analisis

Setelah selesai, sistem akan memproses jawabanmu dan menampilkan tipe gaya belajarmu—Visual, Auditori, atau Kinestetik—beserta penjelasan lengkap.

04

Terapkan Saran Belajar

Baca rekomendasi metode belajar yang dipersonalisasi untukmu. Praktikkan tips tersebut dalam rutinitas belajarmu dan rasakan perbedaannya dalam waktu singkat.

MULAI TES
STUDYMATCH

SARAN CARA
BELAJAR

Visual

Pelajar Visual

Kamu belajar paling efektif melalui gambar, diagram, warna, dan representasi visual. Otak kamu memproses informasi lebih cepat saat ada elemen visual yang mendukung.

  • Buat mind map berwarna untuk setiap topik
  • Gunakan stabilo berbeda untuk poin penting
  • Tonton video penjelasan di YouTube
  • Buat infografis atau poster ringkasan materi
  • Tulis catatan dengan gambar dan simbol
Auditori

Pelajar Auditori

Kamu menyerap informasi paling baik melalui suara dan pendengaran. Belajar menjadi jauh lebih efektif saat ada elemen audio yang mendukung proses pemahamanmu.

  • Baca catatan dengan suara keras saat belajar
  • Rekam penjelasan sendiri lalu putar ulang
  • Diskusi dan jelaskan materi kepada teman
  • Dengarkan podcast atau audio edukatif
  • Buat lagu atau ritme untuk menghafal
Kinestetik

Pelajar Kinestetik

Kamu belajar terbaik melalui gerakan, praktik langsung, dan pengalaman nyata. Duduk diam terlalu lama justru menurunkan fokus dan efektivitas belajarmu.

  • Praktikkan konsep dengan simulasi atau eksperimen
  • Gunakan teknik belajar sambil bergerak
  • Buat proyek atau model fisik materi
  • Ambil jeda aktif setiap 25 menit (Pomodoro)
  • Roleplay atau peragakan konsep yang dipelajari