Login Facebook UI/UX Di Figma - Rianto

Perjalanan Belajar Pemrograman Mobile: Fokus pada UI/UX


Belajar pemrograman mobile bukan hanya soal menulis kode agar aplikasi bisa berjalan, tetapi juga bagaimana aplikasi tersebut dapat memberikan pengalaman terbaik bagi penggunanya. Saat ini, saya sedang berada di tahap mempelajari UI (User Interface) dan UX (User Experience), dan ternyata bagian ini sama pentingnya dengan logika pemrograman itu sendiri.


Kenapa UI/UX Penting?


Ketika membuka sebuah aplikasi, hal pertama yang dilihat pengguna adalah tampilannya. Tampilan inilah yang disebut UI. Sementara itu, bagaimana pengguna merasa nyaman, mudah, dan betah menggunakan aplikasi, itulah UX.

🔹 UI yang baik = tampilan menarik, jelas, dan mudah dipahami.

🔹 UX yang baik = alur penggunaan aplikasi sederhana, tidak membingungkan, dan menyenangkan.


Hal yang Saya Pelajari di Tahap UI/UX


1. Prinsip Desain Sederhana

Jangan terlalu banyak elemen di layar. Semakin simpel, semakin mudah digunakan.



2. Konsistensi Warna & Font

Aplikasi yang rapi biasanya punya aturan warna dan font yang konsisten. Misalnya, warna utama untuk tombol aksi, warna sekunder untuk informasi tambahan.



3. Responsif & Mudah Digunakan

Desain harus menyesuaikan ukuran layar (mobile, tablet), dan tombol harus cukup besar agar mudah ditekan.



4. Alur Pengguna (User Flow)

Saya belajar membuat sketsa sederhana (wireframe) untuk melihat bagaimana pengguna berpindah dari satu halaman ke halaman lain.



5. Feedback untuk Pengguna

Misalnya, saat tombol ditekan, ada animasi kecil atau perubahan warna. Hal ini memberi tanda bahwa aplikasi merespons tindakan mereka.

 GAMBAR

Tools yang Membantu Belajar UI/UX


Figma → untuk membuat desain dan prototype.


Material Design & Human Interface Guidelines → panduan resmi dari Google & Apple untuk desain aplikasi.



Penutup


Mempelajari UI/UX membuat saya sadar bahwa membuat aplikasi bukan hanya sekadar menulis kode, tetapi juga tentang menciptakan kenyamanan bagi pengguna. Dengan memahami UI/UX, aplikasi yang saya buat ke depannya tidak hanya berfungsi, tetapi juga menyenangkan untuk dipakai.

Komentar

Posting Komentar

Postingan populer dari blog ini

Gallery App dengan Fitur Favorit Zapp.run Flutter

Gambar
Gallery App dengan Fitur Favorit 📱 Gambaran Umum Aplikasi Flutter ini adalah contoh implementasi komponen UI/UX modern dengan fitur responsif, manajemen state, dan navigasi multi-halaman. Aplikasi ini menampilkan galeri gambar dengan kemampuan menandai gambar favorit.  ðŸŽ¯ Fitur Utama  1. Antarmuka Responsif - Beradaptasi otomatis dengan ukuran layar berbeda (mobile & tablet) - Menggunakan **LayoutBuilder** untuk mendeteksi constraints - Tampilan berbeda untuk layout sempit (single column) dan lebar (grid view)  2. Manajemen State - Menggunakan **StatefulWidget** untuk UI yang dinamis - Implementasi **setState()** untuk update tampilan - Contoh perbedaan Stateless vs Stateful Widget  3. Navigasi Multi-Halaman - **BottomNavigationBar** dengan 3 halaman: Home, Favorites, Profile - **Navigator.push()** dan **Navigator.pop()** untuk navigasi ke halaman detail - Transisi antar halaman yang smooth  4. Dynamic Theme - Toggle tema gelap/terang dengan IconButton di A...
Baca selengkapnya

Membuat Halaman Data PerKelompok

Belajar Flutter: Membuat Halaman Data Kelompok Belajar M.Rizky Desta Fitra Rianto Halo teman-teman! 👋 Beberapa waktu lalu saya sedang belajar Dart & Flutter dan mencoba membuat sebuah project sederhana. Tujuannya adalah menampilkan data kelompok belajar di dalam 1 halaman aplikasi. Project ini sangat cocok untuk pemula yang ingin berlatih layout, menampilkan data, dan membuat popup dialog di Flutter. Konsep Halaman yang Dibuat Struktur halaman yang saya rancang sebagai berikut: Bagian atas → Nama kelompok. Di bawahnya → Foto kelompok secara keseluruhan. Selanjutnya → Daftar anggota (berisi foto, nama, nomor absen, dan alamat). Di bagian bawah → Tombol yang bila ditekan akan memunculkan popup dialog berisi rincian anggota kelompok: Nama lengkap Nama kelompok Nomor absen Alamat rumah Kode Program Lengkap (main.dart) Berikut kode lengkap yang saya tulis di main.dart menggunakan zapp.run. Foto-foto anggota disimpan di folder assets/, jadi pastikan kamu menaruh gambar sesuai dengan pat...
Baca selengkapnya