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 |
![]() |
sketch wireframe 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!
Selamat pagi ms , saya mau tanya anda desain webnya menggunakan aplikasi apa manual ms . terima kasih
ReplyDelete