Apa itu wireframe dalam pembangunan web?

Develop Coding Web Design Coding Web Template

Jika anda seorang kontraktor pembinaan, anda pasti perlukan lukisan arkitek sebagai rujukan utama untuk membuat kiraan dan perancangan bagi melaksanakan kerja pembinaan.

Sama juga halnya, untuk menghasilkan rekaan sebuah laman web, rangka web atau wireframe perlu dihasilkan bagi memandu Pereka Antaramuka (User Interface designer) menghasilkan rekaan web yang benar-benar berkesan ke atas pengguna.

Wireframe adalah peta dan kompas yang akan menjadi rujukan utama kerja pembangunan rekabentuk laman web.

Bentuk wireframe adalah ringkas (simple)

Wireframe adalah sebuah rangka yang berwarna hitam dan putih dan garisan-garisan yang memberi maklumat kedudukan elemen-elemen yang akan ada dalam sebuah laman web.

Wireframe tidak mempedulikan warna, font, logo, gambar atau apa jua rekaan yang tidak berkaitan dengan struktur.

Perkataan-perkataan yang ditulis atau copywriting dalam web biasanya ditulis dengan penuh.

Elemen dalam wireframe

Berikut adalah elemen-elemen yang biasa terdapat dalam sebuah wireframe:

  1. Kedudukan logo
  2. Senarai menu
  3. Butang tindakan (Call to Action Button)
  4. Ayat Headline
  5. Ayat Sub-headline
  6. Ayat mesej bagi setiap seksyen
  7. Kedudukan elemen media seperti gambar dan video

Persoalan sebelum membina wireframe

Sebelum membina wireframe, anda perlu mengadakan perancangan strategik terlebih dahulu. Untuk itu, beberapa persoalan perlu dijawab seperti:

  1. Siapakah audien web ini?
  2. Kemanakah web ini harus membawa audien?
  3. Apakah seruan web ini?
  4. Apakah elemen yang akan menyokong seruan tersebut?
  5. Apakah prioriti setiap elemen?

Gunakan web yang sudah wujud di internet yang berada dalam kategori yang sama dengan anda untuk membuat perbandingan dan penilaian. Jika bagus, boleh dijadikan rujukan. Jika tidak bagus, boleh ditambahbaik.

Pengesahan idea (Validation)

Selepas anda menghasilkan rangka web anda, anda boleh dapatkan maklumbalas awal dari calon pengguna anda. Ini penting untuk menentukan samada rangka anda benar-benar berkesan untuk audien anda ataupun tidak.

Anda juga boleh melakukan simulasi bagaimana web itu akan berfungsi untuk menerangkan kepada audien. Ini untuk menjawab persoalan seperti, “Apa yang akan berlaku kalau saya tekan butang ini?”.

Tindakan selepas fasa wireframe

Dokumen rangka web yang sudah muktamad akan digunakan oleh jurureka antaramuka untuk memasukkan elemen warna, font, logo dan gambar yang akan memberi makna dalam aspek-aspek kretif, penjenamaan dan emosi kepada pengguna.

Total
0
Shares
Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Previous Post

Tetapan Untuk Produk Digital

Next Post

Cara Import Order WooCommerce ke EasyParcel