UI Design — Membuat Wireframe Login & Register
Membuat Wireframe untuk Login & Register dengan Balsamiq
Hai hooman gimana kabarnya nih? Semoga sehat selalu ya hahaha.
Kembali lagi sama saya, Nico. Saya bertugas sebagai Kepala Sub-divisi Desain dari Divisi Pendidikan di Komunitas Android.
Nah untuk materi kali ini tentang awalan atau tahapan untuk memulai sebuah design aplikasi atau prototype nya sebelum masuk ke UI.
Nah pertama kita mengambil layer atau ukuran dari device android, ios serta Tablet.
Ambil pada tombol CONTAINER untung mengambil rectangle (persegi panjang) atau gambar untuk sebagai latar belakang apknya atau device mobile yang akan dipakai
Jangan lupa disesuaikan ukurannya ya gaes!
Nah disini tambahkan text untuk judul subtitle atau kalian dapat melakukan custom font kalian di adobe photoshop atau di adobe illustrator untuk aplikasinya.
Disini kita akan mulai membuat tampilan login hingga pendaftaran ya gaes
Halaman Login
Gunakan metode yang sebelumnya, ambil tombol BUTTON pada buttons bar.
Ambil TEXT INPUT untuk menjadi table tempat menginput data diri kita
Halaman Pendaftaran
Gunakan metode yang sebelumnya. Untuk pendaftaran diperlukan beberapa object buat username, password menggunakan LABEL di kolom Text.
Masukan TEXT INPUT di tab text untuk menginput data dan tambah kan BUTTON untuk menginput data ke data base
Hasil
EXERCISE
Silahkan buat wireframe UI dari contoh diatas:
- UI Login
- UI Register
- Halaman splash screen
nb: Halaman Splash Screen adalah halaman saat pertama kali aplikasi dijalankan.
Oke itu aja sedikit dari nico! Silahkan buat sesuai kreasi tapi Karena mockup itu gunanya untuk menjelaskan maksud dari aplikasi kita dan gambaran kasar sebelum di buat ada baiknya singkat dan padat ya.
Tidak berkerja sendiri, saya bekerja dengan team pengajar desain Komandro CCIT — FTUI. Jangan lupa juga untuk uleg-uleg materi biar kalian makin jago, soalnya sama-sama belajar 😃
Salam satu lawyer~
