Vahşi Yaşamda Harika Tasarım: Sevenly.org
Arada sırada gerçekten ilham veren bir veya iki tasarım parçası ve onlar hakkında yazmam için yeterince iyi bir arayüze sahip bir siteyle karşılaşıyorum. Daha nadir durumlarda bile, sizinle paylaşmak zorunda olduğum benzersiz harika tasarım fikirleriyle o kadar taşan bir site buluyorum. Bu makale böyle bir site hakkında.
Sevenly.org, sınırlı sayıda özel tişört satışı yoluyla yardım kuruluşlarına yardım etmeye adanmış bir sitedir. Organizasyonu ve neyi temsil ettiklerini sevmemin ötesinde, siteyle yaptıklarıyla şaşırdım ve web tasarımcıları için bir öğrenme aracı olarak hizmet ettiğini düşünüyorum. Hadi bir bakalım!
Tasarım Kaynaklarını Keşfedin
Sevenly ile tanışın
Sevenly'nin misyonu basittir: “Dünyayı değiştirme çabalarında hayır kurumlarını destekleyen sürdürülebilir farkındalık ve finansman hareketleri oluşturmak için sanatın ve toplumun gücünden yararlanmak.”
Pratikte, bunun nasıl göründüğü, süper harika ürünler (t-shirtler, tişörtü, su şişeleri vb.) Satıyor ve her satın alma işleminden o hafta desteklemeyi seçtikleri hayır kurumuna 7 dolar bağışlıyorlar. Bugüne kadar çeşitli yardım kuruluşları için neredeyse 600.000 dolar topladılar.
Harika tasarım
Bir kez daha, neden ve strateji Twitter'da benden bir tıklama kazandı, ancak beni içine alan ve ilgimi çeken tasarım. Yukarıdaki ekran görüntüsünde görebileceğiniz gibi, ana sayfa oldukça çekici.
Çok çekici tasarlanmış kıyafetler giyen iyi görünümlü, gülümseyen insanların güzel, büyük fotoğrafları ile ürünleri güzel bir şekilde gösterir. Duvar düzeni, sayfaya organik bir his verir ve minimal tasarım / renk şeması dikkatinizi gerçekten bu büyük fotoğraflara doğru iter.
Site bir bakışta harika görünüyor, ancak kullanmaya başladığınızda, her sayfa ile birkaç dakika boyunca oynarken kendimi kaybettiğim çok hoş sürprizler ve harika küçük hileler var. İlginç dokunuşlara bir göz atalım.
Hover Effects Galore
Fareyle üzerine gelme efektlerinin büyük bir hayranıyım, dokunmatik ekranlara her zaman çok iyi tercüme etmediklerini biliyorum, ancak bunu açıklayabilirsiniz. Masaüstünde, kullanıcılarla temel düzeyde etkileşimde bulunmamızın temel yollarından biridir.
Yedi kez sadece serin vurgulu efektlerle dolup taşıyor. Kaygan küçük animasyonlar her fırsatta sizi bekliyor. Ana sayfa giyim önizlemeleri ile başlar:
Varsayılan olarak, ürün adı ve fiyatı gizlidir, ancak bir resmin üzerine geldiğinizde bu bilgiyi ortaya çıkarmak için aşağı kayar. Sayfanın yan tarafına atladığınızda, burada her biri fareyle üzerine gelindiğinde uzun bir yatay çubuğa genişleyen üç düğme var.
Fareyle üzerine gelindiğinde bir öğenin boyutunu değiştirme ile aynı temayı takiben, küçük paylaşım çubukları, fareyle üzerine geldiğinizde daha da genişleyen düğmelere sahiptir ve tüm önemli tıklamaları teşvik eder.
Saf Kaydırma Vudu
Bu sayfadaki en sevdiğim şey, ana sayfada gerçekleşen kaydırma büyüsü. Aslında gerçekten basit bir etki ama o kadar iyi düşünülmüş ki, bundan etkilenemedim ama etkilendim.
Varsayılan olarak, sayfayı yüklediğinizde şunları görürsünüz:
Oranlar, ilk tepkiniz sayfayı aşağı kaydırmak olacaktır. Bunu yaptığınızda, siteyi tanımlayan karanlık bölüm, siz kaydırdıkça sizinle birlikte kalan küçük bir gezinme çubuğu olana kadar kısalır.
Büyük kısmı orada bitmiyor. Bunu yapmayı düşünmemenize rağmen, aslında orijinal başlangıç pozisyonunu geçebilirsiniz. Bu, daha önce gördüklerimizin tam tersini yapar ve karartılmış bölümü genişleterek sitenin mevcut yardım kuruluşu hakkında daha fazla bilgi verir.
Bir ton bilgiyi küçük bir alanda saklamanın ve yavaş yavaş kullanıcılara açıklamanın çok zarif bir yolu. Sayfayı yüklediğinizde sizi boğmayacak kadar gizlidir, ancak ilk keşfinizden sonra sayfanın üstüne geri döndüğünüzde kaçırmayacağınız kadar açıktır.
Sayılar ve Paylaşım
Bu sitenin sadaka odaklandığı göz önüne alındığında, tasarım için belirlenen iki hedef var. Bunu söyleyebilirsin, çünkü tüm düzeni sürüyorlar. Birincisi, istatistiklerle iletilen şeffaflık ve ilerleme düzeyidir. Şimdiye kadar ne kadar artırdığımız, hedef miktarlarımız, vb.
İkinci amaç, sosyal medyadan yararlanarak insanca mümkün olduğunca paylaşmayı teşvik etmektir. Ana sayfaya yerleştirilmiş büyük bir Facebook yorum bölümü ve sitenin çevresindeki tonlarca diğer sosyal düğme ve çubuk var.
Kişisel Dokunuş
Ana sayfayı geçtikten sonra, şaşırtıcı tasarım durmuyor. Sıradaki proje ile ilgili çeşitli üyelerle tanışabileceğiniz “Takım” sayfası.
Daha önce olduğu gibi, burada eğlenceli hover efektlerinin uygulandığını görüyoruz. Her takım üyesi, yalnızca başı zirveye çıkacak şekilde daire şeklinde gösterilir. Yine de dairenin üzerine geldiğinizde, aptal bir yüzle görünmeye başlarlar.
Bu sayfaya baktığımda başka bir sürpriz daha olduğunu fark ettim: arka plan aslında bir video! Çok ince ve ilk başta fark etmeyebilirsin, bu yüzden bu kadar güzel. Video bulanık ve karanlık olduğundan çok dikkat dağıtıcı değil.
Storygraphic
Göstermek istediğim son şey, size Sevenly'nin neden başlatıldığını biraz anlatan “Hikayemiz” sayfası. Beklediğiniz şekilde bir şey yapmaktan memnun değilsiniz, burada Yedi ekip size uzun, sıkıcı bir hikaye yerine harika bir infografik vermeye karar verdi.
Bu infografikin nasıl yapılandırıldığına dikkat edin: problem ve çözüm. Bu formatın sitenin başka bir yerinde her bir hayır kurumunun arkasındaki hikayeyi anlatmak için kullanıldığını görüyorsunuz. İlk olarak, bir problemi çok basit terimlerle ifade ederler, daha sonra sorunu çözmeye nasıl yardımcı olduklarını anlatırlar. Ferahlatıcı derecede basit ve anlaşılır.
Ne düşünüyorsun?
Yedi kişiyle hiç konuşmadığımı açıklığa kavuşturmak istiyorum, bu makaleyi yazmak veya bana hiçbir şekilde ulaşmak için bana yaklaşmadılar. Hem insan hem de tasarımcı olarak yaptıklarını gerçekten takdir ediyorum.
Bir dahaki sefere biraz ilham almanız gerektiğinde Sevenly.org'u gezdiğinizden emin olun. Sadece bakmayın, siteyle etkileşime geçin ve bu kadar rafine hissettiren tüm güzel küçük tasarım dokunuşları için bir fikir edinmeyin. Ayrıca, tasarımcı statünüze uyan bazı tişörtler için pazardaysanız, harika Yedi tasarımları yenemezsiniz.
