{"id":13387,"date":"2023-03-09T01:10:00","date_gmt":"2023-03-08T18:10:00","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=13387"},"modified":"2023-03-09T09:26:22","modified_gmt":"2023-03-09T02:26:22","slug":"penjelasan-wireframe","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/penjelasan-wireframe\/","title":{"rendered":"Yuk Ketahui Selengkapnya tentang Wireframe dan Pentingnya Bagi Website Kalian!"},"content":{"rendered":"\n

Wireframe?! Memangnya penting juga ya bagi website? Memang wireframe itu apa sih? Okay, tenang, kalem. Bagi yang masih awam dengan wireframe, kalian hanya perlu pantengin terus artikel ini sampai kelar. Simak ya Yuk Ketahui Selengkapnya tentang Wireframe dan Pentingnya Bagi Website Kalian!<\/strong><\/p>\n\n\n\n

Apa Itu Wireframe?<\/strong><\/h2>\n\n\n\n

Wireframe adalah sekumpulan diagram yang terdiri dari garis dan bentuk sederhana yang mewakili kerangka situs web atau user interface<\/em> (UI) aplikasi dan core functionality<\/em>.<\/p>\n\n\n\n

Jadi, wireframe ini sebagai kerangka dasar halaman website atau aplikasi untuk menunjukkan desain yang ingin diwujudkan.<\/p>\n\n\n\n

FYI, wireframe biasanya berisi banner, header, content, footer, link, form, dan lain-lain. Wireframing biasanya dilakukan oleh UI Designer, yang mana bertanggung jawab membuat website atau aplikasi tampak menarik.<\/p>\n\n\n\n

FYI, seorang UI designer biasanya tidak bekerja sendiri ya sebab wireframe website akan dibahas dengan tim web development <\/em>atau client <\/em>untuk mendapat hasil rancangan desain terbaik.<\/p>\n\n\n\n

3 Jenis Wireframe<\/strong><\/h2>\n\n\n\n

Ada tiga jenis wireframe sesuai dengan detail kerangkanya yaitu :<\/p>\n\n\n\n

1. Low-fidelity Wireframe<\/strong><\/h3>\n\n\n\n

Low-fidelity wireframe adalah wireframe dengan desain yang paling sederhana. Tipe wireframe ini biasanya dibuat dalam bentuk yang masih kasar, artinya wireframe ini tidak menggunakan skala, kisi, dan akurasi piksel.<\/p>\n\n\n\n

Bahkan, jenis ini hanya bermodal kertas dan pensil saja. Proses pembuatan desain web atau aplikasi sering memanfaatkan low fidelity<\/em> wireframe sebab dapat dibuat dengan cepat.<\/p>\n\n\n\n

2. Mid-fidelity Wireframe<\/strong><\/h3>\n\n\n\n

Meski low-fidelity wireframe mudah dibuat namun mid-fidelity wireframe adalah jenis wireframe yang paling umum digunakan, loh.<\/p>\n\n\n\n

Secara informasi dan tampilan, mid-fidelity wireframe memiliki detail yang lebih lengkap dibanding low-fidelity.<\/p>\n\n\n\n

Semua fitur web ataupun aplikasi dapat terdiferensiasi dengan jelas pada tipe wireframe ini. Selain itu, sudah terlihat perbedaan ukuran teks yang dapat memisahkan judul dan konten dengan baik.<\/p>\n\n\n\n

Tipe ini juga sudah menggunakan beberapa elemen website yang menonjol dengan pewarnaan yang berbeda. Oia, mid fidelity wireframe memang bisa dengan modal kertas dan pensil saja. Namun, dengan menggunakan software<\/em>, hasilnya bisa jauh lebih akurat.<\/p>\n\n\n\n

3. High-fidelity Wireframe<\/strong><\/h3>\n\n\n\n

High-fidelity wireframe adalah tipe wireframe yang paling spesifik. Sebab, kerangka desain sudah menggunakan gambar dan tulisan konten yang sebenarnya.<\/p>\n\n\n\n

Eitss, tipe wireframe ini juga sudah dilengkapi menu interaktif dalam desainnya.<\/p>\n\n\n\n

Tipe wireframe high fidelity lebih cocok untuk dibuat oleh seorang UI UX designer karena dapat menggabungkan ide desain dengan kebutuhan pengguna dengan lebih detail.<\/p>\n\n\n\n

Contoh Wireframe<\/strong><\/h2>\n\n\n\n

Secara visual, wireframe memang hanya berbentuk garis dan kotak dengan warna hitam putih.<\/p>\n\n\n\n

Bahkan, tulisan pada wireframe sekadar teks sederhana atau coretan. Wireframe dari sebuah website cenderung berbeda-beda, tergantung jenis website dan kebutuhan pengguna.<\/p>\n\n\n\n

Berikut contoh wireframe dari google search :<\/p>\n\n\n

\n
\"ketahui<\/a><\/figure><\/div>\n\n\n

Komponen Wireframe Website<\/strong><\/h2>\n\n\n\n

Ada beberapa komponen yang dibutuhkan dalam membuat sebuah wireframe website:<\/p>\n\n\n\n

Layout Utama<\/strong><\/h3>\n\n\n\n

Layout utama adalah bagian-bagian terpenting dalam proses wireframing <\/em>sebuah aplikasi atau website. Komponen ini biasanya berupa kotak-kotak atau bagian yang telah disesuaikan dan ditata sedemikian rupa di halaman website atau aplikasi.<\/p>\n\n\n\n

Bagian terpenting komponen ini adalah header <\/em>yang biasanya berisi konten unggulan, menu navigasi untuk memudahkan pengguna dalam berselancar di website atau aplikasi, body<\/em>, hingga letak sidebar <\/em>yang berisi fitur lainnya.<\/p>\n\n\n\n

Interface<\/strong><\/h3>\n\n\n\n

Interface adalah komponen wireframe yang berkaitan dengan media interaksi antara tampilan website dengan pengunjung. Komponen ini digunakan sebagai penunjang informasi pada pengunjung yang biasanya berupa  button, link, judul, font size, logo, dan sebagainya.<\/p>\n\n\n\n

Navigasi<\/strong><\/h3>\n\n\n\n

Komponen ini berguna untuk mengarahkan pengunjung menjelajahi website atau aplikasi dengan mudah.<\/p>\n\n\n\n

Desain yang digunakan bisa berupa menu, tanda panah, atau ikon lain. Komponen navigasi yang jelas akan memberikan user experience <\/em>yang baik kepada pengunjungnya.<\/p>\n\n\n\n

Informasi<\/strong><\/h3>\n\n\n\n

Anyway, komponen informasi merupakan konten utama yang ingin disampaikan pada pengunjung. Desain informasi yang tepat bisa membuat pengunjung lebih betah, kan.<\/p>\n\n\n\n

Komponen wireframe ini bisa berupa input, thumbnail, link, paragraf, gambar, tulisan, dan lain-lain. <\/p>\n\n\n\n

Oleh karena itu, penting untuk menempatkan komponen ini di bagian yang paling mudah dilihat pengunjung.<\/p>\n\n\n\n

Komponen Tambahan<\/strong><\/h3>\n\n\n\n

Komponen tambahan bisa dimasukkan dalam wireframe sesuai jenis dan kebutuhan website, ya. Jika merancang website untuk online shop, komponen tambahan yang bisa digunakan dapat berupa fitur cek resi, form konfirmasi pemesanan, hingga layanan chat dengan pembeli secara langsung.<\/p>\n\n\n\n

Alasan Menggunakan Wireframe<\/strong><\/h2>\n\n\n\n

Berikut ini alasan utama mengapa harus menggunakan wireframe:<\/p>\n\n\n\n

Menghemat Waktu dan Uang<\/strong><\/h3>\n\n\n\n

Gambar rangka yang dirancang dengan baik dapat menghemat waktu dan uang karena tim pengembangan akan memiliki pemahaman yang lebih baik tentang keseluruhan produk yang mereka bangun dan menghindari masalah setelah produk dibuat.<\/p>\n\n\n\n

Kalian tentunya juga sudah paham bahwa perubahan pada desain website jauh lebih mudah dan cepat jika dilakukan pada saat masih berupa konsep. Oleh karena itu, tahapan desain dan coding <\/em>sebaiknya dimulai setelah konsep desain sudah disepakati.<\/p>\n\n\n\n

Memudahkan Kolaborasi Gambaran Awal<\/strong><\/h3>\n\n\n\n

Saat memulai proyek baru atau melakukan desain ulang produk nih, tentu ingin dapat feedback <\/em>dalam koordinasi dan kolaborasi lebih awal sehingga tidak membuang terlalu banyak waktu dan uang.<\/p>\n\n\n\n

Nah, wireframe adalah cara yang bagus untuk menyampaikan ide dengan cepat dan mendapatkan feedback <\/em>awal untuk membantu merancang produk yang lebih baik.<\/p>\n\n\n\n

Jika bekerja dengan client <\/em>dan stakeholder <\/em>produk lainnya, kalian dapat berkolaborasi dan mencapai kesepakatan awal proyek tentang tampilan interface<\/em>, bagaimana fungsinya, dan elemen apa yang harus disertakan. <\/p>\n\n\n\n

Semua proses pengerjaan website dapat mengacu pada kerangka dasar yang sudah disepakati. Jadi ketika berdiskusi untuk melakukan perbaikan, kalian dapat melihat pada wireframe tersebut.<\/p>\n\n\n\n

Pengembangan Lebih Terstruktur <\/strong><\/h3>\n\n\n\n

Seiring berjalannya proyek, wireframe dapat digunakan sebagai referensi untuk membantu menjaga berbagai tim tetap bekerja sesuai dengan jalurnya.<\/p>\n\n\n\n

Memastikan wireframe selalu mudah diakses membuat komunikasi tetap terbuka sehingga semua orang dapat tetap fokus pada visi dan ruang lingkup proyek.<\/p>\n\n\n\n

Adanya wireframe, pengembangan website jauh lebih terstruktur. Tidak hanya konsep dasar sudah diketahui, masing-masing komponen juga sudah tertata dengan baik termasuk navigasinya.<\/p>\n\n\n\n

Fokus Pada Kegunaan<\/strong><\/h3>\n\n\n\n

Melihat wireframe dapat memberikan inspirasi bagi desainer UX dan pengembang produk saat mereka menganalisis tata letak dan fokus pada potensi kegunaan produk akhir.<\/p>\n\n\n\n

Fokus pada kegunaan sejak dini sangat penting karena jauh lebih murah dan lebih mudah untuk memperbaiki masalah dalam fase desain daripada setelah kalian mulai membuat kode.<\/p>\n\n\n\n

Meningkatkan Agile Development<\/strong><\/h3>\n\n\n\n

Wireframe bekerja dengan baik di lingkungan yang gesit. Kalian dapat bekerja dengan manajer produk dan pengembang untuk mengidentifikasi bagian mana dari desain yang harus dikembangkan di setiap iterasi.<\/p>\n\n\n\n

Mengembangkan produk dalam potongan iteratif dapat memudahkan untuk mendapatkan feedback <\/em> dan memperbaiki proses desain serta pengembangan sesuai kebutuhan.<\/p>\n\n\n\n

Tutorial Membuat Wireframe Sederhana<\/strong><\/h2>\n\n\n\n

Silakan kalian ikuti tutorial membuat wireframe sederhana berikut ini: <\/p>\n\n\n\n

1. Melakukan Riset<\/strong><\/h3>\n\n\n\n

Sebelum membuat wireframe, kalian harus melakukan riset untuk memahami karakteristik target audience <\/em>melalui riset pengguna. Selain itu, perlu melakukan riset untuk memahami kompetitor, analisis lini produk serupa, serta meninjau pedoman desain internal.<\/p>\n\n\n\n

Hal ini penting dilakukan agar situs web atau aplikasi yang akan dibuat sesuai dengan design yang sedang trend, <\/em>sesuai dengan kebutuhan target audiens, dan agar kalian mendapatkan inspirasi desain yang menarik. <\/p>\n\n\n\n

2. Menyiapkan Tools<\/strong><\/h3>\n\n\n\n

Langkah selanjutnya adalah menyiapkan tools <\/em>untuk membangun desain wireframe. Pembuatan desain yang sederhana dapat dimulai dengan menggunakan kertas dan pensil saja.<\/p>\n\n\n\n

Sedangkan, untuk membuat gambaran yang lebih detail, tersedia berbagai tools <\/em>wireframe yang dapat dimanfaatkan. Berikut beberapa tools <\/em>wireframe yang populer : <\/p>\n\n\n\n

Balsamiq<\/strong><\/h4>\n\n\n\n

Tahukah kalian bahwa Balsamiq <\/a>menjadi populer sebagai pemroduksi wireframe yang menyerupai sketsa sehingga segera terlihat jelas bahwa wireframe bukanlah produk jadi tapi sebuah proses kerja.<\/p>\n\n\n

\n
\"balsamiq\"<\/a><\/figure><\/div>\n\n\n

Oia, Balsamiq juga memiliki komponen libraries besar yang dapat digunakan kembali, yang mana dapat drag and drop<\/em> dengan sangat mudah untuk merancang wireframe kalian.<\/p>\n\n\n\n

Kalian dapat menggunakannya pada hampir seluruh platform<\/em>, dengan versi desktop tersedia untuk Mac, Windows dan Linux, ditambah ada versi web jika kalian lebih suka bekerja online. Aplikasi pihak ketiga seperti iMockups untuk iOS juga mendukung format ekspor Balsamiq.<\/p>\n\n\n\n

Mockflow<\/strong><\/h4>\n\n\n\n

Mockflow merupakan software <\/em>atau tool cloud based <\/em>yang memiliki fitur template library<\/em> dan drag-and-drop editor<\/em>. Hal ini akan sangat memudahkan ketika digunakan untuk pemula.<\/p>\n\n\n\n

Tools <\/em>wireframe ini tidak hanya gratis namun juga sangat lengkap untuk pengembangan aplikasi smartphone <\/em>maupun web.<\/p>\n\n\n\n

Mockflow memungkinkan untuk mendesain wireframe dengan cepat dengan preset<\/em>-nya. Selain itu, mockflow juga bisa digunakan untuk membuat website dan mendesain banner.<\/p>\n\n\n\n

Mockflow juga menyediakan collaboration tool <\/em>dan timeline manager<\/em> yang membuat pekerjaan wireframing <\/em>menjadi lebih mudah dan efektif.<\/p>\n\n\n\n

Cacoo<\/strong><\/h4>\n\n\n\n

Cacoo merupakan salah satu software <\/em>wireframe yang cukup simpel, baik dari sisi tampilan maupun pilihan menunya. Tool <\/em>ini cocok digunakan bahkan untuk si pemula.<\/p>\n\n\n\n

Tenang, kalian tidak perlu melakukan instalasi pada komputer sebab tool <\/em>ini bisa digunakan secara online melalui browser. Cacoo adalah tool <\/em>yang cocok untuk desain wireframe low fidelity<\/em> dan mid fidelity<\/em>.<\/p>\n\n\n\n

Jadi, Cacoo ini telah terintegrasi dengan team collaboration tool<\/em> dan menggunakan sistem cloud based<\/em> sehingga transfer data antara rekan kerja dengan ini menjadi lebih mudah. Cacoo juga menyediakan banyak template <\/em>yang bisa bebas dipilih sesuai dengan kebutuhan.<\/p>\n\n\n\n

Lucidchart<\/strong><\/h4>\n\n\n\n

Tool ini berbasis cloud-computing<\/em>. Pada versi gratisnya, pengguna Lucidchart <\/a>dapat membuat project <\/em>dengan maksimal 60 objek. Versi gratis tools <\/em>ini turut menyediakan berbagai pilihan template <\/em>yang siap untuk diintegrasikan pada desain kalian.<\/p>\n\n\n

\n
\"lucidchart\"<\/a><\/figure><\/div>\n\n\n

Selain itu, Lucidchart juga mendukung customisasi desain. Jika ingin mendapatkan akses penuh pada layanan premiumnya, terdapat biaya langganan sekitar Rp 75.000,- perbulan untuk personal dan Rp 300.000,- perbulan untuk tim.<\/p>\n\n\n\n

Figma<\/strong><\/h4>\n\n\n\n

Jika ingin mencoba menggunakan tools wireframe Figma, ada paket starter yang bisa didapatkan gratis untuk dua editor dan tiga proyek. Sedangkan untuk fitur premium, Figma dapat digunakan oleh pelajar tanpa pungutan biaya.<\/p>\n\n\n\n

Lalu, bagaimana dengan editor profesional? Nah, untuk editor profesional yang butuh akses penuh, ada biaya sekitar Rp 180.000,- perbulan. Tool <\/em>ini bisa mendukung wireframe low fidelity<\/em> hingga high fidelity<\/em>.<\/p>\n\n\n\n

3. Melakukan Setting Grid<\/strong><\/h3>\n\n\n\n

Langkah selanjutnya adalah melakukan setting grid. Kalian akan mengatur halaman website menjadi beberapa kolom sebagai tempat dari komponen yang sudah ditentukan.<\/p>\n\n\n\n

Tujuan dari melakukan setting grid yaitu membuat penataan lebih mudah dengan hasil yang rapi. Tampilan website akan terlihat lebih seimbang dengan beberapa komponen di dalamnya.<\/p>\n\n\n\n

4. Menentukan Tata Letak<\/strong><\/h3>\n\n\n\n

Setelah selesai dengan langkah setting grid, saatnya untuk menentukan tata letak elemen website. Dengan bantuan grid, kalian bisa menggunakan bentuk kotak untuk setiap komponen yang akan digunakan.<\/p>\n\n\n\n

5. Tuliskan Informasi Konten <\/strong><\/h3>\n\n\n\n

Setelah mengatur komponen dengan tata letak yang baik, saatnya menuliskan informasi konten untuk website kalian. Tujuannya untuk memastikan strukturnya sesuai dengan kebutuhan.<\/p>\n\n\n\n

Pastikan informasi konten jelas dan mudah dibaca. Silakan gunakan ukuran dan jenis font <\/em>yang berbeda untuk masing-masing elemen. Sehingga, bisa membedakan berbagai informasi dalam desain tersebut.<\/p>\n\n\n\n

Setelah tahapan ini selesai, kalian bisa melanjutkannya dengan bentuk visual yang lebih detail.<\/p>\n\n\n\n

Cara Membuat Wireframe di Lucidchart<\/strong><\/h2>\n\n\n\n

Lucidchart dapat membantu membuat wireframe dan mockups <\/em>untuk situs web dan mobile devices<\/em>. Mockups adalah model visual dari apa yang direncanakan.<\/p>\n\n\n\n

Wireframe dan mockups <\/em>terlihat sangat mirip pada final product <\/em>tetapi mereka memiliki fungsi yang berbeda. Jika baru mulai wireframing<\/em>, kalian dapat memanfaatkan template <\/em>untuk menghemat waktu mempelajarinya.<\/p>\n\n\n\n

Tenang, template <\/em>pada Lucidchart menyediakan bentuk sederhana kok, yang mana hanya perlu menambahkan konten di dalamnya. Lucidchart menawarkan sejumlah template <\/em>wireframe, mulai dari beranda situs web hingga aplikasi seluler.<\/p>\n\n\n\n

Langkah awal untuk membuka pustaka template <\/em>Lucidchart yaitu dengan membuka pustaka dokumen dan klik \u201c+New<\/strong>\u201c. Kemudian pilih \u201cLucidspark<\/strong>\u201d dan klik \u201cStart Whiteboarding<\/strong>\u201d.<\/p>\n\n\n\n

Halaman baru akan muncul lalu \u201cTemplate<\/strong>\u201d dan telusuri kategori di menu tarik-turun hingga melihat desain berbagai macam wireframe website maupun aplikasi.<\/p>\n\n\n

\n
\"wireframe\"<\/a><\/figure><\/div>\n\n\n

Klik pada template untuk membacanya. Saat sudah menemukan yang sesuai dengan kebutuhan, klik \u201cCreate Board<\/strong>\u201d atau cukup klik dua kali template <\/em>untuk membuka halaman dokumen template yang dipilih.<\/p>\n\n\n\n

Misal, kalian memilih template website wireframe maka Lucidchart akan membuka tab baru berupa template dari website wireframe yang siap diisi konten seperti pada gambar di bawah ini :<\/p>\n\n\n

\n
\"tentang<\/a><\/figure><\/div>\n\n\n

Jika ingin membuat wireframe sendiri dari awal, silakan kalian dapat mengikuti langkah berikut : <\/p>\n\n\n\n

1. Memilih Shape Libraries<\/strong><\/h3>\n\n\n\n

Silakan siapkan workspace <\/em>dengan menyematkan shape libraries<\/em> yang akan dibutuhkan ke toolbar <\/em>kalian. Pada blank <\/em>diagram Lucidchart yang terbuka di editor, tekan \u201cM<\/strong>\u201d untuk membuka shape libraries.<\/p>\n\n\n\n

Pilih libraries <\/em>yang akan digunakan dan klik \u201cUse selected shapes<\/strong>\u201c. Pastikan memilih libraries <\/em>sesuai dengan kebutuhan proyek. Anyway, kalian dapat memanfaatkan beberapa libraries <\/em>yang berbeda sekaligus.<\/p>\n\n\n

\n
\"wireframe\"<\/a><\/figure><\/div>\n\n\n

2. Menambahkan Shapes <\/strong><\/h3>\n\n\n\n

Setelah memilih shape libraries, lanjutkan memulai wireframe dengan bentuk paling dasar (container<\/em>) yang akan menampung semua elemen lainnya. Tergantung pada sifat desain kalian, wireframe yang dibuat dapat berupa mobile device silhouette atau browser window.<\/p>\n\n\n\n

Mobile device silhouette dapat kamu temukan di shape libraries milik \u201ciOS Devices<\/strong>\u201d dan \u201cAndroid Devices<\/strong>\u201c. Sedangkan untuk browser window, dapat dilihat pada  \u201cUI Containers<\/strong>\u201d library.<\/p>\n\n\n\n

Selanjutnya silakan lanjutkan dengan menambahkan elemen tambahan, kerjakan dari umum ke khusus, tempatkan elemen desain besar sebelum beralih ke detail kecil. Gunakan containers untuk membuat bagian dalam diagram kamu seperti toolbars, side menu, dan sebagainya.<\/p>\n\n\n\n

Setelah menempatkan elemen yang lebih besar, mulailah menambahkan tombol individual dan blok teks. Edit detail desain tertentu, seperti font, warna, foto, dan logo.<\/p>\n\n\n\n

3. Menggunakan Links, Layers, dan Hotspots <\/strong><\/h3>\n\n\n\n

Setelah selesai menyusun wireframe, simulasikan fungsionalitas situs web menggunakan links, layers, dan hotspot.<\/p>\n\n\n\n

Ketiga fungsi ini memungkinkan untuk membuat tombol yang benar-benar berfungsi, membuat popup<\/em>, menautkan ke konten eksternal, dan menavigasi dari satu halaman wireframe ke halaman lainnya.<\/p>\n\n\n\n

4. Petakan Alur User Journey dengan Mockups<\/strong><\/h3>\n\n\n\n

User journey<\/em> menunjukkan perkembangan interaksi pengguna dengan aplikasi. Alur ini dapat difokuskan pada interface front-end user experiences<\/em> atau infrastruktur back-end <\/em>yang dibangun oleh developer<\/em>.<\/p>\n\n\n

\n
\"tentang<\/a><\/figure><\/div>\n\n\n

Penggunaan mockup <\/em>akan membantu untuk memberikan pemahaman pada anggota tim terkait gambaran tentang tampilan aplikasi.<\/p>\n\n\n\n

5. Publikasikan, Bagikan, atau Sajikan<\/strong><\/h3>\n\n\n\n

Setelah selesai, kalian dapat membagikan kerja keras kalian dalam beberapa cara:<\/p>\n\n\n\n