Skip to main content
Kita sudah berada di penghujung materi ini. Yuk kita rangkum apa saja materi-materi yang telah dipelajari sejauh ini.
  • Pada tahap Prototype, Anda membuat rancangan desain yang dapat diuji coba berdasarkan ide yang sudah dibuat. 
  • Goal Statement adalah kalimat yang mendeskripsikan tujuan dari produk dan manfaatnya bagi pengguna. Dengan kata lain, Goal Statement adalah sebuah solusi dari masalah yang sudah didefinisikan sebelumnya. Berikut ini adalah contoh format untuk membuat Goal Statement:
    202108161346403079277f7a5cb579b46481dc6efa36f8.jpeg
  • User Flow adalah bagan alur yang menunjukkan interaksi dengan produk, mulai dari awal membuka aplikasi sampai mencapai tujuannya.
  • Anda perlu menentukan beberapa hal berikut terlebih dahulu sebelum membuat User Flow:
    • Aksi apa saja yang akan dilakukan pengguna?
    • Pilihan apa saja yang dihadapi pengguna?
    • Halaman apa saja yang tampil untuk pengguna mencapai tujuannya?
  • Berikut ini adalah simbol-simbol yang digunakan untuk membuat User Flow:
    • Persegi : Menunjukkan setiap halaman yang tampil dari awal sampai akhir tujuan.
    • Lingkaran : Menunjukkan aksi proses, aktivitas, atau langkah yang dilakukan pengguna.
    • Belah ketupat : Menunjukkan adanya pemilihan keputusan (decision making).
    • Garis panah : Menunjukkan arah proses atau alur.
  • Storyboard adalah serangkaian sketsa yang menunjukkan bagaimana perilaku pengguna terhadap produk. 
  • Empat elemen penting pada Storyboard, yaitu:
    • Karakter : Tokoh dalam cerita.
    • Adegan (scene) : Membantu membayangkan keadaan pengguna pada langkah tertentu.
    • Plot : Cerita yang menjelaskan manfaat dari solusi desain yang dibuat.
    • Narasi : Menggambarkan masalah pengguna dan bagaimana solusi untuk menyelesaikannya.
  • Storyboard ada 2 jenis, yaitu:
    • Big picture : Storyboard yang fokus pada bagaimana pengguna akan menggunakan produk dalam kehidupan sehari-harinya dan manfaat yang ia dapatkan.
    • Close-up : Storyboard yang fokus pada bagaimana produk tersebut bekerja secara detail, seperti apa saja yang bisa dilakukan pada suatu halaman, apa yang perlu dilakukan pengguna untuk ke halaman selanjutnya, dsb.
  • Fidelitas adalah tentang seberapa dekat desain yang dibuat dengan produk jadinya. Ada dua jenis fidelitas, yaitu:
    • Low-Fidelity (Lo-fi) : Desain yang masih simpel dan kasar. Desain ini tidak menunjukkan detail warna dan ilustrasi yang akan digunakan, namun hanya beberapa simbol dan kerangka saja. Desain jenis ini cocok digunakan jika Anda ingin menuangkan ide dengan cepat ke dalam rancangan desain. Salah satu contoh dari lo-fi adalah Wireframe.
    • High-Fidelity (Hi-fi) : Desain yang sudah diperhalus dan kompleks. Desain ini sudah menunjukkan pemilihan warna dan ilustrasi yang akan digunakan, begitu juga dengan font teks pada setiap komponennya persis sebagaimana aplikasi yang akan dipakai pengguna. Biasanya desain yang sudah final ini disebut dengan Mockup.
  • Wireframe adalah struktur dasar dan tata letak untuk mengetahui gambaran kasar dari suatu halaman dan menonjolkan fungsionalitas aplikasi sebelum ditambahkan warna dan gambar. 
  • Manfaat dari Wireframe yaitu:
    • Mengetahui struktur dasar suatu halaman, seperti elemen apa saja yang ada di dalam suatu halaman, komponen apa yang digunakan untuk navigasi antar halaman dan tata letak penyusunan informasi.
    • Mengetahui gambaran fungsionalitas dari suatu produk. Sehingga tim lain bisa segera memberikan masukan apabila ada yang tidak tepat. 
    • Menghemat waktu dan tenaga sebelum masuk ke proses development.
    • Dapat mengubah dan menyesuaikan desain dengan cepat. 
  • Berikut ini simbol yang biasa digunakan untuk menggambar Wireframe:
    • Persegi/lingkaran dengan tanda silang : Ilustrasi atau gambar.
    • Garis : Teks.
    • Persegi panjang : Tombol aksi.
  • Dalam membuat Wireframe biasanya dimulai dengan menggambarnya di dalam kertas terlebih dahulu. Anda bisa mengeksplorasi berbagai macam desain terlebih dahulu, kemudian melihat poin-poin yang bagus dan menyatukannya dalam sebuah desain akhir. Langkah selanjutnya adalah mengubah Wireframe tersebut ke dalam bentuk digital. 
  • Berikut ini adalah beberapa tips supaya Wireframe digital Anda sempurna:
    • Jangan memikirkan warna dan gambar terlebih dahulu, namun lebih ke fungsionalitasnya saja.
    • Pastikan Wireframe Anda berdasarkan Wireframe kertas yang telah dibuat. 
    • Sertakan lebih banyak detail daripada Wireframe kertas. Seperti menggunakan kata-kata yang sebenarnya untuk bagian yang penting. 
    • Pertimbangkan hierarki informasi di setiap layar.
    • Beri tahu pengguna apa yang dapat mereka lakukan di layar mana pun.
  • Contoh tool untuk membuat Wireframe:
    • Figma : Aplikasi yang bisa digunakan untuk membuat desain secara bersama-sama dengan tim lainnya secara real-time.
    • Adobe XD : Aplikasi berbayar yang dikeluarkan oleh Adobe Inc untuk mendesain berbasis vektor.
  • Berikut ini tips dan trik dalam membuat Wireframe:
    • Membuat Information Architecture : Sebuah bagan struktur yang berisi seluruh informasi halaman. Dengan adanya IA, ia dapat menunjukkan pada posisi mana posisi pengguna saat ini dan ada di mana informasi yang dibutuhkan pengguna berada. 
    • Menggunakan shortcut : Ada banyak shortcut keyboard untuk mempercepat proses desain. Hal ini karena mengurangi waktu yang dibutuhkan untuk mencari menu atau memilih menu menggunakan kursor. 
    • Menghindari Deceptive Pattern :  Metode yang berfungsi untuk memengaruhi pengguna untuk melakukan sesuatu atau membeli sesuatu yang sebelumnya tidak akan mereka lakukan atau beli.