Web Tasarım Kritiği # 80: Yeni Duyarlı WebAppers Sitesi
Gerçek bir web sitesine bir göz attığımız ve tasarımı analiz ettiğimiz bir başka harika web tasarım eleştirisi zamanı. 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 WebAppers, açık kaynak web kaynakları bulmak için harika bir yer. İç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.
WebAppers Hakkında
“WebAppers, günlük olarak web geliştiricileri ve web tasarımcıları için en kaliteli açık kaynak kaynaklarını paylaşmaya adanmış bir blog. Bir web tasarımcısı olarak, en iyi ücretsiz simgeler, stok fotoğrafları, fırçalar, yazı tipleri ve tasarım ilhamlarından bazılarını bulacaksınız. Bir web geliştiricisi olarak, kalıcı pencereler, menüler, galeriler, araç ipuçları, grafikler, takvimler eklentileri ve çok daha fazlası gibi en iyi Javascript ve Ajax bileşenlerinden bazılarını bulacaksınız. ”
İşte ana sayfanın bir ekran görüntüsü:
İlk izlenim
Bir Design Shack eleştirisinin buna değip değmeyeceğini merak ediyorsanız, tekrarlayan müşterilerden başka bir yere bakmanıza gerek yoktur. WebAppers aslında 14. web tasarım eleştirimizin müşterisiydi ve yepyeni, tamamen yeniden tasarlanmış duyarlı sitelerine bir göz atmamız için geri döndüler.
Yeni tasarım hakkındaki ilk düşüncelerim çok olumlu. Bu küçük bir güncelleme değil, siteyi tamamen yeni bir görsel yöne götürdüler ve bence bu daha iyi. Eski site, birbirine benzemeyen çeşitli kaynaklar bir araya getirilmiş gibi, birlikte Arnavut kaldırımlı bir görünüme sahipti. Aksine, yeni tasarım çok temiz ve profesyoneldir ve tamamen özel bir iş olarak ortaya çıkar. Ve önyükleme için duyarlı!
Web'in duyarlı evriminde hala çok erkenyiz, bu yüzden şapkam RWD'yi rahat teori alanından çıkarmak ve gerçek dünya pratiğine yerleştirmek için inisiyatif alan herkese gidiyor.
Sitenin tasarımını daha ayrıntılı inceleyelim ve neyin iyi çalıştığını ve neyin iyileştirilebileceğini görelim.
Yeni Logo
Eski WebAppers logosu bu tür 80'lerin rocker çekiciliğine sahipti. Bir çeşit kedi vardı, bazı aydınlatma cıvata şekilleri; ilginç ama eğlenceli.
Logoyu her zaman biraz kafa karıştırıcı buldum. Şimşek şekillerinin sadece bu mudur yoksa bir aslan yelesi olup olmadığını asla tam olarak anlayamadım. Bunların herhangi birinin açık kaynak web kaynakları ile ne ilgisi vardı?
Yeni logo daha basit, metin tabanlı bir yaklaşım getiriyor. Aslında merkezi “A” olarak da işlev gören "W" sayfa kıvrımının görsellerini seviyorum. Oldukça başarılı bir şekilde çıkarılan düz bir fikir.
Ayrıca, logonun sitenin ne hakkında olduğunu açıkça belirtmesini seviyorum. Ana sayfayı yükler yüklemez, gözlerim logoya sürüklenir ve sayfanın bana ne sunduğunu biliyorum. Bu son derece önemlidir ve bu eleştirilerde bir tasarımcıya tam tersini söylüyorum (sitelerinin neyle ilgili olduğunu görmek zor).
Yerleşim
Yukarıda bahsettiğim gibi, yeni düzen duyarlı ve bununla birlikte bir dizi önceden ayarlanmış kesme noktasında düzeni yeniden akıtmak için medya sorguları kullanıyor. Bazıları “tam olarak duyarlı” olmak için, bir sitenin, şüphesiz buna bir şekilde ilham veren bir proje olan Smashing Magazine'de görülen gibi bir akışkan ızgara üzerine inşa edilmesi gerektiğini söylüyor.
WebAppers tarayıcı genişliğinde (en azından en küçük yinelemeye kadar) her dakika değişime kendini yeniden akıtmıyor ve dürüst olmak gerekirse, onunla oynadıkça, bunun iyi olduğunu düşünüyorum. Yine de, birçok web sitesinin iddia edebileceğinden çok daha fazla olan her türlü farklı ekran boyutuna iyi uyum sağlayan dikkat çekici derecede esnek bir tasarım.
Geniş sürümde dört ana sütun vardır. Soldan sağa gezinme, birincil içerik, ikincil içerik kenar çubuğu ve reklamcılıktır. İki kenar çubuğu neredeyse ana içeriğin dışına kayan çekmecelere benzeyecek şekilde tasarlandı, genişlik daralırken çöktüklerini düşünen mükemmel bir metafor.
Pencereyi daraltırken, reklam sütununu en sağda bırakıyoruz. Ancak bu noktada içerik yalnızca kaybolmaz, bunun yerine reklamlar sağ kenar çubuğunun üzerinde görünür ve içeriği aşağı doğru iter. Bu harika görünen ve orijinal içeriğin çoğunu hala koruyan zarif bir çözümdür.
Bundan sonra ana içerik sütununu biraz daraltan ince bir sıçrama var. Kap daralır, metin boyutu küçülür ve görüntüler genişliklerini azaltır. Pencereyi daha da daraltırsak, en önemli düzen kaymasını elde ederiz:
Burada üçüncü sütunun tamamen düştüğünü ve içindeki içeriğin gizlendiğini görebiliriz. Bu, reklamların tamamen kaybolduğu (Smashing Magazine aynı şeyi yapar) ve popüler içeriği ve arama alanını içeren kenar çubuğunun da gittiği anlamına gelir.
Buradaki tek gerçek sorunum, sitedeki bu noktadan itibaren aranabilir görünmüyor olması. Ekran boyutu değiştikçe tasarımı değiştirmek için kullanıyorum, ancak işlevsellik daha dokunaklı bir konudur ve indirimlere dikkatle yaklaşılmalıdır. Arama oldukça birincil bir özellik gibi görünüyor ve muhtemelen bu görevi telefonumda veya tabletimde gerçekleştiremiyorum.
Sonunda, site tek bir sütun düzenine ayrılıyor ve navigasyon artık hem mobil hem de masaüstü cihazlarda iyi çalışan basit bir yerel açılır menüde görünüyor.
Genel olarak, düzen gerçekten iyi çalışıyor ve arama işlevselliği hariç, bu konuda çok değişiklik yapacağımdan emin değilim.
Perde arkasına baktığımızda, bu projenin Twitter Bootstrap tarafından desteklendiğini görebiliyoruz, bu da güzel çünkü sayfa tipik kopyala / yapıştır Bootstrap projenize hiç benzemiyor ve bu araç setini ödün vermeden kaputun altında kullanabileceğinizi kanıtlıyor özel tasarım.
Estetik
Şimdi sitenin yapısının veya kemiklerinin nasıl çalıştığını tartıştığımıza göre, üstteki buzlanmaya bir göz atalım. Site, burada ve orada ince renk patlamaları ile büyük ölçüde gri bir renk şeması alır. Cazip, minimal ikonları ve elbette birincil ve neredeyse seçkin yazı tipi olarak Helvetica'yı yoğun bir şekilde kullanır.
Bu sitenin en az favori yanı, kontrastın olmaması. Sayfadaki her şey, hiçbir şey göze çarpmayan bir tür monoton bir his veriyor. Sessiz görünümün gözler üzerinde nasıl kolay olduğunu görebiliyorum, ama neredeyse biraz gergin hissetmek için yeterince yumuşak.
Bunun için çözüm, endişelendiğim kadarıyla, sadece tek bir dosyayı değiştirmeyi içerecek kadar kolaydır: arka plan dokusu. Subtle Patterns'ten koyu bir doku aldım ve WebAppers sitesinde harika sonuçlar veren bir test çalışması yaptım.
Koyu arka plan, siteye çok ihtiyaç duyulan bir kontrast ekler ve ana içeriği dikkatinizi ön plana çıkararak gerçekten vurgular. Küçük bir ayarın ne kadar fark yaratabileceği şaşırtıcı!
Beni biraz rahatsız eden bir diğer küçük şey, aşağıdaki ekran görüntüsünde görülen makale başlıklarındaki gölge efektidir:
Bir yandan, bence bu harika bir etki. Öte yandan, metnin okunmasını oldukça zorlaştırdığını düşünüyorum. Belki de gölgenin opaklığı basitçe azaltılmış olsaydı daha az dikkat dağıtıcı olurdu.
özet
WebAppers'ın yeniden tasarımının kesinlikle başarılı olduğunu düşünüyorum. Site her zamankinden daha güzel ve cihaz agnostik olma yolunda güzel bir sıçrama yaptı. Kullanımı kolay, markalaşma daha mantıklı ve içerik sunumu gerçekten güzel.
Benim en büyük endişem, daha koyu bir arka plan deseninin eklenmesi ile tamamen yok olan bir görsel kontrastın olmaması. Arama işlevini mizanpajın daha dar sürümlerine bırakma kararından da şüpheliyim. İPhone'umdaki siteyi ziyaret etmenin arama yeteneğini kaybettiğim anlamına gelmesi gerektiğini düşünmüyorum.
Bu sorunların dışında harika bir site. Uğradığınızdan ve test sürüşü yaptığınızdan emin olun. Bence gördüklerini beğeneceksin.
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.
