8 Genel Web Tasarımı Hataları Her Yolda Kaçınılması Gereken Hatalar (ve Divi Nasıl Yardımcı Olabilir)
WordPress ve uygun temaları kullanarak, birkaç saat içinde siteler oluşturmak ve çalıştırmak. Bununla birlikte, profesyonel görünümlü bir tasarım yapmak bir iş gerektirir – özellikle sanal fırçaları kullanma konusunda yetkin değilseniz. Neyse ki, çekici bir web sitesi oluşturmak için deneyimli bir tasarımcı olmanıza gerek yok. En yaygın tuzaklardan bazılarından kaçınmaya çalıştığınız sürece, tasarımınız profesyonel kadar iyi görünecektir. Bu makalede, iyi bir web tasarımını neyin oluşturduğunu ve bu süreç boyunca insanlar tarafından yapılan en yaygın sekiz hatayı keşfedeceğiz.
Başlayalım! İyi bir web tasarımı nedir? ‘İyi’ bir web tasarımı için evrensel bir standart yoktur, ancak birçok web tasarımcısı tarafından evrensel olarak kabul edilen en iyi uygulamalardan bazıları vardır. Örnek olarak:
İyi bir web tasarımı hedeflerine ulaşmaya odaklanır.
İyi bir web tasarımı kullanımı dikkate almalıdır.
Bu, sitenizin temel öğelerini ve mesajı vurgulamalıdır.
İyi tasarlanmış web sitesinde gezinmesi kolay olmalıdır.
Bu tüm sitelerde tutarlı kalmalıdır.
Bu, mobil cihazlarda iyi görüntülenmelidir.
Geçmişte birkaç konuya dokunduk ve bunlardan bazılarını bu makale boyunca tartışacağız. Şimdi, iyi bir web tasarımının ne olmadığını tartışalım.
8 Genel Web Tasarım Hataları Kaçınılması gereken hatalar Sitenizi tasarlarken yapabileceğiniz birçok hata olsa da, en yaygın sekiz ve kolayca kaçınmaya karar verdik. Bu tökezleyen bloktan kaçınmaya çalışırsanız, tasarımınız çok ileri olmalıdır. 1. Kötü okunabilirlik üzerinde çalıştığınız web sitesi türü dışında, yazılı içeriğin baskın olması muhtemeldir. Bu sizin için geçerlise, yayınlarınızın her birini okumak mümkün olduğunca kolay hale getirmek önemlidir, böylece ziyaretçileriniz hayal kırıklığına uğramamıştır. Kötü okunabilirliğe sahip tasarım örnekleri.
Gönderilerinizi ve sayfalarınızı mantıklı bir parçaya ayırın, mümkünse alt posları kullanın.
Alt posunlarınızı olabildiğince açıklayıcı hale getirin. Bu, okuyucuların içeriği daha kolay taramasına izin verecektir.
Kolayca görülen bir renk şeması uygulamayı düşünün. Sonuçta, ziyaretçilerin kalmasını ve içeriğinizi okumasını istiyorsunuz.
Mümkünse, yayınlarınızın çoğu için SANS-SERIF yazı tiplerini kullanın. Okumaları Serif meslektaşlarından daha kolay olduğu kanıtlanmıştır.
Bu, içeriğinizin tasarım açısından okunacak bir görev olmamasını sağlamalıdır.
Divi, Divi’nin temanın ve modüllerinin ayarlanması sayesinde kolayca okuma sorununun üstesinden gelmenize izin verebilir. Bu iki özelliğe, panelinizdeki Divi sekmesinden erişebilir, daha sonra yazı tipi ayarları, başlık stiliniz ve hatta bazıları doğru okumak için çok küçükse rolünüzün boyutu ile oynayabilirsiniz. Daha fazla ayar yapmak istiyorsanız, daha fazla ayar yapmak istiyorsanız, Divi Builder kullanarak her modül için gelişmiş tasarım ayarlarını her zaman kontrol edebilirsiniz. Bu bölüm, okunabilirliğinizi (daha önce bahsettiklerimiz dahil) iyileştirmek için ihtiyacınız olan hemen hemen her şeyle doludur ve web sitenizdeki herhangi bir değişiklikte herhangi bir değişiklik görebilirsiniz.
2. Kötü navigasyon web sitelerinde gezinmesi zor olmamalı ve her kullanıcı aradıkları içeriği kazmak zorunda kalmadan bulabilmelidir. Web siteniz bu iki kriteri karşılamıyorsa, yapacak bir işiniz var. Hayal kırıklığına uğramış bazı şeyler var çünkü web sitesini mantıksız navigasyonla keşfetmek zorundalar. Bu, navigasyon bıçakları hasarlı bağlantılar da dahil olmak üzere garip bir konuma yerleştirilirse veya rastgele düzenlenmişse olabilir. Buna ek olarak, bu hayal kırıklığı daha yüksek bir orana, daha düşük bir dönüşüme neden olabilir (çünkü insanlar istediklerini bulamayacaktır) ve bir bütün olarak daha az ziyaret edebilir. Navigasyon menüleri olmayan web siteleri örnekleri. Neyse ki, son zamanlarda web sitelerinin çoğu basit navigasyonun faydaları konusunda eğitilir. Ancak, kullanımı kolay kalmanız için aşağıdaki ipuçlarını dikkate almak iyidir: Navigasyon menünüze kolayca erişilebilir olduğundan emin olun. Hücresel uygulama hakkında konuşmadıkça, SO -Called ‘Gizli’ menüyü veya ‘daldırılmış’ menüyü atmanızı öneririz. Kullanıcı, her bağlantının bunları nereye yönlendireceğini ve orada bulacakları bilgileri açıklayabilmelidir.
Web sitenizde birkaç kategori içeriyorsa, çok seviyeli bir menü uygulamanız gerekebilir. Bu durumda, tasarımınızın bileşenler arasında net bir hiyerarşi ima ettiğinden emin olun.
Birçok insan navigasyon menülerini dikkatsizce koyma eğilimindedir. Bununla birlikte, bu öğeler sitenizin başarısı için çok önemli olabilir ve bu öğelerin düzgün bir şekilde ele alınması gerekir. Aynı hatayı yapma!
DIVI, Divi’nin, önceki bölümde tartıştığımız araçlarla hemen hemen aynı şekilde çalışan başlık ve ayar modüllerini kullanarak navigasyon ayarlarınızı hızlı bir şekilde değiştirmenize olanak tanır. Navigasyon stilini hiç değiştirmeyi tercih ederseniz, tema ayarlarını değiştirerek bunu yapabilirsiniz:
Son olarak, bir özelleştirici veya navigasyon modülü kullanarak navigasyon sonrası ayarlarınızı da değiştirebilirsiniz. Bu özellik, kullanıcı önceki veya bir sonraki seçeneği tıkladığında ve küresel olarak veya belirli cihazlar için gizlediğinde hangi yayınların görüneceğini değiştirmenizi sağlar.
3. Negatif alan dengesizdir doğru kullanılırsa, negatif alan çevredeki içeriği artırabilir. Bu, ziyaretçilerinizin gözlerini istediğiniz yere yönlendirmenizi sağlar.
Negatif alanı doğru şekilde kullanılır. Tersine, ana bölümün etrafında yeterli olumsuz alan bırakmamak, web sitenizin dağınık görünmesine neden olabilir. Dağınık bir tasarım.
Bu örnekte, kullanıcılar bunalmış hissederek sitenizden ve rakiplere istifa etmelerine neden olabilir. Sitenizin okunabilirliğini artırmak için negatif alan da kullanılabilir. Bunu, her bir altyazı arasında ekstra alan bırakarak ve uzun paragrafları parçalamak için resim ve listeler kullanarak başarabilirsiniz. Buradaki amaç, içeriğinizin düzenli görünmesi ve okuyucunun yorulmasını engellemesidir. Ayrıca, her şeyin temiz görünmesini sağlamak için bu vakıfların bazılarını web sitenizin tüm tasarımına uygulayabilirsiniz (blogumuz için yaptığımız gibi). Negatif bir alanı doğru bir şekilde elde etmek karmaşık olabilir, ancak bu, tasarımınız için modern ve temiz bir görünüm elde etmenin en basit yollarından biridir. DIVI, Gelişmiş Tasarım Seçenekleri ve CSS Custom Divi, seçtiğiniz her bölüm için marj, dolgu ve oluklar dahil olmak üzere neredeyse tüm tasarım öğelerinizi değiştirmenize olanak tanır, bu da negatif alanı kullanarak yaratıcı olmak için fazlasıyla yeterlidir:
Bu seçeneklerin her birini değiştirmek daha kolay olamaz. Çoğu durumda, yapmanız gereken tek şey pikselde değeri ayarlamak, hedefe göre olup olmadığını kontrol etmek için önizleme özelliğini kullanmak ve oraya varana kadar gerekirse onunla uğraşmaya devam etmektir. 4. Optimize edilmemiş CTA olmayan oyunculuk davetiyesi (CTA) Düğmeler, başlıklar ve hatta sıradan metin gibi çeşitli şekillerde gelir. Ancak, hedef her zaman aynıdır – okuyucunun harekete geçmesi için bir dürtü. Blogumuzda nasıl kullandığımızın örneklerine bakın: İnternet pazarlaması hakkında bir veya iki şey biliyorsanız, CTA’nın ne kadar önemli olduğunu bilirsiniz. Doğru mesajı kullanmak, dönüşümünüzde önemli bir gelişmeyi ve bunu nasıl önemli olarak sunduğunuzu tetikleyebilir. Tersine, CTA uygulamamak veya belirsiz kelimeler kullanmamak dönüşümünüzün vurulmasına neden olabilir. CTA hakkında konuşurken, yerleştirme ve mükemmellik olmak üzere iki şeyi hatırlamanız gerekir. İşte bunu nasıl yapacağınız:
İdeal olarak, sayfanızın başlangıcına ve sonuna yakın CTA’ya girmeye çalışmalısınız. Bu, derhal dönüştürmeye hazır olan ziyaretçileri ve içeriğinizi okuduktan sonra ilgilenenleri yakalamanızı sağlayacaktır.
CTA Sayfalarınızın geri kalanından öne çıkmalısınız. Bunu kontrast renkler, benzersiz düğme tasarımı kullanarak ve hatta kalın metin kullanarak yapabilirsiniz. Özellikle hücresel kullanıcılar için CTA’nızın tıklanmasının kolay olduğundan emin olun. Genellikle, bu çok küçük yapmadığı anlamına gelir.
CTA’ya biraz dikkat etmek, dönüşüm açısından çok zaman üretebilirsiniz. Bir e -posta veya satış aboneliği aramanız önemli değil, CTA çabalarınız için çok önemlidir. DIVI, davetiyen Divi’nin davetiyeye nasıl yardımcı olabileceği, hücresel stil ve optimizasyon ile ilgili ayarlar da dahil olmak üzere CTA’nızın öne çıkmasını sağlamak için ihtiyacınız olan neredeyse tüm ayar seçenekleriyle birlikte gelir:
Buna ek olarak, Divi varsayılan bölünmüş test özelliği olan Divi Leads’i kullanarak CTA’nızı her zaman optimize edebilirsiniz. Divi için güçlü bir ayrı test işlevselliği taşır ve doğrudan WordPress kontrol panelinizden yönetilir. 5. Hücresel optimizasyon eksikliği, web sitenizin hücresel dostu olmasını asla bu kadar önemli olmasını sağlar. Hücresel trafik masaüstünü 2016 yılı boyunca ilk kez aşar ve eğilim muhtemelen yakın gelecekte geri dönmeyecektir. Kötü optimize edilmiş hücresel bölgelerin örnekleri.
Basitçe söylemek gerekirse, web tasarımınızı hücresel kullanıcılar için optimize etmezseniz, şimdi başlamak için doğru zamandır. Değilse, trafiğinizin önemli bölümlerini çığlık atma riski taşırsınız. Neyse ki, hücresel optimizasyon açısından dikkat etmeniz gereken birkaç unsuru tartıştık, örneğin:
Okunabilirlik: İçeriğinizin iyi biçimlendirilmesini sağlamak çok önemlidir, çünkü küçük bir görünüm alanıyla ilgileneceksiniz.
Navigasyon: Navigasyon menünüz, hücresel kullanıcıların fareye erişemeyeceği göz önüne alındığında kolayca bulunmalı ve kullanılmalıdır.
CTA Optimizasyonu: Tıpkı menünüz gibi, bu kolayca tanınmalı ve etkileşime girmelidir.
Bu konu hakkında söylenebilecek çok daha fazlası var ve geçmişte derinlemesine tartıştık. Bu konu hakkında daha fazla bilgi için, bu hücresel web tasarımını optimize etmek için on ipucu listesine bakın. Divi, hücresel optimizasyon açısından nasıl yardımcı olabilir, Divi sizi destekler! Tema doğrudan yanıt verme için optimize edilmiştir ve tema ayar özelliklerini kullanarak sitenizin mobil cihazlarda görünümünü her zaman kontrol edebilirsiniz. Ancak, daha pratik bir yaklaşım almayı tercih ederseniz, modüllerinizin her birinin özel gelişmiş tasarım menüsünden nasıl görüntüleneceğini mükemmelleştirebilirsiniz. Bu, masaüstü, tablet ve hücresel görünümler için tasarım kontrolünü değiştirmenizi sağlar. 6. Tasarım tutarsız ve odaklanmamış ideal olarak, tüm web siteleriniz net bir odak ile tek tip tasarımlar göstermelidir. Bir sitede bazı stilleri kullanmak patlayan bir etkiye sahip olabilir ve hatta kullanıcılarınızı karıştırabilir. Dahası, web siteniz için benzersiz bir kimlik yaratmak – tek tip bir renk ve stil paleti gibi – marka imajını artıracaktır. Örneğin Facebook’u ele alalım. Yıllarca aynı tarzı ve kolayca tanınan mavi bir paletle aynı stili salladılar. Bu, web’deki en şık tasarım olmayabilir, ancak işi tamamlıyor ve şimdi marka ile ilişkilidir. Web sitenizde kullandığınız Gaya çoğunlukla kişisel kararlardır-tek tip kaldığınız sürece sorun değil. Ayrıntılarda sorun yaşıyorsanız, her zaman malzeme tasarımı gibi görsel tasarım dilinde ilham bulabilirsiniz. Divi, kutunun dışında iyi görünmesini sağlamak için düzgün bir şekilde düzenlenmiş tüm divi modüllerine nasıl yardımcı olabilir. Bununla birlikte, gelişmiş tasarım ayarlarını ve özel CSS özelliklerini kullanarak ayrı ayrı ayarlayabilir ve ayrıca ileride kullanmak için ince ayarlarınızı Divi kütüphanenize saklayabilirsiniz:Tema ayarı aynı zamanda temanızın tüm estetiğini hızlı bir şekilde değiştirmenizi sağlar ve bu, diğer özelliklerin yanı sıra renk ve hücresel stil şemalarınızı değiştirme seçeneklerini içerir.7. Birçok insanın web sitesine mümkün olduğunda görüntü ve animasyon eklemenin iyi bir şey olduğunu düşündüğü görüntü ve animasyonların kullanımı.2000’li yılların başlarında Flash tabanlı site trendini hatırlıyorsanız, neden bahsettiğimizi bilmelisiniz.Bu tür medya türlerinden birine çok fazla güvenmek, sitenizin sadece dağınık görünmesine neden olmakla kalmaz, aynı zamanda yükleme hızını da etkileyebilir (ve yavaş web sitelerinden daha kötü olan bazı şeyler vardır).Ayrıca, yanılıyorsanız arama motoru optimizasyonu (SEO) üzerinde de etkisi olabilir. Web sayfalarındaki gereksiz animasyonların örnekleri.
Tabii ki, hemen hemen her site tasarımı mükemmelleştirmek için burada ve orada bazı grafikler gerektirir ve buradaki anahtar kelime “geliştirmek” dir. Eklenmeyi seçtiğiniz herhangi bir görüntü veya animasyon, dikkati içeriğinizden ayırmamalı ve yalnızca ilgili ise kullanılabilir. Örneğin, bu makalede, ana odak noktası olarak değil, yalnızca bağlam sağlamak için görüntüler ekliyoruz. Son olarak, web tasarım trendleri hakkındaki son makalemizde tartıştığımız gibi, mümkün olduğunda animasyonun tamamını mikro etkileşimlerle değiştirmeyi de düşünmelisiniz. Çok daha rahatsız edici ve yine de kullanıcılara belirli eylemleri vurgulamanıza izin veriyorlar. Divi, birçok Divi modülünün, ziyaretçileri içeriğinizden yönlendirmeyecek doğuştan gelen bir iştah animasyonu ile gelmesine nasıl yardımcı olabilir. Kıyafetlerinizi yuvarlamak istemiyorsanız, CSS kullanarak kendi kendine kendi ekleyebilirsiniz.
Buna ek olarak, Fullwidth başlığı gibi birkaç divi modülü, popüler paralaks özelliklerini uygulamanızı sağlar. Divi’nin kaydırıcısında olduğu gibi, varsayılan olarak desteklemeyen birkaç modül bile manuel olarak ekleyebilirsiniz. 8. İletişim bilgileri ‘Gizli’ Son fakat en önemlisi, iletişim bilgileri hakkında konuşalım. Tasarladığınız web sitesinin türüne bağlı olarak, sizinle iletişime geçmek istediğiniz en az birkaç ziyaretçinin veya sorumlu herhangi biri olması muhtemeldir. İletişim bilgilerinizin açıkça görüntülendiğinden emin olun, onu etkinleştirmenin en iyi yoludur. Söylemeye gerek yok, ancak iletişim bilgilerini kolayca bulmazlarsa bazı web siteleri diğerlerinden daha fazla etkilenecektir. Örneğin, Hizmet Web Sitesinde kaybolan veya gizlenmiş iletişim bilgileri, iş fırsatlarını kaybetmede sizin için zararlı olabilir. Çoğu site için, ana sayfanızda, kendi kısmında veya her ikisinde bulunması gereken basit bir iletişim formu hazırlamanızı öneririz: altbilginize bir e -posta veya telefon ekleyin – veya ikincil bir menü – ayrıca iyi bir yaklaşım olabilir. Sitenizin tasarımı. Ekledikleriniz dışında, ana paket öne çıkması gerektiğidir! Divi, ana özelliklerin çoğuyla aynı şekilde nasıl yardımcı olabilir, Divi daha önce optimize edilmiş bir formatla düzenlenmiş bir iletişim formu modülü sağlar. Bir süre önce, basit ve modern bir tasarım arıyorsanız çok yararlı olan ücretsiz bir iletişim sayfası düzeni paketi yayınladık:
Tasarımınızı manuel olarak değiştirmeyi tercih ederseniz, Divi Kontak Formu modülü istediğiniz kadar alan eklemenize ve tek tek düzenlemenize olanak tanır. Modül ayarlarından ayrılmadan, gönderildikten sonra kullanıcınızı okumak için başarılı bir mesaj bile ayarlayabilirsiniz. Sonuç WordPress kullanıcıları, anlaşılması kolay işlevleri sayesinde çekici web siteleri derlerken çoğundan daha basit bir zamana sahiptir. Bununla birlikte, bu nedenle, kötü tasarım seçeneklerinin projenize sızması kolaydır, bu da genel görsel kaliteyi kolayca azaltabilir. Bu bölümde, bir sonraki projeniz sırasında kaçınmanız gereken en yaygın sekiz web tasarımı tuzağını gösterdik. Özetleyelim: Kötü okunabilirlik.
Kötü navigasyon. Dengesiz negatif alan. Optimize edilmeyen CTA. Hücresel optimizasyon eksikliği. Tasarım tutarsız ve odaklanmamış.
Görüntülerin kullanımı ve yanlış animasyonlar. İletişim bilgileri ‘gizli’. Her kullanıcı tarafından bir numaralı web tasarımı hatalarından kaçınılması gerektiğini düşünüyorsunuz? Aşağıdaki yorumlar bölümünde abone olun ve düşüncelerinizi bizimle paylaşın! Makale Küçük Resim Meilun / Shutterstock.com
