Figma landing, login dan sign in page Pa Darsu

🎨 Ngulik Desain Figma Aplikasi Triv: Simple, Modern, dan Gen Z Friendly

Kalau ngomongin aplikasi keuangan atau trading, biasanya desainnya ribet, penuh angka, bikin pusing 🤯. Tapi di Triv, desainnya dibikin clean dan gampang dipahami. Yuk kita bahas satu-satu tampilan dari desain Figma-nya 👇






🔹 Halaman Awal – “Masuk ke Triv”

Pas pertama kali buka, user langsung disambut sama logo Triv + tombol Masuk ke Triv.
👉 Simpel, nggak ribet, langsung nunjukin tujuan utama aplikasi ini.
Dengan background grafik chart biru ala trading, vibe-nya udah kerasa: ini app buat investasi / trading cuy! 📈

🔹 Register Page – Daftar Dulu Biar Bisa Gas 🚀

Di halaman daftar, desainnya clean dengan dominasi dark mode biar nggak nyakitin mata. Form-nya juga jelas:

  • Nama Depan & Nama Belakang ✍️

  • Email 📧

  • Password + Konfirmasi Password 🔒

  • Dropdown status (misalnya Pelajar/Mahasiswa)

Tombol Daftar dibikin tegas warna ungu-biru, biar stand out dan gampang diteken. Oh iya, ada juga link ke syarat & ketentuan biar tetap profesional.

🔹 Login Page – Langsung Gas Masuk 🔑

Buat yang udah punya akun, tinggal masuk lewat:

  • Email & password

  • Atau, login instan pake Google → cocok buat Gen Z yang anti ribet ⚡

Dan yang paling menarik, ada teks kecil “Lupa Kata Sandi Ente?”.
Lucu kan? Kesannya lebih friendly, nggak kaku kayak aplikasi keuangan kebanyakan 😆.

✨ Kenapa Desain Ini Asik?

  • Dark Mode Ready → anak muda lebih betah lama-lama pakai app

  • Simplicity First → user nggak dibikin bingung sama terlalu banyak tombol

  • Friendly Text → bikin app terasa lebih dekat dengan penggunanya

  • Modern Vibe → font clean, warna elegan, layout rapi



💡 Tips Desain Ala Triv yang Bisa Kamu Contek

  1. Keep It Simple, Bro!
    Jangan kebanyakan tombol atau teks yang bikin user bingung. Triv pakai prinsip less is more, hasilnya jadi clean dan gampang dipahami.

  2. Dark Mode = Mood Booster 🌙
    Banyak user (apalagi Gen Z) lebih suka dark mode karena nyaman di mata dan keliatan elegan. Jadi, kalau desain app kamu mau kekinian, pertimbangin dark mode sebagai opsi default.

  3. Highlight Tombol Penting
    Kayak tombol “Daftar” dan “Masuk ke Triv” di desain ini, warnanya kontras banget sama background → bikin user otomatis fokus ke aksi utama.

  4. Friendly Copywriting ✍️
    Lupa password? Nggak ditulis kaku “Forgot Password”, tapi “Lupa Kata Sandi Ente?” → ini bikin kesannya lebih santai, deket sama anak muda. Jangan takut kasih sentuhan personal di teks aplikasi kamu.

  5. Gunakan Ikon & Visual yang Relevan
    Background grafik chart di halaman awal langsung kasih hint kalau app ini berhubungan sama trading/finansial. Jadi user nggak perlu mikir panjang → langsung paham.

  6. Konsistensi itu Kunci 🔑
    Dari register sampai login, style warna, font, dan tombol semuanya konsisten. Ini bikin user merasa nyaman karena tiap halaman terasa nyambung, bukan kayak aplikasi tempelan.

📌 Desain Figma aplikasi Triv bisa jadi inspirasi buat kamu yang lagi ngedesain aplikasi finansial atau bahkan app lain. Dengan style yang simple, modern, dan Gen Z friendly, app ini nggak cuma keliatan profesional, tapi juga bikin user betah pakai setiap hari.

Mau akses ke desain Figma nya?

Komentar

Posting Komentar

Postingan populer dari blog ini

MEMBUAT TAMPILAN APLIKASI SEDERANA MENGGUNAKAN DART FLUTTER

Gambar
MEMBUAT TAMPILAN APLIKASI SEDERANA LATIHAN 1 ( WAJIB ): Membuat Tampilan Applikasi Sederhana: AppBar dengan judul Body berisi Column Minimal 3 widget text Eksperimen: Ubah warna AppBar Ganti column ke row Tambahkan padding dan sizedbox MEMBUAT TAMPILAN APLIKASI SEDERHANA Pada tugas ini, saya membuat tampilan aplikasi sederhana sebagai latihan awal untuk memahami struktur dasar antarmuka (UI). Pengerjaan tugas dibagi menjadi dua tahap, yaitu latihan dasar dan eksperimen pengembangan tampilan. Latihan 1: Membuat Tampilan Dasar Pada tahap latihan, tampilan web dibuat menggunakan komponen dasar dengan ketentuan sebagai berikut: AppBar Digunakan sebagai bagian header aplikasi yang menampilkan judul. AppBar berfungsi untuk memberikan identitas atau konteks halaman yang sedang dibuka. Body dengan Column Pada bagian body digunakan widget Column untuk menyusun elemen secara vertikal dari atas ke bawah. Widget Text (Minimal 3) Di dalam Column terdapat minimal tiga widget Text yang digunakan un...
Baca selengkapnya

Aplication Flutter With Image 7/31/2025

Gambar
 ðŸ§  Bikin Aplikasi Flutter dengan Gambar dalam Hitungan Menit (Literally) "Mau tampilin gambar di aplikasi Flutter kamu? Tenang bestie, gampang banget kok. Tinggal pakai Image.network terus plug gambar dari internet. Done!" Hai guys! Di artikel ini aku mau share kode super simple buat kamu yang lagi ngulik Flutter—khususnya buat kamu yang pengen nampilin gambar dari internet langsung ke app . Ini contohnya: Langsung aja ini dia kodenya: import 'package:flutter/material.dart'; void main() => runApp(MyImageApp()); class MyImageApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Contoh Widget Gambar', home: Scaffold( appBar: AppBar( title: Text('Widget dengan Gambar'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Ini ada...
Baca selengkapnya