Situs web wireframes adalah gambar garis sederhana yang menunjukkan penempatan elemen pada halaman web. Anda dapat menghemat banyak waktu dengan mengedit tata letak wireframe sederhana di awal proses desain alih-alih desain yang rumit nantinya.
Menggunakan wireframes adalah cara yang bagus untuk memulai proyek situs web, karena memungkinkan Anda dan klien Anda untuk fokus pada tata letak tanpa gangguan warna, jenis, dan elemen desain lainnya. Berkonsentrasi pada apa yang terjadi di mana pada halaman web Anda dan persentase ruang yang dibutuhkan setiap elemen, yang dapat ditentukan oleh kebutuhan klien Anda.
01 03
Apa yang Harus Disertakan dalam Situs Web Wireframe
Semua elemen penting dari suatu halaman web harus diwakili dalam wireframe situs web Anda. Gunakan bentuk yang sederhana, bukan grafik aktual, dan beri label. Elemen-elemen ini termasuk:
- Navigasi: Tombol untuk pengguna mengunjungi bagian utama situs Anda.
- Logo perusahaan: Hanya dapat diwakili oleh sebuah kotak.
- Area konten: Di mana bagian konten Anda yang berbeda akan muncul?
- Kotak pencarian
- Area login pengguna
02 03
Cara Membuat Situs Web Wireframes
Ada berbagai cara untuk membuat wireframe situs web. Mereka termasuk:
Menggambar Ini dengan Tangan di atas Kertas
Metode ini sangat berguna ketika berhadapan langsung dengan klien. Sketsa ide tata letak Anda di atas kertas, dengan fokus pada elemen apa yang harus pergi ke mana.
Menggunakan Adobe Photoshop, Illustrator, atau Perangkat Lunak Lain
Sebagian besar paket perangkat lunak grafis dilengkapi dengan semua alat dasar yang diperlukan untuk membuat wireframes. Garis sederhana, bentuk, dan teks (untuk memberi label elemen Anda) adalah semua yang Anda butuhkan untuk membuat wireframe yang dapat ditampilkan.
Menggunakan Software yang Dibuat untuk Jenis Tugas Ini
Sementara Photoshop dan Illustrator dapat melakukan trik, beberapa paket perangkat lunak dikembangkan secara khusus untuk jenis pekerjaan ini. OmniGraffle adalah perangkat lunak yang menyederhanakan pembuatan wireframes dengan menyediakan bentuk, garis, panah, dan alat-alat teks untuk digunakan pada kanvas kosong. Anda bahkan dapat mengunduh set grafik khusus (gratis) di Graffletopia, yang memberi Anda lebih banyak elemen, seperti tombol web umum, untuk digunakan.
03 03
Keuntungan-keuntungan
Dengan wireframes di situs web, Anda mendapat keuntungan dari tweaking gambar garis sederhana untuk mencapai tata letak yang diinginkan. Alih-alih memindahkan elemen kompleks di sekitar halaman, butuh sedikit waktu untuk menyeret beberapa kotak ke posisi baru. Ini juga jauh lebih produktif untuk Anda atau klien Anda untuk fokus pada tata letak pertama ... Anda tidak akan memulai dengan komentar seperti "Saya tidak suka warna itu di sana!" Sebaliknya, Anda akan mulai dengan tata letak dan struktur yang diselesaikan pada yang menjadi dasar desain Anda.