Rifqi Al Hanif S

Desain dan Pemrograman Web

Perancangan Desain Web Bisnis (Wireframe & Mockup)

Halo Smart Human pada kesempatan kali ini kita akan membahas tentang perancangan desain web bisnis. Sebelumnya sudah pada tau belum pembahasan kali ini. Jika belum mari simak pembahasannya jangan sampai ketinggalan ya!

Wireframe

Sebuah wireframe adalah struktur dasar dari sebuah website. Dalam tahap pengembangan, wireframe dapat menetapkan fungsi (sliders, tabs, dan lainnya) tanpa warna atau desain apapun, hanya structural guidelinesnya saja. Wireframing merupakan tahap yang penting dalam proses perancangan. Wireframe memungkinkan untuk mendefinisikan information hierarchy dari desain, sehingga memudahkan kita dalam perencanaan layout sesuai dengan rencana kita tentang bagaimana user dapat memproses informasi. Wireframe membantu kita untuk mengorganisir dan menyederhanakan elemen dan isi di dalam website.

Berikut adalah beberapa kelebihan wireframe:

  1. Menggambarkan layout umum dari website atau aplikasi
  2. Membangun kepercayaan dengan user dan stakeholders
  3. Menghemat biaya dan waktu
  4. Memberikan tampilan awal dari website (atau desain ulang)
  5. Menginspirasi desainer
  6. Memberikan gambaran jelas dari elemen tentang bagaimana developer akan melakukan coding
  7. Memudahkan pengadaptasian dan memperlihatkan layout dari banyak bagian dari website.

Manfaat Wireframe

Dengan adanya wireframe, web developer sangatlah terbantu pada pekerjaan mereka agar dalam proses pengembangan dapat terstruktur dan terarah. bayangkan bila tidak menggunakan wireframe terlebih dahulu mungkin saja dalam proses pengembangan sering terajadi revisi/perbaikan yang sangat memperlambat pekerjaan.

Elemen Wireframe

1. Desain Informasi

Pada elemen ini biasanya bersumber dari hasil riset apa saja konten atau informasi yang ingin disampaikan, yang dapat diilustrasikan sebagaimana pada saat presentasi di sekolah atau kampus, haruslah memiliki informasi yang terpercaya. Contohnya form input, thumbnail, gambar, link, paragraf, dll.

2. Navigasi

User interface tentu haruslah memiliki tampilan yang mudah digunakan, salah satu hal penting dalam website adalah navigasi. Diibaratkan navigasi adalah kompas yang berguna untuk memberikan petunjuk bagi pengguna agar tidak membingungkan, jika hal itu terjadi kemungkinan besar pengguna akan meng-close halaman website yang telah dibangun. Manfaat dengan adanya navigasi terlihat profesional karena lebih rapih konten

3. Desain Interface

Pada bagian ini dimana proses diseleksi dan penempatan elemen misalnya tombol, link, judul, text-align, font-size, dll. Yang bertujuan sebagai media bagi pengguna dalam berinteraksi dengan tampilan.

Mockup

Salah satu kebutuhan yang penting di dalam penyampaian informasi adalah mock up desain website. Mock up merupakan ujung tombak pada presentasi desain. Adanya mockup desain website ini diperlukan guna meyakinkan Anda ketika akan membuat website dengan desain custom. Melalui mock up, Anda dapat melihat visualisasi calon website Anda secara nyata sehingga Anda dapat memberikan masukan kepada desainer jika tampilan mock up dirasa belum sesuai dengan permintaan sebelumnya. Oleh karena itu, tak heran jika mock up merupakan bagian penting dari pembuatan website dengan desain custom.

Mock up selain disebut sebagai visualisasi sebuah konsep desain, bisa juga disebut sebagai gambaran nyata rancangan produk, atau preview sebuah ide yang terlihat seperti wujud aslinya. Anda bisa melihat seperti apa preview dari rancangan halaman web yang akan dibuat. Hal ini akan persis seperti aslinya, hanya saja masih belum memakai aplikasi web dan ini dalam bentuk layout.

Berikut adalah beberapa kelebihan mockup:

  1. Mengorganisir detail dari proyek
  2. Menemukan error
  3. Menterjemahkan ide ke dalam bahasa yang dapat dimengerti stakeholders
  4. Menyampaikan ide kepada anggota tim
  5. Implementasi desain
  6. Perspektif user

Nah hanya itu yang bisa saya sampaikan semoga bermanfaat bagi yang membaca. Terima kasih





Have any Question or Comment?

Leave a Reply

Your email address will not be published. Required fields are marked *