Contoh Konsep Wireframe Pada Mebsite

BlogInformasi Teknologi

Contoh Konsep Wireframe Pada Mebsite | Warung komputer . Sebelum tahap development suatu website dimulai, tentu kita harus terlebih dahulu memiliki perancangan yang baik dan benar agar sesuai dengan target yang ingin dicapai. Perancangan suatu website tentu tidak lepas dari desain User Interface (UI) yang bertujuan merancang tampilan website. Salah satu tahap awal dalam merancang user interface adalah Wireframing.

Konsep Wireframe Pada website

Contoh Konsep Wireframe Pada Mebsite

Wireframe adalah kerangka atau coretan kasar untuk penataan item-item pada halaman website sebelum proses desain sesungguhnya dimulai. Contoh item-item yang bisa ditata diantaranya banner, header, content, footer, link, form input, dll. Biasanya proses ini ditugaskan kepada UI Designer. Untuk merancang wireframe sang UI Designer bisa menggunakan coretan tangan di kertas ataupun menggunakan tools desain khusus wireframing. Secara visual wireframe hanya berupa garis dan kotak yang mengatur tata letak elemen-elemen pada website.

Contoh Ilustrasi : Perusahaan A akan membuat sebuah website. Mereka berdiskusi apa saja konten yang akan ditaruh di halaman awal. Setelah memutuskan apa saja kontennya, mereka mulai membuat gambaran dengan pena dan spidol kira kira konten utama yang berisi produk yang sedang diskon yang ingin dipasarkan diletakan di mana dan produk tanpa diskon diletakan dimana.

Konsep Wireframe Pada website

Merancang layout

Tahap awal yang perlu dilakukan saat merancang layout untuk wireframing adalah penentuan jumlah kolom suatu website. Terdapat dua tipe layout dasar yaitu, dua kolom dan tiga kolom sesuai dengan kebutuhan konten apa saja yang ingin diberikan. Tetapi dengan perkembangan tren UI Design, layout yang dipakai tidak selalu terpaku pada dua tipe layout tersebut.

Konsep Wireframe Pada 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.

Perbedaan Wireframe dengan Mockup dan Prototype

 

Perbedaan yang mendasar dari Wireframe dan Mockup dapat dilihat dari tingkat fidelity, arti kata fidelity sendiri artinya presisi. Wireframe termasuk kedalam low fidelity sedangkan Mockup teramasuk high fidelity, keduanya masih bersifat statis. Untuk Prototype sudah bersifat dinamis sehingga dapat berinteraksi dengan user dengan cara mengklik pada interface.

Yang telah disinggung sebelumnya bahwa low fidelity adalah Design yang tingkat presisi nya masih rendah. Sering disebut sebagai wireframe dan memang bertujuan untuk menentukan tata letak. sedangkan high fidelity adalah Design yang tingkat presisinya tinggi. Sudah memiliki warna, ukuran , jarak dan bentuk elemennya juga sudah dibuat dengan tingkat presisi dan akurasi yang detail.

Konsep Wireframe Pada website

Tips

Bukan hanya pensil saja dalam pengerjaan wireframe, agar lebih indah gunakanlah stabilo dan spidol yang bertujuan memberikan tanda khsusus kepada elemen yang dirasa penting. misalnya tombol submit, tombol download, tombol login, dll.

Cukup sekian, semoga proyek website anda menjadi website yang bukan hanya baik pada sistem tetapi baikpula pada tampilan agar pengguna betah dan menjadi pelanggan setia. Jika dirasa bermanfaat bisa dibagikan kepada teman-teman agar merasakan manfaatnya.

Sumber : codepolitan

Warung Komputer menyediakan layanan Jasa Pembuatan Website, SEO, Digital Marketing dan Jasa Service Laptop/Komputer yang memiliki tenaga ahli professional dan berpengalaman.

Warung Komputer | Your Trusted IT Partner
Telpon/WhatsApp : 0811-1014-930
Email : mail@warungkomputer.co.id
Website : warungkomputer.com

Artikel Terkait

Perbedaan NFC dengan Bluetooth dan Fungsinya
Games Komputer Terbaik Tahun 2019

Leave a Reply

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

Fill out this field
Fill out this field
Please enter a valid email address.

Kategori Artikel

Archives