Istilah-istilah ini sering digunakan sebagai sinonim satu sama lain, yang salah dan menyebabkan banyak kebingungan antara klien dan pendatang baru di bidang desain. Mari kita luruskan dengan terminologi dan mengapa setiap item merupakan tahap penting dalam alur pengembangan.

• Wireframe adalah skema dasar yang menampilkan elemen tanpa semua detail

• Mock-up adalah statika fidelitas tinggi dari desain masa depan

• Prototipe adalah simulasi mendetail dari desain masa depan

Wireframing

Fungsionalitas apa yang akan dimiliki produk dan bagaimana ia akan diatur?

Ini mungkin pertanyaan pertama yang muncul di benak Anda setelah ide untuk membuat situs atau aplikasi itu sendiri. Wireframing akan memberi kita jawaban atas pertanyaan ini.

Tapi tetap saja, mengapa sangat diinginkan untuk membuat kerangka gambar untuk produk masa depan Anda dan tidak pernah mengabaikan langkah proses pengembangan ini? Berikut adalah alasan paling penting, mengapa wireframing sangat membantu:

potret konseptual dari aliran logis produk masa depan;

deskripsi interaksi pengguna dengan aplikasi/situs dan bagaimana hal itu akan memenuhi kebutuhan klien;

dokumen dasar untuk penyesuaian lebih lanjut baik untuk tim dan klien.

Sederhananya, ini adalah sketsa situs web atau aplikasi Anda di masa depan, sebelum pengembangan apa pun terjadi atau elemen desain apa pun, seperti font atau warna, bahkan muncul. Anda hanya memiliki item utama yang diuraikan dalam kotak dan bentuk tetapi hanya dalam warna hitam dan putih agar tetap jelas dan sederhana.

Pada titik ini, dokumen seperti itu seperti tulang punggung produk masa depan Anda. Ini memberikan pemahaman umum tentang ide utamanya dan tidak mengalihkan perhatian dengan konten yang tidak perlu pada tahap awal pengembangan. Wireframing membantu Anda menetapkan hierarki informasi dan di mana elemen kunci akan ditempatkan. Ini sering digunakan sebagai dokumen informal bagi tim untuk membuat catatan untuk berbagai fungsi.

Gambar rangka adalah cetak biru untuk perancang, klien, dan semua orang yang terlibat. Pada tahap ini, elemen dapat ditambahkan atau dihapus, tetapi ini adalah rencana yang membantu untuk bergerak maju. Anda harus melampirkannya ke dokumentasi lain yang terkait dengan desain masa depan proyek dan arsitekturnya.

Maket

Dalam tahap proses pengembangan ini, kami menyelami detail dan cetak biru kami memperoleh sentuhan pribadinya. Ada berbagai pendapat tentang kedalaman detailisasi mockup. Namun demikian, untuk membuat yang memuaskan, baik untuk klien dan tim desainer, sangat disarankan untuk mengikuti daftar periksa ini:

• kembangkan navigasi yang dipikirkan dengan matang;

• desain UI yang sangat detail;

• gunakan paket identitas perusahaan yang lengkap: warna, font, logo, dll.

Secara singkat, Anda harus mendapatkan versi produk masa depan Anda yang benar-benar "berpakaian" namun statis. Di sini semua elemen yang berwarna hitam dan putih mendapatkan ukuran, warna, dan bentuk yang ditentukan.

Mockup melangkah ke dalam pelanggaran ketika diperlukan untuk mengevaluasi desain oleh klien dan mereka yang tidak terlibat dalam proses pengembangan dan mewakili tampilan akhir dugaan situs atau aplikasi. Mengapa bersifat dugaan? Karena sangat detail, mockup mungkin masih belum menjadi versi final dari desain masa depan. Sebaiknya berikan klien Anda beberapa varian maket.

Mockup lengkap adalah keuntungan besar karena alasan berikut:

• dapat berfungsi sebagai tata letak desain, baik untuk tim maupun klien;

• menjadi demo fungsionalitas masa depan dalam statika;

• memberikan kesempatan untuk menghapus noda terkecil dan mengasah semua detail.

Prototyping

Pertanyaan ketiga kami adalah "Bagaimana produk akhir akan terlihat dan berfungsi?" Dan prototipe dapat memberikan jawaban terbaik.

Prototipe adalah versi dinamis/model fungsional yang sangat detail dari situs web atau aplikasi Anda. Ini mungkin tidak 100% sesuai dengan produk masa depan, tetapi kesamaannya harus sangat tinggi.

Ada beberapa skenario yang biasanya terjadi dengan prototipe.

Pertama, dan yang sangat singkat – Anda mungkin tidak memilikinya sama sekali

Kasus lainnya adalah:

• prototipe akan mengikuti setelah membuat wireframe dan mockup – varian yang cukup tradisional;

• ini bisa menjadi proses terpisah jika Anda perlu menunjukkan dan menguji produk Anda dalam waktu yang sangat singkat.

Dalam kedua kasus yang tercantum di atas, prototipe dibuat untuk melakukan hal berikut:

• Untuk mendemonstrasikan berbagai skenario pengguna;

• Untuk memeriksa bahwa situs atau halaman aplikasi bereaksi dan saling mengubah dengan benar;

• Untuk melihat apa yang dapat dioptimalkan, ditambahkan atau dihapus.

Apa keuntungan yang Anda dapatkan dengan membuat prototipe?

Dengan pandangan komprehensif tentang desain masa depan dan fungsionalitas yang disediakan oleh prototipe, Anda dapat yakin bahwa Anda melakukan pekerjaan yang benar (atau mungkin tidak – sesuatu terjadi). Anda mendapatkan satu kesempatan lagi untuk memeriksa semuanya dari dalam ke luar. Dan terakhir, konfirmasi atau tolak varian produk Anda saat ini.

Sekarang Anda memiliki pemahaman yang cukup kuat untuk apa wireframe, maket, dan prototipe dan dapat memutuskan apakah Anda memerlukan semuanya atau beberapa dapat dihilangkan.

Langkah selanjutnya adalah mulai membuatnya. Jadi mari kita lihat alat paling populer yang akan sangat membantu proyek Anda.

Jika ide Anda baru saja muncul di benak Anda, Anda pasti harus menggunakan pena dan selembar kertas untuk segera mencatatnya dan kemudian melanjutkan ke tahap lainnya.

Sumber : justcreative.com

Info PMB : https://pmb.stekom.ac.id

Kerjasama/Penerimaan Mahasiswa Baru,

WA 24 Jam : 081-777-5758 (081 jujuju maju mapan)

IG : @universitasstekom

TikToK : @universitasstekom

FP : https://www.facebook.com/stekom.ac.id/

TWITTER : https://twitter.com/unistekom

YOUTUBE : https://www .youtube.com/c/UniversitasSTEKOM