Bayangkan Anda pergi ke toko
untuk mencari pakaian kerja baru. Anda melihat noda di lantai, rak yang tidak
teratur, dan bau aneh saat Anda melihat sekeliling. Apakah Anda akan tinggal di
toko dan berbelanja di sana?
Desain toko memengaruhi perilaku konsumen,
dan hal yang sama berlaku untuk situs web.
Survei Kopling terhadap 612 orang
menemukan bahwa 83% responden menilai apakah desain situs web menyenangkan
secara estetika dan terkini. Di sisi lain, 50% peserta akan meninggalkan
website selamanya jika dianggap kontennya tidak relevan atau tidak memenuhi
kebutuhan mereka.
Jadi bagaimana Anda mendesain
situs web yang disukai konsumen?
Tentang itulah artikel ini. Kami
akan menunjukkan kepada Anda mengapa desain web yang bagus itu penting dan
membagikan 15 prinsip desain web yang dapat Anda gunakan untuk membuat situs
web berkualitas tinggi.
Mengapa desain web yang bagus itu penting?
Perancang web rata-rata
menghasilkan $57.000 per tahun , sekitar $8.000 lebih banyak daripada
pengembang web junior, yang menghasilkan rata-rata $44.000 per tahun. Desainer
mendapat kompensasi yang cukup baik untuk alasan yang baik: pekerjaan mereka
sangat penting.
Saat konsumen baru mengunjungi
situs web Anda, hal itu membentuk kesan pertama yang membentuk interaksi mereka
di masa mendatang dengan merek Anda. Pada saat inilah mereka mengembangkan
opini pertama mereka tentang Anda.
Situs web Anda juga menyampaikan
identitas, visi, dan posisi merek Anda dalam industri. Jika Anda memiliki
pesaing dekat dengan produk serupa, situs web yang membuat orang berkata
"wow" akan membuat Anda lebih diingat dan meningkatkan kesadaran
merek Anda di atas persaingan.
Selain itu, situs web yang kuat
dapat meningkatkan upaya pengoptimalan mesin telusur (SEO ) Anda.
Mesin pencari memperhitungkan
bagaimana orang merespons situs web ketika mereka memeringkatnya dalam hasil
pencarian. Jika rasio pentalan Anda rendah dan orang-orang sering mengunjungi
beberapa laman di situs Anda, mesin telusur kemungkinan akan memberi Anda
peringkat lebih tinggi daripada pesaing dengan rasio pentalan tinggi.
SEO teknis juga penting di sini.
Situs web dengan judul yang dirancang dengan baik, struktur halaman, dan tautan
lebih mudah diakses. Dengan demikian, mesin pencari dan konsumen menyukai
mereka. Mari kita lihat beberapa prinsip penting dari desain web.
15 prinsip desain web yang efektif
Ketika kita berbicara tentang
"prinsip desain web", yang kita maksud adalah aturan umum untuk
mendesain elemen tekstur dan visual dari sebuah situs web atau halaman web.
Setiap merek menganut prinsip desain web secara berbeda: beberapa sesuai dengan
praktik terbaik dan beberapa tidak.
Untuk membantu Anda membuat situs
web yang hebat, berikut adalah 15 prinsip desain web (ditambah contoh situs web
yang menggunakannya secara efektif):
1. Halaman harus mudah dinavigasi
Dalam studi Clutch tentang
pengalaman pengguna di situs web, 94% peserta menilai navigasi situs web
sebagai "fitur situs web paling penting"
Tidak heran mengapa. Jika
pengguna mesin telusur membuka situs web Anda untuk mencari informasi tentang
"desain seluler" dan tidak dapat menemukannya, langkah alami
selanjutnya adalah mengeklik "kembali" dan mencoba situs web lain.
Bagaimana Anda bisa menerapkan
navigasi yang terencana dengan baik? Dapatkan inspirasi di situs web The Cool
Club.
Saat Anda memasuki beranda The
Cool Club, tata letak situs webnya sangat jelas. Anda dapat membuka bagian
produk utama (seperti "permainan kartu" dan "daftar kubus")
menggunakan tombol di sebelah kiri, dan Anda dapat membuka halaman
"tentang" dan "kontak" menggunakan tombol di sebelah kanan.
Halaman produk Cool Club juga
sangat mudah dinavigasi. Merek saat ini memiliki dek interaktif yang
menampilkan 54 variasi keren dan halaman yang sesuai. Cukup gulir ke bawah dan
klik kartu yang ingin Anda lihat lebih banyak.
Situs web Cool Club bersifat
interaktif
Untuk membuat situs web yang sama
efektifnya, atur konten Anda ke dalam kategori yang jelas untuk header dan
footer Anda dan berikan judul yang deskriptif. Kemudian, urutkan halaman Anda
menurut topik, sehingga orang dapat dengan mudah menavigasi di antara topik
yang serupa.
Juga, buat header dan footer Anda
konsisten di seluruh situs web Anda.
2. Selalu manfaatkan ruang
negatif
Ruang negatif (atau "ruang
putih") adalah wilayah yang mengelilingi subjek halaman, apakah itu
gambar, video, teks, atau tombol.
Banyak pemasar yang rajin mengisi
semua ruang kosong di halaman, berharap memberi pengunjung lebih banyak
informasi akan membuat mereka lebih terlibat. Namun, ini sering menghasilkan
halaman yang luar biasa dan membingungkan.
Di situlah ruang negatif masuk.
Penggunaan ruang negatif menekankan elemen paling penting dari setiap halaman,
karena kurangnya warna menarik perhatian pengunjung ke area yang lebih terang.
Tentu saja, "menggunakan
ruang negatif" tidak berarti "membuat situs web putih yang
membosankan." Sebaliknya, Anda dapat memanfaatkan ruang tersebut dengan
menggunakan warna merek Anda, seperti yang dilakukan Garoa.
Garoa menggunakan ruang negatif
untuk mengatur
Beranda Garoa menggunakan palet warna
krem ??untuk menciptakan suasana, sekaligus memanfaatkan ruang negatif.
Hasilnya, mata Anda tertuju pada konten pengantar bagian “perawatan kulit musim
gugur” di bagian tengah, bukan bagian yang kurang penting.
Pastikan untuk memanfaatkan ruang
kosong untuk menampilkan hierarki di situs web Anda sendiri .
3. Halaman harus koheren, tapi
menarik
Saat Anda membaca nama merek
seperti "Cadbury", "Hershey's", atau "Nike", visi
logo, font, dan gaya desain mereka kemungkinan besar akan langsung muncul di
benak Anda. Itulah kekuatan merek yang konsisten.
Saat mendesain situs web Anda,
buat halaman dengan elemen yang konsisten untuk memberikan identitas visual
yang jelas pada merek Anda. Itu berarti:
·
Gunakan font , gaya, dan warna yang sama di
header
·
Pertahankan jarak yang sama antara elemen visual
antar halaman
·
Gunakan palet warna, bukan warna acak
·
Tetapkan panduan desain untuk konten panjang
seperti berita dan postingan blog
·
Gunakan satu templat situs web untuk semua
halaman
Halaman yang konsisten tidak harus
memiliki tampilan yang benar-benar seragam. Sebaliknya, Anda dapat
menyeimbangkan konsistensi dan komitmen dengan memadukan elemen.
Misalnya, Anda dapat menggunakan
font dan warna yang berbeda untuk heading H1, H2, dan H3. Atau Anda dapat
memodifikasi desain dari berbagai jenis halaman, untuk menggabungkan semuanya.
4. Rangkullah warna pelengkap
Warna pelengkap adalah pasangan
warna yang dapat Anda padu padankan tanpa membuat desain Anda terlihat
berlebihan dan jelek.
Cara warna ditampilkan di layar
mengikuti model warna Merah, Hijau, dan Biru (RGB) daripada model Cyan,
Magenta, Kuning, dan Hitam (CMYK) yang digunakan dalam pencetakan. Pelukis juga
sering menggunakan model warna Merah-Kuning-Biru (RYB) yang menganggap warna
komplementer adalah merah-hijau, biru-jingga, dan kuning-ungu.
Terlepas dari model mana yang
Anda sukai, penggunaan warna komplementer mencapai tujuan yang mirip dengan
hitam dan putih. Warna pelengkap
memberikan penekanan dan menciptakan identitas visual yang jelas untuk
merek Anda.
Anda dapat melihat ini di situs web
Swab The World.
Pada tangkapan layar di bawah,
badan amal kanker darah menggunakan warna hijau dan nuansa magenta. Warna-warna
ini berubah menjadi kombinasi warna pelengkap lainnya saat Anda mengunjungi
bagian situs web yang berbeda (walaupun semua warna memiliki saturasi yang
serupa, sehingga merek tetap konsisten).
Warna komplementer di situs web
Swab The World
Warna komplementer adalah prinsip
yang mudah digunakan dalam desain Anda. Jika Anda ingin tetap sederhana, pilih
dua warna komplementer dan tambahkan ke elemen kontras (seperti H2 dan teks
isi). Atau gunakan beberapa corak dari setiap warna pada setiap halaman.
5. Desain dengan
mempertimbangkan audiens target Anda
Jika Anda melihat situs web The
Cool Kids, Garoa, dan Swab The World, Anda akan melihat bahwa masing-masing
dari mereka memiliki 'rasa' yang unik Perasaan itu berasal dari menyesuaikan
desain situs web dengan audiens.
Personalisasi adalah tujuan
akhir. Sebagian besar dari kita suka membeli produk dan layanan dari merek yang
kita rasa selaras dan terwakili. Faktanya, penelitian menunjukkan bahwa 72%
konsumen menghargai pembelian dari perusahaan yang “sesuai dengan keyakinan dan
nilai mereka”. Jadi, jika seseorang mengunjungi situs web Anda dan melihat
nilai, sasaran, dan prioritas Anda tercermin di sana, mereka lebih cenderung
untuk membeli Anda
Untuk menyesuaikan desain situs
web Anda berdasarkan audiens Anda, ingatlah:
·
Gambar apa yang beresonansi dengan target pasar
Anda, khususnya ?
·
Nada apa yang cocok untuk audiens Anda ?
(misalnya, profesional, minimalis, bergelembung, dll.)
·
Topik apa yang dicari pasar target Anda di situs
web Anda ?
·
Bagaimana Anda bisa mengirimkan posisi merek
Anda melalui desain website Anda ?
·
Ajakan bertindak (CTA) apa yang ditanggapi audiens
Anda (dan di mana Anda harus menempatkannya untuk mengoptimalkan rasio
klik-tayang (RKT) ) ?
Poin bonus jika Anda dapat
menggunakan otomatisasi situs web untuk menghadirkan pengalaman pribadi
berdasarkan profil pengguna dan interaksi sebelumnya dengan merek Anda.
Ini dapat membantu untuk
mengambil inspirasi dari persaingan atau dari merek yang menjual barang berbeda
kepada audiens target Anda.
6. Font harus dapat dibaca dan
diakses
Font yang Anda gunakan di situs
web Anda menentukan apakah pengunjung Anda dapat membaca apa yang Anda tulis
atau tidak. Karena itu, mereka sangat penting.
Hal pertama yang perlu
dipertimbangkan saat memilih font adalah keamanan web. Font aman web kompatibel
dengan sistem operasi dan browser web, sehingga akan berfungsi di sebagian
besar perangkat.
Anda juga harus mempertimbangkan
aksesibilitas. Font yang dapat diakses harus jelas dan mudah dibaca dalam
ukuran besar dan kecil. Misalnya, font berbasis miring tidak mudah diakses,
sedangkan Times New Roman cukup mudah diakses.
Juga, lihat tren font di situs
web lain saat Anda memilih font. Pada tahun 2021, ilmuwan data Michael Li
menganalisis font di lebih dari 1.000 situs web . Dia menemukan tren berikut:
·
85% font tidak menggunakan serif (garis kecil
ditambahkan ke huruf di font koran)
·
Lima tipografi utama adalah Sans Serif, Arial,
Helvetica, Helvetica Neue, dan Roboto.
·
Judul H1 kemungkinan 58% tidak memiliki serif
(dibandingkan dengan 93% untuk teks paragraf)
·
Dua ukuran paling umum untuk font paragraf
adalah 14px dan 16px.
Anda dapat memilih untuk
menggunakan informasi ini untuk memilih gaya font yang cocok dengan yang dicari
orang di situs web. Atau, Anda dapat memilih untuk melakukan sesuatu yang
berbeda.
Virgin adalah merek yang memilih
opsi kedua. Virgin menggunakan setidaknya lima font pada tangkapan layar di
bawah. Tipografi ini memisahkan bagian-bagian halaman dan memberikan tampilan
yang menarik.
Virgin menggunakan font yang
jelas, terbaca dan menarik
7. Ikuti Hukum Fitt dan Hukum
Hick
Psikolog Paul Fitts pertama kali
mengembangkan Hukum Fitt pada tahun 1954, tetapi masih sangat relevan dalam
desain web pada tahun 2022. Hukum Fitt berpendapat bahwa ukuran tujuan
memengaruhi berapa lama waktu yang dibutuhkan seseorang untuk mencapainya.
Dalam konteks desain web atau
pengalaman pengguna (UX), ini berarti tombol yang lebih besar akan memakan
waktu lebih sedikit bagi orang untuk mengklik atau yang lebih kecil akan
memakan waktu lebih lama. Jadi, untuk memanfaatkan Hukum Fitt, Anda perlu
membuat tombol CTA Anda sangat besar dan menonjol sehingga lebih mudah untuk
diklik.
"Mudah" sangat penting
di sini. Hukum Hick, yang dikembangkan oleh psikolog Inggris William Edmund
Hick dan psikolog Amerika Ray Hyman, mengatakan bahwa orang menjadi lelah
setiap kali memutuskan sesuatu.
Oleh karena itu, semakin banyak
keputusan yang Anda minta dari pengunjung situs web, semakin besar kemungkinan
mereka menjadi terlalu lelah untuk melanjutkan.
8. Gunakan invarian untuk
menyorot informasi kunci
Ketika ada sesuatu yang
"tidak berubah", itu menonjol sebagai opsi unik di antara beberapa
opsi yang sangat mirip. Contoh invarian yang paling jelas adalah penyorotan
pada paket di halaman harga, seperti ini dari Box.
Invarian pada halaman harga Kotak
Tapi itu bukan satu-satunya cara
Anda bisa menggunakan invarian. Invarian dapat membantu Anda membuat hierarki
visual pada halaman Anda untuk menyorot informasi utama dan menarik orang ke
bagian penting halaman Anda.
Misalnya, lihat bagaimana Museum
Frans Hals menggunakan invarian untuk membuat hierarki visual di beranda
mereka:
Museum Frans Hals menggunakan
hierarki visual
Hierarki dalam gambar ini adalah
sebagai berikut: tanda "selamat datang", gambar, tanda "beli
tiket", tanda "semua pameran", dan kemudian konten lainnya.
Untuk menggunakan invarian untuk
membuat hierarki Anda sendiri, beri peringkat elemen halaman berdasarkan urutan
kepentingannya. Kemudian, sesuaikan ukuran, warna, dan penempatan setiap elemen
hingga mata pengunjung Anda tertarik ke setiap elemen sesuai urutan yang Anda
inginkan.
9. Dalam CTA: Gunakan bahasa
yang jelas yang ingin diklik orang
Kita telah berbicara tentang
pentingnya membuat tombol besar dan mudah diklik, tetapi ukuran bukanlah
satu-satunya hal yang perlu Anda pertimbangkan saat membuat tombol.
Tombol yang dapat diklik bersifat
deskriptif dan persuasif pada saat yang bersamaan. Mereka membuat pengunjung
penasaran dengan apa yang ditautkan oleh tombol tersebut, dan memberi mereka
alasan untuk pergi ke sana.
Salah satu cara melakukannya
adalah dengan menggunakan teks tombol mendetail seperti "klik di sini
untuk membaca blog kami", "temukan rahasia pemasaran kami di
sini", atau "ini laporan 2022 kami". Cara lainnya adalah membuat
tombol Anda menarik atau unik secara visual.
Rainforest Protector mengambil
kedua pendekatan tersebut. Pelindung Hutan Hujan memungkinkan Anda menavigasi
melalui hutan Amazon mengunjungi berbagai tempat. Tombol setiap tempat
menyertakan gambar dan tindakan seperti "kunjungi kota"
10. Manfaatkan pola F atau
pola Z
Selama 13 tahun, peneliti dari
Nielsen Norman Group (NN Group) menggunakan pelacakan mata untuk melihat
bagaimana lebih dari 500 orang terlibat dengan konten. Ini membuat mereka
mengembangkan pola F, yang mengatakan bahwa hal pertama yang dilakukan orang
adalah memindai halaman, lalu membaca baris dari kiri ke kanan. Jadi:
Pola-F yang diikuti orang di situs
web
Anda dapat memanfaatkan pola-F di
situs web Anda dengan menyusun konten Anda di sekitarnya atau pola alternatif.
Facebook terkenal menggunakan
pola Z di berandanya. Saat Anda mengunjungi halaman tersebut, mata Anda tertuju
pada logo "Facebook", lalu ke tombol "login", lalu ke
gambar di sebelah kiri, dan terakhir ke tombol "buat akun".
Pola halaman muka Facebook
berbentuk Z
11. Situs web yang bagus itu
cepat dan ramah seluler
Pada Q4 2021, 54,4% lalu lintas
situs web global berasal dari perangkat seluler. Jadi, jika situs web Anda
tidak mobile-friendly, Anda dapat mengurangi separuh lalu lintasnya.
Kecepatan juga memengaruhi lalu
lintas situs web organik. Sebuah studi Google menunjukkan bahwa 53% orang
meninggalkan situs web jika memuat lebih dari tiga detik.
Cara termudah untuk membuat situs
web Anda ramah seluler atau cepat adalah dengan memilih tema situs web cepat
yang dibuat oleh desainer ahli. Atau, jika Anda ingin lebih terlibat dalam
desain situs web, Anda dapat membuat situs web responsif khusus .
Itulah yang dilakukan para
perancang film 1917 . situs web 1917 menawarkan pengalaman mendalam untuk
membuat orang terlibat dalam film tersebut. Ini dirancang khusus untuk perangkat
seluler, karena Anda dapat menggunakan jari Anda untuk bergerak melalui parit
Perang Dunia Pertama.
1917 dirancang untuk perangkat
seluler
Jika Anda jeli, Anda akan melihat
bahwa situs web 1917 juga memanfaatkan pola F.
12. Pecah teks menjadi
potongan-potongan kecil
Pikirkan tentang ini: Anda
mencari "permainan pikiran" dan menemukan halaman web yang terlihat
menjanjikan. Namun, ketika Anda mengkliknya, Anda kewalahan oleh potongan besar
teks yang sulit dibaca.
Seperti banyak orang, Anda
mungkin mengklik ke situs web (tidak peduli seberapa menjanjikan kontennya!).
Penelitian pelacakan mata dari
Universitas Sains dan Teknologi Missouri menunjukkan bahwa pengunjung situs web
menghabiskan rata-rata 5,59 detik untuk membaca teks. Jadi, jika orang tidak
dapat membaca teks Anda dalam jangka waktu tersebut, kecil kemungkinan Anda
akan berinteraksi dengan mereka dengan baik.
Perbaiki masalah ini dengan
memecah teks Anda menjadi potongan-potongan kecil. Di samping itu:
·
menggunakan kalimat pendek
·
Jauhi bahasa sehari-hari
·
Berikan definisi untuk setiap kata khusus
industri yang Anda gunakan
·
Hindari "prosa ungu" (metafora, kata
keterangan, dan kata sifat yang tidak perlu)
13. Gunakan grid
Saat kami mengatakan
"gunakan kisi", kami tidak bermaksud bahwa Anda harus membuat situs
web Anda terlihat seperti tabel Excel. Alih-alih, bagi situs web Anda menjadi
beberapa bagian berbeda yang melayani tujuan tertentu sehingga pengunjung dapat
menemukan konten dengan cepat.
Anda tidak perlu menggunakan
garis kisi untuk ini. Alih-alih, buat perbedaan antara ruang berwarna, ruang
negatif, dan ruang kisi berbayang, seperti yang dilakukan Atlason. Beranda
Atlason menghadirkan produk baru dan terlaris di grid. Karena pengunjung
cenderung mencari produk ini, kisi membantu mereka menemukannya dalam hitungan
detik.
Atlason menggunakan kisi untuk
setiap produk
Salah satu cara termudah untuk
menggunakan kisi di situs web Anda adalah dengan memilih tema WordPress yang
menggunakannya. Beberapa contohnya adalah Gridframe, Masonry Grid, dan Shuttle
Grid.
14. Ingat keseimbangan
Dalam konteks desain web ,
"keseimbangan" mengacu pada bagaimana elemen-elemen desain duduk
dalam hubungan satu sama lain dan apakah elemen-elemen tersebut menampilkan
harmoni. Ada banyak cara untuk menciptakan keseimbangan di situs web Anda,
termasuk beberapa prinsip desain web berikut:
·
Melalui simetri (termasuk simetri bilateral,
radial, atau translasi)
·
Menggunakan warna komplementer atau kontras
·
Menggunakan elemen dengan bentuk dan ukuran yang
serupa
·
Menggunakan pola berulang
Anda dapat melihat keseimbangan
beraksi di situs web Woven. Situs web ini menggunakan palet warna yang
seimbang, hitam dan putih untuk menciptakan kontras pada teks, dan simetri
untuk menarik perhatian pengunjung ke konten.
Website anyaman menggunakan
simetri untuk menarik mata
15. Perhatikan detailnya
Teori Gestalt mengatakan bahwa
orang melihat sesuatu secara keseluruhan sebelum melihat elemen individu. Atau,
seperti yang dikatakan Kurt Koffka "Keseluruhan ada secara independen dari
bagian-bagiannya". Meskipun orang sering merujuk teori Gestalt dalam
kaitannya dengan psikologi, itu juga berlaku untuk desain web.
Anda harus memperhatikan detail
kecil situs web Anda untuk memastikan bahwa desain Anda tampak halus dan
lengkap. Saat mendesain sesuatu, mudah untuk fokus pada elemen penting seperti
tajuk utama, gambar, dan CTA dan melupakan hal-hal lain:
·
Ikon header dan footer
·
tombol media sosial
·
Efisiensi konversi situs web Anda ke WordPress
(jika ada)
·
spasi teks
·
Kesalahan ketik dan kesalahan tata bahasa
·
Kompatibilitas Peramban
·
Ukuran gambar
Periksa kembali elemen-elemen ini
sebelum menekan "publikasikan" dan pastikan situs web Anda
memancarkan profesionalisme. Anda mungkin melewatkan gangguan kecil, tetapi
pengunjung tidak.
Juga, tetap up to date dengan
tren dan konsep baru dari prinsip desain web. Menambahkannya ke situs web Anda
akan membuatnya terlihat baru, segar, dan menarik.
Dalam hal desain web,
improvisasi saja tidak cukup ???? Lihat pedoman ini untuk
memastikan situs web baru Anda ramah konsumen ????
Ringkasan
Toko ritel yang dirancang dengan
baik meningkatkan pengalaman konsumen, sementara toko yang buruk dapat membuat konsumen
menjauh dari merek Anda selamanya. Hal yang sama berlaku untuk desain web.
Membangun situs web yang menarik
secara visual lebih dari sekadar proyek yang menyenangkan. Kamu dapat membantu:
·
Sampaikan profesionalitas
·
Bangun kepercayaan dengan pengunjung Anda
·
Menonjol dari pesaing Anda
·
Menarik lalu lintas organik dari mesin pencari
Manfaatkan prinsip desain web
dalam artikel ini untuk membuat situs web yang membuat pengunjung berkata
"wow"