📷 Belajar membuat desain tampilan login dan sign up dengan menggunakan figma

-


DESAIN LOGIN & SIGN UP KEKINIAN PAKE FIGMA SIMPLE TAPI BIKIN NAGIH!

Halo gengs! ✨
Pernah nggak sih lo buka aplikasi tapi malah ribet login-nya? Kadang form kepanjangan, tombol nggak jelas, atau malah warnanya bikin sakit mata. Nah, di sini gue mau share hasil desain UI/UX gue di Figma: halaman login & signup Pinterest versi gue sendiri. Simpel, aesthetic, dan pastinya nggak bikin user kabur. 😎

Kenapa Harus Bikin Desain Sendiri di Figma?

  • Gratis & Cloud Based → Nggak perlu install berat, tinggal buka browser udah bisa desain.

  • Gampang Dipelajari → Cocok banget buat yang baru kenal UI/UX.

  • Teamwork Friendly → Mau ngerjain bareng temen? Bisa real-time collaboration!

  • Customizable Banget → Semua elemen bisa diatur sesuai selera lo.

Konsep Desain Gue

Desain ini gue bikin dengan warna khas Pinterest: merah, putih, dan hitam. Layout-nya clean biar gampang di-scan mata, dan button dibuat kontras biar jelas mana yang harus diklik.

  • Halaman Login: Cuma butuh email & password. Ada opsi login Google & Facebook biar praktis.

  • Halaman Signup: Ada kolom full name, email, password, plus confirm password biar aman.

  • Teks Link Jelas: Mau pindah dari login ke signup atau sebaliknya? Tinggal klik teks kecil di bawah, nggak usah scroll ke mana-mana.

Apa yang Bikin Desain Ini Kekinian?

Gen Z itu males ribet, bener nggak? Makanya desain ini:

  • Straight to the point → Nggak banyak gimmick, langsung fungsional.

  • Rapi & Konsisten → Spacing dan font konsisten, enak dipandang.

  • Branding Kuat → Logo Pinterest taro di atas biar langsung kenal brand-nya.

Tips Biar Desain Login/Signup Lo Makin Mantap:

  • Jangan pake kebanyakan warna. 2–3 warna aja udah cukup.

  • Font harus gampang dibaca, jangan pake yang alay.

  • Tambahin opsi show/hide password biar user nyaman (opsional).

Kesimpulan:

Desain UI/UX itu nggak harus ribet, yang penting user-friendly dan nyaman dilihat. Dengan Figma, lo bisa eksplor ide lo sendiri dan bikin desain yang beneran kepake. Gue yakin kalau login screen kece kayak gini diterapin di aplikasi asli, user bakal betah🤩

Mau liat hasil desain gue? Nih: https://www.figma.com/proto/ndXDSrfg1e5lGDsfnqlTVR/Untitled?node-id=13-3&p=f&t=TR2ewqsvnlz0mBM2-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1

Made by: RIZQI RESDHIANA XI RPL 2

Comments

Post a Comment

Popular posts from this blog

Latihan membuat tampilan flutter sederhana 🤖

-
Image
M embuat Tampilan Flutter Sederhana Menggunakan AppBar, Row, Padding, dan SizedBox Flutter merupakan framework buatan Google yang digunakan untuk membangun aplikasi mobile, web, dan desktop dengan satu basis kode. Pada artikel ini, kita akan membahas contoh tampilan Flutter sederhana yang terdiri dari AppBar , Row , Text , Padding , dan SizedBox . Contoh ini cocok untuk pemula yang baru belajar dasar UI Flutter. 1. Struktur Dasar Aplikasi Flutter Setiap aplikasi Flutter dimulai dari fungsi main() yang menjalankan widget utama menggunakan runApp() . Widget utama biasanya berupa MaterialApp yang berfungsi sebagai akar aplikasi dan menyediakan tema serta navigasi. Pada contoh ini, widget utama bernama MyApp dan halaman utamanya adalah HomePage . 2. Menggunakan Scaffold dan AppBar Scaffold digunakan sebagai kerangka utama halaman. Di dalamnya terdapat AppBar yang berfungsi sebagai header aplikasi. Pada AppBar: title digunakan untuk menampilkan judul backgroundColor untuk mengatur w...
Read more

Jenis-jenis sistem operasi os

-
Image
Memahami Pengertian dan Fungsi  Mobile OS (Operating System) Menurut Wikipedia Sistem Operasi Mobile atau sering disebut dengan istilah  Mobile OS  merupakan sistem operasi yang digunakan untuk mengatur sistem kerja hardware atau aplikasi pada perangkat mobile. Sebetulnya mobile OS mirip dengan OS yang digunakan pada  komputer atau laptop. Hanya saja mobile OS, dibuat lebih sederhana lagi. Lebih jelasnya fungsi sistem operasi mobile yaitu menghubungkan  hardware  (perangkat keras ) dengan  user  (pengguna). Selain itu Mobile OS jugalah yang mengatur sehingga suatu aplikasi yang terinstall bisa berjalan dengan baik. Sejarah Singkat Sistem Operasi Mobile Mobile OS bukanlah salah satu teknologi yang baru. 20 tahun yang lalu teknologi ini sudah mulai dikembangkan dengan kemampuan awal yang sangat minim. Tidak seperti sekarang dimana Mobile OS bisa membuat perangkat mobile yang kita pakai setiap hari terkoneksi  internet, merekam video, menampilka...
Read more

Belajar Flutter

-
Image
  Laporan Pembelajaran Mandiri Flutter Mata Pelajaran: Pemrograman Mobile Nama: Rizqi Resdhiana Kelas: XI RPL II 📝 Cerita Singkat Kegiatan Hari Ini Pada pembelajaran hari ini, saya melakukan kegiatan belajar mandiri sesuai dengan instruksi guru. Fokus pembelajaran adalah mengombinasikan beberapa widget Flutter untuk membangun satu halaman aplikasi sederhana yang rapi dan dapat dijalankan tanpa error. Dalam proses pengerjaan, saya mencoba memahami fungsi masing-masing widget serta bagaimana cara menyusunnya agar tampilan aplikasi terlihat lebih terstruktur. Jika terjadi kesalahan (error), saya mencoba memperbaikinya sendiri dengan membaca kembali kode dan melakukan eksperimen kecil. Pembelajaran ini membantu saya memahami bahwa membuat UI Flutter membutuhkan ketelitian, kesabaran, dan banyak percobaan. 🧩 Widget yang Digunakan Pada aplikasi Flutter yang saya buat, saya telah menggunakan widget-widget berikut: MaterialApp sebagai root aplikasi Scaffold sebagai kerangka halama...
Read more