Belajar menggunakan Wireframes mudah untuk memulakan reka bentuk anda
Struktur web adalah panduan visual mudah untuk menunjukkan kepada anda bagaimana laman web akan kelihatan seperti. Ia mencadangkan struktur halaman , tanpa menggunakan sebarang grafik atau teks. Wireframe tapak web akan menunjukkan keseluruhan struktur laman web - termasuk apa halaman yang dipaut ke tempat.
Wireframe web adalah cara terbaik untuk memulakan kerja reka bentuk anda. Dan sementara mungkin untuk membuat wireframe kompleks dengan jumlah terperinci yang besar, perancangan anda boleh bermula dengan serbet dan pena. Kunci untuk membuat wireframe yang baik adalah untuk meninggalkan semua elemen visual. Gunakan kotak dan garisan untuk mewakili gambar dan teks.
Perkara yang perlu dimasukkan ke dalam halaman web wireframe:
- kotak untuk elemen grafik utama
- penempatan tajuk utama dan sub-kepala
- struktur susunatur yang mudah
- panggilan untuk bertindak
- blok teks
Bagaimana Membina Wireframe Web Mudah
Buat halaman web dengan menggunakan sekeping kertas yang anda gunakan. Berikut adalah cara saya melakukannya:
- Lukis segiempat tepat besar - ini boleh mewakili sama ada keseluruhan halaman atau hanya bahagian yang kelihatan. Saya biasanya bermula dengan bahagian yang kelihatan, dan kemudian mengembangkannya untuk memasukkan unsur-unsur yang akan berada di bawah lipatan.
- Lakarkan susun atur - apakah 2-lajur, 3-lajur?
- Tambah dalam kotak untuk grafik header - Lukiskan lajur anda jika anda ingin menjadi tajuk tunggal di atas lajur, atau tambahkan saja di mana anda mahu.
- Tulis "Headline" di mana anda mahu tajuk H1 anda menjadi.
- Tulis "Sub-Head" di mana anda mahu H2 dan tajuk utama yang lebih rendah. Ia membantu jika anda menjadikannya berkadar - h2 lebih kecil daripada h1, h3 lebih kecil daripada h2, dan lain-lain
- Masukkan kotak untuk imej lain
- Tambah navigasi. Jika anda merancang tab, lukiskan kotak, dan tulis "navigasi" di atas. Atau letakkan senarai bullet dalam lajur yang anda mahu navigasi. Jangan tulis kandungan. Cuma tulis "navigasi" atau gunakan baris untuk mewakili teks.
- Tambah unsur tambahan ke halaman - kenalpasti apa yang mereka ada dengan teks, tetapi jangan gunakan teks kandungan sebenar. Sebagai contoh, jika anda mahu butang panggilan ke tindakan di sebelah kanan bawah, letakkan kotak di sana, dan labelkannya "panggilan untuk bertindak". Jangan tulis "Beli Sekarang!" dalam kotak itu.
Sebaik sahaja anda mempunyai wireframe mudah anda ditulis, dan ia tidak boleh membawa anda lebih daripada 15 minit untuk melukis satu, menunjukkan kepada orang lain. Tanya kepada mereka jika ada apa-apa yang hilang dan maklum balas yang lain. Berdasarkan apa yang mereka katakan, anda boleh menulis satu lagi wireframe atau menyimpan yang anda ada.
Kenapa Wireframes Kertas Paling Baik untuk Draf Pertama
Walaupun ada kemungkinan untuk membuat wireframes menggunakan program seperti Visio, untuk sesi brainstorming awal anda, anda harus melekat pada kertas. Kertas tidak seolah-olah kekal, dan ramai orang akan menganggap anda melemparkannya bersama-sama dalam masa 5 minit dan jadi tidak teragak-agak untuk memberi anda maklum balas yang baik. Tetapi apabila anda menggunakan program untuk membuat wireframe mewah dengan kuasa dua dan warna yang sempurna, anda menghadapi risiko terjebak dalam program itu sendiri dan menghabiskan berjam-jam menyempurnakan sesuatu yang tidak akan pernah berlaku secara langsung.
Kertas kerja wireframes mudah dilakukan. Dan jika anda tidak menyukainya, anda hanya merangkak kertas, membuangnya dalam kitar semula dan merampas lembaran baru.