Cara bikin tampilan login dan register simpel

-

Cara Bikin Tampilan Login & Register Gampang di Figma



Kalau kamu pengen bikin desain form login sama register yang keliatan modern tapi tetep simpel, gampang banget kok. Desain yang aku contohin ini ada dua halaman utama: Sign In buat masuk akun, sama Sign Up buat daftar akun baru.

Pertama, aku bikin background gradient biru ke putih biar nggak flat. Warna biru ini bikin kesannya adem dan profesional, sedangkan putih di bawah bikin mata lebih nyaman.

Habis itu aku tambahin form box putih di tengah. Di dalamnya ada field untuk Email dan Password, plus tambahan Confirm Password khusus buat halaman Sign Up. Untuk tombolnya, aku kasih warna biru solid biar langsung keliatan itu tombol utama yang bisa diklik.

Detail kecil juga penting. Misalnya ada opsi Remember Me di form login, sama link kecil di bawah form kayak “Don’t have an account? Sign Up” atau sebaliknya. Walaupun kecil, elemen ini bikin desain keliatan lengkap dan lebih realistik.

Jadi kunci utama dari desain ini adalah:

- Background gradient biar nggak monoton

- Form putih supaya isiannya jelas

- Tombol biru biar call-to-action langsung menonjol

- Teks simpel dengan font yang gampang       dibaca

Dengan cara ini, tampilan login dan register jadi kelihatan clean, enak dipandang, dan pastinya gampang dipakai user. Cocok banget buat inspirasi pas bikin aplikasi atau website kamu sendiri.

kalo kamu mau liat design nya secara langsung di figma boleh liat di link ini yaa


https://www.figma.com/design/fkhHGhYmwfxQDgiq2RRWvy/Untitled?node-id=0-1&t=4xaxom2VXBjDW6sb-1

Komentar

Posting Komentar

Postingan populer dari blog ini

-
Gambar
📱 Widget Dasar Flutter/Dart 1 Stateless Widget Widget Stateless adalah widget yang tidak dapat berubah (immutable). Cocok untuk menampilkan konten statis yang tidak perlu diperbarui berdasarkan interaksi pengguna. 💡 Lihat Contoh Kode Dart Code - Stateless Widget Salin Kode class MyStatelessWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.all(20), child: Text( 'Halo, saya Stateless Widget!', style: TextStyle(fontSize: 18), ), ); } } 2 Stateful Widget Widget Stateful adalah widget yang dapat berubah (mutable). Digunakan ketika widget perlu diperbarui berdasarkan interaksi pengguna atau data yang berubah. 💡 Lihat Contoh Kode Dart Code - Stateful Widget Sa...
Baca selengkapnya

Kunci Jawaban Soal Pilihan Ganda Flutter UI (State Management)

-
Gambar
Kunci Jawaban Soal Pilihan Ganda Flutter UI (State Management) Sedikit latihan untuk memahami konsep dasar Flutter seperti Widget , Layout , State Management , dan Animasi . Soal ini cocok buat kamu yang ingin menguji seberapa jauh pemahaman tentang cara kerja UI di Flutter. 📄 Halaman 1 Jawaban: B. MyApp D. Widget tersebut tidak memiliki state yang dapat berubah selama runtime. A. Karena ia memerlukan controller. D. Di dalam TodoListScreenState . C. setState() C. Scaffold C. Column D. Expanded C. Menempatkan FAB di tengah bawah layar. C. SizedBox 📄 Halaman 2 Jawaban: C. TextField B. TextEditingController C. Pengguna menekan tombol "Enter/Done" pada keyboard. C. SnackBar C. AnimatedList A. Memberikan identifikasi unik pada setiap item daftar. D. Card B. ListTile B. Mengubah status selesai/belum selesai dari tugas. B. Teks dicoret dengan garis. 📄 Halaman 3 Jawaban: C. BoxDecoration dengan LinearGradient ...
Baca selengkapnya

🎮 Review Aplikasi Flutter: Pixel Quest To-Do

-
Gambar
🎮 Review Aplikasi Flutter: Pixel Quest To-Do 1️⃣ Halaman Pemilihan Karakter 📸 Screenshot Tampilan 💻 Potongan Kode Wrap( spacing: 16, children: _emojis.map((e) { final selected = _selected == e; return GestureDetector( onTap: () => setState(() => _selected = e), child: AnimatedContainer( duration: const Duration(milliseconds: 180), transform: Matrix4.identity()..scale(selected ? 1.06 : 1.0), padding: const EdgeInsets.all(12), decoration: BoxDecoration( color: selected ? const Color(0xFF00ADB5) : const Color(0xFF393E46), borderRadius: BorderRadius.circular(12), border: Border.all( color: selected ? Colors.cyanAccent : Colors.transparent, width: 2), ), child: Text(e, style: const TextStyle(fontSize: 40)), ), ); }).toList(), ) 🧩 Penjelasan Singkat Bagian kode ini menampilkan daftar karakter dalam bentuk e...
Baca selengkapnya