7 Benzersiz Tasarım Kararları
Ben her zaman ilham kaynağı olan, kongreye meydan okuyan harika tasarımlar için ilham arıyorum. Bu yazı tamamen benzersiz yerleşim çözümleri hakkındadır; Bu, tipik bir şeyi benzersiz bir şekilde sunan sekiz farklı web sitesinden bahsedeceğim anlamına geliyor. Ürünleri göstermekten, bir web sitesinde kişisel ve insan unsurlarını dahil etmekten eşsiz yerleşim çözümlerine geçeceğiz.
1. Harvard, meşhur karuseli yeniden keşfediyor
Harvard Tasarım Okulu Web sitesinin navigasyona yaklaşmanın benzersiz bir yolu var. Ana sayfaya ilk girdiğinizde, navigasyonun görsel bir görüntüsü vardır. Tabii ki, her bir bağlantı burada temsil edilmiyor, sadece birkaç anahtar. Birçok web sitesi, ana sayfanın başlığında daha önemli sayfalara bağlantıyı benimsemiştir; Örneğin bize karuseli getiren şey budur. Ancak, bu şekilde başka bir web sitesini daha görmem gerekiyor. Navigasyon küçük olabilir, ön ve merkezidir. Daha önemlisi, oraya ait gibi görünüyor. Bu istisnai olarak yürütülür.
Soldaki görüntüler birbiriyle çakışıyor, ancak hala kaç tane olduğunu görebiliyorsunuz. Görüntü ile sol taraftaki başlıklar arasında net bir ilişki vardır. Görüntüler soldaki öğelere göre döner. Ancak, herhangi bir zamanda, sizin için hangi bilgilerin mevcut olduğunu biliyorsunuz. Harvard'ın Tasarım Okulu, ilk olarak atlı karıncaların ne olması gerektiğinin geliştirilmiş bir versiyonunu yaratmış gibi. Bu tasarım çözümünde kullanılabilirlik ciddiye alınmakla kalmaz, düzen de benzersizdir. Bu faktörlerin ikisi de fantastik bir görsel tasarım için bir araya getirdi.
2. Tra ızgaradan çıkıyor
Oldukça açık ki Tra 'In web sitesi geleneksel olmayan bir düzen kullanıyor. Web sitesi genel olarak en az. Ayrıca arka planın siyah ve metnin beyaz olduğu ters renk düzeni kullanırlar. Renk şeması kesinlikle bir wow faktörü verir. Ancak, bu Tra'nin web sitesinin düzeni hakkında. Ana sayfa ile başlayalım: ana sayfada birkaç metin parçası var, çoğunun arka plan resmiyle en az bir kısmı örtüşüyor, paragrafın kopyası “Biz insanları tanıyoruz” bölümünün altında. Kopya, özellikle resim dışında olacak şekilde hizalanır. Farklı, benzersiz, fark edilir.
Hakkında sayfada, biraz daha fazla sipariş ve bir ızgara kullanımı var. Ancak, ızgara hala düzensiz. Bu sayfanın her bölümünün kendi ızgarası varmış gibi görünüyor. Bu sayfa hakkında beni en çok etkileyen şey, web sayfasının sol üst kısmındaki kesilmiş resim. Sadece hiçbir şeye uymuyor. Doğal olarak, bu beni meraklandırıyor. Görüntünün bir galeri olduğu ortaya çıkıyor - görüntüleri açmak için tıklamanız gerekiyor. Bir düzenden yararlanmak için oldukça zekice bir yol; Araştırmaya önem veren insanlar bir grup imajla ödüllendirilir. Umursamayan insanlar, o kadar kaybetmezler. Eğlenceli bir paskalya yumurtası.
Sabit bir sayfada 3. Kaydırılabilir ayakkabı fotoğrafları
Benzersiz bir düzen çözümünün bu örneği, bir çevrimiçi ayakkabı perakendecisinin etrafında dönüyor. Feit Ürün sayfası sadece mükemmel. Her şeyden önce, tasarım ekranın tam genişliğini ve yüksekliğini kullanır. Bu, ekranın her alanının belirli bir amaç ile belirlenmiş olduğu anlamına gelir. İkincisi, web sitesi basit, minimal ve temiz. Bu, tasarımın tüm ekranı kullanmasına rağmen, dağınık olmadığı anlamına gelir. Bu, tasarımın bolluğuna, temiz ve hafif görünümlü bir web sitesi yapmak için boşluklara dayanan çok iyi bir şey.
Bu spesifik ürün sayfası hakkında beni en çok etkileyen şey, düzenin bölünme şeklidir. Sayfa özellikle üç farklı bölüme ayrılmıştır. İlk olarak, sol tarafta gezinme var. Oldukça standart ve hiçbir şey çok özel değil. Daha sonra ürün detayları ile sağ tarafta var. Her ikisi de, sol taraftaki gezinme ve ayrıntılar bölümü ekrana sabitlenir. Ancak, son bölüm, orta fotoğraf bölümü, kaydırılabilir fotoğraflar ile doldurulur. Bence bu harika bir çözüm çünkü en yaygın çözüm değil.
Çoğu zaman, eğer ürün fotoğraflarının büyük bir listesi varsa, bununla ilgili bilgiler geride kalır. Burada aşağıya inerken, ürünün açıklamasını ve adını hala görüyorum, hala geldiği farklı renkleri görüyorum ve yukarı ve aşağı kaydırmak zorunda kalmadan malzeme hakkındaki ayrıntılar gibi daha fazla bilgiye erişebiliyorum. Genel olarak, bu potansiyel bir müşteri için sorunsuz bir deneyim.
4. Bir ürünün birden çok tarafını tek bir bakışta gösterme
Burada başka bir ürün sayfasına ve bir ürünü görüntülemenin başka bir yoluna sahibiz. Tamam, başka bir ayakkabı örneğimiz de var! Afu-Ra Web sitesinin ayrıca benzersiz bir görüntüleme yöntemi vardır. Bu sefer ayakkabılar, sayfanın üst kısmındaki farklı çekimlerde gösteriliyor. Aslında bir atlıkarınca UI elemanının bir parçası. Ancak, burada kullanılabilirlik büyük bir sorun değildir. Yeni başlayanlar için, masaüstü veya dizüstü bilgisayar ekran boyutlarında varsayılan olarak görüntülenen üç resim vardır. Varsayılan görüntülerin hepsi, güzel ve kesintisiz bir görüntü oluşturan aynı arka plana sahiptir. Bir kullanıcı görüntülerin bir atlı karenin parçası olduğunu fark etmezse, en azından bilgisayarlarında ürünün üç farklı görüntüsünü görürler. Tabletler gibi daha küçük ekran boyutları için varsayılan, bir seferde iki görüntüyü göstermektir; Bu hala oldukça iyi. Sonuçta, burada ayakkabı ürünlerinin gösterilmesi, benzersiz bir tasarım çözümüdür.
5. Opendoor insanlarını gösterir
Ben, birincisi, web’in genellikle insanı görmediğimiz, kişisel olmayan bir yer olduğuna inanıyorum; uygulamalar, ürünler, şirketler vb. arkasındaki gerçek insanlar. Tasarımlarımda her zaman bir insan unsuru bulundurmaya çalıştım. bunu görebiliyorum Açık kapı aynı şeyi yapmak istiyor. Ana sayfalarında, yaklaşık yarım yol aşağı, “Sırtınızı aldık” adlı bir bölüm. Opendoor şirketinin arkasında, müşterilerinin her adımında onlara yardımcı olacak gerçek insanlar olduğunu açıklamak gerekiyor. Şimdi, Opendoor onu orada bırakabilirdi, ancak bunun yerine, çalışanlarından birinin büyük bir fotoğrafını yerleştirdiler.
Bu bölümün çok az metni var. Bunun yerine, fotoğraf ve yüz bölümün daha büyük bir kısmıdır. Fotoğrafın bu bölümü% 100 olumlu yönde zorladığını bile söyleyebilirim. Fotoğraf bir küçük resim veya bir avatar olsaydı, efekt mevcut bile olmazdı. Fotoğraf, kopyaların hemen yanında orta ölçekli bir kare (en az 300 piksel x 300 piksel) olsaydı, efekt aynı olmazdı. Mark'ın samimi yüzünün bu kadar büyük bir görüntüsünü kullanma tercihi iyi bir çağrıydı; Bu tasarım kararı sadece insani ve kişiselleştirilmiş bir tasarım öğesi sağlamakla kalmaz, aynı zamanda yaratıcıdır. Bu fotoğraf olmadan, kullanıcı üzerinde kişisel bir etki olmaz. Bu özel düzen olmadan, bu bölüm tamamen farklı bir duygusal etkiye sahip olacaktır.
6. UX Akış biraz animasyon uzun bir yol gidebilir gösterir
Benzersiz bir mizanpaj çözümünün bu sonraki örneği, animasyonla ilgilidir. Ana sayfadaki bir sayfaya bakarsanız UX Akışı ve biraz aşağı doğru ilerlediğinizde, bölümün arka planlarından birinin canlandırdığını fark edebilirsiniz. Açıkçası, hiçbir şey fantezi değil ama benzersizdir. Web sayfasında ilerlerken arkaplanlar rahat etmiyor. Bir şey varsa, son birkaç yıl içinde, siz gezinirken bir bölümün içinden veya dışından farklı öğeler gördük. Ama paralaks dışında pek çok arka plan animasyonunu görmemiştim. Bunun önemli olmasının nedeni, bir arka planın bir bölümü tanımlamasıdır. Ve, bu çılgın bir animasyon olmasa da, hala etkileyici.
Her şey cesur, gürültülü ve etkileyici olmak için iğrenç olmalı. Bazen küçük ve hızlı bir kolaylık animasyonu gibi ince şeyler sadece kullanıcı için benzersiz bir deneyim üretmeye yeterlidir. Bu kesinlikle o zamanlardan biri. Dikkat edilmesi gereken bir diğer nokta, animasyonun gerçekleştiği bölümlerin kendilerine özgü düzenleri olmamasıdır. Sorun yok; Bir bölümden diğerine geçerken geçişin fark edilir olması, animasyon tarafından yapılan son yerleşim olmasa bile düzenin bir parçası.
7. Ted Todd entegre harita
Görsel tasarım ve genel kullanıcı deneyimi Ted Todd Web sitesi iyi tasarlanmış. Bu yazı için Ted Todd'un web sitesinde yer ve harita bölümünü kullanma şekli hakkında konuşmak istiyorum. Ana sayfalarının alt kısmına doğru, şirketin Florida'da sahip olduğu farklı ofis konumları için belirlenmiş bir bölüm var. Bu bölümün neden şaşırtıcı olmasının birçok nedeni vardır. İlk olarak, bölüm düzeni bir yıldız tasarım çözümü sağlamak için benzersiz bir şekilde kullanmaktadır. Bu bölüm hakkında en dikkat çekici olan şey, sağdaki Florida'nın hafif şeklidir. Florida'nın çok sayıdaki görüntüsü, şirketin erişimini göstermek için harika bir yol. Sadece Florida'da olduklarını söylemezler, tasarım size tam olarak nerede olduğunu gösterir. Sindirmek için kolay bir görsel ve aynı zamanda harika bir şekilde yürütülür.
Bu bölümle ilgili bir sonraki önemli nokta noktalar. Aslında etkileşimli. Üzerine geldiğinizde, Ted Todd Sigorta bürosunun bulunduğu şehrin veya şehrin ismini alırsınız. Ancak, tıklarsanız tüm bölüm, belirli bir ofisle ilgili ayrıntılar için yer açmak için sola kaydırır. Çalışanların listesine ek olarak ofisin telefon numarasını, adresini, açık çalışma saatlerini de alırsınız. Bu tasarım çözümünü beğendim çünkü bir kullanıcının hızlı bir şekilde onlara yakın bir yere gitmesine izin veriyor. Bilgi, “Florida Ofislerimiz” başlıklı bir sayfada üst üste yığılmış olsa bile, görsel olarak çok daha ilginç ve eşsiz bir temsil niteliğinde değil mi?
