Market Place Siswa

Nama : Rafaela Shyra Ashma' Ramadhani

NRP : 5025231217

Kelas : Pemrograman Perangkat Bergerak - B

Tugas Material - Studi Kasus Marketplace Siswa

 

Source Code: Link GitHub 

Tampilan Aplikasi:

Penjelasan:

Kode aplikasi StudentMart di atas sudah menerapkan konsep Material Design 3 (Material You) karena menggunakan berbagai komponen modern dari Jetpack Compose seperti Card, TopAppBar, NavigationBar, FloatingActionButton, dan MaterialTheme. Pada bagian StudentMartTheme, aplikasi menggunakan lightColorScheme() untuk menentukan kombinasi warna utama seperti pink, putih, dan warna pastel sehingga tampilan aplikasi terlihat konsisten, responsif, dan menarik secara visual. Penggunaan warna yang seragam pada tombol, card, dan navigation bar membuat antarmuka lebih nyaman digunakan serta mendukung prinsip user-friendly dalam Material Design.

Prinsip pertama yaitu “Material is the metaphor” terlihat dari penggunaan komponen Card pada tampilan produk dan profil. Card dibuat dengan RoundedCornerShape sehingga terlihat seperti lembaran material nyata yang memiliki bentuk dan lapisan tersendiri. Selain itu, penggunaan FloatingActionButton pada halaman home memberikan efek tombol yang tampak “mengambang” di atas layout utama, sesuai dengan konsep depth dan elevation pada Material Design. Penggunaan Surface, Box, dan background juga membantu membentuk layer visual yang menyerupai objek nyata di dalam UI aplikasi.

Prinsip kedua yaitu “Bold, graphic, intentional” diterapkan melalui penggunaan warna kontras dan tipografi yang jelas. Aplikasi menggunakan warna pink sebagai warna utama (primary) sehingga elemen penting seperti tombol “Add Product”, harga produk, dan kategori lebih mudah menarik perhatian pengguna. Teks judul seperti “StudentMart”, “Trending Products”, dan nama produk menggunakan FontWeight.Bold serta ukuran font yang lebih besar agar memiliki hierarki visual yang jelas. Layout juga dibuat rapi menggunakan Column, Row, LazyColumn, dan Spacer, sehingga setiap komponen memiliki jarak yang nyaman dan tidak terlihat berantakan.

Prinsip ketiga yaitu “Motion provides meaning” terlihat dari penggunaan AnimatedContent dengan efek fadeIn dan fadeOut saat berpindah halaman antara Home, Add Product, dan Profile. Animasi ini membantu pengguna memahami bahwa sedang terjadi perubahan tampilan tanpa terasa kaku. Selain itu, penggunaan CircularProgressIndicator saat proses penambahan produk memberikan feedback visual bahwa aplikasi sedang memproses data. Dengan adanya animasi dan feedback tersebut, interaksi aplikasi menjadi lebih hidup dan mudah dipahami oleh pengguna.