Onları her gün görüyorsun. Muhtemelen tekrar tekrar ziyaret ettiğiniz birkaç favoriniz var. İyi tasarlanmış bir web sitesine tam olarak ne girer? Kendi web sitenizi oluşturmaya başladığınızda, fontlar, renkler, stiller, fotoğraflar ve daha fazlası için milyonlarca seçeneğiniz var gibi görünüyor. Ancak gerçek şu ki, çoğu başarılı web sitesi, gözlerini kolaylaştırmak ve ziyaretçilerin gezinmesi için kolaylaşmak için aynı temel ilkeleri kullanıyor. Bunun da bir nedeni var. Google'ın araştırmasına göre, kullanıcılar basit ve tanıdık tasarımları tercih ediyor ve bu kararı bir göz açıp kapayıncaya kadar veriyorlar. Bu yazıda, kendi sitenizi oluşturmanın bazı gizemlerini ortadan kaldıracak web tasarımının temel kavramlarını gözden geçireceğim. Daha derine dalmak istiyorsanız, kullanabileceğiniz daha birçok teknik ve fikir var, ancak bunlar başlamak için iyi bir yer sağlıyor. Seçim Paradoksu simpsons monstromart Tıpkı “The Simpsons” dan Monstromart gibi: Çok fazla seçenek = müşterileriniz için zor bir deneyim. Bir kişiye ne kadar çok seçenek verirseniz, karar verme olasılıklarının o kadar düşük olur mu? Ve bir karar verirlerse, birçok seçeneğe sahip insanlar, seçimlerinden daha az memnun hissederler. Bu Seçim Paradoksu olarak bilinir . Bir deneyde, bir grup müşteriye örneklem için altı süslü reçel teklif edildi; bir diğerinde 24 farklı reçel teklif edildi. Altı seçeneğe sahip grupta, müşterilerin% 30'u alışveriş yaptı. 24 seçeneğe sahip grupta sadece% 3 bunu yaptı. Bu sezgiseldir, ancak perakendecilerin ürünleri nasıl sattığını etkileyen bir fenomendir ve web sitenizi nasıl tasarladığınızı da etkilemesi gerekir. Web sitenizin ziyaretçilerine tüm seçeneklerini hemen sunmak iyi bir fikir gibi görünebilir, gerçek şu ki insanlar bunalmış ve daha sonra hiç karar veremezler - ve hiçbir şey tıklamadan web sitenizi terk edebilirler. Aşağıda, makul sayıda seçeneğe sahip bir sayfa örneği verilmiştir. Tasarım okuyucuya ilk önce ne okuyacağını ve sonra nereye gideceğini açıkça gösterir Web sitenizi oluşturun Jimdo Web Tasarım İpuçları İyi bir tasarım ziyaretçilere çok net seçenekler sunar. Seçim Paradoksu web sitenizin tasarımını nasıl etkileyebilir? Ziyaretçilerin sitenizi ziyaret ettiklerinde gerçekten neyi başarmasını istediğinize karar verin. Haber bülteninize kaydolmak, satın alma yapmak, müzik dinlemek vb. Olabilir. Her neyse, onları o noktaya getirmeye odaklanın. Gezinme menünüzü basit ve kısa tutun. Önemli bir kural, navigasyon menünüzde yedi'den fazla öğenin bulunmamasıdır . Bundan daha fazlası ve kullanıcıların tüm seçenekleri okuması ve bir sonraki adımda nereye gitmek istediklerine karar vermesi zor olacaktır. Jimdo navigasyon Tüm sayfalarınızı kafa karıştırıcı bir gezinme çubuğunda listelemek yerine… Jimdo basit gezinme … Yalnızca en önemli sayfaları tutmaya çalışın ve alt sayfalar için açılır menüleri kullanın Harekete geçirici mesajlarınızı birlikte gruplandırın (ya da daha iyisi ancak her sayfada bir harekete geçirici mesaj var). Kenar çubuğunda bir düğme ve sayfanın etrafına dağılmış dört düğme daha yok. Seçimleri sınırlı ve gruplandırılmış tutmak, izleyicinin sayfada farklı seçeneklere bakarak "ping-pong" yapmak yerine, ne yapmak istediklerini hızlı ve sakin bir şekilde seçebileceği anlamına gelir. Çevrimiçi mağazanızda tonlarca ürün varsa, Mağaza Kataloğu Öğesini kullanarak bunları anlamlı kategorilere ayırmayı deneyin. Örneğin, satılacak 75 farklı kravatınız varsa (ve eğer öyleyse, sizin ve kravattaki yeniliğiniz için iyi!), Hepsini tek bir sayfada listelemeyin. Bunun yerine, bazı farklı etiketler (belki "ipek", "gündelik", "50 dolar" vb.) Ve her bir Mağaza Öğesi Öğesini buna göre etiketleyin. Ardından, ziyaretçiye belirli kategorilerdeki kravatları sunmak için Mağaza Kataloğu Öğesini kullanın. Görsel Hiyerarşi Sunduğunuz seçenek sayısını daralttıktan sonra, bir sonraki adım sayfadaki bilgilere öncelik vermektir. Görsel hiyerarşi terimi burada devreye giriyor. Okuyuculara neyin en önemli, önemli ve daha az önemli olduğunu ve ilk başta nelere bakmaları gerektiğini söylemek için boyut, renk ve yerleşim gibi görsel ipuçları kullanmak anlamına geliyor. Bir tasarımcı olarak işiniz, web sitenizdeki en önemli bilgilerin ön plana çıkmasını ve daha az önemli bilgilerin görünmemesini sağlamaktır. Yeni başlayanlar genellikle bu adımı kaçırır ve web sitelerindeki her şeyi yaklaşık olarak aynı boyutta yaparlar. Aşağıdaki örneği alın. Bu sayfa birçok seçenek sunuyor. Bu sayfayı ziyaret edenlerin iletişime geçmesi gerekiyor mu? Bir gömlek mi aldın? Hizmetleriniz hakkında daha fazla bilgi edinmek ister misiniz? Bilmek zor… ve aralarından seçim yapabileceğiniz altı düğme ile, nereden başlayacaklarını bilmeyecekleri iyi bir şans. Görsel sunum jimdo Bu örnek sayfanın görsel hiyerarşisi çok iyi değil. İlk olarak nereye bakılacağını bilmek zor. Kendi web sitenizde görsel hiyerarşi kullanma Görsel hiyerarşi oluşturmak, öğeler arasında farklılıklar yaratmakla ilgilidir - her şeyi büyük bir yazı tipi yaparsanız, çünkü her şey önemlidir, o zaman bu önemli bir şey yapmakla aynı şey değildir. Boyut. Daha büyük = daha önemli. Daha küçük = daha az önemli. Renk. Normalde renk hakkında web sitenize kişilik katmaktan bahsediyoruz, ancak aynı zamanda insanların dikkatini çekmek için harika bir araçtır - örneğin, Düğme Öğelerinizi sitenizin geri kalanından öne çıkan cesur bir renk haline getirebilirsiniz. Yine de bu yaklaşımı çok az kullanın - dikkat çekmek için rekabet eden çok fazla farklı renk istemezsiniz. Yerleştirme. Sayfanın üst kısmındaki bilgiler, aşağıdaki bilgilerden daha önemlidir. Sol taraftaki bilgi geleneksel olarak sağdakinden daha önemlidir ( tipik olarak F veya Z şeklinde bir desende okuduğumuz için ). Yukarıda kullandığımız örneği ele alalım ve daha iyi bir görsel hiyerarşi ile yeniden düzenleyelim. Şimdi, hala çok fazla olan altı düğme öneriyorsunuz. Ancak en azından ziyaretçinin birinci, ikinci ve üçüncü olarak neye bakmasını istediğiniz ve hangi işlemin en önemli olduğu daha açıktır (örneğin, Bana Ulaşın!). Jimdo Görsel Hiyerarşi Daha iyi görsel hiyerarşi için aynı sayfa yeniden düzenlendi. Bunu kendi web sitenizde uygulamaya koymak için aşağıdaki seçenekleri göz önünde bulundurun: Web sitenizde hiyerarşi oluşturmanın en temel aracı Başlık Öğesidir . Her sayfanın üstüne bir (ve yalnızca bir) Büyük Başlık koyun. Ardından, çok fazla metniniz varsa, sayfanın geri kalanını ideal olarak en önemli bilgilerden en aza indirgemek için Orta ve Küçük Başlıkları kullanın. Başlık Elemanları Jimdo Başlık Öğelerini kullanmak, web sayfalarınızda görsel hiyerarşi kurmanıza yardımcı olacaktır. Profesyonel İpucu: Bu stratejiyi kullanmak için, Metin Öğelerinizdeki metni büyütmek veya küçültmek yerine Başlık Öğeleri kullandığınızdan emin olun. Bu şekilde SEO'nuza ek bir destek elde edersiniz. Önerilen bir Düzen ile başlayın. Gezinmenize yeni bir sayfa eklediğinizde, Önerilen Düzen seçme seçeneğini göreceksiniz . Bunlar, tasarımcı ekibimiz tarafından net ve düzgün bir yapı izlemek üzere düzenlenmiş örnek içerik ve resimlerle dolu önceden tasarlanmış sayfalardır. Bir düzen seçtikten sonra, kendi içeriğinizle doldurmanız yeterlidir. Bu, kendiniz bir sayfa oluşturma varsayımını ortadan kaldırır. Beyaz boşluk "Beyaz boşluk" terimi, web sitenizdeki öğelerin etrafındaki boş alanı ifade eder. Kelimenin tam anlamıyla beyaz olması gerekmiyor, sadece boş. Tasarımcılar uzun zamandır beyaz alanın alan kaybı olmadığını biliyorlardı. Ziyaretçilerinizin gözlerini sayfanın farklı bölümlerine odaklamasına yardımcı olmak için çok ihtiyaç duyulan nefes alma alanı sağlar ve sitenizi okumayı ve gezinmeyi kolaylaştırır. Bu, düzenli, geniş bir alanda bir şey aramakla dağınık, aşırı dolu bir dolapta bir şey aramak arasındaki farktır. Beyaz boşluk ayrıca hangi parçaların birbiriyle ilişkili olduğunu göstermeye yardımcı olur. Eğer yakınlarsa, birlikte giderler. Eğer birbirinden uzaklarsa, ayrılar. Boşluk Öğeleri ve düğmeler kaldırılmış durumdayken yine örnek sayfamız. Farkı görüyor musunuz? Jimdo boş alanı kaldır Boş alan kaldırıldığında, sayfa artık biraz sıkışmış hissediyor. Web sitenizde daha fazla beyaz alan nasıl oluşturulur? Web sayfanızın farklı bölümlerinin üstüne ve altına boş alan eklemek için Boşluk Öğesini kullanın . Bir öğenin yanlarında boş alan oluşturmak için Sütunlar Öğesini kullanın . Örneğin, içinde üç sütun bulunan bir Sütun Öğesi ekleyebilir, resminizi veya metninizi orta sütuna koyabilir ve yandaki iki sütunu boş bırakabilirsiniz. Jimdo Uzayları İki öğe arasında daha fazla boşluk oluşturmak istiyorsanız, aralarına üçüncü bir sütun ekleyin ve boş bırakın. Boyutlarını ayarlamak için sütunların kenarlarını tıklayın ve sürükleyin. Yatay Çizgiler Öğeleri ayrıca sayfanın farklı bölümlere ayrılmasına yardımcı olabilir. Metin de nefes almak için yer ihtiyacı var! Daha kısa paragraflar kullanarak ve Başlık Öğeleri ile büyük bölümleri ayırarak metin bloklarınızda beyaz boşluk oluşturun . Aşağıdaki örnek Jimdo web sitesi görsel hiyerarşiyi ve hareket halindeki beyaz alanı göstermektedir. Farklı parçalar arasındaki boşluk miktarının nasıl rahat ve düzenli bir görünüm verdiğini görün. Bilgilerin sayfadan nasıl akması gerektiği ve hangi sırayla okumanız gerektiği çok açık. Web sitenizi oluşturun Jimdo boşluk örneği Şüphe duyduğunuzda tasarımınızı basit tutun Muhtemelen bu üç kavramın örtüştüğünü fark ettiniz. Buradaki temel ders, bir web tasarımcısı olarak neleri dahil edeceğiniz ve neyi dışarıda bırakacağınız hakkında seçimler yapmanızdır. Önceliklerinizi belirledikten sonra, ziyaretçilerinizin (veya hedefinizin) hedeflerine ulaşmak için izleyecekleri görsel bir yol tasarlamak çok daha kolaydır. Kendinizi sıkışmış bulursanız, basit olanın ziyaretçileriniz için neredeyse her zaman daha iyi olacağını unutmayın. Seçimlerinizi daraltın, mantıklı bir sıraya koyun ve önemli parçaların öne çıkabilmesi için sayfada yeterince boş alan bırakın. Bunu yapın, inanılmaz yeni bir web sitesine doğru yola çıkacaksınız! Kendi web sitenizle ilgili yararlı bulduğunuz başka web tasarım ilkeleri var mı? Yorumlarda bize bildirin.
