Wireframe & Prototype


 


Materi


Tutorial Figma




Wireframe dan Annotation


Wireframe adalah cara untuk mengidentifikasi konten dan struktur yang diusulkan pada sebuah desain, serta perilaku fungsional dari tampilan halaman web atau aplikasi.


Annotation adalah penjelasan dan catatan tentang suatu elemen atau interaksi pada Wireframe. Annotation biasanya berisi informasi seperti: content identification or labeling, content sources, display rules, interaction rules, interaction destinations, process rules dan error content/messaging.


Wireframe pada dasarnya adalah prototipe low fidelity dari halaman website atau layar aplikasi, yang digunakan untuk mengidentifikasi elemen-elemen yang akan ditampilkan pada halaman atau layar, seperti: navigasi, bagian konten, gambar dan media lain, elemen-elemen form dan call to action (CTA).


• Wireframe biasanya dibuat dalam warna hitam dan putih atau abu-abu, menggunakan placeholder untuk gambar, dan tidak menggunakan font yang spesifik. Wireframe hadir dalam berbagai bentuk dan ukuran, dari yang paling dasar hingga yang sangat canggih sampai meniru desain fullscreen.


• Wireframe dan Annotation terbaik adalah hasil dari interaksi langsung dan kolaborasi di antara

berbagai mitra kerja (mulai dari business analyst hingga developer dan desainer lainnya).

Wireframe yang ditunjukkan kepada user biasanya memiliki nama yang berbeda: prototipe


Pengguna Wireframe

• Project Management

• Business Analyst

• Visual Designers

• Content Creator

• Search Engine Optimization (SEO)

• Developer

• Quality Assurance

• User

• Client


Proses pembuatan wireframe

Wireframe adalah blueprint bagi para UI/UX designer.

Wireframe: pembuktian konsep ide seorang desainer atau Proof of Concept. Semakin jelas gambaran tata letak produk yang didapatkan pada akhir proses, semakin kecil kemungkinan tim untuk mengulang tahapan visual mockup yang sering menghabiskan banyak biaya.


Mockup

Mockup adalah rancangan yang menunjukkan contoh bagaimana penampilan dari input maupun output yang mengandung data sebenarnya. mockup menyampaikan aspek desain visual, termasuk gambar, warna, dan tipografi. Mockup memberikan gambaran secara detail sebelum produk dibuat.


Kelebihan mockup:

• Mengorganisir detail dari proyek

• Menemukan error

• Menterjemahkan ide ke dalam bahasa yang dapat dimengerti stakeholders

• Menyampaikan ide kepada anggota tim

• Implementasi desain

• Perspektif user


Prototype

• Prototype adalah tindakan atau seni membuat, meniru, atau menguji semua atau sebagian fungsi aplikasi atau website dengan user

• Metode Prototipe sebagian besar akan ditentukan oleh tiga faktor:

1. Tujuan atau maksud. Apa yang ingin dicapai melalui pembuatan prototipe? Siapa audiens yang dituju?

2. Sumber daya (alat, bahan, dan keterampilan) yang dimiliki untuk digunakan dalam pengembangan prototipe.

3. Timeline, dimana harus menyelesaikan tepat waktu.


Tugas:

https://drive.google.com/drive/folders/1MN9lccHAEPqEcCFXDucjyOBs0PIrPquC?usp=sharing 


Pengumpulan Tugas

https://forms.gle/tsW56qxn29baoY7n6

Tidak ada komentar:

Posting Komentar