{"id":19016,"date":"2023-12-11T04:12:02","date_gmt":"2023-12-11T04:12:02","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=19016"},"modified":"2023-12-11T04:13:26","modified_gmt":"2023-12-11T04:13:26","slug":"header-wesbite","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/header-wesbite","title":{"rendered":"Tips Membuat Desain Header Wesbite"},"content":{"rendered":"<p>Header website merupakan bagian navigasi website yang selalu ditempatkan di bagian atas halaman website. Header memainkan peran penting dalam desain web secara keseluruhan dari segi kualitas dan identitas merek. Bahkan desainer web secara khusus merancang desain header untuk pengembangan web, baik dari segi ukurannya, penggunaan gambar, dan interaktivitas dari header itu sendiri.<\/p>\n<p>Menurut Google, header website membantu pengguna menentukan kualitas website hanya dalam 0,5 detik.\u00a0 Jadi, jika kamu sedang membangun atau menyegarkan tampilan website, sebaiknya kamu perhatikan tips untuk membuat header website berikut ini.<\/p>\n<h2><strong>Apa itu Header Website?<\/strong><\/h2>\n<p>Header website terletak di bagian paling atas dari website. Header berfungsi sebagai area utama yang memberikan informasi penting kepada pengunjung website. Berikut beberapa elemen umum yang disertakan dalam header website:<\/p>\n<ul>\n<li>\n<h3><strong>Logo<\/strong><\/h3>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Logo perusahaan atau merek\u00a0adalah salah satu elemen utama header. Logo ini membantu mengidentifikasi website dan membangun merek kamu.<\/p>\n<ul>\n<li>\n<h3><strong>Navigasi Menu<\/strong><\/h3>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Menu navigasi, disebut juga menu utama, biasanya berisi link ke halaman utama website, seperti halaman beranda, profil perusahaan, produk atau layanan, blog, informasi kontak, dll. Menu ini memungkinkan pengunjung menjelajahi berbagai bagian website kamu dengan mudah.<\/p>\n<ul>\n<li>\n<h3><strong>Gambar Latar Belakang (Header Image)<\/strong><\/h3>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Beberapa website menampilkan gambar latar belakang besar atau\u00a0slider gambar di bagian atas header untuk menampilkan pesan visual atau promosi tertentu.<\/p>\n<ul>\n<li>\n<h3><strong>Tombol Aksi (Call-to-Action)<\/strong><\/h3>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Tombol aksi .seperti \u201cBeli Sekarang\u201d, \u201cDaftar\u201d, dan \u201cHubungi Kami\u201d sering kali ditempatkan di header untuk mendorong pengunjung mengambil tindakan tertentu.<\/p>\n<ul>\n<li>\n<h3><strong>Informasi Kontak<\/strong><\/h3>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Beberapa website menampilkan informasi kontak penting di header, seperti alamat email, nomor telepon, atau link ke halaman kontak.<\/p>\n<ul>\n<li>\n<h3><strong>Pencarian<\/strong><\/h3>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Website yang besar sering kali memiliki kotak pencarian di headernya untuk membantu pengunjung menemukan konten yang mereka cari.<\/p>\n<ul>\n<li>\n<h3><strong>Login atau Daftar<\/strong><\/h3>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Ketika sebuah website mengharuskan pengguna untuk login, link login biasanya ditempatkan di header.<\/p>\n<ul>\n<li>\n<h3><strong>Tautan Sosial Media<\/strong><\/h3>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Tautan ke profil media sosial suatu website juga sering ditempatkan di header. Hal ini memungkinkan pengunjung untuk mengikuti dan berinteraksi dengan website tersebut di platform media sosial.<\/p>\n<ul>\n<li>\n<h3><strong>Teks Deskripsi Singkat<\/strong><\/h3>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Beberapa website mungkin menyertakan teks deskripsi singkat atau slogan yang merangkum tujuan dan nilai website.<\/p>\n<h2><strong>Tips Membuat Header Website<br \/>\n<\/strong><\/h2>\n<h3><strong>1) Ukuran Header Website<\/strong><\/h3>\n<p>Pada dasarnya, terdapat tabel ukuran header website yang biasa digunakan oleh para web designer sebagai tolak ukur terbaik untuk tampilan websitenya.\u00a0Berikut ini daftarnya:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-19020 size-full\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/Screenshot_3-1.png\" alt=\"\" width=\"581\" height=\"525\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/Screenshot_3-1.png 581w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/Screenshot_3-1-400x361.png 400w\" sizes=\"auto, (max-width: 581px) 100vw, 581px\" \/><\/p>\n<p>Ada banyak ukuran header website, tapi mana yang sebaiknya digunakan? Sebenarnya tidak ada jawaban yang jelas untuk pertanyaan tersebut. Ini semua tergantung pada konsep dasar desain website secara keseluruhan dan elemen apa saja yang harus dimasukkan dalam header.<\/p>\n<p>Faktanya, desainer web sering kali kesulitan memastikan efektivitas setiap ukuran layar. Hal ini karena dua layar berukuran sama belum tentu memiliki resolusi yang sama pada perangkatnya. Tetapi, mungkin bisa dikatakan bahwa banyak desainer web sekarang memiliki standar atau paten untuk menggunakan ukuran header website 1024 x 768 piksel.<\/p>\n<h3><strong>2) Penggunaan Font<\/strong><\/h3>\n<p>Saat pengguna mengunjungi website kamu, apa yang kamu inginkan ketika mereka lihat pertama kali di header? Gambar? Kalimat? Atau keduanya sekaligus? Setiap ukuran header website memang harus memiliki keduanya.<\/p>\n<p>Jika sebagian besar konten yang\u00a0ditonjolkan adalah dari sisi teks, gunakan font yang jelas dan mudah dibaca agar tidak merusak persepsi pengguna pada pandangan pertama. Selain itu, jika header website kamu sangat besar, kamu harus menggunakan tipografi tebal dan elemen imajinatif untuk menarik perhatian pengguna.<\/p>\n<h3><strong>3) Hierarki Visual<\/strong><\/h3>\n<p>Pernahkah kamu mendengar teori pola membaca manusia saat membaca website? Pada tahun 2006, Nielsen Norman Group pertama kali merumuskan teori pola membaca berbentuk F. Pola membaca tersebut adalah ketika seseorang (pengunjung) mulai menganalisis dan membaca visual website kamu dari sudut kiri atas layar dan bergerak ke sisi kanan layar. Jika mereka tertarik dengan tampilan visual bagaian atas, mereka akan\u00a0lanjut scrolling dan baca konten websitenya dari kiri ke kanan, seperti membaca buku.<\/p>\n<p>Teori pola membaca berbentuk F berlaku untuk semua ukuran header website karena header yang menarik perhatian seseorang terdiri dari tiga elemen ini, yaitu:<\/p>\n<ul>\n<li>\n<h4><strong>Logo<\/strong><\/h4>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Pengguna akan lebih mudah mengingat suatu merek jika logonya\u00a0ditempatkan di sisi kiri header website dibandingkan jika logo ditempatkan di tengah atau sisi kanan header website. Namun, jika merek memiliki logo bulat, sebaiknya ditempatkan di tengah layar, meskipun efektivitasnya masih lebih rendah dibandingkan logo sebelah kiri.<\/p>\n<ul>\n<li>\n<h4><strong>Navigasi<\/strong><\/h4>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Terlalu banyak menu di header dapat membingungkan dan mengalihkan perhatian pengguna website. Oleh karena itu, buatlah menu di header yang dapat menampilkan seluruh konten website. Jika kamu ingin mendeskripsikan banyak konten dalam satu menu (satu topik), kamu dapat membuat menu drop-down (banyak topik). Tambahkan juga efek hover untuk memandu pengguna saat mereka menavigasi website, namun ini bersifat opsional.<\/p>\n<ul>\n<li>\n<h4><strong><strong>Call to Action (CTA)<\/strong><\/strong><\/h4>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">CTA adalah tombol interaktif yang dirancang untuk meminta pengguna website mengunjungi halaman web penting. Elemen ini biasanya digunakan oleh desainer web untuk menginstruksikan pengguna website ke halaman pembelian, kontak, dll.<\/p>\n<h3><strong>4) Fixed\/Sticky Header<\/strong><\/h3>\n<p>Sticky header adalah desain navigasi header yang \u201cmenempel\u201d di bagian atas layar website. Header jenis ini muncul setiap kali pengunjung menelusuri website.\u00a0Sticky header sangat bagus untuk website e-commerce agar keranjang belanja tetap terlihat sehingga memudahkan kontrol pengguna.. Namun, hal ini tidak menghalangi semua jenis website untuk menerapkan sticky header, selama header website tersebut tidak terlalu besar.<\/p>\n<h3><strong>5) Gambar\/Image yang Relevan Dengan Website<\/strong><\/h3>\n<p>Bagi kamu yang menerapkan ukuran header website menyerupai landing page, gambar di header harus menyampaikan informasi secara langsung tentang tujuan bisnis kamu. Misalnya, jika bisnis kamu adalah layanan pesan-antar makanan maka buatlah tampilan awal website kamu dengan gambar kurir yang mengantarkan bahan makanan. Dengan demikian, setelah mengunjungi website kamu kemungkinan besar pengunjung website akan membeli sesuatu melalui layanan yang kamu tawarkan.<\/p>\n<p>Untuk membuat gambar header terlihat lebih menarik, sebaiknya gunakan:<\/p>\n<ul>\n<li>\n<h4><strong>Foto Berkualitas Tinggi<\/strong><\/h4>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Fotografi\u00a0adalah senjata ampuh bagi\u00a0web designer untuk menceritakan kisah, membangkitkan emosi, dan memotivasi pengguna untuk terus menggunakan website. Tips untuk website yang menggunakan gambar mencolok, cobalah desain header yang lebih transparan untuk menampilkan gambar dengan tetap mempertahankan menu utama website.<\/p>\n<ul>\n<li>\n<h4><strong>Sliding images<\/strong><\/h4>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Jika kamu memiliki banyak foto untuk mewakili bisnis kamu, tetapi bingung mana yang harus dipilih untuk header website. Jangan khawatir, cobalah buat\u00a0image slideshow atau lebih dikenal dengan carousel. Sebab cara ini sangat efektif bila ingin menampilkan banyak gambar satu demi satu untuk menarik perhatian pengguna.<\/p>\n<ul>\n<li>\n<h4><strong>Ilustrasi<\/strong><\/h4>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px\">Gambar header tidak harus menampilkan gambar dunia nyata. Kamu juga bisa membuat dan menggunakan ilustrasi apa pun sesuai dengan kreativitas\u00a0dan\u00a0tema website kamu. Jika kamu ingin menggunakan prinsip carousel sekaligus ilustrasi, sebaiknya hindari menggunakan terlalu banyak gambar dalam satu carousel karena ini akan mempengaruhi kinerja page load website.<\/p>\n<h3><strong>6) Muatan Pesan yang Ingin Disampaikan<\/strong><\/h3>\n<p>Sebelum mendesain header, pertimbangkan gaya situs web kamu secara keseluruhan dan tujuan utamanya. Misalnya, untuk website promosi pengenalan produk, desain header dapat menyertakan link ke bagian yang memiliki tujuan utama promosi produk. Kemudian dapat menggabungkannya dengan\u00a0hero image besar di layar pertama untuk menampilkan produk secara efektif.<\/p>\n<p>Beberapa kemungkinan tujuan penggunaan konten pesan yang termuat dalam header website, yaitu:<\/p>\n<ul>\n<li>Mendorong pengguna untuk melakukan sesuatu yang berkaitan dengan tujuan marketing website.<\/li>\n<li>Berusaha membangun kepercayaan pengguna terhadap suatu produk.<\/li>\n<li>Mendorong pengguna untuk tahu lebih banyak informasi dari website.<\/li>\n<li>Membuat konten website lebih menarik.<\/li>\n<\/ul>\n<h3><strong>7) Gunakan Video atau Animasi<\/strong><\/h3>\n<p>Selain gambar,kamu juga bisa menambahkan video dan animasi ke header berukuran besar. Hal ini dikarenakan, video yang berisi objek bergerak cenderung lebih menarik perhatian dibandingkan gambar diam. Faktanya, menambahkan video ke header adalah strategi pemasaran website yang paling efisien. Banyak situs web menggunakan ini untuk memikat audiens sambil\u00a0mempresentasikan perusahaan atau produk mereka dengan cara terbaik.<\/p>\n<p>Selain itu, coba gunakan animasi pada header website berukuran sedang hingga besar. Hal ini dikarenakan, animasi dapat membuat header website terlihat lebih keren dan modern. Animasi juga membuat website lebih interaktif\u00a0sehingga pengguna merasa dilibatkan dalam website.<\/p>\n<h3><strong>8) Call to Action Sebagai Fokus Utama<\/strong><\/h3>\n<p>Penambahkan elemen CTA seperti \u201clogin\u201d, \u201csign in\u201d,\u00a0\u201cget in touch\u201d dan lain semacamnya akan membuat header akan semakin tampil maksimal. Menempatkan elemen CTA pada ukuran header website tertentu merupakan peluang besar dalam strategi bisnis untuk memberikan layanan yang ditawarkan.<\/p>\n<p>Jika kamu berencana membuat header dengan CTA, sebaiknya gunakan latar belakang sederhana tanpa teks atau gambar yang mencolok. Hal ini memastikan bahwa elemen CTA tidak kalah dengan konten di sekitarnya sehingga memungkinkan pengguna untuk lebih fokus pada CTA. Selain itu, tombol CTA harus berisi teks yang dapat dipahami pengguna dan selaras dengan sasaran bisnis kamu.<\/p>\n<h3><strong>9) Desain Sederhana<\/strong><\/h3>\n<p>Dengan menjaga header kamu tetap baik dan rapi, pengguna website akan merasa terbebas dari beban melihat penawaran yang mungkin belum tentu mereka gunakan. Bahkan kamu bisa menyajikan bentuk dan ukuran header website secara kreatif walaupun memiliki tampilan yang sangat sederhana.<\/p>\n<h3><strong>10) Hidden Navigation<\/strong><\/h3>\n<p>Hidden navigation mengacu pada penggunaan menu hamburger di header website, yang biasanya berukuran kecil. Banyak desainer web menggunakan\u00a0Hidden navigation sebagai solusi ketika mereka perlu fokus pada layar utama. Menu hamburger membuat header terlihat lebih minimalis dan terkesan praktis karena tidak mencantumkan menu secara horizontal (memanjang) seperti kebanyakan website.<\/p>\n<p>Nah, itulah beberapa tips membuat desain header wesbite. Semoga bermanfaat!<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-right kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;right&quot;,&quot;id&quot;:&quot;19016&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;1&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;0&quot;,&quot;greet&quot;:&quot;Jadilah yang pertama untuk memberi nilai&quot;,&quot;legend&quot;:&quot;5\\\/5 - (1 vote)&quot;,&quot;size&quot;:&quot;22&quot;,&quot;title&quot;:&quot;Tips Membuat Desain Header Wesbite&quot;,&quot;width&quot;:&quot;110&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 110px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 17.6px;\">\n            5\/5 - (1 vote)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Header website merupakan bagian navigasi website yang selalu ditempatkan di bagian atas halaman website. Header memainkan peran penting dalam desain web secara keseluruhan dari segi kualitas dan identitas merek. Bahkan desainer web secara khusus merancang desain header untuk pengembangan web, baik dari segi ukurannya, penggunaan gambar, dan interaktivitas dari header itu sendiri. Menurut Google, header [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":19021,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[],"rop_publish_now_status":"pending","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[3],"tags":[7881,7882],"class_list":["post-19016","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-header-wesbite","tag-tips-membuat-header-website"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/header-website-1140x445.png",1140,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/header-website-463x348.png",463,348,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/header-website-300x169.png",300,169,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/header-website.png",1366,768,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tips Membuat Desain Header Wesbite - Hosteko Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hosteko.com\/blog\/header-wesbite\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tips Membuat Desain Header Wesbite - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"Header website merupakan bagian navigasi website yang selalu ditempatkan di bagian atas halaman website. Header memainkan peran penting dalam desain web secara keseluruhan dari segi kualitas dan identitas merek. Bahkan desainer web secara khusus merancang desain header untuk pengembangan web, baik dari segi ukurannya, penggunaan gambar, dan interaktivitas dari header itu sendiri. Menurut Google, header [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/header-wesbite\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-11T04:12:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-11T04:13:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/header-website.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Dwi H\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dwi H\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/header-wesbite#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/header-wesbite\"},\"author\":{\"name\":\"Dwi H\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/f70006239545aaece294daf39a3ce979\"},\"headline\":\"Tips Membuat Desain Header Wesbite\",\"datePublished\":\"2023-12-11T04:12:02+00:00\",\"dateModified\":\"2023-12-11T04:13:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/header-wesbite\"},\"wordCount\":1434,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/header-wesbite#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/header-website.png\",\"keywords\":[\"Header Wesbite\",\"Tips Membuat Header Website\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/header-wesbite#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/header-wesbite\",\"url\":\"https:\/\/hosteko.com\/blog\/header-wesbite\",\"name\":\"Tips Membuat Desain Header Wesbite - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/header-wesbite#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/header-wesbite#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/header-website.png\",\"datePublished\":\"2023-12-11T04:12:02+00:00\",\"dateModified\":\"2023-12-11T04:13:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/header-wesbite#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/header-wesbite\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/header-wesbite#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/header-website.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/header-website.png\",\"width\":1366,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/header-wesbite#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tips Membuat Desain Header Wesbite\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita &amp; Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/f70006239545aaece294daf39a3ce979\",\"name\":\"Dwi H\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60b90505d1564b8ba545efb7a3d2153585f14759dc86b9180ba2fbf5d8805ff2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60b90505d1564b8ba545efb7a3d2153585f14759dc86b9180ba2fbf5d8805ff2?s=96&d=mm&r=g\",\"caption\":\"Dwi H\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tips Membuat Desain Header Wesbite - Hosteko Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hosteko.com\/blog\/header-wesbite","og_locale":"en_US","og_type":"article","og_title":"Tips Membuat Desain Header Wesbite - Hosteko Blog","og_description":"Header website merupakan bagian navigasi website yang selalu ditempatkan di bagian atas halaman website. Header memainkan peran penting dalam desain web secara keseluruhan dari segi kualitas dan identitas merek. Bahkan desainer web secara khusus merancang desain header untuk pengembangan web, baik dari segi ukurannya, penggunaan gambar, dan interaktivitas dari header itu sendiri. Menurut Google, header [&hellip;]","og_url":"https:\/\/hosteko.com\/blog\/header-wesbite","og_site_name":"Hosteko Blog","article_published_time":"2023-12-11T04:12:02+00:00","article_modified_time":"2023-12-11T04:13:26+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/header-website.png","type":"image\/png"}],"author":"Dwi H","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Dwi H","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/header-wesbite#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/header-wesbite"},"author":{"name":"Dwi H","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/f70006239545aaece294daf39a3ce979"},"headline":"Tips Membuat Desain Header Wesbite","datePublished":"2023-12-11T04:12:02+00:00","dateModified":"2023-12-11T04:13:26+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/header-wesbite"},"wordCount":1434,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/header-wesbite#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/header-website.png","keywords":["Header Wesbite","Tips Membuat Header Website"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/header-wesbite#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/header-wesbite","url":"https:\/\/hosteko.com\/blog\/header-wesbite","name":"Tips Membuat Desain Header Wesbite - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/header-wesbite#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/header-wesbite#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/header-website.png","datePublished":"2023-12-11T04:12:02+00:00","dateModified":"2023-12-11T04:13:26+00:00","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/header-wesbite#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/header-wesbite"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/header-wesbite#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/header-website.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/header-website.png","width":1366,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/header-wesbite#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Tips Membuat Desain Header Wesbite"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita &amp; Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/f70006239545aaece294daf39a3ce979","name":"Dwi H","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60b90505d1564b8ba545efb7a3d2153585f14759dc86b9180ba2fbf5d8805ff2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60b90505d1564b8ba545efb7a3d2153585f14759dc86b9180ba2fbf5d8805ff2?s=96&d=mm&r=g","caption":"Dwi H"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2023\/12\/header-website.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/19016","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=19016"}],"version-history":[{"count":4,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/19016\/revisions"}],"predecessor-version":[{"id":19024,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/19016\/revisions\/19024"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/19021"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=19016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=19016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=19016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}