Pemahaman Dasar Struktur dan Layout Dalam Mendesain Website

Hi designer, khusus buat kalian yang ingin mencoba mendesain sebuah website, ada baiknya membaca tutorial saya kali ini mengenai pemahaman dasar struktur dan layout dalam mendesain sebuah website. Hal mendasar yang perlu kalian ketahui agar tidak terjadi kesalahan atau gagalnya menyelesaikan desain website kamu.

Selain itu, ketika kamu mencoba mengikuti kontes website di 99designs, sebuah konsep sudah harus kamu persiapkan, mulai dari site structure hingga layoutnya, lakukan skecth wireframe juga penting. Jangan lupa baca baik-baik brief kontesnya mulai dari arahan awal hingga inspirasi websitenya.

Pemahaman Dasar Struktur dan Layout Dalam Mendesain Website

Kebanyakan sebuah website itu memiliki struktur sederhana yakni homepage atau halaman utama, section utama dan sub section serta section lainnya. Struktur tersebut jika digabungkan menjadi satu akan menjadi website yang berstruktur kuat dan saling berhubungan. Sebenarnya tujuan struktur website tidak lain tergantung dari tujuan untuk siapakah website tersebut dikunjungi, hal menarik apa saja yang ada di website dan langkah apa bagi pemilik website untuk bisa menarik peminat pengunjung. Jadi sebelum membuat sebuah website, anda harus pikirkan tujuan target utamanya yakni pengunjung dan pada akhirnya terjadi keterikatan kedua belah pihak, contohnya tercipta penjualan jika pada website online shop.

sketch wireframe website

Nah, dari pemahaman sederhana sebuah struktur website diatas, anda akan jadi paham maksudnya. Selanjutnya kita memasuki penjelasan mengani layout atau tampilan dalam mendesain website. Layout yang saya jelaskan disini adalah poin sederhana namun sangat penting untuk membangun sebuah website. Layout yang umum digunakan dan tidak terlalu kompleks. Sering saya pakai dalam mengkonsep sebuah website di kontes 99designs. Berikut ini saya jelaskan sedikit perinciannya tentang 6 struktur layout website.

Header

Ini merupakan bagian paling awal dalam membuat website, tanpa header atau bagian teratas sebuah website terkesan kehilangan bagian tubuhnya, seperti manusia jika tidak ada kepalanya tampak aneh. Dengan adanya section header ini kita bisa menampilkan logo, tagline, top navigation, top search bar dan sebagainya. Sesuaikan warna background pada bagian ini menggunakan warna solid atau bersih agar logo tidak terkesan gelap.

Main Navigation

Menu utama seperti link link antar sub page bisa ditaruh pada bagian ini, fungsinya agar memudahkan pengunjung untuk berpindah halaman atau link lain dalam website. Banyak jenis style main navigation bisa dipakai, namun sekarang pada desain responsive website, style main navigation ini lebih kearah simple atau sederhana. Tidak seperti gaya desain website jaman dulu yang memiliki tombol tombol bundar pada menu navigasinya.


Hero / Slide Image

Tempat dimana menampilkan gambar background utama yang besar, berukuran besar, bisa juga digunakan untuk slide show. Memiliki Judul dan tagline deskripsi website serta tombol ke halaman lain seperti tombol read more atau learn more button.

Main Content

Menampilkan isi dari konten website, bisa memasukkan deskripsi website seperti about us, short company profile dan sebagainya. Main konten tidak hanya itu saja, kadang beberapa ringkasan pendek dari halaman lain bisa dipasangkan pada bagian ini untuk mempermanis juga menambah bobot konten website agar semakin kaya isi dan lengkap.

Sub Content

Perkembangan dari main content, saya sering menambahkan bagian-bagian dari halaman lain kedalam sub content ini, contohnya adalah sidebar, form kontak, fitur product service, news/berita, twitter feed, testimonials, partner logo, dan banyak lagi. Intinya adalah menambahkan kekurangan dari layout main content.

Footer

Bagian penutup sebuah website terletak pada section footer. Ini umumnya diberikan lagi sub navigation, link social media, logo website, alamat kontak website, serta teks copyrights.

Nah sobat designer, itulah sedikit penjelasan dari saya untuk artikel kali ini, semoga dengan Pemahaman Dasar Struktur dan Layout Dalam Mendesain Website, pengerjaan sobat jadi semakin tertata rapi dan hasil desain profesional tentunya. Sampai ketemu di edisi tutorial saya lainnya. SemangART!