Mendesain Prototype Aplikasi Social Dan Didalamnya Ada Ask, Send Dan Ada Room Discuss

 

Mendesain UI/UX Aplikasi Forum Sosial di Figma

Bisa dilihat disini:

https://www.figma.com/proto/DFQw2sn0b0H6a2DpDxq3AW/Untitled?node-id=2-63&p=f&t=ARyjIO3GyC36Yv9A-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=2%3A43&show-proto-sidebar=1

Dalam dunia digital saat ini, UI (User Interface) dan UX (User Experience) memegang peranan penting dalam kesuksesan sebuah aplikasi. Desain yang menarik namun tetap fungsional akan membuat pengguna betah berinteraksi. Pada artikel ini, kita akan membahas contoh desain aplikasi forum sosial menggunakan Figma, dengan referensi konsep dari prototipe yang ditampilkan pada mockup mobile.

---

1. Konsep Desain

Tema desain yang dipilih adalah aplikasi forum sosial anonim, tempat pengguna bisa berbagi pemikiran, pengalaman, maupun curahan hati.

Elemen yang ditampilkan antara lain:

• Header sederhana dengan ikon profil, notifikasi, dan pengaturan.

• Kolom interaksi (Ask | Respon | Send) untuk mendorong partisipasi pengguna.

• Feed postingan berisi pertanyaan anonim, jawaban, serta gambar pendukung.

• Navigasi bawah (bottom navigation bar) dengan ikon Home dan Room.

Konsep ini mengutamakan kesederhanaan dan keterbacaan, agar pengguna langsung paham bagaimana cara menggunakannya.

---

2. Prinsip UX yang Diterapkan

Dalam desain ini, ada beberapa prinsip UX (User Experience) yang diterapkan:

1. Kemudahan Navigasi

   • Tombol navigasi bawah sederhana, hanya 2 menu utama sehingga tidak membingungkan pengguna.

2. Hierarki Visual yang Jelas

   • Nama pengguna anonim menggunakan font lebih kecil.

   • Pertanyaan ditampilkan lebih menonjol untuk menarik perhatian.

   • Teks tambahan seperti “Read More..” dibuat samar agar tidak mengganggu fokus utama.

3. Emosi & Psikologi Pengguna

   • Warna dominan putih dan ungu muda memberikan kesan tenang.

   • Konten tulisan "Hide your emotions because no one cares" menekankan nuansa curhat anonim.

---

3. Proses Desain di Figma

Menggunakan Figma, langkah-langkah mendesain prototipe ini:

1. Membuat Frame Smartphone

   • Gunakan Frame dengan ukuran layar iPhone 14 Pro atau Android umum (390x844 px).

2. Menambahkan Komponen Header

   • Tambahkan ikon profil, notifikasi, dan setting dari plugin Iconify di Figma.

3. Mendesain Feed Postingan

   • Gunakan Auto Layout untuk membuat kartu postingan yang fleksibel.

   • Sertakan teks (pertanyaan, jawaban, gambar).

4. Membuat Bottom Navigation Bar

   • Gunakan grid sederhana dengan 2 menu utama.

   • Tambahkan active state dengan warna berbeda pada menu yang sedang dipilih.

5. Prototype Interaksi

   • Gunakan fitur Prototype di Figma untuk menghubungkan antar frame.

   • Contoh: ketika klik “Read More..” maka akan membuka halaman detail postingan.

---

4. Tips Mendesain Aplikasi Sosial di Figma

• Gunakan Warna Netral + Accent → agar konten tetap fokus.

• Ikon yang Familiar → jangan membuat ikon baru yang membingungkan.

• Responsif → pastikan desain tetap rapi di berbagai ukuran layar.

• Uji dengan User Testing → ajak teman mencoba prototipe sebelum dikembangkan.

---

Kesimpulan

Mendesain UI/UX aplikasi forum sosial membutuhkan kesederhanaan, keterbacaan, dan kenyamanan visual. Dengan memanfaatkan Figma, proses desain menjadi lebih cepat, kolaboratif, dan fleksibel.

Desain pada mockup di atas mencontohkan bagaimana tampilan sederhana dapat menghadirkan pengalaman pengguna yang menyenangkan, khususnya untuk aplikasi berbasis komunitas dan curhat anonim.