WordPress Teması Alıcılarının Genellikle Yaptığı 11 Tasarım Hatası

Kendinizi hiç WordPress temalı bir web sitesi yaparken buldunuz, ancak sonuç tema demosuna benzemiyor mu? Web sitesi üreticileri tarafından genellikle gözden kaçırılan 11 yaygın tasarım hatasını listeledim.

Mükemmel WordPress temasını buldunuz. Temanın demosu kusursuz görünüyordu. Müşteriniz bunu çok beğendi ve bir satın alma yapmak için sizinle anlaştı. Satın aldınız, kurdunuz ve temayı müşterinin ihtiyaçlarına göre düzenlemeye başladınız.

Logoyu değiştirdiniz, temanın renklerini değiştirdiniz, kaydırıcı görselleri ve içeriği eklediniz ama sonuçta yaptığınız web sitesi demoya hiç benzemiyor. Bir şeylerin yanlış olduğunu biliyorsun ama ne olduğunu tespit edemiyorsun. Tanıdık geliyor?

Son 5 yılda, WordPress tema işinde tasarımcı olarak çalışırken, WordPress temalarımızla oluşturulmuş sayısız güzel web sitesi örneği gördüm.

Ancak arada bir, sağlam bir temele sahip ancak genel deneyimi mahveden birkaç küçük tasarım hatası olan bir web sitesi görüyorum. Herkesin kolayca düzeltebileceği küçük şeylerden bahsediyorum.

Bu kusurları tespit etmenin zor olduğunu biliyorum, özellikle de tasarımcı değilseniz. Bu nedenle, müşterinizin web sitesini daha da iyi görünecek şekilde nasıl geliştireceğiniz hakkında bir blog yazısı yazmaya karar verdim.

Bu blog gönderisini yer imlerine ekleyin ve bir dahaki sefere WordPress temalı bir web sitesi kuracağınız zaman aşağıdaki listeyi gözden geçirin. Tüm kusurları gidermek yalnızca bir veya iki saatinizi alacaktır, ancak sonuç %100 daha iyi görünecektir.

1. Kaydırıcıdaki Metnin Zayıf Kontrastı

Kaydırıcı resimlerle ilgili yapılması ve yapılmaması gerekenler hakkında konuşuyordum, bu yüzden şimdi kısa konuşacağım. İlkeler basit:

• Kaydırıcıdaki metnin rengi beyazsa, koyu bir arka plan seçin. Kaydırıcı metni koyuysa, açık renkli bir arka plan seçin.
• Metnin göründüğü alanın arka planda çok fazla görsel gürültü içermediğinden emin olun. Dağınık arka plan, ön taraftaki metnin okunabilirliğini azaltır ve kaydırıcıya yazılan birincil değer önerisi gözden kaçabilir.

Neyse ki, temalarımızın çoğu metnin arkasında yarı şeffaf düz bir arka plan seçeneği içeriyor. Daha yeni WordPress temalarımız ayrıca kaydırıcıdaki tüm metne uygulanan bir gölgeye sahiptir, bu nedenle kontrast daha da iyidir.

2. Çok Büyük Kaydırıcı Resimleri

WordPress temalarımızla yapılan web sitelerine baktığımda, kullanıcıların çok büyük kaydırıcı resimler kullandığını oldukça sık fark ediyorum. Ekran yüksekliğinin %100'ünü alan bir kaydırıcı görüntüye sahip olmak, yalnızca bir fotoğrafçıysanız ve fotoğraflar nihai ürününüzse kabul edilebilir. Diğer durumlarda, güvenli tarafta kalın ve tema önerilerine bağlı kalın. Web sitenizin mükemmel görsel dengesini koruyacaktır.

3. Zayıf Beyaz (Negatif) Boşluk

Web tasarımındaki beyaz veya negatif alan, widget'lar, metin blokları, resimler veya web sitesinin herhangi bir bölümü arasında, her şeyin düzenlenmesine yardımcı olan ve son kullanıcı için net, mantıklı bir akış sağlayan boşluktur.

Ne kadar uğraşırsak uğraşalım, WordPress temasının olası her yönünü nasıl kurşun geçirmez hale getirelim, kullanıcılar her zaman boşlukları yok etmenin bir yolunu bulur.

Neyse ki sizin için temalarımızda güçlü bir Sayfa Oluşturucu kullanıyoruz, bu da web sitesindeki boşlukları kolaylıkla ayarlayabileceğiniz anlamına geliyor. Sayfa Oluşturucu, widget'ın dolgularını, satırın dolgularını değiştirmenize ve sütunlar arasındaki oluk boyutunu değiştirmenize olanak tanır.

Ayrıntılardan bahsetmeyeceğim ve size bazı pratik örnekler vermeyi tercih ederim.

• Çoğu durumda, web sitesi oluşturucuları çok az beyaz alan kullanır, bu da içeriğin nefes almasına izin vermez, bu nedenle genellikle ne kadar beyaz alan uygularsanız o kadar iyi sonuç alırsınız.
• Öğeler arasındaki ilişkiyi boşluk bırakarak gösterin. Blog yazısının başlığı ve yazının tarihi gibi bir araya gelen unsurlar, blog yazısının tarihi ve sayfanın başlığı gibi farklı bir amacı olan unsurlardan birbirine daha yakın olmalıdır.
• Boşluk ile tutarlı olun . Bu, web sitenizdeki her bir satırın üstte, altta, solda ve sağda aynı miktarda beyaz alana sahip olması gerektiği anlamına gelir.

Yani, widget'lara geliyor. Sayfanın neresinde görünürlerse görünsünler, eşit miktarda dolgu ve kenar boşluğuna sahip olmalıdırlar. Tutarlılık, web sitenize denge getirecek ve önemli olan şeye, içeriğe odaklanacaktır.

4. Kötü Mobil Uyumluluk

Prosedür ve kurallar, yukarıdaki masaüstündeki ile aynıdır. Yine de beyaz alana dikkat etmeniz gerekiyor, ancak mobil için birkaç ek kural var:

• Bunlardan biri parmak dostu bir tasarımdır. Parmaklar, mobilde gezinirken web sitesinde gezinmek için araçlarımız olduğundan, sayfayı onlara uyarlamamız gerekiyor. Bir WordPress teması tasarlarken butonların ve tıklanabilir öğelerin 50 pikselden küçük olmamasına özen gösteriyoruz. WordPress temasına 3. taraf öğeler ekliyorsanız, bunların yeterince büyük olduğundan emin olun. Ayrıca, yanlış tıklamaları önlemek için bu işlem yapılabilir bileşenlerin birbirine çok fazla yapışmadığından emin olun.
• Görüntüleri hız için optimize edin. Birçok kişi hareket halindeyken web sitelerine erişir, bu da güvenilmez, bazen zayıf bağlantı anlamına gelir. Yavaş bir site yüklemesini (mobilde) ortadan kaldırmaya çalışın ve resimlerinizi optimize edin.
• Web sitenizi gerçek bir mobil cihazda test edin . Mobil görünümü görmek için tarayıcı penceresini yeniden boyutlandırabilirsiniz, ancak tüm ayarlamaları tamamladığınızda, web sitesinin gerçek mobil cihazda nasıl göründüğüne bir göz atın.

İşletim sistemleri, tarayıcılar ve genel kullanıcı deneyimi, masaüstü ve mobil arasında farklılık gösterir ve bazı eşitsizliklere gelebilir.

Google, web sitenizin mobil uyumlu olup olmadığını kontrol etmek için bir araç olan mobil uyumlu bir test geliştirdi.

WordPress temalarımızın her birinin kolaylıkla geçmesini sağlıyoruz.

5. El Ele Gitmeyen Renkleri Kullanmak.

Doğru renk kombinasyonunu seçmek zor bir iştir. Yetenekliysen, içgüdülerini takip edebilirsin. Aksi takdirde, bunun için özel olarak yapılmış araçları kullanın.

Size bir örnek göstereceğim:

WordPress temalarımızın çoğu birincil ve ikincil renklerden oluşur. Logonuz Shell'inkine benziyorsa, birincil ve ikincil rengi seçme kararı basittir. Harekete geçirici mesajlar için ana renk olarak kırmızı kullanılacaktır. Sarı olan, arka planlar ve destekleyici öğeler için kullanılan ikincil bir renk olacaktır.

Logonuz Starbucks'ın logosuna benziyorsa ve yalnızca bir renkten yapılmışsa, ikincil olanı bulmanız gerekecektir.

Bir seçenek, birincil ve ikincil renk için aynı yeşil rengi seçmektir, ancak bunu kesinlikle tavsiye etmem.

Bir tasarımcı cesaretine sahip değilseniz ve renk kombinasyonlarını seçmek sizin için zorsa, sizin için Coolors adında bir çözümüm var. Güzel renk kombinasyonları oluşturmak için kullanımı basit bir araçtır.

Uygulamalarına gidin ve ana renginizin altıgen renk kodunu (benim durumumda #006241) sütunun altına ekleyin. Ardından, kilit simgesine tıklayarak kilitleyin ve boşluk çubuğuna basın.

İpucu: Logonuzun hex kodunu nasıl alacağınızı bilmiyor musunuz? Bunun için kullanışlı bir Chrome uzantısı olup olmadığını kontrol edin.

Benim sonucum şuna benziyor.

Gördüğünüz gibi, tüm renkler değişti, ancak ana renginiz aynı kaldı. İstediğiniz rengi alamadıysanız, boşluk tuşuna basmaya devam edin.

İkincil rengi seçmenizin tek nedeni web sitesinde kullanmaksa ve bu renk başka hiçbir yerde görünmüyorsa, çok güçlü bir renk seçmeyin. Bizim durumumuzda, parlak turuncu çıktı.

Markanızı yok etmeyecek ve ana renginizi sorunsuzca destekleyecek daha ince bir renk seçmelisiniz, bizim durumumuzda yeşil.

Benim kişisel seçimim ikinci bej olan (#d8c99b) olurdu çünkü yeşil ile mükemmel bir şekilde çalışır ve kesinlikle onu geçmeyecektir.

Belki bu bej rengi mükemmel renk değildir, ancak yeterince iyi bir seçenektir. İşte neden. Bir renk seçerken, üzerindeki metnin ne kadar koyu veya beyaz görüneceğini düşünmeye çalışın.

Örneğimde, koyu metin gayet iyi görünür, ancak biraz daha fazla kontrast eklemek ve biraz daha açık bej renk seçmek onu daha da iyi hale getirecektir.

Neyse ki Coolors uygulamasının bir başka harika özelliği daha var. Her rengin farklı tonlarını seçebilirsiniz. Fareyi renkli bir sütunun üzerine getirin ve "Alternatif gölgeler" adlı ilk simgeye tıklayın. Ardından, daha parlak veya daha koyu tonları seçin ve daima kontrastı göz önünde bulundurun.

Bu iki rengin birlikte nasıl çalışacağına dair hızlı bir demo yaptım. Bu amaçla Adrenalin WordPress temamızı alıp Starbucks web sitesine dönüştürdüm.

Adrenalin WordPress temasını tam anlamıyla 2 dakika içinde tamamen başka bir şeye ne kadar çabuk değiştirdiğimden çok etkilendim. Tek yapmam gereken iki rengi değiştirmek, özel kahraman resmini yüklemek ve özel bir logo yüklemekti. Kendin dene.

6. Web Sitenizin Gezinmesini Karıştırmayın

Web sitesi gezinmenizi okunabilir, kolay anlaşılır bir şekilde yapılandırın. Daha az önemli şeyleri açılır menülerde gruplayın veya bunları üst çubuğa veya alt bilgiye ekleyin. Gezinme hiyerarşisini mantıklı hale getirin ve menünün tüm aynı düzeylerinin aynı önceliğe sahip olmasını sağlayın.

Örneğin, şartlar ve anlaşmalar genellikle birincil harekete geçirici mesajdan daha az önemlidir, bu nedenle ikisi aynı düzeyde görünemez. Şartları bir altbilgiye ve birincil harekete geçirici mesajı üstbilgiye yerleştirin.

Maksimum 5 veya 6 seçenekle ana navigasyonunuzu temiz tutun.

7. Logo Çok Büyük

Hepimizin bir noktada müşterimizden alacağı ünlü bir cümle vardır – “logoyu büyüt”. Bir web sitesi üreticisi olarak işiniz, müşterinizi, 400 piksel genişliğinde bir logoya gerek olmadığı konusunda eğitmektir, çünkü web sitesi ziyaretçileri web sitenize logonuzun ne kadar güzel olduğunu görmek için gelmezler.

Logoyu WordPress tema yazarı tarafından önerilen boyutta yükleyin. Belirli bir tema için hangi logo boyutunun en iyi sonucu verdiğini muhtemelen en iyi onlar bilir.

Logo, web sitesindeki birçok şeyden sadece biridir ve diğer içeriklerle uyumlu bir şekilde oynaması gerekir.

Bana inanmıyorsanız, dünya çapındaki web'deki herhangi bir büyük markaya bakın ve bunların %98'inin tüm içeriği destekleyecek kadar büyük bir logosu olduğunu göreceksiniz. Kullanıcının, web sitesinin arkasında hangi markanın olduğunu bilmesi gerekir, ancak aynı zamanda hizmetlere, tekliflere ve ana harekete geçirici mesajlara da odaklanması gerekir.

8. Kötü Logo Kalitesi

Bir keresinde logoyu Microsoft Word (.doc) formatında almıştım. Söylemek istediğim, müşterilerin her zaman sizi şaşırtmanın bir yolunu bulacağıdır.

Logo ile ilgili olarak, onu mümkün olan en iyi, piksel açısından mükemmel durumda olması önemlidir. Bunun için bir vektör formatına (.pdf, .ai, .svg, .eps) ihtiyacınız olacak. Ardından favori vektör uygulamanıza (örneğin Adobe Illustrator) gitmeniz ve bu logoyu tema oluşturucu tarafından önerilen boyuta dışa aktarmanız gerekir. En keskin logoyu elde etmeniz için en iyi olasılık budur.

Logoyu bir .png biçiminde alırsanız, iyi çalışabilir, ancak yeniden boyutlandırma sırasında netliğini kaybedebilir. Yeniden boyutlandırma logoyu bozarsa, Fiverr.com'a gidin ve onu bir vektör biçiminde yeniden çizmek için 5$ yatırım yapın. Büyük bir sonuç için başka bir küçük yatırım.

9. Kötü Görüntü Kalitesi

Durum her yıl daha iyiye gidiyor, ancak yine de kaliteli fotoğraflara yeterince dikkat veya kaynak ayırmayan işletmeler görüyorum.

Belirli bir ürünü satan bir web siteniz varsa, kaliteli görseller muhtemelen potansiyel müşteri üzerinde en büyük etkiye sahiptir ve potansiyel bir müşteri bir ürünü satın alıp almamaya karar verirken çok önemli bir rol oynar.

Müşteriniz size yüksek kaliteli fotoğraflar sağlamadıysa veya onlara sahip değilse, onu 100$'lık bir yatırım yapmaya ve bunları çevrimiçi satın almaya ikna etmek sizin işiniz.

Yüksek kaliteli fotoğraflar için mükemmel bir kaynak, ayda 99 $ karşılığında 50 görsel alabileceğiniz Shutterstock'tur. Küçük bir web sitesi için yeterlidir ve web sitenizin kullanıcıları üzerinde ve müşterinizin markasına olan genel güven üzerinde muazzam bir etkisi olacaktır.

İpucu: Bir fotoğraf seçerken genel, gösterişli, gerçekçi olmayan fotoğraflardan kaçınmaya çalışın. Bunun bir örneği, süper beyaz dişleri ve kusursuz cildi olan Kafkasyalı bir adam.

Karşı etki yapabilir, ancak kesinlikle ziyaretçiler üzerinde herhangi bir etki yaratmaz. Biraz özgünlük içeren görüntüler bulmaya çalışın. Basitleştirmek için gerçekçi bir görünüme ve hisse sahip görüntüler kullanın.

10. Üçüncü Taraf Eklentileri Şekillendirmemek

Yeni bir WordPress teması oluşturma sürecinde, her zaman için tema yaptığımız niş hakkında bir araştırma yaparız. Her zaman gerekli tüm işlevleri temaya dahil etmeye hevesliyiz, ancak bazen müşteriniz başka bir şey istiyor. Bu, WordPress eklentilerinin oynamaya geldiği zamandır.

Bunda yanlış bir şey yok. Eklentiyi yükleyip WordPress temasına ekledikten sonra, ön uçta nasıl göründüğüne bir göz atın.

Müşterilerimizin düğmeleri, formları ve renkleri temanın geri kalanıyla aynı tarzda biçimlendirmeyi unuttuklarını sık sık fark ediyorum.

3 taraf eklentinize önceden yazılmış CSS sınıflarını uygulamak yalnızca 10 dakikanızı alacaktır, ancak sonuçta önemli bir etkisi olacaktır.

Bunu yapacak bilgiye sahip değilseniz, sizin için yapabiliriz.

11. Kötü Okunabilirlik

Tipografinin web tasarımının %95'ini oluşturduğuna dair ünlü bir iddia var - o yüzden doğru yapın.

Widget'ları temanın demosunu yaptığımız şekilde kullanırsanız, iyi bir okunabilirlik için çok çaba sarf ettiğimiz için herhangi bir sorun olmayacaktır, ancak yazı tiplerinin düzenini ve stilini değiştiriyorsanız, yapın. aşağıdaki kurallara uyduğunuzdan emin olun:

• Her satırda boşluklar dahil 60-80 karakter olmalıdır.
• Özel bir satır yüksekliği ayarlıyorsanız, yazı tipi boyutunu 1,4 ila 1,6 ile çarpın. 16px yazı tipi boyutunuz varsa, satır yüksekliğiniz 22.4 ile 25.6 arasında olmalıdır.
• Metnin etrafında yeterince boşluk bırakın.
• Çok açık metin rengi kullanmayın. #777777'den daha parlak olan her şeyin okunabilirlik üzerinde olumsuz bir etkisi vardır.
• Önerilenden daha küçük yazı tipleri kullanmayın. Gidebileceğiniz en düşük 14px ama 16px veya 18px seçmenizi tavsiye ederim.
• Temaya özel yazı tipleri yüklerken dikkatli olun . Bazı yazı tipleri yalnızca başlıklar için yapılmıştır ve daha küçük boyutlarda iyi çalışmaz. Bazı yazı tipleri yazdırma için yapılmıştır ve ekranlarda iyi çalışmaz ve bazı yazı tipleri kötü yapılır. Varsayılan WordPress temasının yazı tipini başka bir şeyle değiştirmek istediğinizde iki kez düşünün. Yine de değiştirmek istiyorsanız, güvenli tarafta kalın ve popüler olanları seçin.

• Doğru hizalamayı kullanın. Vakaların %95'inde gidilecek yol sol metin hizalamasıdır. Diğer %5'te, ortalanmış hizalamayı kullanmanıza izin veriyorum, ancak lütfen bunu yalnızca kısa destekleyici metinler için kullandığınızdan emin olun.

Sağa hizalama (sağdan sola yazılan diller hariç) ve gerekçeli hizalama söz konusu değildir. Dönem.

Çözüm:

Bir dahaki sefere müşteriniz için bir web sitesi yapacağınız zaman, yukarıdaki listeyi gözden geçirin ve tüm bu küçük kusurları düzeltmeye çalışın. Sadece bir veya iki saatinizi alacak, ancak sonunda çok daha iyi bir sonuç alacaksınız, bu da daha mutlu bir müşteri ve daha iyi bir referans anlamına geliyor. Bunun da ötesinde, bize bir iyilik yapacaksınız çünkü gösteriş için harika bir canlı örnek alacağız.

Herhangi bir sorunuz varsa, aşağıya yorum yapmaktan çekinmeyin.

EDIT: Bu makale Hollandaca'ya çevrildi - kendi dilinize çevirmek isterseniz aşağıdaki yorumlarda bana bildirin.