Berapa Banyak Wireframe yang Anda Butuhkan?  (Panduan untuk Wireframing yang Efektif)

Berapa Banyak Wireframe yang Anda Butuhkan? (Panduan untuk Wireframing yang Efektif)

Terlalu sering proyek desain situs web baru dimulai dengan sedikit wireframe yang berlebihan.

Membuat lusinan gambar rangka untuk ditampilkan kepada klien di awal proyek tidak serta merta menciptakan pemahaman yang lebih baik; itu bisa sangat luar biasa.

Seperti banyak aspek desain lainnya, wireframing adalah seni di mana, dalam banyak kasus, lebih sedikit lebih banyak.

Berikut ini adalah cara membuat wireframe lebih efektif dan panduan tentang berapa banyak wireframe yang sebenarnya Anda butuhkan (ditambah, beberapa ide tentang mana yang paling penting, dan yang mungkin bisa Anda lewatkan!)

Berapa Banyak Wireframe yang Anda Butuhkan?

Berapa banyak gambar rangka yang Anda butuhkan di awal proyek desain situs web bergantung pada ruang lingkup dan skala pembangunan.

Situs yang lebih kecil sering kali memiliki lebih sedikit gambar rangka daripada situs yang lebih besar. Tapi itu tidak selalu terjadi.

Umumnya, indikator sebenarnya dari berapa banyak gambar rangka situs web yang di-root di peta situs. Bagaimana situs web diatur? Berapa banyak tingkat halaman atau jenis halaman yang diperlukan untuk mengkomunikasikan pesan?

Lalu ada ini: Kebanyakan klien dapat “melihat” desain pada tahap wireframe. Menampilkan lusinan garis besar tidak akan berarti apa-apa bagi mereka sampai konten terisi. Jadi lebih sedikit pasti lebih banyak. Gunakan beberapa gambar rangka untuk menetapkan “aturan” organisasi dasar untuk situs bagi klien untuk membantu merasakan konsep desain.

Mulailah dengan Peta Situs dan Garis Besar Situs Web

Awal dari jawaban atas pertanyaan judul kami adalah dalam mengatur konten situs web. Ini terjadi bahkan sebelum desain mulai menyatu.

Buat sketsa peta situs dengan semua halaman dan subhalaman yang akan disertakan oleh situs web. Kategorikan mereka dengan cara yang mencatat bagaimana mereka akan diatur secara visual, dari halaman tingkat atas ke halaman sekunder hingga sub-halaman, item toko, atau posting blog.

Secara alami, Anda akan mulai melihat pengelompokan halaman tipe konten serupa yang hampir menguraikan banyak gambar rangka untuk Anda.

Pada tahap ini, Anda mungkin masih berpikir bahwa Anda memiliki selusin atau lebih gambar rangka untuk dibuat (tergantung pada situs webnya), tetapi jangan khawatir Anda dapat mempersempitnya.

Berpikir Modular

Inilah cara Anda beralih dari banyak gambar rangka menjadi beberapa – pikirkan secara modular.

Daripada menguraikan seluruh halaman proyek demi halaman, pikirkan tentang bagian modular yang dapat Anda gunakan dan gunakan kembali pada beberapa halaman. (Ini wireframing campuran-dan-cocok.)

Konsep ini tidak hanya akan membantu Anda menghemat waktu, tetapi Anda akan memiliki serangkaian bagian yang dapat direplikasi dan dapat diulang yang dapat Anda gunakan di seluruh halaman. Ini akan membantu menciptakan konsistensi dan pola dalam desain yang akan memudahkan pengguna berinteraksi dengan situs saat selesai.

Manfaat lain? Ada lebih sedikit bagi klien untuk mencoba memvisualisasikan mereka sendiri. Dengan penjelasan yang solid (dan mungkin beberapa gambar rangka dengan ketelitian tinggi), klien mungkin dapat lebih memahami konsep Anda untuk keseluruhan desain.

5 Wireframe untuk Setiap Situs Web

Jika Anda merampingkan jumlah gambar rangka yang Anda buat untuk sebuah proyek, apa sebenarnya yang perlu Anda miliki?

Mulailah dengan lima gambar rangka dasar yang akan memberikan garis besar visual yang baik dari semua yang mungkin Anda perlukan untuk organisasi situs secara keseluruhan. Ingatlah untuk memikirkan bagian-bagian modular sehingga Anda memiliki bagian-bagian yang dapat Anda padu-padankan ke dalam gambar rangka (dan halaman) untuk membangun lebih cepat dan lebih mudah.

Beranda

Gambar rangka harus menyertakan sketsa lengkap desain beranda termasuk navigasi dan footer dengan semua elemen yang diperlukan pada halaman.

Untuk beberapa klien, memiliki gambar rangka halaman beranda dengan kesetiaan tinggi adalah hal yang membantu mendorong ide ke tahap desain akhir. Pertimbangkan untuk membuat dua hingga tiga opsi hi-fi sehingga klien dapat sepenuhnya memvisualisasikan ke mana Anda akan pergi dengan proyek tersebut.

Gambar rangka ini harus menanamkan kepercayaan diri yang cukup untuk mendorong proyek ke depan dengan rencana desain yang sebenarnya – dan agak visual.

Beranda Seluler

Di saat lebih banyak pengguna mungkin mengakses situs web di ponsel daripada tidak, memiliki gambar rangka dengan fidelitas tinggi yang sama dari beranda seluler adalah penting. Setiap gambar rangka hi-fi harus menyertakan mitra seluler yang merinci bagaimana elemen akan ditumpuk ulang dan disusun ulang di layar yang lebih kecil.

Anda mungkin berpikir untuk mencatat interaksi apa pun yang berbeda – ketuk atau geser versus klik – juga untuk memastikan bahwa Anda mendapatkan fungsionalitas yang tepat.

Halaman Sekunder (Navigasi Tingkat Atas)

Apa klik pertama dari beranda? Anda akan memerlukan gambar rangka untuk jenis halaman tersebut.

Di sinilah pemikiran modular masuk. Rancang satu gambar rangka dengan semua elemen yang mungkin Anda perlukan di sini dan pikirkan untuk dapat melepaskan bagian-bagian yang tidak Anda perlukan pada halaman sekunder ini.

Ini dapat menghemat waktu dan upaya untuk mengulang gambar rangka dengan sedikit perubahan pada konten.

Kontak atau Tentang Halaman

Hampir setiap situs web memiliki halaman hubungi kami atau tentang kami. (Banyak situs web memiliki keduanya.) Rancang gambar rangka untuk salah satu dari kedua jenis halaman ini di muka karena ini bisa menjadi salah satu elemen yang paling banyak dikunjungi, dan penting, dari hampir semua situs web.

Halaman Toko atau Blog

Terakhir, pikirkan tentang tujuan situs web. Sebagian besar termasuk dalam kategori informasional atau e-commerce. Rancang wireframe untuk jenis halaman tersebut.

Terkadang gambar rangka ini mungkin menyertakan dua jenis halaman – indeks lengkap (pameran item atau postingan blog) dan halaman detail (item tunggal atau postingan blog).

Gambar rangka tambahan untuk Situs yang Lebih Besar

Beberapa desain situs web mungkin memiliki kebutuhan yang jauh lebih kompleks, membutuhkan gambar rangka tambahan. (Dan tidak apa-apa.)

Ini mungkin sesuatu yang sebenarnya bisa Anda perkenalkan nanti dalam proses desain. Mulailah dengan gambar rangka dasar yang disebutkan di bagian di atas untuk persetujuan klien terlebih dahulu dan dapatkan dalam proses desain. Kemudian lanjutkan ke gambar rangka tambahan.

Anda dapat membuat semuanya sekaligus, tetapi bagi sebagian besar klien, melihat dan mencerna beberapa gambar rangka dapat menjadi banyak hal yang harus dilakukan. Disarankan agar Anda tidak mencoba untuk mendorong seluruh situs kerangka sekaligus. (Ini dapat menyebabkan persetujuan tergesa-gesa, bahkan jika itu bukan yang mereka inginkan, dan dapat menggagalkan proyek dalam jangka panjang.)

Gambar rangka lain yang mungkin Anda sertakan:

  • Halaman layanan atau harga
  • Halaman khusus untuk elemen unik seperti reservasi, menu, galeri foto, dll.
  • Halaman peta atau lokasi
  • Halaman detail e-niaga seperti checkout atau item tambahan
  • Email buletin atau halaman pendaftaran
  • Login atau preferensi pengguna
  • Konten atau umpan buatan pengguna
  • Visualisasi atau tabel data berat

Kesimpulan

Tidak ada angka ajaib dalam hal jumlah gambar rangka yang Anda butuhkan karena proyek bisa sangat berbeda. Tetapi Anda bisa mulai dengan beberapa wireframe fungsional yang memudahkan Anda dan klien untuk memvisualisasikan proyek dan membuatnya bergerak ke arah yang benar.

Triknya adalah tidak membiarkan diri Anda terjebak dalam gulma wireframing. Sangat mudah untuk terus membuat gambar rangka; jauh lebih sulit untuk mengubah semua bagian yang berbeda itu menjadi halaman web yang fungsional.

Triknya adalah berpikir secara modular dan terorganisir dan itu akan membantu Anda membuat gambar rangka yang Anda butuhkan. Dan jangan khawatir; jika Anda membutuhkan satu gambar rangka lagi nanti, Anda harus menggunakan alat untuk menghentikannya dengan cepat.

Hit play on your imagination