Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya)
Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (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.
Tanpa 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;
- Seperti kombinasi warna antara web dengan teks tepat sehingga mudah dibaca user;
- 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 target pasar 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.
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.
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.
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.
Karena itu, mendesain web harus paham target pasar dan memadukannya dengan Psikologi Warna. Bangun nuansa situs dengan pilihan warna berikut:
| Warna | Kesan | Cocok Bagi Industri… |
| Biru | Membangun kepercayaan dan ketulusan | Perusahaan tech hingga financial |
| Kuning | Membangkitkan semangat dan optimisme. Cocok untuk Call-to Action Button atau mengarahkan user ke konversi | Industri pendidikan, organisasi, dll |
| Hijau | Menciptakan kesan tenang | Industri kesehatan dan makanan |
| Oranye | Mencerminkan persahabatan dan kreativitas. Daripada sebagai warna dominan, lebih cocok untuk pelengkap | Restoran, perusahaan kartu kredit, dll |
| Pink | Romansa, feminim, manis | Perusahaan fesyen atau industri yang menargetkan wanita dan anak-anak |
| Merah | Membangkitkan energi dan hal-hal darurat | Sering dipakai untuk situs restoran |
| Ungu | Memberi kesan mewah dan kebijaksanaan | Agen konsultan, bisnis parfum, dll |
| Putih | Minimalis, bersih, hingga ketulusan | Situs berita, e-commerce, dll |
| Abu-abu | Melambangkan ketenangan, minimalis, dan modern | Perusahaan tech, arsitek, fesyen, dll |
| Hitam | Menunjukkan kekuatan, elegan, hingga kemewahan | Website 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.
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 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 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.
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.
Baca Juga: Apa itu Sidebar WordPress? Ini 13 Tipe Sidebar untuk Inspirasimu
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?
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?
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.
“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.
Baca Juga: Panduan Lengkap Cara Desain Web dengan Mudah
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.
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 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..
Baca Juga: 20 Template Web Gratis dan Responsive untuk Anda
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!
Baca Juga: Panduan Lengkap Cara Membuat Struktur Website yang SEO Friendly
Mari Melihat Contoh Desain Website Terbaik yang Bisa Anda Coba
Sekarang, kami akan mengulas salah satu rancangan desain situs bisnis online 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 berisi gambar berukuran besar (hero image). Ini adalah kesempatan bagi pemilik bisnis memamerkan foto terbaik dari layanan mereka.
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.
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.
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.
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.
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.
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?
Jadi, tunggu apa lagi? Yuk segera bangun website instan Anda dan raih kesuksesan online di depan mata!
The post Hindari 10 Kesalahan Desain Web yang Sering Dilakukan Ini (Dan Solusinya) appeared first on Niagahoster Blog.
source https://www.niagahoster.co.id/blog/kesalahan-umum-pembuatan-desain-website/
via Blogger https://ift.tt/3pOs9f0
June 13, 2021 at 11:31AM
via Blogger https://ift.tt/3znKRys
June 13, 2021 at 01:35PM
via Blogger https://ift.tt/3pMLPjr
June 13, 2021 at 04:35PM
via Blogger https://ift.tt/3vlZ7EL
June 13, 2021 at 07:36PM
via Blogger https://ift.tt/35gRvbT
June 13, 2021 at 10:35PM
via Blogger https://ift.tt/3pNKnx4
June 14, 2021 at 01:35AM
via Blogger https://ift.tt/3cET8nU
June 14, 2021 at 04:35AM
via Blogger https://ift.tt/35frSZ9
June 14, 2021 at 07:35AM
via Blogger https://ift.tt/2TsFIEK
June 14, 2021 at 10:35AM
via Blogger https://ift.tt/3gAiS67
June 14, 2021 at 01:35PM
via Blogger https://ift.tt/3pP6TWk
June 14, 2021 at 04:35PM
via Blogger https://ift.tt/3zs3Vvy
June 14, 2021 at 07:36PM
via Blogger https://ift.tt/3wBitH6
June 14, 2021 at 10:35PM
via Blogger https://ift.tt/2Srs4So
June 15, 2021 at 01:36AM
via Blogger https://ift.tt/3xjo2Ko
June 15, 2021 at 04:35AM
via Blogger https://ift.tt/3iN8Xgl
June 15, 2021 at 07:35AM
via Blogger https://ift.tt/2Syxx9T
June 15, 2021 at 10:35AM
via Blogger https://ift.tt/2Tvba5s
June 15, 2021 at 01:35PM
via Blogger https://ift.tt/3cILhpi
June 15, 2021 at 04:35PM
via Blogger https://ift.tt/3gQuiD1
June 15, 2021 at 07:35PM
via Blogger https://ift.tt/3vwQffs
June 15, 2021 at 10:35PM
via Blogger https://ift.tt/3cKBKhA
June 16, 2021 at 01:35AM
