11 Kesalahan Desain yang Biasanya Dilakukan Pembeli Tema WordPress

Apakah Anda pernah membuat situs web dengan tema WordPress, tetapi hasil akhirnya tidak terlihat seperti demo tema? Saya membuat daftar 11 kesalahan desain umum yang sering diabaikan oleh pembuat situs web.

Anda menemukan tema WordPress yang sempurna. Demo tema tampak sempurna. Klien Anda sangat menyukainya dan setuju dengan Anda untuk melakukan pembelian. Anda membelinya, menginstalnya, dan mulai mengedit tema sesuai kebutuhan klien.

Anda mengubah logo, mengubah warna tema, memasukkan gambar slider dan konten, tetapi pada akhirnya, situs web yang Anda buat tidak terlihat seperti demo sama sekali. Anda tahu ada sesuatu yang salah, tetapi Anda tidak dapat mendeteksi apa. Kedengarannya akrab?

Selama 5 tahun terakhir, bekerja sebagai desainer di bisnis tema WordPress, saya melihat banyak contoh situs web indah yang dibuat dengan tema WordPress kami.

Tetapi sesekali, saya melihat situs web dengan dasar yang kuat tetapi dengan beberapa kesalahan desain kecil, yang merusak keseluruhan pengalaman. Saya sedang berbicara tentang hal-hal kecil kecil yang dapat dengan mudah diperbaiki oleh siapa saja.

Saya tahu sulit untuk menemukan kekurangan ini, terutama jika Anda bukan seorang desainer. Untuk alasan itu, saya memutuskan untuk menulis posting blog tentang cara meningkatkan situs web klien Anda agar terlihat lebih baik.

Tandai posting blog ini dan buka daftar di bawah ini saat berikutnya Anda akan membangun situs web dengan tema WordPress. Anda hanya perlu satu atau dua jam, untuk menghapus semua ketidaksempurnaan, tetapi hasilnya akan terlihat 100% lebih baik.

1. Kontras Teks yang Buruk pada Slider

Saya telah berbicara tentang apa yang harus dan tidak boleh dilakukan tentang gambar slider, jadi saya akan singkat sekarang. Prinsipnya sederhana:

• Jika warna teks pada penggeser berwarna putih, pilih latar belakang yang gelap. Jika teks penggeser berwarna gelap, pilih latar belakang yang terang.
• Pastikan, area tempat teks muncul, tidak memiliki terlalu banyak noise visual di latar belakang. Latar belakang yang berantakan mengurangi keterbacaan teks di bagian depan dan proposisi nilai utama yang tertulis di penggeser dapat terlewatkan.

Untungnya bagi Anda, sebagian besar tema kami menyertakan opsi latar belakang solid semi-transparan di belakang teks. Tema WordPress kami yang lebih baru juga memiliki bayangan yang diterapkan ke semua teks pada penggeser, sehingga kontrasnya bahkan lebih baik.

2. Gambar Slider Terlalu Besar

Ketika saya melihat situs web yang dibuat dengan tema WordPress kami, saya cukup sering memperhatikan, bahwa pengguna menggunakan gambar slider yang terlalu besar. Memiliki gambar slider yang mengambil 100% dari tinggi layar hanya dapat diterima, jika Anda seorang fotografer dan foto adalah produk akhir Anda. Dalam kasus lain, tetap di sisi yang aman dan tetap dengan rekomendasi tema. Ini akan menjaga keseimbangan visual situs web Anda yang sempurna.

3. Ruang Putih (Negatif) Miskin

Ruang putih atau negatif dalam desain web adalah ruang kosong antara widget, blok teks, gambar, atau bagian lain dari situs web, yang membantu segala sesuatu diatur dan memberikan alur yang jelas dan logis bagi pengguna akhir.

Tidak peduli seberapa keras kami mencoba, bagaimana kami membuktikan setiap aspek yang mungkin dari tema WordPress, pengguna selalu menemukan cara untuk menghancurkan ruang putih.

Untungnya bagi Anda, kami menggunakan Pembuat Halaman yang kuat dalam tema kami, yang berarti Anda dapat menyesuaikan jarak di seluruh situs web dengan mudah. Page Builder memungkinkan Anda mengubah padding widget, padding baris, dan memungkinkan Anda mengubah ukuran talang antar kolom.

Saya tidak akan berbicara tentang detail dan saya lebih suka memberi Anda beberapa contoh praktis.

• Dalam kebanyakan kasus, pembuat situs web menggunakan terlalu sedikit ruang putih, yang tidak memungkinkan konten untuk bernafas, jadi biasanya, semakin banyak ruang putih yang Anda terapkan, semakin baik hasil yang Anda dapatkan.
• Tunjukkan hubungan antar elemen dengan spasi. Elemen yang menyatu, misalnya, judul posting blog dan tanggal posting, harus lebih dekat daripada elemen yang memiliki tujuan berbeda, seperti tanggal posting blog dan header halaman.
• Konsisten dengan spasi. Itu berarti bahwa setiap baris di situs web Anda harus memiliki jumlah ruang putih yang sama di bagian atas, bawah, kiri, dan kanan.

Jadi, itu datang ke widget. Mereka harus memiliki jumlah padding dan margin yang sama, di mana pun pada halaman mereka muncul. Konsistensi akan membawa keseimbangan ke situs web Anda dan menarik fokus pada hal yang penting – konten.

4. Keramahan Seluler yang Buruk

Prosedur dan aturannya sama seperti pada desktop di atas. Anda masih perlu memperhatikan ruang putih, tetapi untuk seluler, ada beberapa aturan tambahan:

• Salah satunya adalah desain yang ramah jari. Karena jari adalah alat kami untuk bergerak di sekitar situs web saat menjelajah di seluler, kami perlu menyesuaikan halaman dengannya. Saat mendesain tema WordPress, kami memastikan bahwa tombol dan elemen yang dapat diklik tidak lebih kecil dari 50px. Jika Anda menambahkan elemen pihak ketiga ke tema WordPress, pastikan ukurannya cukup besar. Juga, pastikan bahwa komponen yang dapat ditindaklanjuti tersebut tidak terlalu menyatu untuk mencegah kesalahan klik.
• Optimalkan gambar untuk kecepatan. Banyak orang mengakses situs web saat bepergian, yang berarti tidak dapat diandalkan, terkadang koneksi buruk. Cobalah untuk menghilangkan pemuatan situs yang lambat (di seluler) dan optimalkan gambar Anda.
• Uji situs web Anda di perangkat seluler yang sebenarnya. Anda dapat mengubah ukuran jendela browser untuk melihat tampilan seluler, tetapi ketika Anda selesai dengan semua penyesuaian, lihat tampilan situs web pada perangkat seluler yang sebenarnya.

Sistem operasi, browser, dan pengalaman pengguna secara keseluruhan membedakan antara desktop dan seluler dan itu bisa menyebabkan beberapa ketidaksetaraan.

Google mengembangkan tes ramah seluler, alat untuk memeriksa apakah situs web Anda ramah seluler.

Kami memastikan bahwa setiap tema WordPress kami melewatinya dengan mudah.

5. Menggunakan Warna Yang Tidak Bergandengan Tangan.

Memilih kombinasi warna yang tepat adalah hal yang rumit. Jika Anda berbakat, Anda bisa mengikuti firasat Anda. Jika tidak, gunakan alat yang dibuat khusus untuk itu.

Saya akan menunjukkan kepada Anda sebuah contoh:

Sebagian besar tema WordPress kami terbuat dari warna primer dan sekunder. Jika logo Anda terlihat seperti milik Shell, keputusan untuk memilih warna primer dan sekunder sangatlah mudah. Merah akan digunakan sebagai warna utama untuk ajakan bertindak. Yang kuning akan menjadi warna sekunder, digunakan untuk latar belakang dan elemen pendukung.

Jika logo Anda terlihat seperti logo Starbucks dan hanya terdiri dari satu warna, Anda harus mencari yang kedua.

Salah satu pilihannya adalah memilih warna hijau yang sama untuk warna primer dan juga warna sekunder, tetapi saya sangat tidak menyarankannya.

Jika Anda tidak memiliki nyali seorang desainer dan sulit untuk memilih kombo warna, saya punya solusi untuk Anda, yang disebut Coolors. Ini adalah alat yang mudah digunakan untuk membuat kombinasi warna yang indah.

Buka aplikasi mereka dan masukkan kode warna hex (dalam kasus saya #006241) dari warna utama Anda di bagian bawah kolom. Kemudian kunci, dengan mengklik ikon kunci dan tekan spasi.

Tip: Tidak tahu cara mendapatkan kode hex dari logo Anda? Lihat, apakah ada ekstensi Chrome yang berguna untuk itu.

Hasil saya terlihat seperti ini.

Seperti yang Anda lihat, semua warna berubah, tetapi warna utama Anda tetap sama. Jika Anda tidak mendapatkan warna yang Anda suka, lanjutkan menekan bilah spasi.

Jika satu-satunya alasan Anda memilih warna sekunder adalah untuk menggunakannya di situs web dan warna itu tidak akan muncul di tempat lain, jangan pilih warna yang terlalu kuat. Dalam kasus kami, oranye terang keluar.

Anda harus memilih warna yang lebih halus, yang tidak akan merusak merek Anda dan akan mendukung warna utama Anda dengan lancar, dalam kasus kami, hijau.

Pilihan pribadi saya adalah warna krem ​​kedua (#d8c99b) karena akan bekerja sempurna dengan warna hijau dan pasti tidak akan menyusulnya.

Mungkin warna krem ​​​​khusus ini bukan warna yang sempurna, tetapi ini adalah pilihan yang cukup baik. Inilah alasannya. Saat memilih warna, coba pikirkan bagaimana teks gelap atau putih akan terlihat di atasnya.

Dalam contoh saya, teks gelap akan terlihat baik-baik saja, tetapi menambahkan sedikit lebih banyak kontras dan memilih warna krem ​​​​sedikit lebih terang, akan membuatnya lebih baik.

Untungnya bagi Anda, aplikasi Coolors memiliki fitur hebat lainnya. Anda dapat memilih nuansa yang berbeda dari setiap warna. Arahkan mouse ke kolom berwarna dan klik ikon pertama, yang disebut "Warna alternatif." Kemudian pilih warna yang lebih terang atau lebih gelap dan selalu pertimbangkan kontrasnya.

Saya telah membuat demo singkat tentang bagaimana kedua warna ini akan bekerja bersama. Untuk tujuan ini, saya mengambil tema WordPress Adrenalin kami dan mengubahnya menjadi situs web Starbucks.

Saya terkesan dengan betapa cepatnya saya mengubah tema WordPress Adrenalin menjadi sesuatu yang lain sepenuhnya, dalam 2 menit. Yang harus saya lakukan, adalah mengubah dua warna, mengunggah gambar pahlawan khusus dan mengunggah logo khusus. Cobalah sendiri.

6. Jangan Mengacaukan Navigasi Situs Web Anda

Susun navigasi situs web Anda dengan cara yang mudah dibaca dan dicerna. Kelompokkan hal-hal yang kurang penting dalam drop-down atau sertakan di bilah atas atau footer. Buat hierarki navigasi logis dan pastikan, bahwa semua level menu yang sama akan memiliki prioritas yang sama.

Misalnya, persyaratan dan perjanjian biasanya kurang penting daripada ajakan bertindak utama, oleh karena itu keduanya tidak dapat muncul pada tingkat yang sama. Masukkan Persyaratan ke dalam footer dan ajakan bertindak utama ke dalam header.

Jaga navigasi utama Anda tetap bersih, dengan maksimal 5 atau 6 opsi.

7. Logo Terlalu Besar

Ada kalimat terkenal, yang kita semua dapatkan dari klien kami di beberapa titik – “buat logo lebih besar.” Tugas Anda sebagai pembuat website adalah mengedukasi klien Anda, bahwa tidak perlu memiliki logo dengan lebar 400 px karena pengunjung website tidak datang ke website Anda untuk melihat betapa indahnya logo Anda.

Unggah logo dalam ukuran, direkomendasikan oleh penulis tema WordPress. Mereka mungkin paling tahu ukuran logo mana yang paling cocok dengan tema tertentu.

Logo hanyalah salah satu dari banyak hal di situs web dan harus dimainkan secara harmonis dengan konten lain.

Jika Anda tidak percaya, lihat merek besar mana pun di web di seluruh dunia dan Anda akan melihat bahwa 98% dari mereka memiliki logo, cukup besar untuk mendukung semua konten. Pengguna perlu tahu, merek mana yang berdiri di belakang situs web, tetapi ia juga harus fokus pada layanan, penawaran, dan ajakan bertindak utama.

8. Kualitas Logo Buruk

Pernah suatu kali saya mendapatkan logo dalam format Microsoft Word (.doc). Yang ingin saya katakan adalah, bahwa klien akan selalu menemukan cara untuk mengejutkan Anda.

Berkenaan dengan logo, penting untuk memilikinya dalam kondisi piksel yang sempurna. Untuk tujuan itu, Anda memerlukan format vektor (.pdf, .ai, .svg, .eps). Kemudian Anda perlu membuka aplikasi vektor favorit Anda (misalnya Adobe Illustrator) dan mengekspor logo tersebut ke ukuran yang direkomendasikan oleh pembuat tema. Itulah kemungkinan terbaik bagi Anda untuk mendapatkan logo paling tajam.

Jika Anda mendapatkan logo dalam .png, itu bisa berfungsi dengan baik, tetapi bisa kehilangan ketajaman saat mengubah ukuran. Jika mengubah ukuran merusak logo, buka fiverr.com dan investasikan $5 untuk menggambar ulang logo tersebut ke dalam format vektor. Investasi kecil lainnya untuk hasil yang besar.

9. Kualitas Gambar Buruk

Situasi semakin baik setiap tahun, tetapi saya masih menemukan bisnis yang tidak memberikan perhatian atau sumber daya yang cukup ke dalam foto berkualitas.

Jika Anda memiliki situs web yang menjual produk tertentu, gambar berkualitas mungkin memiliki dampak terbesar pada prospek dan memainkan peran penting, ketika calon pelanggan memutuskan apakah akan membeli produk atau tidak.

Jika klien Anda tidak memberi Anda foto berkualitas tinggi atau jika dia tidak memilikinya, tugas Anda adalah meyakinkannya untuk menginvestasikan $100 dan membelinya secara online.

Sumber luar biasa untuk foto berkualitas tinggi adalah Shutterstock, di mana Anda bisa mendapatkan 50 gambar seharga $99 per bulan. Ini cukup untuk situs web kecil dan akan berdampak luar biasa pada pengguna situs web Anda dan kepercayaan keseluruhan pada merek klien Anda.

Tip: Saat memilih foto, cobalah untuk menghindari foto yang umum, halus, dan tidak realistis. Contohnya adalah pria bule, dengan gigi super putih dan kulit mulus.

Itu bisa membuat efek balasan, tapi pasti tidak akan berdampak apa pun pada pengunjung. Cobalah untuk menemukan gambar dengan beberapa keaslian. Untuk membuatnya sederhana, gunakan gambar yang memiliki tampilan dan nuansa yang realistis.

10. Tidak Menata Plugin Pihak Ketiga

Dalam proses pembuatan tema WordPress baru, kami selalu melakukan riset tentang niche yang kami jadikan tema. Kami selalu ingin menyertakan setiap fungsi yang diperlukan dalam tema, tetapi terkadang klien Anda hanya menginginkan sesuatu yang lain. Saat itulah plugin WordPress ikut bermain.

Tidak ada yang salah dengan itu. Setelah Anda menginstal dan memasukkan plugin ke dalam tema WordPress, lihat tampilannya di front-end.

Saya sering memperhatikan, bahwa pelanggan kami lupa untuk menata tombol, bentuk, dan warna dengan gaya yang sama dengan tema lainnya.

Menerapkan kelas CSS yang sudah ditulis ke plugin 3 pihak Anda hanya akan memakan waktu 10 menit, tetapi pada akhirnya akan berdampak signifikan.

Jika Anda tidak memiliki pengetahuan untuk melakukan itu, kami dapat melakukannya untuk Anda.

11. Keterbacaan Buruk

Ada klaim terkenal, bahwa tipografi adalah 95% dari desain web – jadi lakukan dengan benar.

Jika Anda menggunakan widget dengan cara yang sama seperti kami membuat demo tema, tidak akan ada masalah, karena kami berusaha keras untuk keterbacaan yang baik, tetapi jika Anda memodifikasi tata letak dan gaya font, buat pastikan Anda mengikuti aturan di bawah ini:

• Setiap baris harus memiliki 60-80 karakter termasuk spasi.
• Jika Anda mengatur ketinggian garis kustom, gandakan ukuran font dengan 1,4 hingga 1,6. Jika Anda memiliki ukuran font 16px, tinggi baris Anda harus antara 22.4 dan 25.6.
• Sisakan ruang yang cukup di sekitar teks.
• Jangan gunakan warna teks yang terlalu terang. Segala sesuatu yang lebih terang dari #777777 memiliki dampak buruk pada keterbacaan.
• Jangan gunakan font yang lebih kecil dari yang direkomendasikan. Terendah yang dapat Anda gunakan adalah 14px, tetapi saya akan merekomendasikan Anda untuk memilih 16px atau 18px .
• Hati-hati dengan menginstal font kustom dalam tema. Beberapa font dibuat hanya untuk judul dan tidak berfungsi dengan baik pada ukuran yang lebih kecil. Beberapa font dibuat untuk dicetak dan tidak berfungsi dengan baik di layar dan beberapa font dibuat dengan buruk. Pikirkan dua kali ketika Anda ingin mengganti font tema WordPress default menjadi sesuatu yang lain. Jika Anda masih ingin mengubahnya, tetap di sisi aman dan pilih yang populer.

• Gunakan perataan yang benar. Dalam 95% kasus, perataan teks kiri adalah cara yang harus dilakukan. Di 5% lainnya, saya mengizinkan Anda untuk menggunakan perataan tengah, tetapi pastikan Anda menggunakannya hanya untuk teks pendek yang mendukung.

Perataan kanan (kecuali untuk bahasa kanan-ke-kiri) dan perataan yang dibenarkan tidak mungkin dilakukan. Periode.

Kesimpulan:

Lain kali Anda akan membuat situs web untuk klien Anda, lihat daftar di atas dan coba perbaiki semua ketidaksempurnaan kecil itu. Ini akan memakan waktu hanya satu atau dua jam, tetapi pada akhirnya, Anda akan mendapatkan hasil yang jauh lebih baik, yang berarti klien yang lebih bahagia dan referensi yang lebih baik. Selain itu, Anda akan membantu kami karena kami akan mendapatkan contoh langsung yang fantastis untuk dipamerkan.

Jika Anda memiliki pertanyaan, jangan ragu untuk berkomentar di bawah.

EDIT: Artikel ini telah diterjemahkan ke bahasa Belanda - beri tahu saya di komentar di bawah jika Anda ingin menerjemahkannya ke bahasa Anda.