Halo everyone! Pada artikel ini saya akan berbagi tentang cara membuat halaman sign in & sign up sederhana pada figma.
Figma merupakan salah satu design tool yang biasanya digunakan untuk membuat tampilan aplikasi mobile, desktop, dan lainnya. Figma paling populer biasa digunakan oleh UI/UX designer untuk mendesign tampilan aplikasi,ataupun website.
Sebelum ke tahap mendesign Sign In & Sign Up, apakah teman-teman tau apa itu UI/UX?
UI atau (User Interface) berfungsi memperindah tampilan sehingga dapat meningkatkan kepuasan pengguna
UX atau (User Experience) mengacu pada interaksi apapun yang dilakukan user dengan produk atau layanan
Jadi, apa sih hubungan antara UI dan UX?
Saya pernah baca disebuah artikel, UI dan UX ini diibaratkan seperti KUE. Dimana UI berperan sebagai hiasan dari kue tersebut sedangkan UX berperan sebagai rasa dari kue. jika kue yang akan dijual hiasannya tidak bagus dan rapi bahkan kacau dan amburadul, sedangkan rasa dari kue tersebut sangat enak. Ada kemungkinan orang tidak tertarik dengan kue tersebut disebabkan karena tampilannya yang tidak menarik dan enak dipandang
Jadi UI/UX itu saling terhubung yaa…
Okey langsung aja deh kita ke praktek membuat Sign In dan Sign Up page
- Buatlah sebuah frame, disini saya menggunakan frame Iphone Pro max 11 dan berikan sebuah background
Disini saya meimport background melalui plugin unsplash.
2. Tambahkan sebuah rectangle
Tambahkan rectangle dan berikan radius sudutnya 45 seperti pada gambar Atau sesuai keinginan dari teman-teman
3. Berikan teks Sub pada rectangle, tambahkan bold pada teks. Dan untuk teks keterangan berikan efek contrast dan perkecil teks dari sebelumnya. supaya enak dilihat, atau hierarchy
4. Pada rectangle sebelumnya duplicate dan flip horizontal tarik hingga menutupi rectangle sebelumnya, lalu berikan warna. Untuk warna bisa menyesuaikan dengan background
5. Buatlah semua komponen yang dibutuhkan untuk page sign in dan jangan lupa ikon untuk email address, password
6. Tarik ke bawah rectangle dan semua komponen yang berada didalamnya sehingga seperti gambar dibawah ini
7. Terakhir copy paste frame dari sign in tadi dan ubah tata letak line ke sign up. Jangan lupa delete komponen forgot password serta tambahkan textfield confirm password
Okay everyone! Dari yang kita pelajari diatas, itulah langkah membuat sign in dan sign up dengan sederhana 🙂
Untuk artikel kali ini tentang Sign in dan sign up cukup sekian saja ya tema-teman. Selamat mencoba dan semangat belajar nya untuk selalu improvisasi.
Semoga sukses yaa :))