Belajar menggunakan Wireframes sederhana untuk memulai desain Anda
Web wireframe adalah panduan visual sederhana untuk menunjukkan kepada Anda seperti apa tampilan halaman web . Ini menunjukkan struktur halaman , tanpa menggunakan grafik atau teks apa pun. Sebuah wireframe situs web akan menunjukkan seluruh struktur situs - termasuk tautan laman apa ke mana.
Wireframes Web adalah cara yang bagus untuk memulai pekerjaan desain Anda. Dan meskipun dimungkinkan untuk membuat wireframes yang kompleks dengan detail yang sangat banyak, perencanaan Anda dapat dimulai dengan serbet dan pena. Kunci untuk membuat wireframes yang bagus adalah dengan meninggalkan semua elemen visual. Gunakan kotak dan garis untuk merepresentasikan gambar dan teks.
Hal-hal yang harus disertakan dalam wireframe halaman Web:
- kotak untuk elemen grafis utama
- penempatan headline dan sub-kepala
- struktur tata letak sederhana
- ajakan bertindak
- blok teks
Cara Membangun Wireframe Web Sederhana
Buat wireframe halaman Web menggunakan secarik kertas apa pun yang Anda miliki. Inilah cara saya melakukannya:
- Gambar kotak besar - ini bisa mewakili seluruh halaman atau hanya bagian yang terlihat. Saya biasanya mulai dengan bagian yang terlihat, dan kemudian memperluasnya untuk memasukkan elemen yang akan berada di bawah flip.
- Sketsa tata letak - apakah itu 2-kolom, 3-kolom?
- Tambahkan kotak untuk gambar header - Tarik kolom Anda jika Anda ingin menjadi satu tajuk di atas kolom, atau tambahkan saja di tempat yang Anda inginkan.
- Tulis "Judul" di mana Anda ingin judul H1 Anda menjadi.
- Tulis "Sub-Head" di mana Anda ingin H2 dan headline yang lebih rendah. Ini membantu jika Anda membuat mereka proporsional - h2 lebih kecil dari h1, h3 lebih kecil dari h2, dll.
- Tambahkan kotak untuk gambar lainnya
- Tambahkan di navigasi. Jika Anda merencanakan tab, cukup gambar kotak, dan tulis "navigasi" di atasnya. Atau cantumkan daftar berpoin di kolom tempat Anda ingin navigasi. Jangan menulis konten. Cukup tulis "navigasi" atau gunakan garis untuk merepresentasikan teks.
- Tambahkan elemen tambahan ke halaman - identifikasi apa yang mereka gunakan dengan teks, tetapi jangan gunakan teks konten yang sebenarnya. Misalnya, jika Anda ingin tombol ajakan bertindak di bagian kanan bawah, masukkan kotak di sana, dan beri label "ajakan bertindak". Jangan menulis "Beli Sekarang!" di dalam kotak itu.
Setelah Anda membuat wireframe sederhana, dan Anda tidak perlu lebih dari 15 menit untuk membuat sketsa, tunjukkan kepada orang lain. Tanyakan apakah ada yang hilang dan untuk umpan balik lainnya. Berdasarkan apa yang mereka katakan Anda dapat menulis wireframe lain atau menyimpan yang Anda miliki.
Mengapa Kertas Wireframes Terbaik untuk Draf Pertama
Meskipun dimungkinkan untuk membuat wireframes menggunakan program seperti Visio, untuk sesi brainstorming awal Anda, Anda harus tetap menggunakan kertas. Kertas tidak tampak permanen, dan banyak orang akan menganggap Anda melemparkannya bersama-sama dalam 5 menit dan jadi tidak ragu untuk memberi Anda umpan balik yang baik. Tetapi ketika Anda menggunakan program untuk membuat wireframes yang mewah dengan kotak dan warna yang sempurna, Anda menghadapi risiko terjebak dalam program itu sendiri dan menghabiskan waktu berjam-jam untuk menyempurnakan sesuatu yang tidak akan pernah ditayangkan.
Kertas wireframes mudah dilakukan. Dan jika Anda tidak menyukainya, Anda hanya meremas kertas, membuangnya dalam daur ulang dan mengambil lembaran baru.