İlham veren arayüzler: Metin öne görsel arkaya

Her web tasarım projesinde, anasayfa akışının başladığı karşılama ekranı veya showcase alanının tasarımına, haklı olarak çok fazla vakit ayırıyoruz. Daha işin başında, takip ettiğimiz tasarımcıların işlerine göz atmak ve sitenin tasarım konseptine yönelik örneklerden koleksiyonlar oluşturmak iyi bir fikir. Tasarladığınız arayüzde, kullanıcıların markaya, slogana, arayüze odaklanmasını ve akışı takip ederek vakit geçirmesini istiyorsanız, karşılama ekranında dikkat çekici renkler, akılda kalıcı başlık ve iyi bir görsel kullanarak bunu başarabilirsiniz. Gelin, gelecek projelerinizde ilham alabileceğiniz, karşılama ekranı arayüz tasarımı alanında başarılı bulduğum örnekleri birlikte değerlendirelim.

Metni öne çıkarın, görseli arka plana atın!

Şu anda İlham Veren Arayüz Tasarımları serisinin 8. içeriğini okuyorsun.

Serideki diğer 13 içeriğe göz atmayı unutma!

6. Tipografik detaylar ve Typewolf favorileri #05
7. Espas, ışık ve düzen
8. Metin öne, görsel arkaya
9. Arayüzde tipografi
10. Yardımcı oyuncular: Görseller, şekiller ve stiller

Londra merkezli Republik reklam ajansının karizmatik web sitesinde sizi ilk karşılayan “yükleniyor” (loading) ekranı oluyor. Tek renk üzerinde kullandıkları kısa bir motto ile karşılama ekranına yönlendiriyor. Republik bize “işler” sayfasını karşılama ekranı olarak sunuyor. Burada tam ekrana yayılan ilgili bir görsel kullanımı ve üzerinde kalın yazı tipiyle ön plana çıkartılmış proje isimlerine yer verilmiş. Arayüz tasarımıyla ve geçiş animasyonula okunabilir, anlaşılabilir ve minimal bir arayüz tasarımına sahip.

Bir tasarım blogu olarak yayın yapan Yatzer ile 2008 – 2009 yıllarnda tanıştım. Yatzer, 2 yıl önce arayüz tasarımını güncelledi. Yeni tasarımda, karşılama ekranında kullanılan tam ekran görsel ve ortalı başlık ile kullanıcıyı blog içeriğine yönlendiriyor. Arka plandaki özenle seçilmiş sade görsel ve üzerinde kullanılan modern yazı tipiyle oluşturulan minimal arayüz gerçekten etkileyici.

Interaction Design Foundation kursları SHERPA Blog okurlarına 3 ay ücretsiz!

Video üzerine dahi olsa, doğru ve okunabilir kullanılan tipografi her zaman etkileyici görünür. Blue Stag reklam ajansının web stesi, tam ekran video kullanımı ve üzerindeki büyük boyutlu tipografisiyle kullanıcıya tam istediği mesajı veriyor. Takip eden beyaz alan kullanımıyla kullanıcıyı akışa doğru yönlendirmeyi başarıyor.

Proje tanıtım ve destek içeriğine sahip Wittycircle çatısı altında yeni projelerin tanıtıldığı Discover sayfasının karşılama ekranı, arka planında proje sahiplerine ait videoları, üzerinde cümle içinde form alanlarını kullanıcılarına “Ne keşfetmek istersiniz?” mesajıyla birlikte veriyor. Video, tipografi ve form deneyimiyle arayüz tasarımında akılda kalıcı olmayı başarıyor.

Tasarımcı Piotr Adam Kwiatkowski’nin online dergilere yönelik hazırladığı konsept arayüz tasarımında, karşılama ekranı olarak arka planda tam ekran görsel kullanımı ve üzerindeki serif yazı tipiyle birlikte hayalet butonu kullanımı, arayüzde modern tarzı vurguluyor.

Piotr Adam Kwiatkowski’nin bir diğer karşılama ekranı arayüz tasarımındaysa, içeriği beyaz geçişli görselin üzerinde kullanarak arayüz tasarımını sadeleştirdiğini ve metinlerin daha rahat okunabilir olduğunu görüyoruz.