KERANGKA WEBSITE
Kerangka Web
Pengertian
Layout atau susunan kerangka website adalah salah satu unsur pembuatan web yang harus paling di perhatikan.
Bagian Kerangka Web
- Header: sebuah website biasanya di letakkan judul website, dan deskripsi sebuah website tersebut.
- Sidebar: biasanya di letakkan link-link yang mengarah pada artikel-artikel. Baik itu artikel terbaru dan artikel paling populer.
- Konten: berisi konten-konten website seperti artikel dan lainnya.
- Footer: bagian paling bawah yang biasanya berisi nama website dan copyrigt website tersebut.
Rancangan
Tata Letak Website
Struktur situs pengguna memberikan sketsa kerangka dari situs yang membantu untuk mengetahui jumlah kolom yang dibutuhkan. Dimulai dari membuat daftar item yang akan membentuk tata letak situs dan halaman arahan. Hal tersebut penting karena hal tersebut merupakan tempat pertama yang kemungkinan akan dikunjungi oleh pengunjung situs.
Beranda/Halaman Mendarat
Laman pendaratan adalah hal yang akan digunakan pengguna untuk menentukan apakah mereka perlu menghabiskan lebih banyak waktu di situs tersebut atau tidak. Sehingga penting memperhatikan tata letak yang sangat membantu dalam memudahkan navigasi pengguna.
Lipatan atas pada kerangka situs
- Logo
- Judul Utama
- Sub-judul
- Bar Navigasi
- CTA Utama (Call To Action)
Subkategori item-item ini, misalnya, kategorikan logo di bawah nav bar. Tambahkan gambar atau sematkan video tergantung pada industri Anda.
Di Bawah Lipatan kerangka situs
- Acara
- Artikel Blog
- Indikator Kepercayaan
- Liputan Pers
- Informasi Lokasi
- Manfaat fitur
Fitur yang disediakan untuk membantu pengunjung situs
- Blog
- Forum
- Galeri
- Keamanan
- Komentar
Hal yang perlu diperhatikan
Ukuran Header Website
Pada dasarnya, terdapat tabel rincian ukuran header website yang biasanya web designer gunakan sebagai patokan mana yang terbaik untuk tampilan website. Berikut ini daftarnya. Ukuran pada header tergantung pada tiap konsep dasar desain keseluruhan website dan elemen apa saja yang perlu ada dalam header. Bahkan dalam banyak kasus, web designer kesulitan untuk memastikan keefektifan setiap ukuran layar. Hal ini dikarenakan adanya kemungkinan jika dua layar berukuran sama, belum tentu resolusi perangkatnya sama. Tapi, web designer berpatokan atau paten menggunakan ukuran header website 1024 x 768 piksel.
Penggunaan Font
Pada tampilan headernya, sebagian besar konten yang ditonjolkan adalah dari sisi teks. Tapi, bukan sembarang teks karena mereka menggunakan font yang jelas dan mudah dibaca sehingga tidak merusak persepsi pengguna pada pandangan pertama, yaitu goals dari Baianat. Selain itu, sebaiknya kamu gunakan beberapa tipografi tebal dan elemen imajinatif untuk menarik perhatian pengguna apabila ukuran header website kamu cukup besar.
- Header: sebuah website biasanya di letakkan judul website, dan deskripsi sebuah website tersebut.
- Sidebar: biasanya di letakkan link-link yang mengarah pada artikel-artikel. Baik itu artikel terbaru dan artikel paling populer.
- Konten: berisi konten-konten website seperti artikel dan lainnya.
- Footer: bagian paling bawah yang biasanya berisi nama website dan copyrigt website tersebut.
Rancangan
Tata Letak Website
Struktur situs pengguna memberikan sketsa kerangka dari situs yang membantu untuk mengetahui jumlah kolom yang dibutuhkan. Dimulai dari membuat daftar item yang akan membentuk tata letak situs dan halaman arahan. Hal tersebut penting karena hal tersebut merupakan tempat pertama yang kemungkinan akan dikunjungi oleh pengunjung situs.
Beranda/Halaman Mendarat
Laman pendaratan adalah hal yang akan digunakan pengguna untuk menentukan apakah mereka perlu menghabiskan lebih banyak waktu di situs tersebut atau tidak. Sehingga penting memperhatikan tata letak yang sangat membantu dalam memudahkan navigasi pengguna.
Lipatan atas pada kerangka situs
- Logo
- Judul Utama
- Sub-judul
- Bar Navigasi
- CTA Utama (Call To Action)
Subkategori item-item ini, misalnya, kategorikan logo di bawah nav bar. Tambahkan gambar atau sematkan video tergantung pada industri Anda.
Di Bawah Lipatan kerangka situs
- Acara
- Artikel Blog
- Indikator Kepercayaan
- Liputan Pers
- Informasi Lokasi
- Manfaat fitur
Fitur yang disediakan untuk membantu pengunjung situs
- Blog
- Forum
- Galeri
- Keamanan
- Komentar
Hal yang perlu diperhatikan
Ukuran Header Website
Bahkan dalam banyak kasus, web designer kesulitan untuk memastikan keefektifan setiap ukuran layar. Hal ini dikarenakan adanya kemungkinan jika dua layar berukuran sama, belum tentu resolusi perangkatnya sama. Tapi, web designer berpatokan atau paten menggunakan ukuran header website 1024 x 768 piksel.
Penggunaan Font
Pada tampilan headernya, sebagian besar konten yang ditonjolkan adalah dari sisi teks. Tapi, bukan sembarang teks karena mereka menggunakan font yang jelas dan mudah dibaca sehingga tidak merusak persepsi pengguna pada pandangan pertama, yaitu goals dari Baianat. Selain itu, sebaiknya kamu gunakan beberapa tipografi tebal dan elemen imajinatif untuk menarik perhatian pengguna apabila ukuran header website kamu cukup besar.
Hierarki Visual
Pada tahun 2006, Nielsen Norman Group pertama kali merumuskan teori mereka tentang pola membaca berbentuk F, yang dimaksud adalah seseorang akan mulai menganalisis sekaligus membaca visual website mulai dari pojok kiri atas layar dan berjalan ke kanan layar.
Jika mereka tertarik dengan tampilan visual bagian atas, mereka akan lanjut scrolling website dan membaca konten website dari kiri ke kanan, seperti membaca buku pada umumnya.
Elemen yang menarik
Logo
Pengguna akan lebih mudah mengingat citra merek-merek yang logonya diletakkan di sebelah kiri header website daripada logo yang diletakkan di bagian tengah atau kanan header website. Namun, jika brand pengguna memiliki logo berbentuk bulat, maka sebaiknya letakkan di tengah layar. Meskipun efektivitasnya masih lebih rendah dibandingkan dengan logo yang berada di sebelah kiri.
Navigasi
Header dengan banyak menu akan membuat pengguna website mudah bingung dan mudah terdistraksi. Maka dari itu, sebisa mungkin buat menu pada header yang bisa mewakili keseluruhan konten website. Jika dalam satu menu (satu topik) menjelaskan banyak konten, maka kamu bisa buat menu dropdown (banyak topik). Bila perlu, tambahkan pula efek hover untuk memandu pengguna saat mereka menavigasi website.Call to Action
Elemen Call to Action atau lebih dikenal dengan singkatan CTA adalah semacam tombol interaktif yang bertujuan mendorong pengguna website untuk mengakses halaman web yang penting untuk mereka ketahui. Elemen ini biasanya dimanfaatkan web designer untuk mengarahkan pengguna website ke halaman pembelian, kontak, dan lain-lain. Pengguna bisa lihat website milik Slack yang menerapkan prinsip hierarki visual ini dengan menarik dan sempurna. Logo di sebelah kiri, navigasi yang beragam tapi sangat tertata, dan elemen CTA dengan ukuran proporsional yang tersusun dalam bentuk dan ukuran header website yang pas. Apalagi interface yang Slack terapkan bersifat clean design dengan unsur-unsur desain yang eye catching seperti featured image, font sans serif yang keren, dan pemilihan warna netral membuat website lebih mudah menonjolkan konten utama.
Fixed/Sticky Header
Navigasi bar persistent (tetap) atau lebih dikenal dengan sebutan sticky header adalah desain navigasi header yang “menempel” di atas layar website. Header jenis ini akan mengikuti setiap kamu scrolling website. Sticky header akan sangat cocok bagi website e-commerce untuk terus menampilkan shopping cart yang memudahkan kontrol pengguna. Namun tak menutup kemungkinan website jenis apapun menerapkan sticky header, asalkan ukuran header website tidak terlalu besar. Seperti yang bisa kamu lihat, website blog milik DomaiNesia ini sudah menerapkan sticky header dan tak menghilangkan elemen navigasi apa pun. Cara membuatnya pun cukup mudah, kamu bisa gunakan plugin atau builder elementor yang biasanya tersedia dalam WordPress dan platform web builder lain.
Gambar/Image yang Relevan Dengan Website
Tips ini berguna bagi kamu yang menerapkan ukuran header website menyerupai landing page. Gambar pada header harus langsung menyampaikan informasi tentang tujuan bisnis. Misalnya, jika bisnisnya adalah layanan pengiriman makanan, maka buatlah tampilan awal website, misalnya, dengan gambar kurir yang membawa makanan. Dengan begitu, kemungkinan besar pengunjung website ingin membeli sesuatu menggunakan layanan yang ditawarkan setelah melihat website.
Sumber Informasi :
10+ Tips Membuat dan Contoh Desain Header Website - DomaiNesia
Apa yang Harus Dimasukkan dalam Kerangka Situs Web (dengan Template Gratis) - SEOptimer
Elemen yang menarik
Logo
Pengguna akan lebih mudah mengingat citra merek-merek yang logonya diletakkan di sebelah kiri header website daripada logo yang diletakkan di bagian tengah atau kanan header website. Namun, jika brand pengguna memiliki logo berbentuk bulat, maka sebaiknya letakkan di tengah layar. Meskipun efektivitasnya masih lebih rendah dibandingkan dengan logo yang berada di sebelah kiri.
Navigasi
Call to Action
Elemen Call to Action atau lebih dikenal dengan singkatan CTA adalah semacam tombol interaktif yang bertujuan mendorong pengguna website untuk mengakses halaman web yang penting untuk mereka ketahui. Elemen ini biasanya dimanfaatkan web designer untuk mengarahkan pengguna website ke halaman pembelian, kontak, dan lain-lain. Pengguna bisa lihat website milik Slack yang menerapkan prinsip hierarki visual ini dengan menarik dan sempurna. Logo di sebelah kiri, navigasi yang beragam tapi sangat tertata, dan elemen CTA dengan ukuran proporsional yang tersusun dalam bentuk dan ukuran header website yang pas. Apalagi interface yang Slack terapkan bersifat clean design dengan unsur-unsur desain yang eye catching seperti featured image, font sans serif yang keren, dan pemilihan warna netral membuat website lebih mudah menonjolkan konten utama.
Fixed/Sticky Header
Navigasi bar persistent (tetap) atau lebih dikenal dengan sebutan sticky header adalah desain navigasi header yang “menempel” di atas layar website. Header jenis ini akan mengikuti setiap kamu scrolling website. Sticky header akan sangat cocok bagi website e-commerce untuk terus menampilkan shopping cart yang memudahkan kontrol pengguna. Namun tak menutup kemungkinan website jenis apapun menerapkan sticky header, asalkan ukuran header website tidak terlalu besar. Seperti yang bisa kamu lihat, website blog milik DomaiNesia ini sudah menerapkan sticky header dan tak menghilangkan elemen navigasi apa pun. Cara membuatnya pun cukup mudah, kamu bisa gunakan plugin atau builder elementor yang biasanya tersedia dalam WordPress dan platform web builder lain.
Gambar/Image yang Relevan Dengan Website
Tips ini berguna bagi kamu yang menerapkan ukuran header website menyerupai landing page. Gambar pada header harus langsung menyampaikan informasi tentang tujuan bisnis. Misalnya, jika bisnisnya adalah layanan pengiriman makanan, maka buatlah tampilan awal website, misalnya, dengan gambar kurir yang membawa makanan. Dengan begitu, kemungkinan besar pengunjung website ingin membeli sesuatu menggunakan layanan yang ditawarkan setelah melihat website.
Sumber Informasi :
Apa yang Harus Dimasukkan dalam Kerangka Situs Web (dengan Template Gratis) - SEOptimer
Comments
Post a Comment