Hampir seluruh digital agency dan perusahaan baik kecil, sedang, atau besar saat ini memiliki website mereka masing-masing sebagai media untuk mengenalkan profil dan identitas mereka kepada seluruh pengguna internet, termasuk investor. Oleh karena itu, website untuk perusahaan atau digital agency Indonesia harus dibuat dengan menyesuaikan target pengunjung dari website perusahaan tersebut agar dapat menarik untuk mempelajari lebih lanjut atau bahkan melakukan investasi.

Dalam pembuatan website, proses perancanaan desain adalah hal yang penting agar website tersebut dapat menarik perhatian pengunjung. Salah satu hal yang dapat digunakan oleh UI/UX Designer untuk memudahkan perancangan desain website adalah dengan menggunakan wireframe.

Sumber : unsplash.com

Apa itu Wireframe?

Wireframe adalah kerangka atau blueprint bagi UI/UX Designer pada saat membuat desain. Wireframe (low-fidelity) berisi susunan informasi dan kasaran layout yang dibuat sebelum proses desain memasuki proses mockup (high-fidelity). 

Wireframe digunakan sebagai penghubung antara arsitektur informasi ke visual desain. Selain itu, wireframe juga dapat membantu dan mempermudah pekerjaan UI/UX Designer, mengapa?

Wireframe mempermudah kerja UI/UX Designer

Wireframe dapat membantu kerja UI/UX Designer dalam proses pembuatan desain dengan meminimalisir revisi desain karena saat pengerjaan wireframe, UI/UX Designer akan mendapatkan feedback yang digunakan untuk menyempurnakan konsep wireframenya sebelum masuk ke proses mockup. Jika UI/UX Designer tidak membuat wireframe, kemungkinan besar akan terjadi banyak revisi pada proses mockup yang seringkali menguras banyak biaya.

UI/UX Designer membuat wireframe dengan coretan pada kertas kosong atau dapat juga menggunakan beberapa software yang telah dirancang untuk membuat wireframe seperti Whimsical dan Figma.

Elemen-elemen pada Wireframe

Sumber : codeacademy.com

Wireframe memiliki beberapa elemen di dalamnya yang digunakan sebagai penghubung antara arsitektur informasi ke visual desain.

Beberapa elemen tersebut, antara lain :

  • Informasi

Elemen informasi merupakan penyajian konten atau informasi untuk pengguna berupa gambar, teks dan link. Elemen ini dapat meningkatkan user experience jika disusun dan disajikan dengan baik kepada pengguna secara efektif dan jelas.

  • Interface

Interface (antarmuka) pada wireframe merupakan elemen yang mengatur pemilihan tampilan interface, contohnya dalam penempatan tombol, ukuran font, hingga link yang dapat membuat pengguna merasa berinteraksi dengan sistem.

  • Navigasi

Peran navigasi di dalam wireframe sangat penting dalam memandu pengguna bagaimana cara menemukan informasi yang diinginkannya di dalam website. Tanpa navigsi, pengguna akan kebingungan ketika mengakses website.

Apa Keuntungan membuat Wireframe?

Wireframe merupakan salah satu hal yang dibuat UI/UX Designer dalam proses pembuatan desain. Dengan membuat wireframe, UI/UX Designer mendapatkan beberapa keuntungan, antara lain :

  • Menghemat waktu dalam proses desain karena dapat meminimalisir revisi
  • Memudahkan komunikasi dan koordinasi dengan stakeholder seputar tampilan website
  • Memberikan gambaran jelas kepada developer elemen-elemen yang akan dicoding
  • Menginspirasi desainer dengan gambaran desain yang telah dibuat

Dengan beberapa keuntungan yang didapatkan oleh UI/UX Designer dalam membuat wireframe, wireframe menjadi salah satu hal yang dikerjakan UI/UX Designer saat membuat desain karena memudahkan mereka dalam pengerjaan desain. Wireframe juga dibutuhkan untuk berkomunikasi dengan stakeholder, developer maupun antar tim desain untuk dapat memastikan hasil website sudah sesuai dengan konsep yang telah dibuat.

Dalam pembuatan suatu website dengan wireframe, perusahaan dan digital agency telah menerapkan hal tersebut, salah satunya PT. Suitmedia Kreasi Indonesia. Sebagai digital agency Jakarta, Suitmedia telah mengedepankan pengembangan website dan mobile dengan transformasi digital melalui strategi, pengembangan produk, dan komunikasi kreatif. 

Penulis: Muhammad Ananda Faris (Web UI/UX Designer)

Editor: Jessica Patricia (Content Marketing)