Apa itu Wireframe Aplikasi dan Bagaimana Cara Membuatnya?

Last Updated on February 6, 2023 by

Untuk menarik calon pengguna serta mempermudah mereka menggunakan seluruh fitur pada aplikasi dengan mudah, aplikasi masa kini biasanya memiliki tampilan antarmuka atau user interface (UI) yang dirancang sedemikian rupa. Di balik menariknya UI yang mereka gunakan, ada proses wireframe aplikasi agar mempermudah penggambaran berbagai elemen, tata letak, dan hal-hal lain yang berkaitan dengan tampilan aplikasi sebelum aplikasi tersebut mulai dirancang. Nah, untuk Anda yang akan melakukan perancangan aplikasi, seluk-beluk wireframing jadi salah satu hal yang perlu diketahui. Penasaran? Yuk simak artikel kami kali ini!

Apa itu wireframe?

Wireframe aplikasi adalah tahap penggambaran struktur tampilan aplikasi. Wireframing menjabarkan apa elemen yang harus muncul serta bagaimana memunculkannya. Wireframe aplikasi berguna untuk membuat struktur dasar dari tampilan aplikasi, kemudian gambaran struktur tersebut diserahkan ke tim yang terkait seperti tim development untuk diminta pendapatnya. Dari sini dapat diketahui bagaimana tanggapan orang lain tentang rancangan yang dibuat, apa yang perlu ditambahkan atau disesuaikan sebelum akhirnya gambaran UI tersebut diwujudkan dalam aplikasi. 

Wireframe UI biasanya digambarkan dengan spontan sesuai dengan apa yang dipikirkan si perancang tampilan, tidak terlalu mementingkan estetika dan terkadang tidak berwarna. Wireframing dapat dilakukan secara fisik menggunakan kertas dan alat menggambar, atau bisa juga secara digital dengan aneka macam design tool.

Apa yang ada dalam wireframe aplikasi?

Wireframing bertujuan untuk membuat gambaran visual tentang layout pada satu atau beberapa layar. Misalnya, layar halaman utama dan layar untuk memberikan informasi tambahan tentang item. Biasanya dalam layar wireframe dijabarkan beberapa elemen, misalnya:

1. Page layout: tata letak dari semua elemen dan juga hubungan dengan elemen-elemen lain
2. Elemen: fungsi yang ingin dimunculkan, seperti video, gambar, link dan sejenisnya. Elemen tersebut tidak perlu digambarkan secara mendetail, hanya perlu digambarkan posisinya saja.
3. Pentingnya elemen: beberapa elemen mungkin perlu ditampilkan lebih mencolok, misalnya dengan ukuran lebih besar, untuk menyorot pentingnya elemen tersebut.
4. Alur: definisikan tampilan apa yang harus terbuka setelah pengguna melakukan sesuatu, misalnya klik tombol atau mengumpulkan form.

Merancang tampilan aplikasi dengan wireframe bertujuan untuk mengumpulkan pendapat dari seluruh tim yang berkepentingan dalam pengembangan aplikasi. Wireframe yang baik memberikan kesempatan untuk kolaborasi antar tim sehingga dapat menentukan keputusan terbaik, maka dari itu penting untuk membuat wireframe dengan tampilan sesederhana mungkin. Ingat, yang paling penting dalam proses ini adalah penyampaian fungsi, bukan detail desain visual dari elemen tersebut.

Apa saja jenis wireframe?

Wireframe aplikasi dapat dibagi berdasarkan seberapa detail informasi di dalamnya digambarkan. Jenis-jenis wireframe adalah:

1. Low-fidelity wireframe

Jenis wireframe ini digambarkan dengan spontan dan tidak begitu memperhatikan estetika. Low-fidelity wireframe adalah gambaran kasar yang menggunakan bentuk-bentuk dasar, gambar yang mudah dibuat, serta konten placeholder atau konten yang sengaja dibuat untuk mengisi ruang kosong dan perlu diganti pada produk jadi. Tujuannya untuk memberi gambaran tampilan pada seluruh pihak sesegera mungkin.

2. Mid-fidelity wireframe

Jenis wireframe ini terbilang lebih rapi dibandingkan jenis sebelumnya. Seluruh elemen digambarkan dengan lebih detail, tetapi belum memperhatikan detail yang bisa mengganggu seperti gambar, warna atau tulisan yang terlalu spesifik – masih mengandalkan konten placeholder. Banyak yang membuat wireframe jenis ini menggunakan software seperti Balsamiq atau Figma.

3. High-fidelity wireframe

High-fidelity wireframe menggambarkan tampilan yang lebih detail lagi. Teks yang digunakan merepresentasikan tampilan yang sebenarnya, begitu juga gambar dan warna-warna untuk mengeksplorasi komponen yang lebih kompleks. Untuk mempercepat proses perancangan, wireframe ini dibuat di akhir perancangan desain produk.

Tahapan membuat wireframe aplikasi

1. Cari tahu yang akan dibangun

Sebuah aplikasi atau situs web pastinya diciptakan untuk menyelesaikan suatu masalah. Untuk menciptakan desain yang lebih efektif, pembuat desain harus mencari tahu lebih banyak tentang pengguna yang menjadi target, apa yang mereka perlukan, apa produk yang dipakai saat ini, sampai hal yang tidak mereka sukai serta data lainnya.

2. Pahami alur

Alur dalam aplikasi adalah langkah-langkah yang dilalui saat pengguna melakukan sesuatu. Misalnya dalam aplikasi e-commerce, saat pengguna membuka aplikasi akan dibawa ke homepage yang berisi kumpulan produk yang diunggulkan. Jika pengguna tidak menemukan apa yang mereka cari di homepage, ia melakukan pencarian dengan memasukkan suatu kata kunci. Saat pencarian selesai, pengguna memilih salah satu hasil pencarian, maka aplikasi akan menampilkan detail produk. Jika tertarik untuk membeli, pengguna mengklik tombol “beli sekarang”, lalu melengkapi identitas. Setelah itu, order akan dikonfirmasi oleh penjual, lalu pengguna dapat meninggalkan aplikasi.

3. Mulai gambarkan layout dan fitur

Untuk bisa menggambarkan wireframe dengan baik, pastinya perlu tempat menggambar alias kanvas dengan ukuran yang cukup menggambarkan seluruh informasi. Lalu mulai gambar wireframe aplikasi, pilih komponen apa saja yang dimunculkan serta tentukan tata letaknya. Perhatikan hirarki informasi yang muncul – utamakan informasi yang penting. Berikan indikator pada tombol, menu, dan elemen interaktif lain. Gambarkan juga elemen statis seperti menu dan header. Karena wireframing tidak mengutamakan penggunaan warna, cara menunjukkan elemen yang lebih mencolok dapat memanfaatkan warna abu-abu dengan shading atau gelap-terang yang berbeda.

Pada titik ini desainer menentukan apakah akan menggambar wireframe jenis low, medium atau high fidelity, namun jika sedang dalam tahap desain awal, sebaiknya memulai dari tingkat low fidelity. Wireframe dapat dibuat dalam beberapa versi jika desainer memiliki banyak ide yang ingin didiskusikan.

4. Review dan kumpulkan pendapat

Diskusikan wireframe yang digambar ke pihak-pihak yang berkepentingan, seperti tim development dan tim yang berhubungan dengan pengguna. Diskusikan mana desain yang terbaik antara beberapa versi wireframe, sesuaikan elemen jika ada yang terasa kurang pas. Jika perlu, proses pengumpulan pendapat juga melibatkan pengguna potensial secara langsung.

5. Kembangkan wireframe lebih lanjut

Setelah berdiskusi dengan semua pihak, mulai kembangkan lebih lanjut wireframe menjadi gambaran layaknya aplikasi sungguhan. Buat desain untuk keseluruhan layar antarmuka.

Wireframing aplikasi web vs aplikasi mobile

Saat merancang aplikasi, salah satu pertimbangan yang mungkin terlintas adalah mengembangkan untuk desktop atau untuk smartphone, atau untuk keduanya. Mengembangkan aplikasi untuk kedua jenis perangkat tersebut akan menambah keunggulan aplikasi yang Anda buat, namun pastinya memiliki tantangan tersendiri dalam perancangannya, salah satunya dalam perancangan user interface. Jika Anda akan merancang tampilan aplikasi untuk desktop dan mobile sekaligus, berikut hal-hal yang perlu diperhatikan:

• Ukuran layar

Ukuran layar yang lebih besar pada desktop atau PC memungkinkan lebih banyak konten untuk muncul dalam satu kesempatan. Layar smartphone tentu lebih kecil, sehingga jumlah konten yang bisa dilihat dalam satu kesempatan lebih sedikit. Jika dipaksa untuk menampilkan banyak informasi pada smartphone, pengguna akan lebih sulit melihatnya karena perlu melakukan beberapa kali aksi seperti memperbesar atau scroll halaman. Selain itu, ukuran dan resolusi layar smartphone lebih beragam dibandingkan layar PC, sehingga tata letak konten dapat terlihat berbeda-beda. Maka dari itu Anda sebagai perancang antarmuka aplikasi perlu memberi batasan seberapa banyak konten yang ditampilkan pada layar.

• Perilaku

Pada desktop atau PC, pengguna melakukan interaksi pada elemen aplikasi dengan mengkliknya menggunakan mouse atau trackpad. Berbeda dengan smartphone yang interaksinya dilakukan dengan menyentuh layar. Cara interaksi yang berbeda memungkinkan aksi yang berbeda dan mungkin tidak dapat direplikasi di perangkat lainnya, misalnya di desktop pengguna bisa mengarahkan kursor ke suatu elemen tanpa mengkliknya untuk melihat keterangan khusus, dimana hal ini tidak bisa dilakukan pada layar smartphone. Begitu juga pada layar sentuh, pengguna dapat memutar dua jari untuk melakukan rotasi elemen yang agak suli t dilakukan dengan mouse. Perancang UI perlu mempertimbangkan cara untuk pengguna agar dapat melakukan navigasi dengan lancar.

• Fitur-fitur berbeda

Aplikasi web dan aplikasi mobile masing-masing juga memiliki kemampuan khusus. Misalnya pada aplikasi web, konten terbaru dapat di-push secara terus menerus selama pengguna terhubung ke internet. Pada aplikasi mobile terdapat kemampuan offline sehingga konten masih bisa diakses tanpa internet, atau kemampuan untuk menggunakan berbagai fitur pada perangkat seperti GPS dan accelerometer. Pastikan wireframe aplikasi Anda mengakomodir kemampuan-kemampuan khusus tersebut jika memang diperlukan.

Penutup

Demikian pembahasan kami tentang wireframe, suatu tahap untuk merancang tampilan aplikasi. Saat ini sudah ada beberapa software yang mempermudah proses wireframing aplikasi. Sebut saja Figma yang dapat diakses di web, Balsamiq yang menyediakan tool lengkap untuk desktop, atau Sketch khusus pengguna Mac.

Untuk pembahasan terbaru seputar pengembangan aplikasi dan web, yuk follow kami di appkey.id agar tidak ketinggalan!