Web Tasarım Kritiği # 40: FanExtra
40. tasarım eleştirimize hoş geldiniz! Her hafta yeni bir web sitesine bakıp tasarımı analiz ediyoruz. Bazı işleri kullanabilen alanlara ek olarak iyi yapılmış alanlara dikkat çekeceğiz. Son olarak, kendi geri bildiriminizi vermenizi isteyerek bitireceğiz.
Bugünün sitesi, tasarımcılar için harika bir kaynak sitesi olan FanExtra'dır.
Envato Elements'i keşfedin
Web sitenizi gelecekteki bir Tasarım Kriterinde gösterilmek üzere göndermek istiyorsanız, sadece birkaç dakikanızı alır. Tasarımınızı eleştirmek için 34 dolar alıyoruz - sitenize göz atmak için bir danışman için ödeyeceğinizden çok daha az! Daha fazlasını burada bulabilirsiniz.
FanExtra Hakkında
“Her şey iki yıl önce uzun bir yaz ve tasarım tutkusu ile başladı. O sırada yayınlanan bazı Photoshop eğitimlerinin tadını çıkardıktan sonra kendimden birkaçını yazmaya karar verdim. Bu amaçla bir blog hazırladım (PSDFAN.com) ve onu reklam öğesi çıkışım olarak kullanmaya başladım. Büyüyen topluluğumuza daha fazlasını sunmak ve PSDFAN'ı daha büyük bir şeye dönüştürmek istedim. FanExtra fikri yakında doğdu! FanExtra ağı, dünyanın her yerinden tasarımcıların bir araya gelip fikirlerini ve yaratıcılıklarını keşfetmeleri için bir yerdir. Forumlarımızdaki tartışmalara katılabilir veya FanExtra üyelik programımızla öğrenmenizi daha da geliştirebilirsiniz. ”
İşte ana sayfanın bir ekran görüntüsü:
İlk İzlenim
FanExtra, bir Tasarım Kritiği için henüz sahip olduğumuz en ilginç durumlardan biridir. Bunun nedeni aslında gerçekten çekici bir sayfa, ama tavsiye edeceğim bir sayfa neredeyse tamamen yeniden düşünülüyor.
Logodan küçük resimlere kadar sayfadaki her bölüm harika görünüyor. Ancak, sayfayı bir bütün olarak ele aldığınızda, en büyük sorunun yanı sıra her bölümün akışı ile ilgili gerçek sorunlar vardır, bu da birincil mesajın iletişiminin netliğidir.
Bu sorun oldukça yaygındır ve web tasarımında çok kirli bir kelime nedeniyle ortaya çıkar: varsayım. Burada tasarımcı muhtemelen projeye yakın ve bu nedenle doğal olarak bir ziyaretçinin neler olduğunu anlayamayacağını görmekte zorlanıyor. Varsayım, bu sayfayı bulan bir ziyaretçinin “FanExtra” nın ne olduğunu bileceğidir;
İletişim
Bir web sayfasına geldiğinizde, başlık alanını içgüdüsel olarak bir fast food restoranındaki menü panosunu analiz ettiğiniz gibi analiz edersiniz. Olası sorular şunları içerir: Neredeyim? Ücreti ne kadar? Bana param için ne verecekler? Kok veya Pepsi ürünleri sunuyorlar mı? Tamam, belki de son soru burada geçerli değildir.
Demek istediğim, bu sitenin başlığına baktığınızda, bu önemli soruların tümünü yeterince ele almıyor:
Siteye ne denir (FanExtra) ve bir çeşit kayıt için büyük bir alan görüyoruz. Bu ağa kaydolduğum anlamına mı gelecek? Peki bu ücretsiz bir hizmet mi? Sağda, bizi doğru yola götüren “öğreticiler” i ima eden ve ardından oldukça belirgin jargonu temsil eden “dokular” ve “vektörler” gibi sözcükler içeren bir şey görüyoruz.
Eğer bir tasarımcıysam, bu noktada muhtemelen belirli bir ölçüde neler olduğunu anladım, ama buradaki amaç gerçekten bu mu? Ziyaretçinin ipucu bulması ve kullanması sitenin ne olduğunu yorumlar mı?
Gizem Ortaya Çıktı
Web sitesinin ortasına indiğimizde gizem ortaya çıkıyor:
Artık FanExtra'nın aylık 9 ABD doları üyelik sunan “harika eğitim siteleri ağı” olduğunu görebiliyoruz. Bu, sayfadaki en önemli iletişim parçasıdır ve yine de sayfanın yarısına kadar gizlenmiştir. Kullanıcının ilk gördüğü şey bu olmalıdır.
Aslında, bu mesajın daha da net olabileceğini düşünüyorum. Bir yabancının bakış açısından düşünürseniz, "harika öğretici siteler" ifadesi hala oldukça belirsizdir. “Yaratıcı profesyoneller için harika öğretici siteler” gibi bir şey bu ifadeyi daha da ileri götürür. Hemen hedef kitlenizi burun üzerinde sabitlediniz, böylece bu sayfayı bulduğumda, bu sitenin özellikle benim gibi insanlar için olduğunu bildiren hoş bir sıcak karşılama görüyorum.
Görsel Kontrast ve Görsel Karmaşa
Mesajlaşma ile ilgili gördüğüm diğer bir konu, görsel açıdan nasıl yapılandırıldığı. Şu anda olduğu gibi birincil iletişime bir göz atalım:
Burada, her biri farklı renk metni ve aynı yazı tipinin hem kalınlık hem de boyut açısından küçük varyasyonları kullanan üç satırlık bir yığın görüyoruz. Tasarımdaki kontrastla ilgili tüm makaleleri yazabilirim ve yazdım, ancak en iyisi tasarım yazarı Robin Williams'ın bir tavsiyesinde şöyle diyor: “bir wimp olma.” Bununla, kontrastı etkili bir şekilde kullanmak için, elemanların gerçekten büyük bir şekilde birbirinden ayrı durması gerektiği anlamına gelir, aksi takdirde sonuç sadece görsel karmaşadır.
Bir başka popüler tasarım üyelik programı olan Think Vitamin'in sayfalarındaki birincil mesajı nasıl yapılandırdığını kontrol edin.
Burada, başlık ve alt başlık arasında büyük, büyük ölçüde abartılmış bir kontrast görüyoruz. Sonuç, mükemmel okuyan güzel ve net bir iletişimdir. Sayfaya göz atan kişiler başlığı neredeyse kazara okurlar ve ilgilenirlerse alt başlığı okumaya zaman ayırırlar.
Özellikler
Sayfa, sol tarafa doğru uzanan büyük bir kurşun nokta seti ile bitiyor. Bu alanın oldukça garip bir kullanımı ve sağ tarafta rahatsız edici bir boşluk yaratıyor.
Bunun hızlı çözümü, mermi noktalarını iki ayrı yığın halinde ayırmaktır:
Bu nihayetinde bir yara bandı ve sanırım sayfa gerçekten büyük bir ameliyat olabilir. Bunu bir sonraki bölümde kısaca ele alacağız.
“Büyük Resim” Önerilerim
Dürüst olmak gerekirse, bu site için kesintisiz çift sütun kurulumu çalıştığını sanmıyorum. Çok katı ve yapılandırılmış bir düzenin amacı olan iletişimin kolaylaştırılması yerine aslında doğal akışını bozuyor.
Benim tavsiyem bu düzeni tamamen atmak. İlk olarak, sert çift kolon yapısını indirin. Ardından, birincil iletişimi sayfanın üstüne taşıyın. Tüm sayfa genişliğini kapsayan ve daha sonra bölümlere ayırdığınız içeriğin bir kısmını (140+ dosya, 40 vektör, vb.) Vurgulayan büyük bir "özellikli" kutu oluşturun. Başlığın güçlü kontrast, kristal netliğinde kelime öbeği ve hedefleme kullandığından ve birlikte harika görünen en fazla iki renk kullandığından emin olun.
Son olarak, sitenin ne olduğunu, kimin için olduğunu ve ne içerdiğinin temellerini mükemmel bir şekilde çivilen bu harika başlık alanını oluşturduktan sonra, diğer bilgilerinizi muhtemelen iki veya üç sütun biçiminde düzenlemeye odaklanabilirsiniz.
Senin sıran!
Artık yorumlarımı okuduğunuza, tasarımcıya biraz daha tavsiyede bulunarak yardım edin ve yardımcı olun. Tasarım hakkında neyin harika olduğunu ve neyin daha güçlü olabileceğini düşündüğünüzü bize bildirin. Her zaman olduğu gibi, sitenin tasarımcısına da saygılı olmanızı ve sert hakaretlerden yoksun bir şekilde yapıcı tavsiyeler vermenizi rica ediyoruz.
