Belajar Pemrograman Mobile: Memahami UI/UX di Tahap Awal

 

Belajar Pemrograman Mobile: Memahami UI/UX di Tahap Awal

Apa itu UI & UX?

  • UI (User Interface):
    Tampilan aplikasi yang dilihat dan digunakan pengguna. Misalnya: tombol, warna, ikon, layout.
    → Fokus: desain visual & interaksi.

  • UX (User Experience):
    Bagaimana pengalaman pengguna saat memakai aplikasi. Misalnya: apakah aplikasi mudah digunakan, cepat, nyaman, dan memenuhi kebutuhan.
    → Fokus: kenyamanan & alur penggunaan.

🔹 Kenapa UI/UX penting di tahap awal?

  1. Mencegah aplikasi jadi “ribet” → kalau alurnya jelas dari awal, pengguna lebih betah.

  2. Menghemat waktu pengembangan → daripada nanti bolak-balik revisi desain, lebih baik pikirkan flow sejak awal.

  3. Meningkatkan kepuasan pengguna → desain bagus + pengalaman enak = aplikasi disukai.

🔹 Langkah Awal Belajar UI/UX di Mobile

  1. Kenali pengguna

    • Siapa target aplikasi kamu? (remaja, pekerja, orang tua, dsb)

    • Apa masalah mereka yang ingin diselesaikan aplikasi?

  2. Buat Wireframe

    • Sketsa sederhana tampilan aplikasi (bisa di kertas, Figma, atau tools lain).

    • Jangan fokus dulu ke warna/ikon, tapi alur dan fungsi.

  3. Pahami Prinsip Desain UI

    • Konsistensi (warna, font, tombol seragam).

    • Hierarki visual (hal penting lebih menonjol).

    • Responsif (nyaman di berbagai ukuran layar).

  4. Uji coba sejak dini

    • Minta teman/target user coba mockup.

    • Lihat apakah mereka bingung atau lancar menggunakannya.

🔹 Tools yang Bisa Dipakai

  • Desain & Prototyping: Figma, Adobe XD, Sketch

  • Framework Mobile: Flutter, React Native, Kotlin, Swift


Ini tugas saya :




Oleh : Rian Rama Romansah

Komentar

Posting Komentar

Postingan populer dari blog ini

Membangun Aplikasi Kuliner Nusantara dengan Login dan Navigasi Multi-Halaman

Gambar
  Membangun Aplikasi Kuliner Nusantara dengan Login dan Navigasi Multi-Halaman Pada pelajaran kali ini, kita belajar bagaimana membuat aplikasi kuliner Nusantara menggunakan Flutter , mulai dari membuat tampilan utama, navigasi antar halaman, hingga implementasi login sederhana di halaman profil. Berikut hal-hal penting yang dipelajari: Struktur Aplikasi Flutter dengan StatefulWidget Kita membuat aplikasi menggunakan StatefulWidget agar aplikasi bisa merespon perubahan data, seperti tema gelap/terang dan daftar favorit kuliner . Navigasi dengan BottomNavigationBar Aplikasi memiliki 5 halaman : Beranda, Kuliner, Pencarian, Favorit, dan Profil. Navigasi dilakukan menggunakan BottomNavigationBar , yang memungkinkan pengguna berpindah antar halaman dengan mudah. Menampilkan Data Kuliner dengan GridView Daftar kuliner ditampilkan menggunakan GridView.builder . Setiap item memiliki gambar dan nama , serta dapat ditandai sebagai favorit . Fitur Favori...
Baca selengkapnya

Materi Widget

Gambar
 Mengenal widget dasar Flutter (Text, Image, Column, Row, Icon, Button) & membuat aplikasi sederhana. 📘 Tugas: Buat aplikasi “Kartu Profil Sederhana – Aku & Hobiku” Syarat: ✅ Minimal 5 widget berbeda ✅ Ada foto/ilustrasi, nama, jurusan ✅ Deskripsi hobi atau cita-cita ✅ Tombol “Hubungi Saya” Hasil :  Kalo kalian pengen tinggal salin codingan ini lalu buka zapp.run import 'package:flutter/material.dart'; void main() => runApp(const MyProfileApp()); class MyProfileApp extends StatelessWidget {   const MyProfileApp({super.key});   @override   Widget build(BuildContext context) {     return MaterialApp(       debugShowCheckedModeBanner: false,       home: Scaffold(         backgroundColor: const Color.fromARGB(255, 149, 155, 160),         appBar: AppBar(           title: const Text('Profil'),           backgroundColor: Color.fr...
Baca selengkapnya

Membuat To Do List Sederhana

Gambar
  Membuat To Do List Sederhana di DartPad 🧩 Pengertian Aplikasi To-Do List adalah aplikasi sederhana yang digunakan untuk mencatat, menandai, dan mengatur daftar tugas yang harus diselesaikan. Dalam konteks ini, aplikasi dibuat menggunakan Flutter , yaitu framework dari Google yang digunakan untuk membuat aplikasi mobile dengan tampilan menarik dan performa tinggi, hanya dengan satu kode program (Dart). 💡 Pelajaran yang Dapat Diambil Belajar Logika Pemrograman Dasar Flutter — seperti menambah, menghapus, dan memperbarui data menggunakan setState() . Mengenal Struktur UI Flutter — bagaimana menyusun tampilan dengan layout ( Column , Row , Container , dll). Meningkatkan Kreativitas Desain — membuat tampilan aplikasi yang menarik dengan warna, shadow, dan gradien. Belajar Interaksi dengan Pengguna — seperti menekan tombol, mencentang tugas, atau mengetik di TextField . 🌱 Manfaat Membantu Manajemen Waktu — aplikasi ini membantu kita mengatur jadwal dan men...
Baca selengkapnya