8 Kesalahan Desain Web Umum yang Harus Dihindari dengan Segala Cara (& Bagaimana Divi Dapat Membantu)

Menggunakan WordPress dan tema yang sesuai, mudah untuk membuat dan menjalankan situs dalam hitungan jam. Namun, membuat desain yang terlihat profesional membutuhkan pekerjaan – terutama jika Anda tidak mahir menggunakan kuas virtual.

Untungnya, Anda tidak perlu menjadi desainer berpengalaman untuk membuat situs web yang menarik. Selama Anda berusaha menghindari beberapa jebakan yang paling umum, desain Anda akan terlihat sebagus profesional.

Dalam artikel ini, kita akan mengeksplorasi apa yang membuat desain web bagus, dan delapan kesalahan paling umum yang dilakukan orang selama proses tersebut.

Mari kita mulai!

Apa yang Merupakan Desain Web yang Baik?

Tidak ada standar universal untuk apa yang merupakan 'baik' desain web, tetapi ada beberapa praktik terbaik yang diterima secara universal oleh banyak web designer. Sebagai contoh:

• Desain web yang baik berfokus pada pencapaian tujuannya.
• Desain web yang baik harus mempertimbangkan kegunaan.
• Ini harus menyoroti elemen kunci dari situs Anda, serta pesannya.
• Situs web yang dirancang dengan baik harus mudah dinavigasi.
• Ini harus tetap konsisten di seluruh situs.
• Ini harus ditampilkan dengan baik di perangkat seluler.

Kami telah menyentuh beberapa topik ini di masa lalu, dan kami juga akan membahas beberapa di antaranya di sepanjang artikel ini. Sekarang, mari kita bahas apa yang bukan merupakan desain web yang baik.

8 Kesalahan Desain Web Umum yang Harus Dihindari dengan Segala Cara

Sementara ada banyak kesalahan yang Anda bisa membuat ketika merancang situs Anda, kami telah memutuskan untuk tetap dengan delapan paling umum dan mudah dihindari. Jika Anda berusaha untuk menghindari batu sandungan ini, desain Anda harus jauh di depan.

1. Keterbacaan Buruk

Terlepas dari jenis situs web yang Anda kerjakan, konten tertulis kemungkinan besar akan dominan. Jika ini berlaku untuk Anda, penting untuk membuat setiap posting Anda semudah mungkin dibaca, agar pengunjung Anda tidak frustrasi.

Contoh desain dengan keterbacaan yang buruk.

Orang mungkin bersedia bertahan dengan paragraf panjang yang tidak terputus ketika datang ke buku, tetapi hal yang sama tidak dapat dikatakan untuk situs web. Konten yang mudah dipindai memungkinkan pengunjung memahami tulisan Anda dengan cepat dan menemukan apa yang mereka cari.

Ada banyak cara untuk membuat konten Anda lebih mudah dibaca, tetapi ini adalah yang paling sederhana untuk dipertimbangkan:

• Pisahkan posting dan halaman Anda menjadi bagian logis, gunakan subpos jika memungkinkan.
• Buat subpos Anda sedeskriptif mungkin. Ini akan memungkinkan pembaca untuk memindai konten dengan lebih mudah.
• Pertimbangkan untuk menerapkan skema warna yang mudah dilihat. Lagi pula, Anda ingin pengunjung tetap tinggal dan membaca konten Anda.
• Bila memungkinkan, gunakan font sans-serif untuk sebagian besar posting Anda. Mereka telah terbukti lebih mudah dibaca daripada rekan serif mereka.

Ini harus memastikan bahwa konten Anda bukan tugas untuk dibaca dari sudut pandang desain.

Bagaimana Divi Dapat Membantu

Divi memungkinkan Anda mengatasi masalah keterbacaan dengan mudah berkat penyesuai Tema dan Modulnya . Anda dapat mengakses kedua fitur ini dari tab Divi di dasbor Anda, lalu bermain-main dengan pengaturan font, gaya tajuk Anda, dan bahkan ukuran bagian Anda jika beberapa di antaranya terlalu kecil untuk dibaca dengan benar.

Jika Anda ingin melakukan penyesuaian lebih lanjut, Anda selalu dapat memeriksa Pengaturan Desain Lanjutan setiap modul menggunakan Divi Builder. Bagian ini dikemas dengan hampir semua yang Anda butuhkan untuk meningkatkan keterbacaan Anda (termasuk yang kami sebutkan sebelumnya), dan Anda juga dapat melihat pratinjau perubahan apa pun pada situs web Anda tanpa meninggalkan pembuatnya.

2. Navigasi Buruk

Situs web seharusnya tidak sulit dinavigasi, dan setiap pengguna harus dapat menemukan konten yang mereka cari tanpa harus menggalinya. Jika situs web Anda tidak memenuhi dua kriteria tersebut, Anda memiliki pekerjaan yang harus dilakukan.

Ada beberapa hal yang membuat frustrasi karena harus menelusuri situs web dengan navigasi yang tidak masuk akal. Ini mungkin terjadi jika bilah navigasinya ditempatkan pada posisi yang aneh, termasuk tautan yang rusak, atau diatur secara acak. Selain itu, frustrasi ini dapat menyebabkan rasio pentalan yang lebih tinggi, konversi yang lebih rendah (karena orang tidak akan dapat menemukan apa yang mereka inginkan), dan kunjungan kembali yang lebih sedikit secara keseluruhan.

Contoh website tanpa menu navigasi.

Untungnya, sebagian besar situs web akhir-akhir ini terpelajar dalam manfaat navigasi sederhana. Namun, ada baiknya mempertimbangkan tip berikut agar Anda tetap mudah digunakan:

• Pastikan menu navigasi Anda mudah diakses. Kami menyarankan untuk membuang apa yang disebut menu 'tersembunyi' atau 'munculan' kecuali jika kita berbicara tentang implementasi seluler.
• Pengguna harus dapat menguraikan ke mana setiap tautan akan mengarahkan mereka dan informasi yang akan mereka temukan di sana.
• Jika situs web Anda menyertakan beberapa kategori, Anda mungkin perlu menerapkan menu multi-level. Dalam hal ini, pastikan desain Anda menyiratkan hierarki yang jelas antar komponen.

Banyak orang cenderung meletakkan menu navigasi mereka secara sembarangan. Namun, elemen-elemen ini dapat menjadi sangat penting bagi keberhasilan situs Anda, dan elemen-elemen ini perlu diperlakukan dengan semestinya. Jangan membuat kesalahan yang sama!

Bagaimana Divi Dapat Membantu

Divi memungkinkan Anda untuk mengubah pengaturan navigasi Anda dengan cepat menggunakan Header -nya dan Penyesuai modul , yang bekerja dengan cara yang hampir sama dengan alat yang telah kita bahas di bagian sebelumnya. Jika Anda lebih suka mengganti gaya navigasi sama sekali, Anda dapat melakukannya dengan mengubah pengaturan tema:

Terakhir, Anda juga dapat mengubah pengaturan navigasi posting Anda, baik menggunakan Customizer atau modul Navigasi Posting . Fitur ini memungkinkan Anda untuk mengubah posting apa yang akan muncul ketika pengguna mengklik opsi Sebelumnya atau Berikutnya , serta menyembunyikannya secara global atau untuk perangkat tertentu.

3. Ruang Negatif Tidak Seimbang

Jika digunakan dengan benar, ruang negatif dapat meningkatkan konten di sekitarnya. Ini memungkinkan Anda untuk memandu mata pengunjung Anda ke tempat yang Anda inginkan.

Cara menggunakan ruang negatif dengan benar.

Sebaliknya, tidak meninggalkan cukup ruang negatif di sekitar bagian utama dapat menyebabkan situs web Anda terlihat berantakan.

Contoh desain yang berantakan.

Dalam contoh ini, pengguna mungkin merasa kewalahan, menyebabkan mereka mundur dari situs Anda, dan ke pesaing.

Ruang negatif juga dapat digunakan untuk meningkatkan keterbacaan situs Anda. Anda dapat mencapai ini dengan meninggalkan beberapa ruang ekstra di antara setiap subjudul, dan dengan menggunakan gambar dan daftar untuk memecah paragraf panjang. Tujuannya di sini adalah agar konten Anda terlihat teratur dan mencegah pembaca menjadi lelah. Anda juga dapat menerapkan beberapa dasar ini ke keseluruhan desain situs web Anda untuk menjaga segala sesuatunya terlihat bersih (seperti yang telah kami lakukan untuk blog kami).

Mendapatkan ruang negatif dengan benar bisa jadi rumit, tetapi ini adalah salah satu cara paling sederhana untuk mendapatkan tampilan modern dan bersih untuk desain Anda.

Bagaimana Divi Dapat Membantu

Opsi Desain Lanjutan dan CSS Kustom Divi memungkinkan Anda untuk mengubah hampir semua elemen desain Anda termasuk margin, padding, dan talang untuk setiap bagian yang Anda pilih, yang lebih dari cukup untuk berkreasi menggunakan ruang negatif:

Memodifikasi setiap opsi ini tidak bisa lebih mudah. Dalam kebanyakan kasus, yang perlu Anda lakukan hanyalah mengatur nilainya dalam piksel, gunakan fitur Pratinjau untuk memeriksa apakah mereka sesuai sasaran, dan lanjutkan mengutak-atiknya jika perlu sampai Anda sampai di sana.

4. Ajakan Bertindak (CTA) yang Tidak Dioptimalkan

CTA datang dalam berbagai bentuk, seperti tombol, judul, dan bahkan teks biasa. Namun, tujuannya selalu sama – sebuah dorongan bagi pembaca untuk mengambil tindakan. Lihat contoh bagaimana kami menggunakannya di blog kami:

Jika Anda tahu satu atau dua hal tentang pemasaran internet, Anda tahu betapa pentingnya CTA yang baik. Menggunakan pesan yang tepat dapat memicu peningkatan yang signifikan dalam konversi Anda dan cara Anda menyajikannya sama pentingnya. Sebaliknya, tidak menerapkan CTA atau menggunakan kata-kata yang tidak jelas dapat menyebabkan konversi Anda terpukul.

Ketika berbicara tentang CTA, Anda perlu mengingat dua hal – penempatan, dan keunggulan. Berikut cara melakukannya:

• Idealnya, Anda harus mencoba memasukkan CTA di dekat awal dan akhir halaman Anda. Ini akan memungkinkan Anda untuk menangkap pengunjung yang siap untuk segera berkonversi, dan mereka yang tertarik setelah membaca konten Anda.
• CTA Anda harus menonjol dari sisa halaman Anda. Anda dapat melakukannya dengan memanfaatkan warna kontras, desain tombol yang unik, atau bahkan hanya menggunakan teks tebal.
• Pastikan CTA Anda mudah diklik, terutama untuk pengguna seluler. Biasanya, ini berarti tidak membuatnya terlalu kecil.

Memberi sedikit perhatian pada CTA Anda dapat menghasilkan banyak waktu dalam hal konversi. Tidak masalah apakah Anda mencari langganan email atau penjualan, CTA sangat penting untuk upaya Anda.

Bagaimana Divi Dapat Membantu

Modul Ajakan Bertindak Divi hadir dengan hampir semua opsi penyesuaian yang Anda perlukan untuk memastikan CTA Anda menonjol, termasuk pengaturan yang berhubungan dengan gaya dan pengoptimalan seluler:

Selain itu, Anda selalu dapat mengoptimalkan CTA Anda menggunakan fitur pengujian split bawaan Divi, Divi Leads. Ini membawa fungsionalitas pengujian terpisah yang kuat ke Divi, dan dikelola langsung dari dasbor WordPress Anda.

5. Kurangnya Pengoptimalan Seluler

Memastikan situs web Anda ramah seluler tidak pernah sepenting ini. Lalu lintas seluler melampaui desktop untuk pertama kalinya selama tahun 2016, dan tren tersebut kemungkinan tidak akan kembali dalam waktu dekat.

Contoh situs seluler yang dioptimalkan dengan buruk.

Sederhananya, jika Anda tidak mengoptimalkan desain web Anda untuk pengguna seluler, sekarang adalah waktu yang tepat untuk memulai. Jika tidak, Anda berisiko menakut-nakuti segmen signifikan dari lalu lintas Anda.

Untungnya, kami telah membahas beberapa elemen yang perlu Anda perhatikan dalam hal pengoptimalan seluler, seperti:

• Keterbacaan: Memastikan konten Anda diformat dengan baik sangat penting, karena Anda akan berurusan dengan area pandang yang kecil.
• Navigasi: Menu navigasi Anda harus mudah ditemukan dan digunakan, mengingat pengguna seluler tidak akan memiliki akses ke mouse.
• Optimalisasi CTA: Sama seperti menu Anda, ini harus mudah dikenali dan berinteraksi.

Ada banyak lagi yang bisa dikatakan tentang subjek ini, dan kami telah membahasnya secara mendalam di masa lalu. Untuk informasi lebih lanjut tentang subjek ini, lihat daftar sepuluh tip untuk pengoptimalan desain web seluler ini.

Bagaimana Divi Dapat Membantu

Dalam hal pengoptimalan seluler, Divi mendukung Anda! Tema dioptimalkan untuk daya tanggap langsung, dan Anda selalu dapat memeriksa tampilan situs Anda di perangkat seluler menggunakan fitur Penyesuai Tema .

Namun, jika Anda lebih suka mengambil pendekatan yang lebih praktis, Anda dapat menyempurnakan bagaimana masing-masing modul Anda akan ditampilkan melalui menu Desain Lanjutan khusus mereka. Ini memungkinkan Anda untuk mengubah kontrol desain untuk area pandang desktop, tablet, dan seluler.

6. Desain Tidak Konsisten dan Tidak Fokus

Idealnya, seluruh situs web Anda harus menampilkan desain yang seragam dengan fokus yang jelas. Menggunakan beberapa gaya di satu situs dapat memiliki efek yang menggelegar, dan bahkan dapat membingungkan pengguna Anda.

Terlebih lagi, menciptakan identitas unik untuk situs web Anda – seperti palet warna dan gaya yang seragam – akan meningkatkan pencitraan mereknya. Ambil Facebook, misalnya. Mereka telah mengayunkan gaya yang sama selama bertahun-tahun sekarang – bersih dan dengan palet biru yang mudah dikenali. Ini mungkin bukan desain yang paling bergaya di web, tetapi itu menyelesaikan pekerjaan, dan sekarang, itu dikaitkan dengan merek.

Gaya yang Anda gunakan di situs web Anda sebagian besar merupakan keputusan pribadi – tidak apa-apa selama Anda tetap seragam. Jika Anda kesulitan dengan detailnya, Anda selalu dapat mencari inspirasi dalam bahasa desain visual seperti Desain Material.

Bagaimana Divi Dapat Membantu

Semua modul Divi ditata secara seragam agar terlihat bagus di luar kotak. Namun, Anda juga dapat menyesuaikannya secara individual menggunakan Pengaturan Desain Lanjutan dan fitur CSS Kustom , dan juga menyimpan tweak Anda ke Perpustakaan Divi Anda untuk penggunaan di masa mendatang:

Penyesuai Tema juga memungkinkan Anda untuk mengubah seluruh estetika tema Anda dengan cepat, dan ini mencakup opsi untuk mengubah skema warna dan gaya seluler Anda, di antara fitur-fitur lainnya.

7. Penggunaan Gambar dan Animasi yang Salah

Banyak orang berpikir bahwa memasukkan gambar dan animasi bila memungkinkan di situs web adalah hal yang baik. Jika Anda ingat tren situs berbasis Flash di awal 2000-an, Anda harus tahu apa yang sedang kita bicarakan.

Terlalu mengandalkan salah satu dari jenis media ini tidak hanya dapat menyebabkan situs Anda terlihat berantakan, tetapi juga dapat memengaruhi kecepatan pemuatannya (dan ada beberapa hal yang lebih buruk daripada situs web yang lambat). Terlebih lagi itu juga dapat berdampak pada Search Engine Optimization (SEO) Anda jika Anda salah.

Contoh animasi yang tidak perlu pada halaman web.

Tentu saja, hampir setiap situs membutuhkan beberapa grafik di sana-sini untuk menyempurnakan desainnya, dan kata kuncinya di sini adalah “meningkatkan”. Gambar atau animasi apa pun yang Anda pilih untuk disertakan tidak boleh mengalihkan perhatian dari konten Anda, dan hanya boleh digunakan jika relevan. Misalnya, dalam artikel ini, kami hanya menyertakan gambar untuk memberikan konteks, bukan sebagai fokus utama.

Terakhir, seperti yang telah kita bahas dalam artikel terbaru kami tentang tren desain web, Anda juga harus mempertimbangkan untuk mengganti animasi lengkap dengan interaksi mikro bila memungkinkan. Mereka jauh lebih tidak mengganggu, dan mereka masih memungkinkan Anda untuk menyorot tindakan tertentu kepada pengguna.

Bagaimana Divi Dapat Membantu

Banyak modul Divi hadir dengan animasi berselera bawaan yang tidak akan mengalihkan pengunjung dari konten Anda. Anda bahkan dapat menambahkan milik Anda sendiri menggunakan CSS jika Anda tidak ingin menyingsingkan lengan baju Anda.

Selain itu, beberapa modul Divi – seperti Fullwidth Header – memungkinkan Anda untuk mengimplementasikan fitur paralaks yang populer. Anda bahkan dapat menambahkannya secara manual ke beberapa modul yang tidak mendukungnya secara default, seperti halnya dengan Divi's Slider .

8. Informasi Kontak 'Tersembunyi'

Last but not least, mari kita bicara tentang detail kontak. Bergantung pada jenis situs web yang Anda rancang, kemungkinan setidaknya beberapa pengunjung Anda ingin menghubungi Anda, atau siapa pun yang bertanggung jawab. Memastikan informasi kontak Anda ditampilkan dengan jelas adalah cara terbaik untuk mengaktifkannya.

Tak perlu dikatakan, tetapi beberapa situs web akan lebih terpengaruh daripada yang lain jika mereka tidak membuat informasi kontak mereka mudah ditemukan. Misalnya, detail kontak yang hilang atau tersembunyi di situs web layanan dapat merugikan Anda dalam kehilangan peluang bisnis.

Untuk sebagian besar situs, kami sarankan untuk menyiapkan formulir kontak sederhana, yang harus tersedia di beranda Anda, bagiannya sendiri, atau keduanya:

Menambahkan email atau telepon ke footer Anda – atau menu sekunder – juga bisa menjadi pendekatan yang bagus tergantung pada desain situs Anda. Terlepas dari apa yang Anda sertakan, takeaway utama adalah bahwa itu harus menonjol!

Bagaimana Divi Dapat Membantu

Sama seperti kebanyakan fitur utama, Divi menyediakan modul Formulir Kontak yang telah ditata sebelumnya dengan format yang dioptimalkan. Beberapa waktu yang lalu kami juga merilis paket gratis tata letak halaman kontak, yang sangat membantu jika Anda mencari desain yang sederhana dan modern:

Jika Anda lebih suka mengubah desain Anda secara manual, modul Formulir Kontak Divi memungkinkan Anda untuk menambahkan bidang sebanyak yang Anda inginkan dan menatanya satu per satu. Anda bahkan dapat mengatur pesan sukses untuk dibaca pengguna Anda setelah melakukan pengiriman, semua tanpa meninggalkan pengaturan modul.

Kesimpulan

Pengguna WordPress memiliki waktu yang lebih sederhana daripada kebanyakan saat menyusun situs web yang menarik, berkat fungsionalitasnya yang mudah dipahami. Namun, karena ini, mudah bagi pilihan desain yang buruk untuk menyusup ke dalam proyek Anda, yang dapat dengan mudah menurunkan kualitas visual secara keseluruhan.

Dalam bagian ini, kami telah menunjukkan kepada Anda delapan jebakan desain web paling umum yang perlu Anda hindari selama proyek Anda berikutnya. Mari kita rekap:

1. Keterbacaan yang buruk.
2. Navigasi yang buruk.
3. Ruang negatif yang tidak seimbang.
4. CTA yang tidak dioptimalkan.
5. Kurangnya pengoptimalan seluler.
6. Desain tidak konsisten dan tidak fokus.
7. Penggunaan gambar dan animasi yang salah.
8. Informasi kontak 'tersembunyi'.

Menurut Anda apa kesalahan desain web nomor satu yang harus dihindari setiap pengguna? Berlangganan dan bagikan pemikiran Anda dengan kami di bagian komentar di bawah!

Gambar thumbnail artikel oleh Meilun / shutterstock.com