{"id":704,"date":"2020-01-13T13:00:49","date_gmt":"2020-01-13T06:00:49","guid":{"rendered":"http:\/\/blog.kampungmarketer.com\/?p=704"},"modified":"2022-02-08T13:23:33","modified_gmt":"2022-02-08T06:23:33","slug":"white-space","status":"publish","type":"post","link":"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/","title":{"rendered":"Apa Itu White Space dan Penerapannya dalam Landing Page"},"content":{"rendered":"\n<p>Apa itu white space ? Bagaimana white space di dalam landing page bisa meningkatkan konversi? White space memberi ruang bernafas sehingga landing page bisa lebih hidup? Lebih dari itu! Akan kita bahas disini.<\/p>\n\n\n\n<p>Saya sering mengalami waktu dimana saya sepertinya tidak bisa menyelesaikan pekerjaan. Rekan kerja yang mengganggu, terlalu banyak kebisingan, email masuk sampai pesan whatsapp yang konstan bisa membuat semua pekerjaan tidak selesai. Karena satu dan lain alasan, sulit untuk fokus dan saya merasa sangat tidak produktif. Apakah Anda juga pernah mengalaminya?<\/p>\n\n\n\n<p>Seperti kebanyakan orang yang bisa melakukan yang terbaik ketika mereka sendiran di tempat yang sunyi, hal yang sama berlaku juga untuk landing page. Terutama pada tombol CTA, penting untuk membuat CTA yang jelas tanpa ada gangguan dari elemen lain. Hanya ada ruang kosong, empty space &#8211; white space.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_49 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">Daftar Isi<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"ez-toc-toggle-icon-1\"><label for=\"item-6a0747faa0dfc\" aria-label=\"Table of Content\"><span style=\"display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;direction:ltr;\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/label><input  type=\"checkbox\" id=\"item-6a0747faa0dfc\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-visibility-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#Apa_itu_White_Space\" title=\"Apa itu White Space ?\">Apa itu White Space ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#Psikologi_di_balik_desain_white_space\" title=\"Psikologi di balik desain white space\">Psikologi di balik desain white space<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#Penggunaan_white_space_yang_buruk\" title=\"Penggunaan white space yang buruk\">Penggunaan white space yang buruk<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#Elemen_yang_bisa_dioptimalkan_dengan_white_space\" title=\"Elemen yang bisa dioptimalkan dengan white space\">Elemen yang bisa dioptimalkan dengan white space<\/a><ul class='ez-toc-list-level-4'><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#Headline\" title=\"Headline\">Headline<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#Produk\" title=\"Produk\">Produk<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#Countdown\" title=\"Countdown\">Countdown<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#Formulir\" title=\"Formulir\">Formulir<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#Tombol\" title=\"Tombol\">Tombol<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#Layanan_perusahaan\" title=\"Layanan perusahaan\">Layanan perusahaan<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#Testimoni\" title=\"Testimoni\">Testimoni<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#Logo_perusahaan_klien\" title=\"Logo perusahaan klien\">Logo perusahaan klien<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#Tips_untuk_Anda\" title=\"Tips untuk Anda\">Tips untuk Anda<\/a><ul class='ez-toc-list-level-4'><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#Perhatikan_luas_white_space\" title=\"Perhatikan luas white space\">Perhatikan luas white space<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#The_magic_8px_grid\" title=\"The magic 8px grid\">The magic 8px grid<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h3 class=\"wp-block-heading\" id=\"apa-itu-white-space\"><span class=\"ez-toc-section\" id=\"Apa_itu_White_Space\"><\/span>Apa itu White Space ?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>White space (negative space) adalah ruang kosong di antara dan di sekitar unsur-unsur desain layout atau halaman. White space mampu membuat orang fokus pada elemen utama yanga ada di sekitarnya. Karena dengan begitu orang hanya akan melihat satu elemen tanpa ada apapun di sekitarnya.<\/p>\n\n\n\n<p>Perlu dicatat bahwa white space tidak harus &#8220;putih&#8221;. Itu hanya sebutan saja, yang intinya adalah ruang kosong. Bisa menggunakan warna apa saja asalkan membantu memisahkan elmen yang berbeda dan kontras dengan elemen yang disorot atau elemen utama (contoh elemen Call To Action).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"psikologi-di-balik-desain-white-space\"><span class=\"ez-toc-section\" id=\"Psikologi_di_balik_desain_white_space\"><\/span>Psikologi di balik desain white space<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Pemanfaatan white space memiliki banyak keuntungan. Selain sangat mengurangi kekacauan dan membuat halaman web mendjadi lebih indah secara estetika, white space juga memiliki beberapa tujuan fungsional lainnya:<\/p>\n\n\n\n<ul><li>Peningkatan keterbacaan<\/li><li>Peningkatan fokus<\/li><li>Pemahaman yang lebih luas dari penawaran<\/li><li>Pengalaman pengguna yang lebih baik<\/li><\/ul>\n\n\n\n<p>Dengan adanya white space ini memungkinkan terjadinya jeda visual saat memproses konten landing page kita. Ini penting! Karena terlalu banyak informasi atau data visual pada satu waktu, dapat menyebabkan kelelahan kognitif, alias informasi yang berlebihan , sehingga sulit bagi otak untuk menyerap dan menyimpan informasi.<\/p>\n\n\n\n<p>Dengan lebih sedikit elemen dan sedikit gangguan, otak kita akan lebih mudah untuk menerima dan memproses informasi, dan untuk lebih fokus pada hal-hal yang paling penting.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"penggunaan-white-space-yang-buruk\"><span class=\"ez-toc-section\" id=\"Penggunaan_white_space_yang_buruk\"><\/span>Penggunaan white space yang buruk<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Gagal membangun kesan pertama yang hebat membuat kita harurs &#8220;membayar mahal&#8221;. Ini mungkin akan sangat mempengaruhi tingkat konversi. Jadi, sebelum menunjukkan contoh white space yang baik pada landing page, mari kita lihat landing page di bawah ini yang hampir tidak ada white space sama sekali:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"948\" height=\"1024\" src=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/contoh-white-space-buruk.png\" alt=\"contoh white space buruk\" class=\"wp-image-6113\" srcset=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/contoh-white-space-buruk.png 948w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/contoh-white-space-buruk-278x300.png 278w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/contoh-white-space-buruk-768x830.png 768w\" sizes=\"(max-width: 948px) 100vw, 948px\" \/><\/figure>\n\n\n\n<p>Apa kesan pertama Anda tentang halaman di atas? Agak luar biasa karena semuanya dijadikan satu tanpa ruang bernafas. Hal ini membuatnya sulit dinavigasi, tidak fokus pada apa yang penting, dan sulit memahami apa yang dtawarkan.<\/p>\n\n\n\n<p>Ini seolah-olah mereka berusaha menampilkan segala sesuatu di bagian page fold dan memiliki halaman yang sangat seimbang, sehingga mengurangi keterbacaan sama sekali.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Baca Juga: <a href=\"https:\/\/komerce.id\/blog\/praktik-terbaik-memilih-gambar-untuk-landingpage\/\" target=\"_blank\" rel=\"noreferrer noopener\">Praktik Terbaik Memilih Gambar Untuk Landingpage<\/a><\/p><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"elemen-yang-bisa-dioptimalkan-dengan-white-space\"><span class=\"ez-toc-section\" id=\"Elemen_yang_bisa_dioptimalkan_dengan_white_space\"><\/span>Elemen yang bisa dioptimalkan dengan white space<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Di atas kita sudah melihat apa yang perlu kita hindari dengan landing page kita. Nah, sekarang mari kita perika beberapa contoh penggunaan white space yang bagus.<\/p>\n\n\n\n<p>White space berfungsi sebagai petunjuk arah, dan petunjuk arah ini adalah alat bantu visual yang mengarah ke elemen paling penting dari landing page kita. Dan berikut adalah beberapa elemen paling penting untuk diterapkan white space.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"headline\"><span class=\"ez-toc-section\" id=\"Headline\"><\/span>Headline<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Banyak para pakar marketing telah menerangkan betapa pentingnya headline. Ya, headline kita harus menarik perhatian karena sering kali ini yang pertama orang lihat saat pertama membuka landing page kita. Headline dapat menarik perhatian lebih cepat ketika white space mengelilinginya.<\/p>\n\n\n\n<p>BigMarker membuat landing page uji coba dengan banyak white space. Screenshot di bawah ini menunjukkan di dalam page fold, menggambarkan bagaimana headline dan formulir segera menarik perhatian ketika pertama membuka halaman:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"410\" src=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-dalam-headline.png\" alt=\"white space dalam headline\" class=\"wp-image-6118\" srcset=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-dalam-headline.png 1024w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-dalam-headline-300x120.png 300w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-dalam-headline-768x308.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"produk\"><span class=\"ez-toc-section\" id=\"Produk\"><\/span>Produk<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>White space sering dirancang di sekitar screenshot software perusahaan, gambar produk, atau video yang menunjukkan layanan mereka. Karena media yang terlibat memainkan peran besar dalam meningkatkan konversi, tidak jarang brand menambahkan empty space di sekitar media untuk membuat pengunjung lebih mudah melihatnya.<\/p>\n\n\n\n<p>Penggunaan white space yang bagus ditunjukan oleh OfficeX. Mereka menempatkan screenshot software mereka dikelilingi oleh whtie space yang substansial:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"487\" src=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-produk.jpg\" alt=\"white space produk\" class=\"wp-image-6124\" srcset=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-produk.jpg 1024w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-produk-300x143.jpg 300w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-produk-768x365.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Baca Juga: <a href=\"https:\/\/komerce.id\/blog\/perusahaan-terkenal-yang-menggunakan-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">15 Website Terkenal Yang Menggunakan WordPress<\/a><\/p><\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"countdown\"><span class=\"ez-toc-section\" id=\"Countdown\"><\/span>Countdown<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Countdown timer atau penghitung waktu mundur ditujukan untuk menciptakan perasaan urgensi dan kelangkaan. Countdown dapat digunakan untuk berbagai penawaran (pendaftaran webinar, pendaftaran acara khusus, diskon harga, dll.). Dan karena ini bisa sangat persuasif dalam menghasilkan konversi, sangat penting untuk memastikan countdown bisa menarik perhatian pengunjung.<\/p>\n\n\n\n<p>Exact Data menggunakan negative space yang cukup dengan elemen countdown mereka. Hal ini untuk memastikan pengunjung memperhatikan tenggat waktu sebelum penawaran berakhir:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"507\" src=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-design-countdown.png\" alt=\"white space design countdown\" class=\"wp-image-6121\" srcset=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-design-countdown.png 1024w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-design-countdown-300x149.png 300w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-design-countdown-768x380.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"formulir\"><span class=\"ez-toc-section\" id=\"Formulir\"><\/span>Formulir<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Formulir, baik itu form order, subscribe atau sekerdar untuk download ebook gratis adalah salah satu elemen landing page yang paling penting. Jadi masuk akal untuk mengelilinginya dengan banyak white space untuk menarik perhatian sebanyak mungkin.<\/p>\n\n\n\n<p>Landing page Stackla memberikan contoh yang bagus untuk kasus ini. Mata pengunjung langsung tertuju pada formulir dengan background yang gelap dan white space yang berlimpah:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"487\" src=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-di-form.png\" alt=\"white space di form\" class=\"wp-image-6122\" srcset=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-di-form.png 1024w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-di-form-300x143.png 300w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-di-form-768x365.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"tombol\"><span class=\"ez-toc-section\" id=\"Tombol\"><\/span>Tombol<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Tombol identik dengan CTA (Call To Action). Dan kita tahu, CTA adalah elemen yang sangat penting di dalam sebuah landing page. Itu sebabnya, mengelilinginya dengan white space sangat dianjurkan karena ini akan meningkatkan perhatian pengunjung.<\/p>\n\n\n\n<p>Perhatikan bagaimana Shopify menempatkan CTA mereka dengan white space yang cukup.  Ini membuat tombol terlihat menonjol dengan didukung dengan penggunaan warna yang tepat:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"446\" src=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/penggunaan-white-space-di-tombol.jpg\" alt=\"penggunaan white space di tombol\" class=\"wp-image-6116\" srcset=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/penggunaan-white-space-di-tombol.jpg 1024w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/penggunaan-white-space-di-tombol-300x131.jpg 300w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/penggunaan-white-space-di-tombol-768x335.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"layanan-perusahaan\"><span class=\"ez-toc-section\" id=\"Layanan_perusahaan\"><\/span>Layanan perusahaan<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Alih-alih membaca seluruh halaman, banyak orang lebih suka memindai halaman dengan cepat dan langsung mencari informasi yang paling berharga. Itu sebabnya mendesain copy landing page kita dalam potongan-potongan kecil yang ditandai dengan poin-poin, atau ikonografi sangat ideal. Ketika kita mengkombinasikannya dengan white space, poin-poin tersebut akan menarik lebih banyak perhatian.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"477\" src=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-dalam-layanan.png\" alt=\"white space dalam layanan\" class=\"wp-image-6120\" srcset=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-dalam-layanan.png 1024w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-dalam-layanan-300x140.png 300w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-dalam-layanan-768x358.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"testimoni\"><span class=\"ez-toc-section\" id=\"Testimoni\"><\/span>Testimoni<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Testimonial adalah salah satu elemen paling persuasif pada landing page. Itu karena mereka mampu menambah kredibilitas, kepercayaan, dan dapat menceritakan bagaimana produk kita sudah terbukti mampu mengatasi masalah.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"404\" src=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-di-testimoni.jpg\" alt=\"white space di testimoni\" class=\"wp-image-6123\" srcset=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-di-testimoni.jpg 1024w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-di-testimoni-300x118.jpg 300w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-di-testimoni-768x303.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"logo-perusahaan-klien\"><span class=\"ez-toc-section\" id=\"Logo_perusahaan_klien\"><\/span>Logo perusahaan klien<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Selain testimoni pelanggan, logo perusahaan yang menjadi klien kita adalah salah satu aspek paling meyakinkan dari sebuah landing page. Menampilkan logo dari brand terkenal dan bereputasi baik membantu membangun otoritas dan kredibilitas. Dalam benak pengunjung, mereka akan berfikir, &#8220;jika perusahaan-perusahaan lain yang sangat kredibel ini menaruh kepercayaan mereka pada produk atau layanan ini, maka saya juga bisa.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"294\" src=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/logo-perusahaan-white-space.jpg\" alt=\"logo perusahaan white space\" class=\"wp-image-6115\" srcset=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/logo-perusahaan-white-space.jpg 1024w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/logo-perusahaan-white-space-300x86.jpg 300w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/logo-perusahaan-white-space-768x221.jpg 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Baca Juga: <a href=\"https:\/\/komerce.id\/blog\/contoh-landing-page\/\" target=\"_blank\" rel=\"noreferrer noopener\">10 Contoh Landing Page Berkonversi Tinggi Dan Menarik<\/a><\/p><\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"tips-untuk-anda\"><span class=\"ez-toc-section\" id=\"Tips_untuk_Anda\"><\/span>Tips untuk Anda<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Meskipun terlihat mudah, menggunakan white space juga bisa berakibat kurang bagus untuk landing page jika dilakukan dengan keliru. Hal-hal berikut akan membantu Anda menghindari kesalahan-kesalahan itu.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"perhatikan-luas-white-space\"><span class=\"ez-toc-section\" id=\"Perhatikan_luas_white_space\"><\/span>Perhatikan luas white space<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Ketika kita menerapkan white space, maka kemungkinan landing page kita akan semakin panjang. Berhati-hatilah dalam menentukan berapa luas white space yang harus Anda gunakan.<\/p>\n\n\n\n<p>Jika terlalu sempit, itu sama saja kita tidak menggunakan white space. Dan jika terlalu lebar, bisa jadi orang akan mengira halaman sudah selesai padahal masih bisa discroll. Untuk mengatisipasinya, kita bisa menambahkan anak panah ke bawah agar menstimulus orang untuk scroll ke bawah.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"the-magic-8px-grid\"><span class=\"ez-toc-section\" id=\"The_magic_8px_grid\"><\/span>The magic 8px grid<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Ada yang bilang 8 adalah angka yang sempurna. Itu karena tidak terputus. Tapi, selain itu angka 8 juga punya keajaiban! Menggunakan angka 8 hampir selalu membuat white space Anda akan terlihat lebih clear.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/the-magic-8px.jpg\" alt=\"the magic 8px\" class=\"wp-image-6117\" width=\"503\" height=\"253\" srcset=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/the-magic-8px.jpg 364w, https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/the-magic-8px-300x151.jpg 300w\" sizes=\"(max-width: 503px) 100vw, 503px\" \/><\/figure><\/div>\n\n\n\n<p>The magic 8 juga sempurna untuk scaling. Kita bisa dengan mudah meresize elemen apapun dengan pembagian seperti 8\/2 = 4, 4\/2 = 2 dan 2\/1 = 1. Pada kasus lain ketika kita mulai dengan 10, kita akan bertemu dengan angka 5, kemudian 2.5, kemudian 1.25.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Pada intinya, landing page Anda butuh ruang untuk bernafas. Seperti para pengunjung website Anda butuh ruang untuk mengurangi distraksi yang terjadi ketika mereka membaca halaman penawaran Anda. Itu sebabnya white space diperlukan. Namun, penggunaan white space juga perlu dipertimbangkan demi mendapatkan hasil yang maksimal.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apa itu white space ? Bagaimana white space di dalam landing page bisa meningkatkan konversi? White space memberi ruang bernafas sehingga landing page bisa lebih &#8230; <a title=\"Apa Itu White Space dan Penerapannya dalam Landing Page\" class=\"read-more\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/\" aria-label=\"More on Apa Itu White Space dan Penerapannya dalam Landing Page\">Read more<\/a><\/p>\n","protected":false},"author":3,"featured_media":6119,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[249],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Apa Itu White Space dan Penerapannya dalam Landing Page<\/title>\n<meta name=\"description\" content=\"Apa itu White space? White space adalah ruang kosong di antara dan di sekitar unsur-unsur desain layout atau halaman.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Apa Itu White Space dan Penerapannya dalam Landing Page\" \/>\n<meta property=\"og:description\" content=\"Apa itu White space? White space adalah ruang kosong di antara dan di sekitar unsur-unsur desain layout atau halaman.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Komerce\" \/>\n<meta property=\"article:author\" content=\"http:\/\/www.facebook.com\/6hartanto\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-13T06:00:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-02-08T06:23:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-dalam-landing-page.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"910\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Hartanto\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Ditulis oleh\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hartanto\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/\"},\"author\":{\"name\":\"Hartanto\",\"@id\":\"https:\/\/komerce.id\/blog\/#\/schema\/person\/a9389bb7b7d71aba0aeac45a616ce81a\"},\"headline\":\"Apa Itu White Space dan Penerapannya dalam Landing Page\",\"datePublished\":\"2020-01-13T06:00:49+00:00\",\"dateModified\":\"2022-02-08T06:23:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/\"},\"wordCount\":1217,\"publisher\":{\"@id\":\"https:\/\/komerce.id\/blog\/#organization\"},\"articleSection\":[\"Website\"],\"inLanguage\":\"id\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/\",\"url\":\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/\",\"name\":\"Apa Itu White Space dan Penerapannya dalam Landing Page\",\"isPartOf\":{\"@id\":\"https:\/\/komerce.id\/blog\/#website\"},\"datePublished\":\"2020-01-13T06:00:49+00:00\",\"dateModified\":\"2022-02-08T06:23:33+00:00\",\"description\":\"Apa itu White space? White space adalah ruang kosong di antara dan di sekitar unsur-unsur desain layout atau halaman.\",\"breadcrumb\":{\"@id\":\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Beranda\",\"item\":\"https:\/\/komerce.id\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Apa Itu White Space dan Penerapannya dalam Landing Page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/komerce.id\/blog\/#website\",\"url\":\"https:\/\/komerce.id\/blog\/\",\"name\":\"Blog Komerce\",\"description\":\"E-Commerce dan Bisnis Online\",\"publisher\":{\"@id\":\"https:\/\/komerce.id\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/komerce.id\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/komerce.id\/blog\/#organization\",\"name\":\"Blog Komerce\",\"url\":\"https:\/\/komerce.id\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/komerce.id\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2022\/06\/komerce-logo.png\",\"contentUrl\":\"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2022\/06\/komerce-logo.png\",\"width\":298,\"height\":82,\"caption\":\"Blog Komerce\"},\"image\":{\"@id\":\"https:\/\/komerce.id\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/komerce.id\/blog\/#\/schema\/person\/a9389bb7b7d71aba0aeac45a616ce81a\",\"name\":\"Hartanto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/komerce.id\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f992c7d9b46dde69a65cb779939179f2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f992c7d9b46dde69a65cb779939179f2?s=96&d=mm&r=g\",\"caption\":\"Hartanto\"},\"description\":\"Hartanto adalah web developer di Komerce. Hartanto ingin memastikan agar setiap website yang dikelolanya terus online. Dia juga banyak berbicara tentang landing page untuk penjualan.\",\"sameAs\":[\"http:\/\/www.6hartanto.com\",\"http:\/\/www.facebook.com\/6hartanto\",\"http:\/\/www.linkedin.com\/in\/6hartanto\/\"],\"url\":\"https:\/\/komerce.id\/blog\/blog\/author\/hartanto\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Apa Itu White Space dan Penerapannya dalam Landing Page","description":"Apa itu White space? White space adalah ruang kosong di antara dan di sekitar unsur-unsur desain layout atau halaman.","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:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/","og_locale":"id_ID","og_type":"article","og_title":"Apa Itu White Space dan Penerapannya dalam Landing Page","og_description":"Apa itu White space? White space adalah ruang kosong di antara dan di sekitar unsur-unsur desain layout atau halaman.","og_url":"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/","og_site_name":"Blog Komerce","article_author":"http:\/\/www.facebook.com\/6hartanto","article_published_time":"2020-01-13T06:00:49+00:00","article_modified_time":"2022-02-08T06:23:33+00:00","og_image":[{"width":910,"height":300,"url":"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2021\/03\/white-space-dalam-landing-page.jpg","type":"image\/jpeg"}],"author":"Hartanto","twitter_card":"summary_large_image","twitter_misc":{"Ditulis oleh":"Hartanto","Estimasi waktu membaca":"9 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#article","isPartOf":{"@id":"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/"},"author":{"name":"Hartanto","@id":"https:\/\/komerce.id\/blog\/#\/schema\/person\/a9389bb7b7d71aba0aeac45a616ce81a"},"headline":"Apa Itu White Space dan Penerapannya dalam Landing Page","datePublished":"2020-01-13T06:00:49+00:00","dateModified":"2022-02-08T06:23:33+00:00","mainEntityOfPage":{"@id":"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/"},"wordCount":1217,"publisher":{"@id":"https:\/\/komerce.id\/blog\/#organization"},"articleSection":["Website"],"inLanguage":"id"},{"@type":"WebPage","@id":"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/","url":"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/","name":"Apa Itu White Space dan Penerapannya dalam Landing Page","isPartOf":{"@id":"https:\/\/komerce.id\/blog\/#website"},"datePublished":"2020-01-13T06:00:49+00:00","dateModified":"2022-02-08T06:23:33+00:00","description":"Apa itu White space? White space adalah ruang kosong di antara dan di sekitar unsur-unsur desain layout atau halaman.","breadcrumb":{"@id":"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/komerce.id\/blog\/blog\/2020\/01\/13\/white-space\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Beranda","item":"https:\/\/komerce.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Apa Itu White Space dan Penerapannya dalam Landing Page"}]},{"@type":"WebSite","@id":"https:\/\/komerce.id\/blog\/#website","url":"https:\/\/komerce.id\/blog\/","name":"Blog Komerce","description":"E-Commerce dan Bisnis Online","publisher":{"@id":"https:\/\/komerce.id\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/komerce.id\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/komerce.id\/blog\/#organization","name":"Blog Komerce","url":"https:\/\/komerce.id\/blog\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/komerce.id\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2022\/06\/komerce-logo.png","contentUrl":"https:\/\/komerce.id\/blog\/wp-content\/uploads\/2022\/06\/komerce-logo.png","width":298,"height":82,"caption":"Blog Komerce"},"image":{"@id":"https:\/\/komerce.id\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/komerce.id\/blog\/#\/schema\/person\/a9389bb7b7d71aba0aeac45a616ce81a","name":"Hartanto","image":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/komerce.id\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f992c7d9b46dde69a65cb779939179f2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f992c7d9b46dde69a65cb779939179f2?s=96&d=mm&r=g","caption":"Hartanto"},"description":"Hartanto adalah web developer di Komerce. Hartanto ingin memastikan agar setiap website yang dikelolanya terus online. Dia juga banyak berbicara tentang landing page untuk penjualan.","sameAs":["http:\/\/www.6hartanto.com","http:\/\/www.facebook.com\/6hartanto","http:\/\/www.linkedin.com\/in\/6hartanto\/"],"url":"https:\/\/komerce.id\/blog\/blog\/author\/hartanto\/"}]}},"_links":{"self":[{"href":"https:\/\/komerce.id\/blog\/wp-json\/wp\/v2\/posts\/704"}],"collection":[{"href":"https:\/\/komerce.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/komerce.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/komerce.id\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/komerce.id\/blog\/wp-json\/wp\/v2\/comments?post=704"}],"version-history":[{"count":7,"href":"https:\/\/komerce.id\/blog\/wp-json\/wp\/v2\/posts\/704\/revisions"}],"predecessor-version":[{"id":8919,"href":"https:\/\/komerce.id\/blog\/wp-json\/wp\/v2\/posts\/704\/revisions\/8919"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/komerce.id\/blog\/wp-json\/wp\/v2\/media\/6119"}],"wp:attachment":[{"href":"https:\/\/komerce.id\/blog\/wp-json\/wp\/v2\/media?parent=704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/komerce.id\/blog\/wp-json\/wp\/v2\/categories?post=704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/komerce.id\/blog\/wp-json\/wp\/v2\/tags?post=704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}