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"