(0275) 2974 127
Berikut beberapa alasan pentingnya web design bagi pengunjung ataupun pemilik situs :
Design web menarik dan fungsional, sehingga menjawab kebutuhan pengunjung. Misal, menggunakan icon keranjang untuk berbelanja, icon social media untuk link sharing, dsb.
Memberikan user journey yang ringan, to the point dan mudah diakses. Misalnya navigasi menu sederhana.
Desain web mempermudah alur konversi dan menggiring pengunjung melakukan action yang diharapkan. Contohnya, pembelian, berlangganan newsletter, dll.
Design cukup berdampak terhadap page speed. Karena tiap dekorasi harus dirancang setepat dan seefisien mungkin sehingga tidak menghambat page speed.
Berikut adalah kesalahan desain web yang bisa menghancurkan website, yaitu :
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.”
Web tanpa target pasar dan niche membuat desain seperti tidak punya arah. Produk yang dijual juga kesannya campur aduk. Sehingga susah mengundang pelanggan potensial.
Berikut ini beberapa hal agar tidak salah target :
Mengetahui tujuan memudahkan memikirkan elemen yang website perlukan.
Target pasar membantu mengetahui karakter web yang pas.
Goal yang bisa diukur akan memudahkan proses evaluasi web.
Tools tersebut membantu menarik data performa web.
A/B Testing adalah eksperimen untuk melihat variabel mana yang memberi hasil terbaik.
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 atau karakter.”
Untuk membantu memilih tipografi yang efektif, perhatikan beberapa kunci sukses tipografi ini :
Kenali target audiens (usia, minat, profesi, dll) sehingga memudahkan memahami karakter font yang tepat. Childish, modern, edgy, atau bentuk lainnya.
Teks mudah dibaca, tidak hanya sebagai estetika.
Ketahui konten apa yang muncul pada web. 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.
Mengatur posisi dan margin sehingga text berada di garis yang tepat.
Ruang kosong atau jarak di sekitar teks. Membuat teks terlihat lebih lega dan memudahkan user membaca secara scanning.
Warna dan kontras mampu membangun kesan tertentu sekaligus memberi highlight pada poin-poin penting dalam teks.
Gunakan font yang seragam dan konsisten dalam web. Jika jenis font terlalu beragam, user akan bingung dan melihat web sebagai situs yang kacau.
Salah memilih warna adalah akibat lagi yang terjadi jika tidak punya target pasar. Jadi memoles website dengan warna yang tanpa arti. 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. |
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.
Namun, ada kalanya saat mendesain web mungkin lebih fokus pada keindahan gambar dan melupakan akibatnya bagi performa website.
Lakukan antisipasi berikut supaya media visual tidak mengganggu performa website :
Seperti JPEG untuk berbagai gambar fotografi atau yang lebih ringan lagi dengan Google WebP.
Ketahui ukuran panjang dan lebar device yang akan menampilkan web dan konten. Agar, bisa menentukan rasio gambar yang cocok untuk berbagai jenis device.
Susutkan besar file gambar dan hapus meta data yang tidak perlu dengan berbagai tools compressor (TinyJPG, Image Optimizer, plugin Imsanity, dll) agar tidak banyak menyita ruang penyimpanan.
Embed adalah kode untuk menarik video dari situs tertentu (seperti YouTube). Sehingga, video dapat tampil di web tanpa memakan ruang simpan.
Supaya gambar mampu membantu web agar mudah tampil di mesin pencarian, terapkan SEO Image.
Bounce rate tinggi masalahnya adalah karena navigasi yang rumit. Faktanya, 61,5% pengunjung meninggalkan web yang punya navigasi buruk.
“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, dll.
Berikut ini tips desain navigasi yang simple dan berguna :
Bisa di bagian atas (header), kaki website (footer), sisi samping (sidebar), atau kombinasi.
Navigasi berfungsi dengan baik saat user mengaksesnya lewat berbagai device (desktop, mobile, tablet).
Sticky navigation memungkinkan user bisa mengakses menu tanpa repot scroll. Tapi sebaiknya navigasi sembunyi otomatis saat tidak dipakai, sehingga tampilan web tetap luas.
Pastikan menu hanya berisi hal penting yang user butuhkan. Seperti profil, kontak, hingga layanan.
Terlalu banyak pilihan hanya akan membingungkan user.
Tidak perlu menggunakan copy writing yang terlalu puitis. Pakai saja istilah atau icon yang mudah user pahami. Seperti Sign Up, Cart, Search, dll.
Buat perbedaan jelas antara teks navigasi dengan isi website. Sehingga, user mudah mengidentifikasi navigasi.
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 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.”
Berikut ini cara membuat CTA Button yang efektif :
Agar terkesan tidak memaksa user, sediakan pilihan jawaban seperti Ya dan Tidak. Namun, highlight opsi tombol yang diharapkan user pilih.
Mulai dari ukuran tombol, border, jenis font, hingga hal-hal mendetail lainnya.
Hover States adalah ketika elemen tampak berubah saat disentuh cursor. Ini akan memberitahu user bahwa elemen bisa diklik.
Buat instruksi yang jelas agar audiens mau mengikuti petunjuk.
Gunakan copy writing yang ringkas namun menggoda. Seperti “Hidup sehat dimulai sekarang!”.
Fokus dengan apa yang akan user dapatkan setelah mengklik tombol.
Terapkan strategi FOMO (Fear of Missing Out) untuk menciptakan kesan darurat sehingga audiens segera melakukan action.
Tombol CTA harus tampil mencolok, mudah ditemukan, dan ada pada setiap halaman web yang penting.
Tahukah bahwa hanya butuh 0.05 detik bagi visitor untuk memutuskan akan pergi atau bertahan pada website.
“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 disampaikan.
Supaya tidak jatuh dalam kesalahan dalam mendesain web ini bisa mengupayakan hal berikut :
Hirarki visual adalah konsep untuk menyetir perhatian audiens. Tujuannya untuk menunjukkan hal penting terlebih dahulu.
Buat halaman yang biasanya ada pada website, seperti Beranda, Kontak, Layanan, dll. Sehingga, user akan merasa familiar dengan fungsi web.
Tentukan tujuan situs. Jika konversi, taruh landing page pada bagian depan. Namun berbeda jika tujuan web sebagai papan informasi, di mana barisan konten sebaiknya tampil pada halaman utama.
Navigasi harus sederhana dan mudah user gunakan.
Atur letak navigasi, konten, tombol, dll sehingga terlihat rapi dan mudah user ikuti.
Website layout seringkali berkembang, mengikuti kebutuhan dan tingkah laku user yang berubah.
Teori design seperti Hukum Gestalt, Rule of Thirds, Hukum Hick, dll akan membantu memahami psikologi manusia saat menggunakan website.
Saat mendesain web, ada kalanya tidak sendiri. Terkadang, butuh berkolaborasi dengan web developer. Bedanya web designer bertugas membuat tampilan website dengan pendekatan UX. Layout, visual, grafis, dll.
Sedangkan web developer bertanggung jawab 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. Penting untuk memikirkan sejauh apa teknologi yang akan dipakai dan bagaimana kemampuan dari web developer.”
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.
Berikut cara belajar HTML dan CSS :
Bisa memulai belajar dengan memahami struktur dasar halaman website dalam HTML.
Mengetahui basic coding HTML dan CSS akan memudahkan memahami code yang lebih rumit.
Coba praktik dengan membuat ataupun memodifikasi template HTML/CSS.
Ikuti perkembangan web development agar bisa merancang web dengan code yang lebih bersih, seperti HTML5.
73,1% pengunjung meninggalkan web dengan desain non-responsif. Sebelum mengetahui alasannya, sebaiknya 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. Jadi sebelum kehilangan pengunjung, pastikan buat web design yang responsive. Caranya :
Bisa menggunakan template responsive siap pakai atau membuat tema responsive dengan HTML dan CSS.
Ketahui fungsi apa saja yang paling user butuhkan baik pada desktop, mobile, ataupun tablet.
Ukuran gambar harus mampu fleksibel mengikuti tipe device.
Tampilan pada mobile tentu lebih kecil daripada desktop ataupun tablet. Jadi, sesuaikan navigasinya. Memakai hamburger navigation, misalnya.
Tombol harus mencolok dan mudah diklik. Bisa dengan mendesainnya dalam bentuk kotak atau oval.
Periksa apakah situs sudah responsive dengan berbagai tools cek website responsive.
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.”
Lakukan beberapa trik ini untuk membangun SEO website design :
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.
Seluruh navigasi hingga konten harus terorganisir agar mudah dipahami user.
Sitemap adalah daftar halaman website yang bisa user akses dan akan ditampilkan search engine. Ini mempermudah Google mengindeks situs.
Heading 1 berfungsi sebagai judul utama halaman website. Supaya Google tidak bingung dengan inti website cukup pasang satu H1 saja di tiap halaman web.
Website mobile-friendly adalah website yang dioptimasi untuk perangkat mobile. Faktanya, Google lebih suka mengindeks situs yang mobile-friendly.
Faktanya, Google memberikan halaman pertamanya bagi website yang page speed-nya mendekati 1,65 detik.
Kamu mungkin pernah mendengar istilah "Pop Up" dalam beberapa penjelasan artikel. Lalu, apa si Pop…
Setting SSL Cloudflare – Saat ini, HTTPS adalah salah satu upaya yang dilakukan banyak pemilik…
Pernahkah kamu mendengar tentang IPv6? IPv6 adalah versi terbaru dari IP (Protokol Internet) dari yang…
Bagi yang merasa kesulitan dalam membuat aplikasi Android, Hosteko akan memberikan cara mudah membuat aplikasi…
Ketika kamu ingin membuat website, ada beberapa hal yang perlu kamu perhatikan, khususnya tingkat keamanan…
Kompresi online file PDF ukuran 200 KB dan 500 KB atau rahasia kompresi PDF di…