{"id":2792,"date":"2022-09-15T16:23:06","date_gmt":"2022-09-15T09:23:06","guid":{"rendered":"https:\/\/mez.ink\/blog\/blog\/?p=2792"},"modified":"2022-09-15T16:33:14","modified_gmt":"2022-09-15T09:33:14","slug":"tutorial-figma-membuat-wireframe-website","status":"publish","type":"post","link":"https:\/\/mez.ink\/blog\/tutorial-figma-membuat-wireframe-website\/","title":{"rendered":"Tutorial Figma : Membuat Wireframe Website Untuk Pemula"},"content":{"rendered":"\n

Wireframe adalah salah satu cara paling sederhana untuk mengkomunikasikan ide design website kamu. Tetapi, fungsi wireframe bukan hanya sekadar menuangkan ide kamu di atas kertas atau di Figma. Dalam tutorial figma kali ini, kita akan melihat apa itu wireframe, fungsi dari wireframe, dan cara membuat wireframe website dengan tutorial figma paling mudah.<\/p>\n\n\n\n

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

Wireframe adalah tata letak atau layout webiste yang menunjukkan bagian mana dari UI pengguna yang akan berada di halaman utama. Ini adalah bagian yang sangat penting dari proses desain interaksi atau user experience (UX).<\/p>\n\n\n\n

Tujuan dari wireframe adalah untuk menunjukkan seperti apa halaman web akan dibuat di awal proyek sehingga klien dan tim proyek dapat memberikan persetujuan mereka sebelum dimulainya proses design. Wireframe juga dapat digunakan untuk membuat navigasi utama dan navigasi sekunder sehingga bahasa dan struktur website sesuai dengan apa yang diharapkan pengguna.<\/p>\n\n\n\n

Wireframe dapat mempercepat dan memudahkan dalam proses melihat struktur halaman dan membuat perubahan. Dengan membuat perubahan kecil pada wireframe hingga mencapai versi final, klien dan tim desain dapat yakin bahwa halaman tersebut memenuhi kebutuhan pengguna dan memenuhi tujuan bisnis dan proyek utama.<\/p>\n\n\n\n

Wireframe digunakan pada awal fase desain dan seringkali pada akhir proses desain yang berpusat pada pengguna. Selama uji kegunaan prototipe, halaman wireframe sering digunakan untuk mendapatkan umpan balik atau feedback dari pengguna sebelum proses desain dimulai.<\/p>\n\n\n\n

Wireframe dapat digambar dengan tangan, tetapi juga sering dibuat dengan perangkat lunak seperti Microsoft Visio dan Figma sehingga mereka dapat ditampilkan di layar komputer. Tetapi, jika wireframe akan digunakan untuk menguji kegunaan prototipe, wireframe biasanya dibuat dalam HTML.<\/p>\n\n\n\n

Apa Fungsi Dari Wireframe?<\/strong><\/h2>\n\n\n\n

Dalam UI\/UX design, wireframing sangatlah penting. Tujuan dari wireframe adalah untuk memberikan gambaran visual tentang halaman di awal proyek sehingga klien dan tim proyek dapat memberikan persetujuan mereka sebelum dimulainya proses design website yang sesungguhnya. Wireframe lebih mudah diubah daripada desain konsep yang sudah jadi, dan begitu klien dan pengguna menyetujuinya, mereka memberikan kepercayaan kepada UI\/UX designer untuk memulai proses design website.<\/p>\n\n\n\n

Dari sudut pandang praktiknya, wireframe berfungsi dalam memastikan bahwa konten dan fungsi halaman ditempatkan dengan benar berdasarkan kebutuhan pengguna dan bisnis. Seiring berjalannya proyek, mereka dapat menjadi cara yang baik bagi anggota tim proyek untuk berbicara satu sama lain tentang tujuan dan ruang lingkup proyek.<\/p>\n\n\n\n

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

Berikut adalah contoh wireframe website dari wireframe kit figma community<\/a>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Cara Membuat Wireframe Website di Figma<\/strong><\/h2>\n\n\n\n

Karena Figma adalah tool berbasis web, kamu dapat menggunakannya di komputer atau browser web apa pun yang kamu inginkan. Selain itu, Figma memiliki berbagai basic tools<\/a> yang dapat digunakan untuk membuat wireframe dengan fidelitas rendah dan fidelitas tinggi. Figma juga memiliki banyak pilihan desain dan interaksi lain yang dapat kamu coba. Ikuti tutorial figma berikut jika kamu ingin menggunakan Figma untuk wireframing:<\/p>\n\n\n\n

#1 Dapatkan Figma Wireframe Kit dari Figma Community<\/strong><\/h3>\n\n\n\n

Kamu bisa mengaksesnya dengan klik disini<\/a>, lalu klik Try figma for free<\/strong>.<\/p>\n\n\n\n

\"figma<\/figure>\n\n\n\n

#2 Atur Properties atau Komponen Pada Template Wireframe<\/strong><\/h3>\n\n\n\n

Kamu dapat menggunakan template wireframe website yang ada untuk kamu gunakan sesuai dengan kebutuhanmu.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Untuk mengkonfigurasi komponen pada template wireframe seperti warna, ukuran, dll., kamu dapat mengklik atau select frame yang ingin kamu konfigurasikan dan mengaturnya di tab design<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Kamu juga bisa mengaturnya lewat kode CSS pada tab inspect<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

#3 Buat Page Baru Untuk Membuat Wireframe Kamu Sendiri<\/strong><\/h3>\n\n\n\n

Jika kamu tidak nyaman mengedit di halaman yang ada, kamu dapat emmbuat oage atau halaman baru di file yang sama. Langkah pertama, klik pada frame yang ingin disalin ke page baru, lalu klik CTRL + C<\/strong> untuk menyalin. Setelah itu, buat page baru dengan mengklik add new page<\/strong> pada tab sebelah kiri di figma. Beri nama halaman baru tersebut.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Lalu, klik CTRL+V <\/strong>untuk paste frame yang sudah disalin tadi.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

#4 Gunakan Template Wireframe Website di Project Baru<\/strong><\/h3>\n\n\n\n

Kamu juga dapat menggunakan template wireframe yang ada di project yang baru. Cara copy pastenya sama, namun bedanya, kamu harus membuat project atau file baru terlebih dahulu. Caranya adalah dengan mengakses menu pada toolbar, lalu klik File > New design file.<\/strong><\/p>\n\n\n\n

\"buat<\/figure>\n\n\n\n

Lalu kamu tinggal paste frame yang sudah kamu copy tadi.<\/p>\n\n\n\n

\"template<\/figure>\n\n\n\n

Tips Dalam Membuat Wireframe Website di Figma<\/strong><\/h2>\n\n\n\n

#1 Jaga agar elemen desain tetap sederhana<\/strong><\/h3>\n\n\n\n

Warna harus hanya terdiri dari nuansa putih, hitam, dan abu-abu.<\/p>\n\n\n\n

#2 Gunakan paling banyak dua font.<\/strong><\/h3>\n\n\n\n

Pada pembuatan wireframe website, kamu menggunakan tipografi untuk menunjukkan urutan informasi. Untuk memperjelas hierarki, gunakan hanya dua font. Ubah ukuran font dan gunakan huruf tebal dan miring sesuai kebutuhan untuk membuat wireframe kamu menonjol dan menarik perhatian ke berbagai informasi.<\/p>\n\n\n\n

#3 Gunakan kotak untuk memperlihatkan gambar dan grafik.<\/strong><\/h3>\n\n\n\n

Tetap fokus pada tata letak dengan menggunakan simbol atau bentuk sederhana untuk menunjukkan ke mana grafik dan gambar akan berpindah. Misalnya, kamu dapat menunjukkan penempatan video dengan meletakkan segitiga yang terlihat seperti tombol play.<\/p>\n\n\n\n

#4 Perhatikan ukuran layar yang digunakan<\/strong><\/h3>\n\n\n\n

Wireframe harus bersifat teknis dan kreatif. Pikirkan tentang semua tempat, tahapan, dan cara desain kamu dapat digunakan. Perhatikan tiga hal berikut ini pad asaat kamu memilih ukuran layar untuk digunakan:<\/p>\n\n\n\n