Berikut Perancangan dan Tutorial Desain UI Tracer Study Menggunakan Figma (Dekstop) :
1. Download aplikasi figma terlebih dahulu atau bisa juga kunjungi website berikut https://www.figma.com/file/BXJSOT2AKO5XkUbZnUHaXt/TracerSTudy?node-id=0%3A1
2. Buka aplikasi figma, kemudian buat file baru dengan klik tombol + di sebelah kanan atas
3. Membuat Frame Website
Kemudian membuat frame terlebih dahulu, karena kita akan membuat desain website, maka kamu bisa klik tombol frame di pojok kiri atas seperti gambar berikut.
selanjut nya di sebelah kanan anda bisa pilih jenis frame yang ingin anda gunakan, karena saya ingin membuat dekstop, maka saya memilih frame dekstop.
4. Ganti Nama File
Anda dapat ganti nama file sesuai desain yang anda buat, tampilan seperti berikut
5. Pilih Ukuran Dekstop
Pilih ukuran dekstop, bisa juga menyesuaikan dengan laptop yang anda gunakan.
6. Membuat Tampilan Login
Disini kita sudah mulai mendesain UI aplikasi yang kita buat yaitu tracer study, langkah pertama kita membuat tampilan login terlebih dahulu
Pertama, kita mebuat header dan menu-menu yang akan di tampilkan di login, anda dapat klik button yang berada di kanan atas dan pilih menu-menu sesuai yang di butuhkan di aplikasi tracer study, seperti gambar berikut.
7. Membuat Tampilan Form Pertanyaan Alumni
Di tampilan ini alumni akan mengisi data dan menjawab pertanyaan yang sudah disediakan, guna dapat mengetahui profil alumni. Berikut tampilan nya:
8. Membuat dashboard
Di tampilan dashboard ini, admin atau petugas dapat melihat hasil pertanyaan dari alumni dan dapat mengupdate pertnyaan alumni. Berikut tampilan dashboard aplikasi tracer study :
8. Membuat Isi Submenu Dashboard
Berikut gambar isi submenu pada dashboard tracer study :
gambar 8.1. diatas adalah isi submenu dari hasil pertanyaan
EmoticonEmoticon