Anda yang pernah mendengarkan pentingnya website dan manfaat memiliki website pasti tahu bahwa Anda perlu mendesain website sebaik mungkin. Masalahnya adalah, bagaimana Anda sebenarnya mendesain situs web? Sudah coba mengutak-atik tampilan website, tapi kok hasilnya tidak sesuai harapan?

Jangan berkecil hati dulu, oke? Mendesain website sebagai bagian dari pengembangan website bukanlah hal yang mudah. Namun, ada banyak tips desain website yang bisa Anda terapkan untuk membuat website terlihat bagus tanpa usaha ekstra.

Kabar baiknya adalah Anda dapat menemukan semua tip di artikel ini! Jadi sebelum kita melihat setiap tip satu per satu, mari pelajari alasan mengapa desain situs web yang baik itu penting.

Baca Juga : Apa Itu Landing Page?

Mengapa Perlu Desain Website yang Baik?

Anda sudah sepakat kalau cara membuat website harus memperhatikan desain, kan? Tapi, tahukah Anda apa alasannya? Nah, berikut ini adalah beberapa di antaranya:

1. Menentukan Kesan Pertama Pengunjung

Alasan cara membuat website gratis harus memperhatikan desain terlebih dahulu karena desain menentukan kesan pertama pengunjung.

Bayangkan berjalan ke toko yang bersih dan jendelanya rapi. Anda pasti merasa di rumah, bukan? Sebaliknya, ketika Anda pergi ke toko yang kotor dan berantakan, Anda hanya ingin pergi ke toko lain, bukan?

Hal ini juga terjadi pada sebuah website. Apapun jenis websitenya, desain sangat menentukan kesan pertama pengunjung.

Tampilan yang sederhana, tulisan yang mudah dibaca, dan warna yang minimalis dapat memberikan kesan yang menyenangkan, seperti website-website berikut ini:

Kemudian, bandingkan dengan contoh website di bawah ini:

Pengunjung tentu enggan berlama-lama di website yang tampilannya berantakan, teksnya sulit dibaca, dan terlalu warna-warni seperti di atas, bukan?

2. Memudahkan Pengunjung Menemukan Apa yang Dicari

Pengunjung datang ke website Anda dengan sebuah alasan. Bisa karena mencari informasi, atau membeli produk barang atau jasa yang Anda tawarkan.

Jika kebutuhan mereka mudah ditemukan, mereka tentu akan senang. Apalagi kalau tujuan mereka belanja, tentu membuat mereka nyaman dan tak ragu untuk bertransaksi kembali di lain waktu.

Salah satu caranya adalah menggunakan menu navigasi yang jelas.

Di contoh website tersebut, menu navigasinya berjejer rapi di bagian atas halaman dengan warna teks putih yang terlihat jelas di atas latar belakang hitam. Kedua faktor tersebut membantu untuk menonjolkan menu website.

Selain itu, nama menu-menunya mudah dipahami. Misalnya, “Cars for Sale” merupakan menu daftar mobil yang dijual.

3. Meningkatkan Konversi Penjualan

Selain untuk memudahkan pengunjung, Anda pun bisa memanfaatkan desain website yang baik untuk mendapatkan leads dengan lebih mudah.

Triknya, Anda bisa menempatkan tombol call-to-action (CTA) yang mudah ditemukan di website tersebut. CTA nantinya akan mengarahkan konsumen kepada pembelian produk atau halaman utama penting lainnya.

Wah, bagaimana ya caranya?
Pertama, Anda bisa memberi cukup negative space (ruang kosong) di sekitar tombol CTA. Mengurangi elemen visual di sekitar CTA akan membantu pengunjung fokus terhadap tombol tersebut sehingga lebih mudah untuk melakukan konversi.

Tombol “Select a car” pada homepage di atas langsung menarik mata Anda, bukan?

Selain negative space, warna yang kontras juga penting untuk menonjolkan tombol CTA. Misalnya, meskipun dikelilingi teks, tombol CTA oranye di bawah langsung menarik perhatian.

4. Membantu Pengunjung Terbiasa dengan Website Anda

Bayangkan Anda mengakses sebuah homepage yang tampilannya rapi dengan berbagai menu di bagian atas yang mudah dipahami. Namun, saat masuk ke halaman lain, menu navigasi website pindah di pojok kanan dan font-nya pun ikut berubah.

Ketika melihat semua itu, Anda jadi harus memahami halamannya lagi, kan?

Nah, desain website yang baik adalah yang konsisten di setiap halaman. Dengan letak elemen, warna, dan kombinasi font yang sempurna, pengunjung tidak harus “belajar” lagi saat berpindah-pindah halaman.

Konsistensi desain makin penting terutama dengan tujuan branding. Selain menunjukkan kesan profesional, website Anda jadi lebih mudah diingat pengunjung.

5. Mendukung Upaya SEO

Kalau desain website Anda baik, dampaknya juga  positif terhadap upaya search engine optimization (SEO). Lho, bagaimana bisa?

Begini penjelasannya. Google menyukai halaman website yang membuat pengunjungnya betah berkat pengalaman yang baik. Sebab, itu menunjukkan bahwa isi halaman web tersebut bermanfaat bagi pengunjung.

Nah, kalau desain website Anda bagus sehingga pengunjung betah berlama-lama di situ, rankingnya di pencarian Google bisa meningkat.

Selain itu ada faktor lain terkait desain yang bisa mempengaruhi ranking di mesin pencarian, di antaranya:

• Banyak/sedikitnya elemen visual
  Elemen visual yang terlalu banyak akan membuat website lambat. Apalagi kalau file-filenya tidak dikompres. Padahal, kecepatan website adalah salah satu penilaian Google.

• Tampilan Mobile-Friendly
  Kalau tampilan website terlihat menarik di perangkat mobile (mobile-friendly), peringkat di hasil pencarian Google akan lebih baik. Untuk itu, simak cara membuat website mobile friendly dulu ya.
• Page Experience
  Desain website yang baik berdampak pada baik atau tidaknya page experience sebuah website. Hal ini menjadi bagian dari core web vitals yang pengertian dan cara optimasinya bisa Anda pelajari di panduan ini.

6. Mampu Bersaing dengan Kompetitor

Anda percaya kan kalau kebanyakan kompetitor Anda juga menerapkan desain website yang baik?

Jadi, bayangkan kalau tampilan web Anda masih acak-acakan, sedangkan website kompetitor menggunakan desain minimalis nan efektif. Konsumen akan lebih tertarik mengunjungi website mereka, kan?

Nah, supaya tidak kalah dari kompetitor, Anda harus menyimak tips-tips mendesain website di bagian selanjutnya.

10+ Tips Desain Website Terbaik

Apa saja tips desain website yang bisa Anda terapkan supaya website memiliki tampilan yang baik? Yuk, simak satu per satu!

Tips 1: Terapkan Hierarki Visual

Hierarki visual adalah penataan elemen website untuk menonjolkan hal-hal penting agar mudah ditemukan pengunjung.

Penerapan hierarki visual sangat penting bagi website, terutama untuk tujuan bisnis.

Sebagai contoh, website toko online membutuhkan hierarki visual yang tepat agar promo atau penawaran bisa menarik pengunjung saat pertama kali melihatnya. Caranya, dengan memanfaatkan beberapa faktor, seperti:

• Warna efektif desain website
• Kontras
• Bentuk
• Letak
• Ukuran
• Ruang

Belum punya gambaran? Mari perhatikan contoh desain berikut. Ketika melihat desain di bawah, Anda akan tahu elemen mana yang penting karena semua kotak tampak sama, bukan?

Pandangan Anda akan langsung tertuju pada kotak berwarna gelap di kiri atas. Alasannya, kotak tersebut yang paling kontras dibanding yang lain.

Nah, penerapan hierarki visual di desain website sama. Untuk menonjolkan sebuah elemen, Anda bisa memperbesarnya, memberinya warna yang kontras, mengelilinginya dengan negative space, dan lain-lain. Biasanya, karakteristik tersebut diberikan kepada tombol CTA, headline, menu, dan logo.

Tips 2: Pilih Layout yang Terbukti Efektif

Merancang desain website dengan layout yang 100% orisinal tidak salah. Namun, pastikan website layout yang digunakan terbukti efektif.

Sebuah penelitian Google menunjukkan bahwa layout yang umum lebih disukai pengunjung website karena memudahkan mereka mendapatkan informasi.

Lalu, layout seperti apa yang sebaiknya dilakukan? Di bawah ini adalah beberapa di antaranya:

• Logo website di pojok kiri atas
• Menu navigasi horizontal di bagian header website. Jika item menu ada banyak, gunakan dropdown
• Search bar di pojok kanan atas
• Value proposition di bagian header
• Title tag deskriptif nan singkat di bagian header, misalnya “Tukang Kunci 24 Jam”
• Copy yang menjelaskan produk atau layanan setelah header
• Social proof (testimoni atau daftar konsumen terkenal Anda) di bawah copy penjelasan produk atau layanan
• Call to action di bawah social proof
• Link media sosial di bagian footer

Jangan lupa, hindari penggunaan “false bottom”, bagian halaman yang berlatar belakang gelap. Alasannya, pengunjung website umumnya berpikir bahwa itu adalah akhir dari halaman dan membuat mereka meninggalkan website Anda.

Sebaiknya Anda memperhatikan pemilihan warna background jika ingin memvariasikannya di sepanjang halaman web tanpa berujung adanya false bottom.

Tips 3: Gunakan Nama Menu yang Jelas

Menu di halaman utama mewakili halaman lain di website. Maka, menuliskan menu dengan jelas dapat membantu pengunjung menuju halaman yang diinginkan dengan mudah.

Mari perhatikan contoh dua menu website yang menjual peralatan petualangan berikut ini:

Menu pertama menggunakan nama yang spesifik, seperti “home” dan “layanan kami”. Sementara menu kedua hanya menggunakan nama yang umum, seperti “kompas”, “kronometer”, dan “peta”.

Nah, menu pertamalah yang harus Anda gunakan karena lebih memudahkan pengunjung.

Selain itu, nama menu yang deskriptif juga baik untuk upaya SEO. Alasannya, Google akan lebih cepat memahami konteks website Anda. Hal tersebut Google gunakan untuk menilai relevansi website dengan kueri pencarian penggunanya.

Ngomong-ngomong soal menu navigasi, mungkin Anda juga penasaran, urutan menu yang baik itu seperti apa ya?

Tenang saja, Anda tidak perlu memusingkan hal tersebut. Sebab, penelitian menunjukkan bahwa urutan menu website tidak berdampak apapun.

Selama menu navigasi Anda mudah dilihat, terletak di header, dan menggunakan nama yang deskriptif, hal itu sudah baik.

Tips 4: Tampilkan Value Proposition di Bagian Atas Homepage

Apa sih yang ingin Anda tawarkan kepada konsumen? Nah, itulah informasi value proposition yang sebaiknya ditempatkan di bagian atas halaman utama website Anda.

Secara teknis, penempatan pesan utama tersebut di area above the fold sebuah homepage, yaitu bagian yang muncul pertama kali saat halaman terbuka.

Tips 5: Jelaskan Detail Produk/Layanan Lengkap dengan CTA

Untuk produk bisnis yang belum banyak dipahami konsumen, jelaskan manfaatnya dengan lengkap. Jadi, Anda tidak perlu ragu untuk membuat homepage yang panjang.

Crazy Egg, penyedia tool untuk melacak aktivitas pengunjung website, adalah salah satu contoh yang berhasil memanfaatkan homepage panjang. Dengannya, konversi penjualan bisa meningkat hingga 30 persen.

Nah, setelah penjelasan produk, jangan lupa berikan solusi lewat sebuah CTA  yang akan menuntun konsumen ke pembelian produk. Namun, tempatkan CTA di tempat yang tepat, ya.

Menurut sebuah penelitian, strategi penempatan CTA seperti itu bisa meningkatkan konversi sebanyak 20 persen.

Oh ya, agar semakin efektif, pastikan tombol CTA Anda terlihat mencolok. Salah satu caranya adalah dengan memanfaatkan warna.

Untuk memilih warna yang tepat untuk tombol CTA, ada tiga cara yang bisa Anda lakukan.

Pertama, pastikan warna tombol kontras dengan background halaman.

Coba lihat contoh di bawah ini. Kalau tombol CTA warnanya tidak kontras dengan latar belakangnya seperti pada “Show me the Deal”, bagaimana mungkin bisa menarik perhatian pengunjung, ya?

Bandingkan dengan CTA dengan warna orange terang yang tampak beda ini. Anda langsung akan melihatnya, bukan?

Kedua, bedakan warna tombol dengan elemen-elemen lain yang ada di sekitarnya agar pengunjung bisa fokus. Atau, kalau tetap ingin menggunakan warna sama karena terkait brand, berikan negative space.

Ketiga, pastikan warna tombol dan warna teks juga kontras agar pesan terlihat jelas.

“Option 1” pada contoh di atas tentu yang paling jelas terlihat, ya? Nah, itulah teknik yang harus Anda gunakan.

Baca Juga : Variasi Font Yang Cocok Untuk Website Kamu

Tips 6: Gunakan Desain Minimalis

Desain website yang minimalis juga layak dicoba, lho. Ada dua alasannya.

Pertama, makin sedikit elemen visual, makin kecil ukuran file halaman website. Jadi, website bisa loading lebih cepat, sehingga tidak membuat pengunjung menunggu.

Kedua, desain minimalis membantu pengunjung mendapat informasi dengan mudah. Misalnya, dengan latar belakang satu warna dan negative space yang cukup, pengunjung bisa membaca penjelasan produk lebih mudah.

Selain itu, Anda juga bisa membuat desain minimalis dengan menghindari penggunaan slider. Meskipun bersifat interaktif karena bisa digeser-geser pengunjung, slider memiliki beberapa kekurangan, seperti:

• Memberatkan loading halaman
• Tidak cocok untuk perangkat mobile
• Memakan banyak tempat
• Belum tentu menarik perhatian pengunjung karena bisa membingungkan

Lalu, apakah berarti Anda tidak boleh memakai slider? Sebaiknya iya. Tapi, kalau kompetitor menggunakannya dan pengunjung menyukainya, Anda bisa mencobanya

Caranya, Anda bisa melakukan A/B testing, yaitu membuat satu desain menggunakan slider dan satunya tanpa slider. Pelajari mana yang lebih disukai pengunjung.

Satu elemen lagi yang perlu Anda hindari adalah accordion. Elemen tersebut memungkinkan Anda untuk menampilkan banyak informasi di dalam satu halaman tanpa memakan banyak tempat. Contohnya seperti di bawah ini:

Meski demikian, accordion justru menyulitkan pengunjung untuk menemukan informasi di halaman Anda. Apalagi, berdasarkan sebuah penelitian, pengunjung website cenderung suka halaman yang teksnya bisa dibaca dengan cara scanning.

Tips 7: Gunakan Gambar dengan Tepat

Web design yang efektif harus didukung pemilihan gambar yang tepat. Namun, pastikan Anda tidak menggunakan stock image, ya. Sebab, meskipun praktis, gambar terlihat tidak unik. Pasalnya, siapapun bisa menggunakannya.

Kesannya malah jadi tidak orisinal dan kredibilitas website jadi dipertanyakan, bukan?

Alasan lainnya adalah stock image kurang efektif untuk meningkatkan konversi. Karena gambar yang Anda produksi sendiri bisa meningkatkan penjualan hingga 35 persen.

Jadi, tak ada salahnya menyediakan dana khusus untuk menggunakan jasa fotografer untuk mendapatkan hasil lebih baik.

Tips desain website berikutnya adalah menampilkan wajah orang di website Anda karena lebih mudah menarik perhatian pengunjung.

Bahkan, hasil studi Basecamp menunjukkan bahwa halaman website yang menampilkan wajah orang menghasilkan konversi 47 persen lebih banyak.

Kenapa bisa begitu ya? Anda cenderung melirik ke arah yang orang lain lihat karena rasa ingin tahu, kan? Hal itu terjadi juga ketika mengakses website. Jadi, Anda bisa memanfaatkan gambar wajah orang untuk menunjuk objek penting di halaman web.

Supaya Anda punya gambaran, mari perhatikan studi eye tracking pada dua contoh desain di bawah yang menunjukkan titik-titik yang dilihat oleh 106 subjek penelitian. Semakin hangat warnanya, semakin lama subjek memperhatikan sebuah titik:

Seperti terlihat, ketika pose bayi menatap ke depan, orang lebih memperhatikan wajah si bayi. Sementara itu, pada saat bayi menatap ke arah teks, orang tidak hanya memperhatikan wajah si bayi, tetapi juga teks yang ada di sebelah kanan.

Artinya, arah pandang wajah model di halaman website berpengaruh terhadap pengunjung.

Tips 8: Jangan Arahkan Pengunjung Homepage ke Situs Lain

Homepage berfungsi untuk mengenalkan jasa atau produk Anda. Jadi, jangan meletakkan link keluar yang malah mengajak pengunjung keluar halaman tanpa sempat mengenal produk dengan baik.

Sebagai contoh, Anda boleh saja menampilkan link ke blog tapi letakkan linknya di bawah penjelasan produk dan CTA. Dengan begitu, pengunjung tidak buru-buru meninggalkan homepage dan malah lupa dengan tujuan mereka ke website Anda.

Tips 9: Tulis Judul Subheading yang Jelas

Ketika ingin mengisikan informasi website, bisa jadi Anda tidak tahu harus menuliskan apa, terutama untuk subheading-nya. Hal itu bisa mendorong Anda untuk membuat judul subheading yang terlalu umum, seperti “Layanan Kami”, “Misi Kami”, “Tim Kami”, dan lain-lain.

Padahal, hal itu akan menyulitkan pengunjung dan Google untuk memahami konteks website Anda.

Nah, alih-alih judul subheading yang terdengar umum, Anda perlu menggunakan judul yang deskriptif. Contohnya seperti di bawah ini:

Di contoh tersebut, mengganti “Produk Kami” dengan “Teleskop Kami”, akan membuat subheading lebih jelas dan mudah dipahami sesuai dengan produk yang ditawarkan.

Bahkan, pengunjung yang membaca secara singkat pun bisa langsung tahu apa yang Anda tawarkan di dalam penjelasan tersebut.

Tips 10: Membuat Copy yang Mudah Dipahami

Setelah menentukan judul subheading, tentunya Anda perlu membuat tulisan atau copy untuk menjelaskannya. Lalu, apa saja tips membuat copy yang baik?

Tips pertama adalah memperhatikan panjang paragraf. Agar copy mudah dibaca, usahakan agar paragrafnya tidak lebih dari empat kalimat. Kalau lebih dari itu, pengunjung akan enggan membacanya.

Nah sama halnya dengan kalimat yang panjang, usahakan agar tidak terdiri lebih dari 12 kata.

Tips selanjutnya adalah meminimalisir istilah-istilah yang tidak familiar agar informasi mudah dipahami. Menurut sebuah penelitian, menggunakan kata-kata umum dapat meningkatkan pemahaman tulisan pembaca.

Jadi daripada menggunakan kata-kata seperti konversi, Anda dapat menggunakan istilah yang lebih umum seperti penjualan dan pelanggan.

Jadi jika Anda telah menerapkan dua hal di atas, Anda juga harus meningkatkan keengganan pengunjung.

Loss aversion adalah pola pikir dimana orang cenderung terpaku pada kerugian yang datang dari hal yang sama, daripada puas dengan keuntungan dari suatu hal.

Misalnya, rasa takut kehilangan Rp 100.000 lebih besar daripada rasa senang menerima nominal tersebut. Unik bukan?

Jadi bagaimana Anda menggunakan keengganan rugi?

Anda dapat menjelaskan kerugian yang diderita konsumen tanpa produk atau layanan Anda. Baru setelah itu tunjukkan manfaat yang akan mereka terima. Ini mendorong pengunjung untuk menggunakan layanan atau produk Anda.

Tips 11: Sediakan FAQ di Website

Adanya FAQ (pertanyaan yang sering ditanyakan) pada sebuah website akan memudahkan pengunjung untuk mendapatkan informasi umum dengan lebih cepat. Sebab, sebagian besar pertanyaan mereka akan terjawab di bagian tersebut.

Untuk membuat FAQ yang relevan, Anda bisa mengirimkan survei dan menggunakan jawabannya sebagai bahan untuk memperbarui informasi di dalam website.

Berikut ini adalah beberapa contoh pertanyaan yang bisa Anda gunakan dalam survei tersebut:

• Masalah apa yang membuat Anda menggunakan layanan/produk kami?
• Apakah Anda sudah mencari solusi masalah Anda di tempat lain? Jika ya, mengapa Anda beralih ke kami?
• Apa yang membuat Anda yakin dengan layanan/produk kami?
• Ketika memilih layanan/produk kami, apa saja yang menjadi pertimbangan Anda?
• Apa saja manfaat yang Anda dapatkan setelah menggunakan layanan/produk kami?

Kalau baru memulai website dan belum punya konsumen, Anda juga bisa membuat FAQ berdasarkan buyer persona yang Anda tentukan.

Tips 12: Tampilkan Social Proof

Bagi 88 persen konsumen online, bukti sosial merupakan faktor yang perlu dipertimbangkan sebelum melakukan transaksi. Jadi, jika bisnis Anda tidak memiliki ulasan atau tanda kredibilitas lainnya, konsumen mungkin tidak tertarik.

Agar pelanggan target tidak beralih ke pesaing, Anda perlu menampilkan bukti sosial di situs. Terutama di halaman rumah.

Untuk membuat situs web Anda terlihat lebih kredibel, Anda dapat menampilkan beberapa jenis bukti sosial secara bersamaan. Misalnya testimonial, statistik dan logo dari beberapa konsumen terkenal.

Tips 13: Buat Formulir untuk Mengumpulkan Leads

Tips desain website penting lainnya adalah dengan menampilkan form lead untuk menarik pengunjung yang belum siap bertransaksi namun sudah tertarik dengan bisnis Anda.

Anda dapat menampilkan formulir sebagai elemen statis di bagian bawah halaman beranda atau sebagai popup.

Nah, agar pengunjung tertarik untuk mendaftarkan alamat email mereka, formulir Anda harus memiliki tiga hal, yaitu:

• Tampilan yang mencolok
• Informasi tentang apa yang akan pengunjung dapatkan dengan mendaftar.
• Social proof (jika memungkinkan)

Kalau Anda butuh inspirasi pop-up leads, contoh di atas ini bisa jadi salah satunya. Alasannya, CTA-nya sangat mencolok dan copynya tidak hanya menyebutkan manfaat, tetapi juga social proof.

Bayangkan dengan informasi bahwa pengunjung akan mendapatkan insight social media marketing yang sudah didownload oleh 390.000 orang, mereka akan tertarik, bukan?

Baca Juga : Cara Mengetahui Tema WordPress Orang Lain

Siap Menerapkan Desain Website yang Baik?

Wah, banyak tips desain website yang bisa diterapkan? Mulai dari tata letak hingga gambar dan informasi produk. Semua elemen tersebut harus dilaksanakan dengan tepat agar pengunjung merasa nyaman dan tertarik untuk membeli produk tersebut.

Namun, tentunya tidak cukup hanya menerapkan tips desain website saja. Anda membutuhkan website yang didukung oleh hosting terbaik yang cepat dan stabil untuk menampung banyak pengunjung.

Nah, Creative Design Bali adalah pilihan tepat untuk Anda dengan berbagai fitur-fitur seperti:

• Imunify360 untuk mencegah serangan DDoS dan malware di website.
• Web server super cepat LiteSpeed Enterprise.
• WordPress Accelerator untuk meningkatkan kecepatan dengan satu klik.
• WordPress Management yang memudahkan pengelolaan website berbasis WordPress.
• Staging yang sangat berguna ketika Anda ingin merubah atau memperbaiki desain website.