Web Tasarım Kritiği # 71: En Şirin Pençe
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ünkü site, dünya çapında bir hayvan fotoğraf galerisi olan Cutest Paw. İçeri girelim ve ne düşündüğümüzü görelim!
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 49 dolar alıyoruz - bir danışmanın sitenize bakması için ödeyeceğinizden çok daha az! Daha fazlasını burada bulabilirsiniz.
Cutest Paw Hakkında
Bu site, şimdiye kadarki en “awwww” uyandırıcı site eleştirimiz için ödülü kesinlikle aldı. Bu site tam anlamıyla sevimli ve komik hayvanların fotoğraflarından oluşan sonsuz bir akıştan başka bir şey değildir. Böyle bir şeye nasıl bakabiliriz ve yine de uyuyan yavruların dikkatini dağıtmadan yapıcı geri bildirim sunabiliriz? Neyse ki, % 100 reklam öğelerinin web tasarımlarını geliştirmelerine yardımcı olmaya adadık. Yavru köpeklerden uzak dur, yapacak bir işimiz var.
İşte ana sayfanın bir ekran görüntüsü:
İlk izlenim
Bir tasarımı değerlendirdiğimde estetiğin ötesine geçiyorum ve parçanın amacının ne olduğunu ve tamamlanan tasarımın bu amaca ulaşıp ulaşmadığını soruyorum. Buradaki kullanıcı için amaç basittir: çok sayıda fotoğraf görüntülemek. Cutest Paw sitesi amacına oldukça iyi hizmet ediyor gibi görünüyor. Düzen, alanın maksimum kullanımı için optimize edilmiştir ve kritik olmayan gereksiz göz şekerinde çok fazla piksel harcamaz.
Geçen haftanın tasarım eleştirisi gibi, bu da oldukça kısa olacak. Cutest Paw web sitesi çok basit yani eleştirilecek çok şey yok. Ancak, her zaman olduğu gibi, tasarımcının siteyi geliştirmesine yardımcı olacağına inandığım bazı geri bildirimlerim var. İçeri girip başlayalım.
Yerleşim
Bu site, aksi takdirde imkansız düzenleri kurmak için bir esinti haline getiren harika bir düzen eklentisi olan jQuery Masonry'nin kullanışlılığının en iyi örneğidir. Masonluğun güzelliği, içeriği dikey olarak dağıtmadan önce yatay bir düzen oluşturan CSS davranışından vazgeçmesidir. Bunun yerine, tuğlaların döşenmesine benzer şekilde güzel, sıkı bir dikey yığın oluşturur.
Bu durumda sonuç, yukarıda belirttiğim gibi, küçük bir alanda görüntülenebilecek fotoğraf sayısını gerçekten en üst düzeye çıkaran inanılmaz derecede sıkı bir görüntü ızgarasıdır. Site ayrıca, sayfayı aşağı kaydırdıkça içeriği yüklemeye devam eden sonsuz bir kaydırma tekniği kullanır.
Yığma tarzı düzenler ve sonsuz kaydırma kombinasyonu, son zamanlarda Pinterest tarafından oldukça popüler hale getirildi; bu, bu siteyi kullandığınızda düşünemeyeceğiniz ancak düşünemeyeceğiniz. Bu iki tekniğin birleşimi, benzeri görülmemiş bir tarama kolaylığı sağlar. Buna karşılık, sayfalandırma kullanıcının tarafında çok fazla çaba gerektirir. Burada, görmek için her şeyi görene veya başka bir şeye geçmeye karar verene kadar kaydırın ve kaydırın.
Kenar çubuğu
İçerik sonsuza kadar kaydırmaya devam ettiğinden, biraz sabit bir navigasyona sahip olmanız gerekir. Pinterest, sitelerinin üst kısmında bir çubuk kullanır, Cutest Paw kendi yoluna gider ve sayfa ilerledikçe hızla yetişen gecikmeli bir kenar çubuğu uygular. Bu oldukça etkilidir, ancak itiraf etmeliyim ki, ilk başta biraz çekici olan animasyon, hızla dikkat dağıtıcı ve biraz sinir bozucu olur.
Kenar çubuğu güzel tasarlanmış ve açıkça düzenlenmiştir, kullanılabilirlik perspektifinden (animasyon bir yana) oldukça iyi yapılır. Burada uygulanan “Başa Dön” düğmesini görmek güzel, kaydırmaya başlar başlamaz hemen bunlardan birini aradım ve kolayca buldum. Bununla birlikte, fotoğraf yığınının sağ tarafının üstünde veya altında bir çeşit yerleşim olduğundan daha etkili olabilir, bu kullanıcının dikkatinin odaklanacağı yere yerleştirilir ve bunun için avlanma ihtiyacını azaltır.
Tema
Sayfanın genel estetiği tartışmaya değer, aslında dikkate alınması gereken en önemli noktalardan biri olabilir. Bir yandan sayfa çekici. Siyah arka plan şık, şık ve fotoğrafların gerçekten öne çıkmasına yardımcı oluyor. Öte yandan, arka plan ve hatta kullandığım sıfatlar bile bu web sitesi için yanlış görünüyor.
“Sevimli” ve “bulanık” gibi kelimeler, insanların içeriği nasıl tanımlayacağıdır, ancak sitenin görsel teması siyah bir dokudır. Bu iki kavram kutupsal karşıtlara benziyor ve bir çeşit görsel uyumsuzluk yaratıyor. Daha önce de belirttiğim gibi, tasarımı sadece göz şekeri olarak değil, bir amacı ve bir mesajı güçlendirmek için kullanmanın büyük bir savunucusuyum. Sayfanızın tasarımı bir kişiliği ifade eder ve bu kişiliği yanlış anladığınızda, projenin etkisini ve başarısını azaltır. Bu tasarımdaki kavramların bir araya getirilmesi, 300 poundluk deri kaplı, dövme kaplı bir bisikletçinin okul öncesi bir sınıfı öğretmesini görmeye çok benziyor, ikisi birbiriyle çelişiyor gibi görünüyor.
Tasarımcı, böyle bir sitede dürüstçe en zor kısım olan düzeni çivilenmiştir. Şimdi çekirdek yapıyı korurken sitenin görünümünü tamamen yeniden temalamanın zamanı geldi. Daha dostça bir renk şeması ile başlayın ve / veya çok daha az sinirli bir doku kullanın. Belki de yumuşak bir duygu taşıyan bir şey (çirkin ve sevimsiz olmadan). Bazı harika kaynaklar için İnce Kalıplara göz atın.
Logo
Logo önceki ekran görüntüsünde gösterilir. Açıkçası site için çok uygun, pençe anında ilişkilendirilebilir bir semboldür. Bir logo olarak, çok genel olması gerçeğinde büyük bir kusur var. İçinde pençe olan bir daire, belki de 100 tasarımcı olmayan ilk 99 kişi bir pençe logosu oluşturma talimatı verildiğinde ortaya çıkardı.
Buradaki sorun, gerçekten sahip olamamanızdır. Yeterince sert bakarsanız, muhtemelen tonlarca işletme ve web sitesi için benzer bir şey bulabilirsiniz. Küresel bir marka oluşturmak istemiyor olabilirsiniz, ancak bir logonun tüm amacı hala markanıza bir yüz veren (küçük olsa da) bir şey bulmak ve onu tanımlanabilir kılmaktır. Bu öncelikler listesinde yüksek değil ama uzun vadede biraz daha benzersiz bir şey keşfetmenizi tavsiye ederim.
Sayfayı Gönder
Bu makalenin başında bahsettiğim gibi, bu site oldukça basittir, bu yüzden kısa süre içinde tamamlayacağız. Tartışmak istediğim son şey, kullanıcıların kendi fotoğraflarını gönderebilecekleri sayfadır:
Bu sayfada yaşadığım sorun, ortaya çıkan bir tür Başlangıç etkisidir. Çok benzeyen bir web sayfasına atılan bir web sayfasının ekran görüntünüz var. Eğik, bu yüzden biraz öne çıkıyor, ama yine de rahatsız edici bir kombinasyon. Buradaki sorun, sayfanın ve resmin arka planının aslında aynı olması, bu nedenle görüntü gerçekten önemli bir şekilde ayrılmamış olması. Belki bir kontur efektine bakmanızı ve bu resim ızgarasını daha da yakınlaştırılmış bir görünümde kırpmanızı tavsiye ederim. Kolay bir çıkış yolu olarak, buraya bir şekilde paylaşma, yükleme vb. Fikrini aktaran büyük, sevimli bir hayvan koyabilirsiniz.
Sonuç
Özetle, tasarım hakkındaki düşüncelerimin hızlı bir kontrol listesi.
İyi
- Düzen: Bu, jQuery Duvarcılık için mükemmel bir kullanımdır
- Sonsuz kaydırma: taramayı zahmetsiz hale getirir
- Basit ama etkili navigasyon
İş Gerekiyor
- Genel estetik: çok karanlık ve aşınmış
- Logo: çok genel
- Kayıt sayfası: ekran görüntüsü çalışmıyor
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.
