Benefita Hi! I'm an experienced tech writer passionate about making complex technology easy to understand. I hope you enjoy reading! See you on my next article!

Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)

12 min read

Kesalahan Desain Web dan Solusinya

Sudah desain web mahal-mahal tapi performanya macet?

Bisa jadi, sumber masalahnya adalah desain web kurang tepat. Penting diingat, desain yang baik atau asal keren saja belum tentu desain yang sesuai, lho.

Akibat Desain Web Tidak Tepat

Tanpa web desain yang tepat, fungsi website jadi tidak menjawab kebutuhan pengunjung. Apalagi kalau sampai membuat mereka kebingungan menjelajahi situs.

Memangnya, apa saja sih kesalahan dalam mendesain web yang dapat menghancurkan website?

Nah sebelum membahas ke sana, sebaiknya Anda memahami dulu mengapa design web penting dan apa saja manfaatnya.

Mengapa Desain Web Penting?

Pernah mendengar istilah jatuh cinta berawal dari mata turun ke hati?

Ternyata, hal itu juga berlaku bagi website, loh. Faktanya, 94% kesan pertama visitor terbentuk dari design web.

Itu artinya, desain web menjadi penentu apakah pengunjung mau lanjut mengakses situs atau justru kabur.

Kenapa begitu?

Berikut beberapa alasan pentingnya web design bagi pengunjung ataupun pemilik situs.

  • Menyajikan visual yang oke dan menjawab kebutuhan. Design web menarik dan fungsional, sehingga menjawab kebutuhan pengunjung. Misal, menggunakan icon keranjang untuk berbelanja, icon social media untuk link sharing, dsb;
  • Memanjakan User Experience. Memberikan user journey yang ringan, to the point, dan mudah diakses. Navigasi menu sederhana, misalnya;
  • Meningkatkan konversi. Desain web mempermudah alur konversi dan menggiring pengunjung melakukan action yang diharapkan. Contohnya, pembelian, berlangganan newsletter, dll;
  • Meroketkan kecepatan website. Design cukup berdampak terhadap page speed. Karena itu, tiap dekorasi harus dirancang setepat dan seefisien mungkin sehingga tidak menghambat page speed.

Setelah mengetahui mengapa design web itu penting, sekarang Anda perlu memahami kesalahan dalam mendesain website yang dapat menghancurkan situs. Mari melompat ke bagian selanjutnya.

10 Kesalahan Terbesar Desain Web yang Menghancurkan Website

Berikut adalah 10 dosa desain web yang bisa menghancurkan website Anda.

1. Tidak Punya Target Pasar dan Niche

Ibarat rumah tanpa pondasi, mendesain web tanpa tahu siapa target pasar Anda dan niche memungkinkan seluruh design gagal dari awal. Sebab, seluruh komponen dibuat tanpa tujuan dan pertimbangan yang jelas.

Target pasar adalah sekelompok orang yang menjadi target penjualan produk. Sedangkan niche yaitu segmentasi pasar yang lebih mengerucut.

Biasanya, web tanpa target pasar dan niche membuat desain seperti tidak punya arah. Produk yang dijual juga kesannya campur aduk. Sehingga, makin susah mengundang pelanggan potensial.

Misal, Anda membangun website layanan desain interior. Gara-gara tidak punya target pasar dan niche, Anda mendekorasi situs dengan tema random alias tidak ada hubungannya dengan bisnis. Efeknya, branding website pun gagal.

Desain website tidak sesuai dengan niche dan target pasar

Karena itu, agar tak salah target, sebaiknya lakukanlah hal berikut:

  • Ketahui tujuan Anda membuat website (konversi, engagement, papan informasi, dll). Mengetahui tujuan memudahkan Anda memikirkan elemen yang website perlukan;
  • Pahami kriteria target pasar Anda. Target pasar membantu Anda mengetahui karakter web yang pas;
  • Pasang goals yang terukur (conversion rate, traffic, bounce rate, dll). Goal yang bisa diukur akan memudahkan proses evaluasi web;
  • Manfaatkan tools seperti Google Analytic, Traffic Checker, dll. Tools tersebut membantu menarik data performa web;
  • Lakukan A/B Testing untuk mengetahui desain web yang paling ideal bagi kebutuhan target audiens. A/B Testing adalah eksperimen untuk melihat variabel mana yang memberi hasil terbaik.

Mengetahui tujuan web dari awal akan membantu Anda memahami keberhasilan situs. Anda pun lebih mudah merancang strategi lanjutan untuk mendongkrak performa web.

2. Salah Pilih Tipografi

Tipografi adalah seni memilih dan menata font pada suatu ruang sehingga menciptakan kesan tertentu. Ini memungkinkan Anda membuat kombinasi font sempurna website.

Masih berhubungan dengan poin sebelumnya, target pasar menentukan karakter tipografi.

Font menyesuaikan brand dan target audiens yang dituju. Banyak web designer yang belum paham penempatan target audiens/karakter.

-Oko, UI Designer Niagahoster

Sekarang, bayangkan Anda punya situs berita. Ingin terlihat indah, Anda pun menyajikan artikel dengan font latin atau kaligrafi, seperti Pacifico atau Flower Child.

Tipografi sulit dibaca

Besoknya, orang-orang mengakses website berita Anda. Namun, mereka justru kesulitan membaca artikel. Sayang sekali bukan?

Nah untuk membantu Anda memilih tipografi yang efektif, perhatikan beberapa kunci sukses tipografi ini.

  • Demografi target audiens. Kenali target audiens Anda (usia, minat, profesi, dll) sehingga memudahkan Anda memahami karakter font yang tepat. Childish, modern, edgy, atau bentuk lainnya;
  • Keterbacaan. Teks mudah dibaca, tidak hanya sebagai estetika;
  • Panjang teks dan ukuran font. Ketahui konten apa yang muncul pada web Anda. Apakah itu artikel berita, informasi produk, atau teks lainnya? Tentunya, tiap komponen butuh ruang dan ukuran font yang sesuai;
  • Hierarki tipografi. merupakan cara menonjolkan teks sesuai urutan kepentingannya, seperti heading. Sehingga, poin penting teks lebih mudah ditangkap mata;
  • Alignment. Mengatur posisi dan margin sehingga text berada di garis yang tepat;
  • Whitespace. Ruang kosong atau jarak di sekitar teks. Membuat teks terlihat lebih lega dan memudahkan user membaca secara scanning;
  • Warna dan kontras teks. Warna dan kontras mampu membangun kesan tertentu sekaligus memberi highlight pada poin-poin penting dalam teks;
  • Konsistensi font. Gunakan font yang seragam dan konsisten dalam web. Jika jenis font terlalu beragam, user akan bingung dan melihat web Anda sebagai situs yang kacau.

Dengan memilih tipografi yang tepat, pengunjung lebih mudah menangkap info inti pada website. Konten Anda pun bisa bekerja secara maksimal.

3. Asal Memakai Warna

Salah memilih warna adalah akibat lagi yang terjadi gara-gara tidak punya target pasar. Anda jadi memoles website dengan warna yang tanpa arti.

Misal, Anda membuat website agen travel. Karena tidak paham kebutuhan target pasar, Anda pun memoles situs dengan warna-warna favorit Anda. Biru, ungu, hitam… Alhasil, tiap warna malah saling bertabrakan.

Pemilihan warna asal-asalan sehingga desain websitei sulit dipahami

Karena itu, mendesain web harus paham target pasar dan memadukannya dengan Psikologi Warna. Bangun nuansa situs dengan pilihan warna berikut:

WarnaKesanCocok Bagi Industri…
BiruMembangun kepercayaan dan ketulusanPerusahaan tech hingga financial
KuningMembangkitkan semangat dan optimisme. Cocok untuk Call-to Action Button atau mengarahkan user ke konversiIndustri pendidikan, organisasi, dll
HijauMenciptakan kesan tenangIndustri kesehatan dan makanan
OranyeMencerminkan persahabatan dan kreativitas. Daripada sebagai warna dominan, lebih cocok untuk pelengkapRestoran, perusahaan kartu kredit, dll
PinkRomansa, feminim, manisPerusahaan fesyen atau industri yang menargetkan wanita dan anak-anak
MerahMembangkitkan energi dan hal-hal daruratSering dipakai untuk situs restoran
UnguMemberi kesan mewah dan kebijaksanaanAgen konsultan, bisnis parfum, dll
PutihMinimalis, bersih, hingga ketulusanSitus berita, e-commerce, dll
Abu-abuMelambangkan ketenangan, minimalis, dan modernPerusahaan tech, arsitek, fesyen, dll
HitamMenunjukkan kekuatan, elegan, hingga kemewahanWebsite IT, transportasi, fashion, dll

Meski begitu, tidak salah kok mengombinasikan berbagai warna di atas. Namun, tetap pastikan apakah warna efektif bagi desain website.

4. Media Visual Sembarangan

Media visual (gambar, video, foto, dll) menjadi hal yang wajib ada di website.  Sebab, media visual mudah memikat perhatian pengunjung situs.

Bahkan, otak manusia memproses visual 60.000 kali lebih cepat dibandingkan teks, loh.

Namun, ada kalanya saat mendesain web mungkin Anda lebih fokus pada keindahan gambar dan melupakan akibatnya bagi performa website.

Yap, menggunakan media visual yang tidak tepat bisa menjadi senjata makan tuan, lho. Terlalu banyak gambar, ukuran file kebesaran… Kecepatan web pun jadi korbannya. Belum lagi kalau gambar malah gagal loading.

Gambar tidak ter-load sempurna

Nah supaya media visual tidak mengganggu performa website, lakukan antisipasi berikut.

  • Gunakan  format media visual yang sesuai. Seperti JPEG untuk berbagai gambar fotografi atau yang lebih ringan lagi dengan Google WebP;
  • Pastikan ukuran gambar tepat. Ketahui ukuran panjang dan lebar device yang akan menampilkan web dan konten. Agar, bisa menentukan rasio gambar yang cocok untuk berbagai jenis device;
  • Compress. Susutkan besar file gambar dan hapus metadata yang tidak perlu dengan berbagai tools compressor (TinyJPG, Image Optimizer, plugin Imsanity, dll) agar tak banyak menyita ruang penyimpanan;
  • Embed. Embed adalah kode untuk menarik video dari situs tertentu (seperti YouTube). Sehingga, video dapat tampil di web tanpa memakan ruang simpan;
  • Optimasi gambar. Supaya gambar mampu membantu web agar mudah tampil di mesin pencarian, terapkan SEO Image.

Setelah melakukan tips desain website di atas, media visual website pun tampil ciamik tanpa merusak performa website, deh. Seru, bukan?

5. Navigasi Rumit

Bounce rate tinggi? Bisa jadi, masalahnya adalah karena navigasi website yang rumit. Faktanya, 61,5% pengunjung meninggalkan web yang punya navigasi buruk, lho.

Navigasi website adalah fungsi yang memungkinkan user menjelajahi isi  situs. Baik untuk menemukan informasi, melakukan pembelian, ataupun mengarah ke halaman lain.

Tanpa navigasi yang oke, user akan kesulitan menjelajahi website. Misalnya, pilihan menu terlalu banyak, tidak tertata, teks terlalu panjang, dan banyak lagi.

Navigasi terlalu ramai dan sulit dibaca

Karena itu, desain lah navigasi yang simple dan berguna. Kalau bingung, coba ikuti tips ini.

  • Posisikan navigasi di tempat yang mudah ditemukan. Bisa di bagian atas (header), kaki website (footer), sisi samping (sidebar), atau kombinasi;
  • Pastikan navigasi responsive. Navigasi berfungsi dengan baik saat user mengaksesnya lewat berbagai device (desktop, mobile, tablet);
  • Atur sticky navigation yang bisa sembunyi otomatis. Sticky navigation memungkinkan user bisa mengakses menu tanpa repot scroll. Tapi sebaiknya navigasi sembunyi otomatis saat tidak dipakai, sehingga tampilan web tetap luas;
  • Pasang menu yang prioritas. Pastikan menu hanya berisi hal-hal penting yang user butuhkan. Seperti profil, kontak, hingga layanan;
  • Sajikan item menu secukupnya. Terlalu banyak pilihan hanya akan membingungkan user;
  • Gunakan teks/icon deskriptif. Tak perlu menggunakan copywriting yang terlalu puitis. Pakai saja istilah atau icon yang mudah user pahami. Seperti Sign Up, Cart, Search, dll;
  • Pertegas teks/icon navigasi. Buat perbedaan jelas antara teks navigasi dengan isi website. Sehingga, user mudah mengidentifikasi navigasi.

Dengan memiliki navigasi yang baik, petualangan user di website akan mudah dan menyenangkan. Bahkan, Anda bisa mengontrol perjalanan mereka untuk mengarah ke action yang Anda harapkan.

6. Call-to Action Button Tidak Menarik dan Salah Posisi

Call-to-Action atau CTA punya fungsi yang berbeda dari tombol navigasi. Meskipun sama-sama bisa diklik, CTA punya pengaruh langsung ke konversi. Sedangkan navigasi sebatas membantu user membuka halaman-halaman website.

CTA Button adalah teks (bisa berupa teks dengan link ataupun tombol pada website) yang bisa diklik untuk mengajak pengunjung melakukan sesuatu. Contohnya: Beli Sekarang, Download, Baca Selengkapnya, dll.

Sekarang, bayangkan Anda mampir ke website jual-beli kendaraan. Saat mau membeli, tombol CTA entah berada di mana atau malah tidak terlihat seperti tombol yang bisa diklik. Alhasil, malah tidak jadi belanja, kan?

Tombol CTA tidak terlihat jelas

Artinya, jika CTA pada posisi yang kurang strategis atau desain kurang oke, kemungkinan goal Anda jadi tidak tercapai. Baik itu mendapatkan klien, menghasilkan revenue, dan action lainnya.

Lalu, gimana sih cara membuat CTA Button yang efektif? Silakan pelajari trik di bawah.

  • Sediakan pilihan jawaban dan tonjolkan mana yang lebih penting. Agar terkesan tidak memaksa user, sediakan pilihan jawaban seperti Ya dan Tidak. Namun, highlight opsi tombol yang Anda harap user pilih;
  • Desain CTA agar tampil menawan. Mulai dari ukuran tombol, border, jenis font, hingga hal-hal mendetail lainnya;
  • Berikan efek Hover States. Hover States adalah ketika elemen tampak berubah saat disentuh cursor. Ini akan memberitahu user bahwa elemen bisa diklik.
  • Gunakan kalimat perintah. Buat instruksi yang jelas agar audiens mau mengikuti petunjuk Anda;
  • Bermain dengan kreativitas. Gunakan copywriting yang ringkas namun menggoda. Seperti ‘Hidup sehat Anda dimulai sekarang!’;
  • Tonjolkan manfaat. Fokus dengan apa yang akan user dapatkan setelah mengklik tombol;
  • Batasi penawaran. Terapkan strategi FOMO (Fear of Missing Out) untuk menciptakan kesan darurat sehingga audiens segera melakukan action;
  • Posisikan CTA Button pada lokasi yang strategis. Tombol CTA harus tampil mencolok, mudah ditemukan, dan ada pada setiap halaman web yang penting.

Memasang CTA dengan tepat tentunya mampu mendongkrak website ataupun bisnis Anda. Faktanya, CTA sanggup meroketkan konversi hingga 121%, lho. Menarik, bukan?

7. Website Layout Berantakan

Tahukah Anda bahwa hanya butuh 0.05 detik bagi visitor untuk memutuskan akan pergi atau bertahan pada website?

Jika tidak percaya, coba lihat contoh berikut. Apa yang melintas Anda pikirkan saat berkunjung ke website yang seperti ini?

Website layout saling menabrak dan berantakan

Kemungkinan besar, Anda akan pusing. Setiap konten seakan menempel, dengan tulisan yang seperti dijejalkan begitu saja. Tidak ingin ribet, Anda pun pergi dari website dan mencari situs lain.

Nah, itulah salah satu contoh akibat dari website layout berantakan.

Website layout adalah kerangka yang mengatur tata letak navigasi, tombol CTA, dan elemen lainnya pada website. 

Tanpa layout yang baik, user akan kesulitan menjelajahi website. Mereka juga susah menangkap info yang ingin Anda sampaikan.

Supaya tidak jatuh dalam kesalahan dalam mendesain web ini, Anda bisa mengupayakan hal berikut.

  • Pelajari dan buat hirarki visual. Hirarki visual adalah konsep untuk menyetir perhatian audiens. Tujuannya untuk menunjukkan hal penting terlebih dahulu;
  • Gunakan struktur dasar website. Buat halaman yang biasanya ada pada website, seperti Beranda, Kontak, Layanan, dll. Sehingga, user akan merasa familiar dengan fungsi web;
  • Pilih jenis website layout yang sesuai. Tentukan tujuan situs Anda. Jika konversi, taruh landing page pada bagian depan. Namun lain jadinya jika tujuan web sebagai papan informasi, di mana barisan konten sebaiknya tampil pada halaman utama;
  • Buat navigasi yang simple. Navigasi harus sederhana dan mudah user gunakan;
  • Posisikan setiap komponen web secara terorganisir. Atur letak navigasi, konten, tombol, dll sehingga terlihat rapi dan mudah user ikuti;
  • Ikuti perkembangan trend web design. Website layout seringkali berkembang, mengikuti kebutuhan dan tingkah laku user yang berubah-ubah;
  • Pelajari berbagai teori design. Teori design seperti Hukum Gestalt, Rule of Thirds, Hukum Hick, dll akan membantu Anda memahami psikologi manusia saat menggunakan website.

Dengan memiliki website layout yang baik, tampilan web jadi lebih tertata dan mudah user gunakan.

Keuntungan lanjutannya, User Experience akan positif dan website mampu meraih goal-nya. Baik itu konversi, meningkatkan awareness, memperkuat engagement, dll.

8. Kurang Memahami HTML/CSS

Saat mendesain web, ada kalanya Anda tidak sendiri. Terkadang, butuh berkolaborasi dengan web developer.

Lah, memang apa bedanya web designer dengan web developer sih?

Begini, web designer bertugas membuat tampilan website dengan pendekatan UX. Layout, visual, grafis, dan sebagainya.

Sedangkan web developer bertanggungjawab terhadap semua hal di belakang layar. Termasuk performa situs, serta  logika dan bagaimana tiap komponen web bekerja.

Sayangnya, dalam membangun tampilan website terkadang desain dirancang suka-suka tanpa memikirkan apakah mungkin dieksekusikan. Alhasil, web yang rilis beda jauh dari desain.

Hasil akhir esain website tidak sesuai dengan rancangan

“Problem yang sering dihadapi, ketika design sudah di hand-over, web developer mengalami kesusahan dalam proses development. Maka dari itu penting untuk memikirkan sejauh apa teknologi yang akan dipakai dan bagaimana kemampuan dari si web developer.”

-Oko, UI Designer Niagahoster

Nah untuk memudahkan kolaborasi dengan web developer, web designer perlu memahami basic coding front-end. Seperti HTML/CSS. HTML dan CSS adalah bahasa markup untuk membuat tampilan yang bisa diakses melalui browser.

Lalu, gimana sih caranya belajar HTML dan CSS? Berikut kami berikan tipsnya.

  • Pelajari kerangka inti HTML. Anda bisa memulai belajar dengan memahami struktur dasar halaman website dalam HTML;
  • Ketahui basic coding HTML dan CSS. Mengetahui basic coding HTML dan CSS akan memudahkan Anda memahami code yang lebih rumit;
  • Buat atau modifikasi template HTML/CSS sesuai kebutuhan. Coba praktik dengan membuat ataupun memodifikasi template HTML/CSS;
  • Kembangkan kemampuan dengan coding yang lebih ringkas. Ikuti perkembangan web development agar Anda bisa merancang web dengan code yang lebih bersih, seperti HTML5.

Memiliki bekal pengetahuan HTML dan CSS, Anda pun bisa mendesain web sekaligus berkolaborasi dengan web developer. Keuntungan lainnya, Anda juga mampu mengembangkan halaman web tanpa bergantung pada plugin atau template.

9. Web Tidak Responsive

Tahukah Anda 73,1% pengunjung meninggalkan web dengan desain non-responsif?

Nah sebelum mengetahui alasannya, sebaiknya Anda memahami dulu apa itu website responsive.

Website responsive adalah website yang mampu menyesuaikan layout saat tampil di berbagai jenis device (desktop, mobile, tablet) dengan ukuran layar berbeda. 

Tanpa desain responsive, website akan tampil dalam versi yang tidak seharusnya.

Misal, saat pengunjung mengakses situs lewat smartphone, eh yang muncul malah website versi desktop. Alhasil, seluruh komponen terlihat kecil sehingga pengunjung kesulitan menggunakan fitur dan pergi mencari website lain.

Perbandingan desain web responsive

Jadi sebelum kehilangan pengunjung, pastikan buat web design yang responsive. Caranya:

  • Pakai atau buat template yang responsive. Anda bisa menggunakan template responsive siap pakai atau membuat tema responsive sendiri dengan belajar HTML dan CSS;
  • Pelajari bagaimana user menggunakan web Anda di berbagai device. Ketahui fungsi apa saja yang paling user butuhkan baik pada desktop, mobile, ataupun tablet;
  • Optimasi gambar. Ukuran gambar harus mampu fleksibel mengikuti tipe device;
  • Pastikan navigasi tampil oke di setiap jenis device. Tampilan pada mobile tentu lebih kecil daripada desktop ataupun tablet. Jadi, sesuaikan navigasinya. Memakai hamburger navigation, misalnya;
  • Desain tombol agar mudah diklik meski di layar kecil. Tombol harus mencolok dan mudah diklik. Bisa dengan mendesainnya dalam bentuk kotak atau oval;
  • Gunakan tools cek website responsive. Periksa apakah situs sudah responsive dengan berbagai tools cek website responsive.

Meski cukup banyak upaya yang perlu Anda lakukan, website responsive juga mendatangkan cukup banyak keuntungan kok. Baik dari segi User Experience hingga konversi. Nyatanya, 80% user tertarik melakukan pembelian dari perusahaan dengan situs web responsive, lho. Hehe..

10. Cuek dengan SEO Web

SEO (Search Engine Optimization) adalah upaya optimasi yang memungkinkan website mendapat ranking teratas di hasil pencarian. Salah satu yang bisa dioptimasi yaitu desain web itu sendiri.

SEO website design adalah pembuatan design website yang mengikuti kaidah SEO sehingga mudah ditemukan di mesin pencari.

Tanpa menerapkan SEO Web, situs akan sulit ditemukan. Apalagi, hanya 0.78% orang yang mau melihat hasil pencarian pada halaman kedua Google dan seterusnya.

Lalu, bagaimana sih cara membangun SEO website design? Coba lakukan beberapa trik ini.

  • Lakukan page slicing. Page slicing adalah membagi komponen website menjadi bagian kecil. Sehingga, proses optimasi lebih maksimal. Misalnya, mengiris background yang punya motif sama dan dipakai berulang. Alhasil, page loadnya lebih cepat daripada menggunakan gambar versi utuhnya;
  • Atur layout website. Seluruh navigasi hingga konten harus terorganisir agar mudah dipahami user;
  • Buat sitemap website. Sitemap adalah daftar halaman website yang bisa user akses dan akan ditampilkan search engine. Ini mempermudah Google mengindeks situs Anda;
  • Hanya gunakan satu H1 pada setiap halaman web. Heading 1 berfungsi sebagai judul utama halaman website. Supaya Google tidak bingung dengan inti website Anda, cukup pasang satu H1 saja di tiap halaman web;
  • Pastikan tema website mobile-friendly. Website mobile-friendly adalah website yang dioptimasi untuk perangkat mobile. Faktanya, Google lebih suka mengindeks situs yang mobile-friendly;
  • Kecepatan website harus oke. Faktanya, Google memberikan halaman pertamanya bagi website yang page speed-nya mendekati 1,65 detik.

Melakukan upaya SEO Web Design di atas, situs Anda pun kemungkinan besar lebih mudah meraih ranking pertama pada mesin pencari. Dan jika sudah melakukannya, jangan lupa untuk terus melakukan maintenance supaya tidak kesalip kompetitor, ya!

Mari Melihat Contoh Desain Website Terbaik yang Bisa Anda Coba

Sekarang, kami akan mengulas salah satu rancangan desain website bisnis dari layanan membuat website milik Niagahoster.

Manjakan Pengunjung dengan Visual Menarik

Situs bisnis online rancangan Niagahoster menerapkan 8-Second Rule. Ini adalah trik untuk memikat perhatian user hanya dalam waktu 8 detik. Tidak percaya?

Buktinya, saat memasuki website, user akan disambut dengan header website berisi gambar berukuran besar (hero image). Ini adalah kesempatan bagi pemilik bisnis memamerkan format gambar untuk website terbaik dari layanan mereka.

Home page website buatan Niagahoster

Selain itu, website juga memanjakan mata user. Secara konsisten, halaman website memadukan warna dominan putih dengan biru, oranye, dan hijau sebagai pelengkap.

Tipografinya, jangan sampai kelewatan. Seperti yang Anda lihat, format antara judul dengan isi berbeda. Sehingga, user mudah mengidentifikasi mana poin yang paling penting untuk dibaca duluan.

Text colour-nya pun menyesuaikan bidang yang diisi. Pada tombol Daftar, misalnya. Dengan latar belakang oranye, tulisan dicat putih agar tetap terlihat jelas.

Seluruh Konten Tertata Rapi

Sekarang, kita akan beralih ke layout website. Desain ini mengusung konsep grid of cards layout.

Grid of cards adalah layout yang menampilkan konten layaknya barisan kartu berjajaran di atas meja.

Susunan konten yang rapi untuk memajang berbagai produk variatif

Layout seperti ini cocok bagi bisnis yang menawarkan produk variatif. Sebab, konten tampil maksimal dan rapi. Sehingga, user bisa langsung menemukan banyak produk tanpa keseringan scroll.

Kerennya lagi, tampilan situs terlihat lebih luas karena memakai hamburger menu. Hamburger menu adalah daftar menu yang dimasukkan dalam icon bergambar tiga garis bertumpuk. Keseluruhan menu baru muncul ketika user mengklik.

Menyajikan User Experience yang Nyaman

Visual dan konten sudah oke, lalu bagaimana dengan User Experience-nya? Apakah menjawab kebutuhan user? Mari kita lihat.

Pada situs belanja online ini, user bisa login ataupun melihat-lihat produk dulu. Tentunya, ada kalanya user hanya ingin memunculkan produk tertentu, kan?

Nah, itulah fungsi menu kategori dan search box pada website. User jadi lebih mudah menavigasi situs menuju ke halaman yang mereka inginkan.

Navigasi mudah dan membuat User Experience makin nyaman

Lanjut ke proses berbelanja, website akan menampilkan informasi detail terkait produk. Jika user sudah memilih, mereka bisa langsung mengklik tombol Add to Cart yang tampil mencolok.

Proses berbelanja mudah dengan tombol CTA menarik dan strategis

Jika Anda perhatikan, setiap halaman website bisnis online ini membawa header yang sama. Yang artinya, Anda bisa login, menavigasi, kembali ke home page website kapanpun dengan mudah. Praktis, bukan?

Tampil Responsive di Berbagai Jenis Device

Contoh-contoh sebelumnya hanya menunjukkan tampilan website versi desktop. Lalu, gimana ya kalau diakses lewat smartphone?

Seperti yang Anda lihat di bawah, ciri website responsive adalah secara otomatis mampu mengubah layout-nya sesuai device yang user pakai.

Tampilan website buatan Niagahoster versi mobile
Tampilan website versi mobile
Tampilan website buatan Niagahoster versi desktop
Tampilan website versi desktop

Dengan begitu, website akan melayani user dari berbagai device dengan pengalaman terbaik yang sama. Belanja pun nyaman dilakukan kapanpun, di manapun, dan lewat apapun jenis device-nya.

Butuh Situs dengan Desain Website Siap Pakai? Niagahoster Punya Solusinya!

Sampai sini, Anda sudah paham mengapa desain web yang tidak tepat dapat menghancurkan website.

Melakukan kesalahan dalam mendesain web memungkinkan performa situs macet dan jauh dari harapan. Baik page load lamban, bounce rate tinggi, hingga miskin konversi.

Nah sekarang, mungkin Anda dilema: Mau mendesain web yang keren, tapi kok rempong gitu yah?

Tenang, Niagahoster punya solusi anti ribet, kok. Sekarang, Anda bisa lho membuat website instan untuk segala kebutuhan online Anda. Mulai dari e-commerce, e-learning, rumah sakit, dan banyak lagi.

Terus, web design-nya gimana?

Jangan khawatir. Niagahoster menyediakan berbagai template siap pakai dan juga melayani pembuatan website dari nol.

[amp-cta id=”34654″]

Anda tak perlu lagi pusing dengan berbagai urusan teknis. Tinggal pilih desainnya, lalu kami yang akan mengerjakannya untuk Anda. Anda hanya perlu duduk santai, menunggu website jadi. Mudah, bukan?

Kelebihan membuat website di Niagahoster

Jadi, tunggu apa lagi? Yuk segera bangun website instan Anda dan raih kesuksesan online di depan mata!

Benefita Hi! I'm an experienced tech writer passionate about making complex technology easy to understand. I hope you enjoy reading! See you on my next article!

3 Replies to “Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini…”

  1. Mantap Bang Rudi. Ini nih, salah satu hal yang bikin betah pakai NH, gak cuma dapat pelayanan, tapi juga ilmu keren.

  2. Saya sebagai pelanggan NH merasa terbantu dengan artikel ini, dapat tutorial gratis. Terima kasih ilmunya.

Leave a Reply

Your email address will not be published. Required fields are marked *