Mengenal Istilah Wireframe dalam Industri UI/UX
Wireframe adalah sebuah cara untuk merancang desain website atau aplikasi pada tingkat struktural. Wireframe memungkinkan untuk mendefinisikan information hierarchy dari desain, sehingga memudahkan kita dalam melakukan perencanaan layout sesuai dengan rencana kita tentang bagaimana pengguna dapat memproses informasi. Wireframe biasanya digunakan untuk meletakkan konten dan fungsionalitas pada halaman dengan mempertimbangkan kebutuhan pengguna dan perjalanan pengguna. Terdapat beberapa elemen dari wireframe, diantaranya adalah:
- Desain Informasi
Desain informasi bersumber dari hasil riset mengenai apa saja konten atau informasi yang ingin disampaikan. Contoh dari desain informasi adalah desain dari form input, thumbnail, gambar, link, paragraf, dan lain sebagainya.
- Navigasi
Sistem navigasi menyediakan seperangkat elemen layar yang memungkinkan pengguna untuk memindahkan halaman ke halaman melalui situs web. Desain navigasi harus mengkomunikasikan hubungan antara link (tautan) yang dikandungnya sehingga pengguna memahami opsi yang mereka miliki untuk menavigasi sebuah situs.
- Desain Interface
Pada tahapan ini dilakukan proses menyeleksi penempatan elemen, seperti penempatan tombol, link, judul, text-align, font-size, dan lain sebagainya. Hal ini bertujuan sebagai media bagi pengguna dalam berinteraksi dengan tampilan.
Kemudian, dalam pembuatan wireframe juga harus dapat menjelaskan beberapa hal, diantaranya:
- Apa isi yang ada dalam halaman website atau aplikasi?
- Bagaimana isi tersebut teroganisir dalam halaman website atau aplikasi?
- Kemana pengguna akan pergi dari halaman website atau aplikasi?
- Bagaimana pengguna akan bergerak di sekitar website atau aplikasi?
Dalam pembuatan wireframe, terdapat beberapa kelebihan yang diperoleh, diantaranya adalah sebagai berikut:
- Memberikan UI Designergambaran dasar sebelum mulai membuat
- Menjadi titik referensi untuk pengembangan situs atau aplikasi.
- Mengkomunikasikan pengalaman menggunakan situs kepada pemangku. kepentingan atau klien tanpa terlalu banyak menyoroti desain visual dan
- Membantu tetap fokus pada pengalaman pengguna.
- Memperjelas dan menentukan fitur dalam
- Menggali ide dengan cepat.
- Sebagai dasar untuk pembuatan prototipe dan user testing sejak awal.
Selain kelebihan, terdapat beberapa kelemahan dari pembuatan wireframe, yaitu karena wireframe ini tidak termasuk desain, atau memperhitungkan implikasi teknis, maka tidaklah mudah bagi klien untuk memahami konsep tersebut. Desainer juga harus menerjemahkan wireframe menjadi sebuah desain, sehingga komunikasi untuk mendukung wireframe ini sering diperlukan untuk menjelaskan mengapa elemen halaman diposisikan sebagaimana adanya. Selain itu, ketika konten ditambahkan, pada awalnya mungkin terlalu banyak untuk masuk dalam layout (tata letak) wireframe, sehingga desainer dan copywriter perlu bekerja sama untuk membuat kedua hal tersebut cocok.
Dalam melakukan pembuatan wireframe, terdapat berbagai tools yang dapat digunakan, seperti Balsamiq, ProtoShare, Indesign, Illustrator, Firework, Adobe CS, FairBuilder, Axure, Omnigraffle, Cacoo, Jumpchart, Gliffy serta Mockflow.
Source:
https://www.jetorbit.com/blog/wireframe-yuk-cari-tahu-detailnya/
