Her Ne pahasına olursa olsun Kaçınılması Gereken 8 Yaygın Web Tasarım Hatası (& Divi Nasıl Yardımcı Olabilir)

WordPress ve uygun bir tema kullanarak bir siteyi birkaç saat içinde çalışır duruma getirmek kolaydır. Bununla birlikte, profesyonel görünen bir tasarım oluşturmak emek ister – özellikle de sanal bir boya fırçasına sahip değilseniz.

Neyse ki, çekici bir web sitesini bir araya getirmek için deneyimli bir tasarımcı olmanıza gerek yok. En yaygın tuzaklardan bazılarından kaçınmak için çaba gösterdiğiniz sürece, tasarımlarınız bir profesyonel kadar iyi görünmelidir.

Bu makalede, iyi bir web tasarımı için neyin gerekli olduğunu ve bu süreçte insanların yaptığı en yaygın sekiz hatayı keşfedeceğiz.

Başlayalım!

İyi Web Tasarımını Neler Oluşturur?

'İyi' web tasarımı nelerin için evrensel bir standart yoktur, ama evrensel olarak birçok web tasarımcıları tarafından kabul edilen bazı en iyi uygulamalar vardır. Örneğin:

• İyi web tasarımı, amacına ulaşmaya odaklanır.
• İyi bir web tasarımı, kullanılabilirliği dikkate almalıdır.
• Sitenizin temel unsurlarını ve mesajını vurgulamalıdır.
• İyi tasarlanmış bir web sitesinde gezinmek kolay olmalıdır.
• Tüm site boyunca tutarlı kalmalıdır.
• Mobil cihazlarda iyi görüntülenmelidir.

Geçmişte bu konulardan bazılarına değindik ve bazılarını bu makale boyunca da tartışacağız. Şimdi, iyi bir web tasarımı teşkil etmez neyi tartışalım.

Her Ne pahasına olursa olsun Kaçınılması Gereken 8 Yaygın Web Tasarım Hatası

Web sitenizi tasarlarken yapabileceğiniz birçok hata olsa da , en yaygın ve kolayca kaçınılması gereken sekiz hataya bağlı kalmaya karar verdik. Bu engelleri aşmak için çaba harcarsanız, tasarımlarınız diğerlerinden çok daha önde olmalıdır.

1. Zayıf Okunabilirlik

Ne tür bir web sitesi üzerinde çalışıyor olursanız olun, yazılı içerik büyük olasılıkla baskın olacaktır. Bu sizin için geçerliyse, ziyaretçilerinizi hayal kırıklığına uğratmamak için gönderilerinizin her birini mümkün olduğunca kolay okunur hale getirmek önemlidir.

İnsanlar kitap söz konusu olduğunda uzun, kesintisiz paragraflara katlanmaya istekli olabilir, ancak web siteleri için aynı şey söylenemez. Kolay taranan içerik, ziyaretçilerin yazınızı hızla anlamalarını ve aradıklarını bulmalarını sağlar.

İçeriğinizi daha okunabilir hale getirmenin birçok yolu vardır, ancak bunlar dikkate alınması en basit olanlardır:

• Mümkünse alt başlıklar kullanarak yazılarınızı ve sayfalarınızı mantıksal bölümlere ayırın.
• Alt başlıklarınızı mümkün olduğunca açıklayıcı yapın. Bu, okuyucuların içeriği daha kolay taramasını sağlayacaktır.
• Gözleri yormayan bir renk şeması uygulamayı düşünün. Sonuçta, ziyaretçilerin kalmasını sağlayıp içeriğini okumak istiyorum.
• Mümkün olduğunda, gönderilerinizin çoğu için sans-serif yazı tiplerini kullanın. Serif meslektaşlarından daha okunaklı oldukları kanıtlanmıştır.

Bu, içeriğinizin tasarım açısından okunması gereken bir angarya olmadığından emin olmalıdır.

Divi Nasıl Yardımcı Olabilir?

Divi, Tema ve Modül özelleştiricileri sayesinde okunabilirlik sorunlarını kolaylıkla çözmenizi sağlar. Bu özelliklerin her ikisine de panonuzdaki Divi sekmesinden erişebilir, ardından yazı tipi ayarları, başlıklarınızın stili ve hatta bazıları düzgün okunamayacak kadar küçükse bölümlerinizin boyutuyla oynayabilirsiniz.

Daha fazla ince ayar yapmak isterseniz, Divi Builder'ı kullanarak her modülün Gelişmiş Tasarım Ayarlarına her zaman göz atabilirsiniz. Bu bölümler, okunabilirliğinizi geliştirmek için ihtiyacınız olan hemen hemen her şeyle doludur (daha önce bahsettiğimiz olanlar dahil) ve ayrıca oluşturucudan ayrılmadan web sitenizdeki herhangi bir değişikliği önizleyebilirsiniz.

2. Kötü Navigasyon

Bir web sitesinde gezinmek zor olmamalı ve herhangi bir kullanıcı, aradıkları içeriği araştırmak zorunda kalmadan bulabilmelidir. Web siteniz bu iki kriteri karşılamıyorsa, yapacak çok işiniz var.

Saçma sapan gezinme ile bir web sitesine göz atmak zorunda kalmak kadar sinir bozucu çok az şey vardır. Bu, gezinti çubuğu garip bir konuma yerleştirilmişse, bozuk bağlantılar içeriyorsa veya gelişigüzel düzenlenmişse gerçekleşebilir. Ayrıca, bu hayal kırıklığı daha yüksek bir hemen çıkma oranına, daha düşük dönüşümlere (insanlar istediklerini bulamayacakları için) ve genel olarak daha az tekrar ziyarete yol açabilir.

Neyse ki, bugünlerde çoğu web sitesi basit gezinmenin faydaları konusunda iyi eğitim almış durumda. Ancak, sizinkini kullanımı kolay tutmak için her zaman aşağıdaki ipuçlarını göz önünde bulundurmaya değer:

• Gezinme menünüze erişimin kolay olduğundan emin olun. Mobil uygulamalardan bahsetmiyorsak, sözde 'gizli' veya 'açılır' menülerden vazgeçmenizi öneririz.
• Kullanıcılar, her bir bağlantının kendilerini nereye götüreceğini ve orada bulacakları bilgileri deşifre edebilmelidir.
• Web siteniz birkaç kategori içeriyorsa, çok seviyeli menüler uygulamanız gerekebilir. Bu durumda, tasarımınızın bileşenler arasında net bir hiyerarşi içerdiğinden emin olun.

Birçok insan navigasyon menülerini dikkatsizce bir araya getirme eğilimindedir. Ancak, bu unsurlar sitenizin başarısı için kritik olabilir ve buna göre ele alınmaları gerekir. Aynı hatayı yapma!

Divi Nasıl Yardımcı Olabilir?

Divi onun Başlığını kullanılarak anında navigasyon ayarları çimdik sağlar ve önceki bölümde tartıştığımız araçlarla çok benzer şekilde çalışan Modül özelleştiriciler. Gezinme stillerini tamamen değiştirmeyi tercih ediyorsanız, bunu temanın ayarlarını değiştirerek yapabilirsiniz:

Son olarak, Özelleştirici'yi veya Gezinme Sonrası modülünü kullanarak navigasyon sonrası ayarlarınızı da değiştirebilirsiniz. Bu özellik, kullanıcılar Önceki veya Sonraki seçeneklerine tıkladığında hangi gönderilerin görüneceğini ayarlamanıza ve bunları genel olarak veya belirli cihazlar için gizlemenize olanak tanır.

3. Dengesiz Negatif Alan

Doğru kullanılırsa, negatif boşluk, çevrelediği içeriği geliştirebilir. Bu onları gitmek istediğiniz yere ziyaretçilerinizin gözlerini rehberlik sağlar.

Tersine, önemli bölümlerin etrafında yeterince boşluk bırakmamak, web sitenizin darmadağın görünmesine neden olabilir.

Bu örnekte, kullanıcılar bunalmış hissedebilir ve sitenizden ve bir rakibe geri dönmelerine neden olabilir.

Negatif alan, sitenizin okunabilirliğini artırmak için de kullanılabilir. Bunu, her alt başlık arasında fazladan boşluk bırakarak ve uzun paragrafları bölmek için resimler ve listeler kullanarak başarabilirsiniz. Buradaki amaç, içeriğinizin düzenli görünmesi ve okuyucuların yorulmasını önlemektir. Ayrıca, her şeyin temiz görünmesini sağlamak için (blogumuz için yaptığımız gibi) bu temel bilgilerden bazılarını web sitenizin genel tasarımına uygulayabilirsiniz.

Negatif alanı doğru bir şekilde ayarlamak zor olabilir, ancak tasarımlarınız için modern ve temiz bir görünüm elde etmenin en basit yollarından biridir.

Divi Nasıl Yardımcı Olabilir?

Divi'nin Gelişmiş Tasarım ve Özel CSS seçenekleri, seçtiğiniz herhangi bir bölüm için kenar boşlukları, dolgu ve oluklar dahil olmak üzere tasarımınızın hemen hemen her öğesinde ince ayar yapmanıza olanak tanır; bu, negatif alanı kullanarak yaratıcı olmanız için fazlasıyla yeterlidir:

Bu seçeneklerin her birini değiştirmek daha kolay olamazdı. Çoğu durumda yapmanız gereken tek şey, değerlerini piksel cinsinden ayarlamak, işarette olup olmadıklarını kontrol etmek için Önizleme özelliğini kullanmak ve oraya ulaşana kadar gerekirse ince ayar yapmaya devam etmektir.

4. Optimize Edilmemiş Harekete Geçirici Mesaj (CTA)

CTA'lar, düğmeler, başlıklar ve hatta düz metin gibi birçok biçimde gelir. Ancak amaçları her zaman aynıdır – okuyucunun harekete geçmesi için bir uyarı. Bunları blogumuzda nasıl kullandığımıza dair bir örneğe göz atın:

İnternet pazarlamacılığı hakkında bir iki şey biliyorsanız, iyi CTA'ların ne kadar önemli olduğunu bilirsiniz. Doğru mesajı kullanmak, dönüşümlerinizde önemli artışları tetikleyebilir ve bunları sunma şekliniz de aynı derecede önemlidir. Tersine, CTA uygulayan vurmak veya çekmek Dönüşümlerinizin neden olabilir muğlak kelimeler kullanmak değil.

CTA'lar söz konusu olduğunda, iki şeyi aklınızda tutmanız gerekir: yerleştirme ve öne çıkma. Bunu nasıl yapacağınız aşağıda açıklanmıştır:

• İdeal olarak, CTA'ları sayfalarınızın başına ve sonuna yakın bir yere dahil etmeye çalışmalısınız. Bu, anında dönüşüme hazır olan ziyaretçileri ve içeriğinizi okuduktan sonra merak edenleri yakalamanızı sağlayacaktır.
• CTA'larınız sayfanızın geri kalanından öne çıkmalıdır. Bunu, zıt renklerden, benzersiz düğme tasarımlarından yararlanarak veya hatta yalnızca kalın metin kullanarak yapabilirsiniz.
• Özellikle mobil kullanıcılar için CTA'larınızın tıklanmasının kolay olduğundan emin olun. Tipik olarak, bu onları aşırı küçük yapmamak anlamına gelir.

CTA'larınıza biraz dikkat etmek, dönüşümler söz konusu olduğunda büyük zaman kazandırabilir. E-posta abonelikleri veya satışlar için olta balıkçılığı yapıyor olmanızın bir önemi yok, CTA'lar çabalarınız için hayati önem taşıyor.

Divi Nasıl Yardımcı Olabilir?

Divi'nin Harekete Geçirici Mesaj modülü, stil ve mobil optimizasyonla ilgili ayarlar da dahil olmak üzere, CTA'larınızın öne çıkmasını sağlamak için ihtiyaç duyduğunuz hemen hemen tüm özelleştirme seçenekleriyle birlikte gelir:

Ayrıca, Divi'nin yerleşik bölünmüş test özelliği Divi Lead'leri kullanarak CTA'larınızı her zaman optimize edebilirsiniz. Bu, Divi'ye güçlü bölünmüş test işlevselliği getirir ve doğrudan WordPress panonuzdan yönetilir.

5. Mobil Optimizasyon Eksikliği

Web sitenizin mobil uyumlu olduğundan emin olmak hiç bu kadar önemli olmamıştı. Mobil trafik 2016'da ilk kez masaüstü bilgisayarların trafiğini geride bıraktı ve bu trendin yakın zamanda geri dönmesi beklenmiyor.

Basitçe söylemek gerekirse, web tasarımlarınızı mobil kullanıcılar için optimize etmiyorsanız, şimdi başlamak için mükemmel bir zaman olacaktır. Aksi takdirde, trafiğinizin önemli bir bölümünü korkutup kaçırma riskiyle karşı karşıya kalırsınız.

Neyse ki, mobil optimizasyon söz konusu olduğunda aklınızda bulundurmanız gereken bazı unsurları zaten ele aldık, örneğin:

• Okunabilirlik: Küçük görünümlerle uğraşacağınız için içeriğinizin iyi biçimlendirildiğinden emin olmak çok önemlidir.
• Gezinme: Gezinme menünüz, mobil kullanıcıların fareye erişimi olmayacağı düşünüldüğünde, bulunması ve kullanılması kolay olmalıdır.
• CTA optimizasyonu: Menüleriniz gibi, bunların da fark edilmesi ve etkileşime girmesi kolay olmalıdır.

Bu konuya gelince söylenecek daha çok şey var ve bunu geçmişte derinlemesine ele aldık. Konuyla ilgili daha fazla bilgi için, mobil web tasarımı optimizasyonu için bu on ipucu listesine göz atın.

Divi Nasıl Yardımcı Olabilir?

Mobil optimizasyon söz konusu olduğunda Divi arkanızda! Tema, kutudan çıkar çıkmaz yanıt verme için optimize edilmiştir ve Tema Özelleştirici özelliğini kullanarak sitenizin mobil cihazlarda nasıl göründüğünü her zaman kontrol edebilirsiniz.

Ancak, daha pratik bir yaklaşım benimsemeyi tercih ederseniz, modüllerinizin her birinin özel Gelişmiş Tasarım menüleri aracılığıyla nasıl görüntüleneceğini ince ayar yapabilirsiniz. Bu, masaüstü, tablet ve mobil görünüm pencereleri için tasarım kontrollerini değiştirmenizi sağlar.

6. Tutarsız ve Odaklanmamış Tasarım

İdeal olarak, web sitenizin tamamı net bir odakla tek tip bir tasarıma sahip olmalıdır. Tek bir sitede birden çok stil kullanmak sarsıcı bir etkiye sahip olabilir ve hatta kullanıcılarınızın kafasını karıştırabilir.

Dahası, web siteniz için renk paleti ve tek tip stil gibi benzersiz bir kimlik oluşturmak, markasını güçlendirecektir. Örneğin Facebook'u ele alalım. Yıllardır aynı stili sallıyorlar – temiz ve tanınabilir bir mavi paletle. Web'deki en şık tasarım olmayabilir, ancak işi hallediyor ve artık markayla ilişkilendirilmeye başlandı.

Web sitenizde kullandığınız stil çoğunlukla kişisel bir karardır – tek tip tuttuğunuz sürece sorun yok. Ayrıntılarla uğraşıyorsanız, Materyal Tasarımı gibi görsel tasarım dillerinde her zaman ilham arayabilirsiniz.

Divi Nasıl Yardımcı Olabilir?

Divi'nin tüm modülleri, kutudan çıkar çıkmaz harika görünecek şekilde aynı tarzda tasarlanmıştır. Ancak, Gelişmiş Tasarım Ayarları ve Özel CSS özelliklerini kullanarak bunları ayrı ayrı özelleştirebilir ve ince ayarlarınızı ileride kullanmak üzere Divi Kitaplığınıza kaydedebilirsiniz:

Tema Özelleştirici ayrıca tüm temanızın estetiğini anında değiştirmenize olanak tanır ve diğer özelliklerin yanı sıra renk düzeninizi ve mobil stillerinizi değiştirmek için seçenekler içerir.

7. Görsellerin ve Animasyonların Yanlış Kullanımı

Birçok insan, bir web sitesine mümkün olduğunda resim ve animasyon eklemenin iyi bir şey olduğunu düşünüyor. 2000'lerin başındaki Flash tabanlı sitelerin modasını hatırlıyorsanız, neden bahsettiğimizi biliyor olmalısınız.

Bu medya türlerinden birine çok fazla güvenmek sitenizin dağınık görünmesine neden olmakla kalmaz, aynı zamanda yükleme hızlarını da etkileyebilir (ve yavaş bir web sitesinden daha kötü birkaç şey vardır). Dahası, yanlış anlarsanız Arama Motoru Optimizasyonu (SEO) üzerinde de etkisi olabilir.

Tabii ki, hemen hemen her site, tasarımını geliştirmek için burada ve orada bazı grafiklere ihtiyaç duyar ve buradaki anahtar kelime “geliştirmek”. Eklemeyi seçtiğiniz herhangi bir resim veya animasyon, içeriğinizden dikkati dağıtmamalı ve yalnızca alakalı olduklarında kullanılmalıdır. Örneğin, bu makalede, ana odak olarak değil, yalnızca bağlam sağlamak için görüntüleri ekledik.

Son olarak, web tasarım trendleri hakkındaki son makalemizde tartıştığımız gibi, mümkün olduğunda tam gelişmiş animasyonları mikro etkileşimlerle değiştirmeyi de düşünmelisiniz. Çok daha az müdahalecidirler ve yine de kullanıcıya belirli eylemleri vurgulamanıza olanak tanırlar.

Divi Nasıl Yardımcı Olabilir?

Divi'nin modüllerinin çoğu, ziyaretçilerin dikkatini içeriğinizden uzaklaştırmayacak yerleşik zevkli animasyonlarla birlikte gelir. Kollarınızı sıvamaya karşı değilseniz, CSS kullanarak kendinizinkini bile ekleyebilirsiniz.

Ayrıca, Fullwidth Header gibi Divi'nin bazı modülleri, popüler paralaks özelliğini uygulamanıza olanak tanır. Divi's Slider'da olduğu gibi, varsayılan olarak desteklemeyen bazı modüllere manuel olarak bile ekleyebilirsiniz.

8. 'Gizli' İletişim Bilgileri

Son olarak, iletişim bilgilerinden bahsedelim. Tasarladığınız web sitesinin türüne bağlı olarak, ziyaretçilerinizin en azından bir kısmı sizinle veya sorumlu kişiyle iletişim kurmak isteyecektir. İletişim bilgilerinizin belirgin bir şekilde görüntülendiğinden emin olmak, bunu etkinleştirmenin en iyi yoludur.

Söylemeye gerek yok, ancak bazı web siteleri, iletişim bilgilerini bulmayı kolaylaştırmazlarsa diğerlerinden daha fazla etkilenecektir. Örneğin, bir hizmet web sitesindeki eksik veya gizli iletişim bilgileri, kaybedilen iş fırsatlarında size çok pahalıya mal olabilir.

Çoğu site için, ana sayfanızda, kendi bölümünde veya her ikisinde de bulunması gereken basit bir iletişim formu oluşturmanızı öneririz:

E-postanızı veya telefonunuzu altbilginize veya ikincil bir menüye eklemek de sitenizin tasarımına bağlı olarak harika bir yaklaşım olabilir. Neyi dahil ettiğinize bakılmaksızın, ana paket, belirgin olması gerektiğidir!

Divi Nasıl Yardımcı Olabilir?

Çoğu temel özellikte olduğu gibi Divi, önceden tasarlanmış, optimize edilmiş bir formatla gelen İletişim Formu modülünü sağlar. Bir süre önce, basit ve modern bir tasarım arıyorsanız çok yardımcı olacak ücretsiz bir iletişim sayfası düzeni paketi de yayınladık:

Tasarımınızı manuel olarak değiştirmeyi tercih ederseniz, Divi'nin İletişim Formu modülü, istediğiniz kadar alan eklemenize ve bunları ayrı ayrı biçimlendirmenize olanak tanır. Hatta modül ayarlarından çıkmadan, bir gönderi yaptıktan sonra kullanıcılarınızın okuması için başarı mesajları oluşturabilirsiniz.

Çözüm

WordPress kullanıcılarının, kolay anlaşılır işlevselliği sayesinde çekici bir web sitesini bir araya getirirken çoğu kişiden daha basit bir zamanı vardır. Bununla birlikte, bu nedenle, genel görsel kaliteyi kolayca düşürebilecek kötü tasarım seçimlerinin projenize sızması kolaydır.

Bu yazıda, bir sonraki projeniz sırasında kaçınmanız gereken en yaygın sekiz web tasarımı tuzağını gösterdik. Tekrar özetleyelim:

1. Kötü okunabilirlik.
2. Kötü navigasyon.
3. Dengesiz negatif alan.
4. Optimize edilmemiş bir CTA.
5. Mobil optimizasyon eksikliği.
6. Tutarsız ve odaklanmamış tasarım.
7. Görsellerin ve animasyonların yanlış kullanımı.
8. 'Gizli' iletişim bilgileri.

Sizce her kullanıcının kaçınması gereken bir numaralı web tasarım hatası nedir? Abone olun ve düşüncelerinizi aşağıdaki yorumlar bölümünde bizimle paylaşın!

Meilun / Shutterstock.com'dan makale küçük resmi