Tipografik detaylar ve Typewolf favorileri #03

Tipografik detaylar ve Typewolf favorileri #03

Harf aralıklarına saygı gösterin.

Bugün, gözde web site tasarımları arasından seçtiğim, tasarımlarınızda ilham alabileceğiniz, güzel ve okunabilir tipografik örnekler içeren site örneklerini detaylıca tanıtmaya çalışacağım.

The Forecaster

The Forecaster, klasik bir gazeteyi çağrıştıran mükemmel tasarımında, Garamond ve Alternate Gothic yazı tiplerini kullanıyor. Ek olarak Helvetica Neue ve Georgia yazı tipleri göze çarpıyor. Web sitesi, Garamond Bold ve italik stiller yüklüyorken, Georgia ikinci bir serif olarak yükleniyor. 4 farklı yazı tipi kullanımı, one-page siteler için çok fazla karışıklık yaratabiliyor.

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

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

2. Tipografik detaylar ve Typewolf favorileri #01
3. Tipografik detaylar ve Typewolf favorileri #02
4. Tipografik detaylar ve Typewolf favorileri #03
5. Tipografik detaylar ve Typewolf favorileri #04
6. Tipografik detaylar ve Typewolf favorileri #05

10

Son olarak logonun, stili en çok kullanılan Bold-Futura yazı tipiyle yazılmış olduğunu görüyoruz. The Forecaster web sitesini, cesareti ve gazete benzeri tasarımından dolayı kutluyorum.

Pronoun

Ağırlığıyla popüler olan, yüksek kontrast ve tırnaklı yazı tipi sunan başka bir web sitesine göz atalım. Pronoun, ağırk olarak siyah kullanılan Caslon yazı tipini, düzenli bir şekilde başlık ve alt başlıklarda kullanıyor. Klasik bir kitap yüzü dendiğinde, ilk gözümün önüne gelen Caslon yazı tipi oluyor. Bu yüzden kitap yayıncılığında, bir platform için uygun bir yazı tipi seçimi olarak öne çıkıyor.

01

Suisse Int’l yazı tipi, bu baskın kullanım yanında, okunabilirliğini koruyor. Ayrıca, kontrastlı ve ağır yazı tipinin yanı sıra, dar ve ince yazı tipi ile kullanıcının 2 ayrı alana daha rahat odaklanabilmesini sağlıyor.

Brandtpunt

Bir başka, 4 farklı yazı tipi kullanılan web sitesi. Rengi, yazı tipi kullanımı, beyaz alan dengesi ve grid yapısıyla, Brandtpunt web sitesi içeriğini okunabilir kılıyor. Freight Display ve Freight Text yazı tipleri, birbirine uyumlu alan içinde kullanılıyor. Bu uyumlu alanları görsel anlamda güzelleştiren ve separatöre destek olan diğer yazı tipleri ise Lust ve Sofia oluyor.

09

Lust, rakam kullanımıyla daha modern bir tarza sahip, Sofia yazı tipi ise, kullanıcıya okunabilirliği, içerik metni kullanımıyla sunuyor.


Screen Shot 2015-11-30 at 14.37.45

Tasarımdaki, yazı tipi ve dans eden modern detay çizgilerin mükemmelliği…  🙂

Opera Philadelphia

Kullanıcıyı, parallax efekti olan bir giriş sayfası karşılıyor. Web sitesi tipografi hiyerarşisinde, başlıklarda Futura yazı tipi kullanılırken, alt başlıklarda, daha büyük punto ile Caslon yazı tipine yer veriliyor. 14 Punto büyüklüğünde kullanılan Futura yazı tipinin, butonların yapısını daha belirginleştirdiğini düşünüyorum. Opera Philadelphia

08

“Nasıl Gidiyor?” alanındaki liste yapısı içinde, Futura ve Caslon yazı tipleri kullanımı, Caslon’u daha okunabilir kılıyor. Futura yazı tipi, aksiyon butonlarıyla birlikte renk ve tipografi hiyerarşisini koruyor.

 

Screen Shot 2015-11-30 at 11.57.34
Alt sayfalardaki görsel ve arkaplan kullanımı, yazı tipleriyle birlikte tasarımı modern kılıyor. Minimal sayfa yapısına sahip olduğunu söyleyebiliriz.

Futura’ya sahip ol!
Caslon’a sahip ol!

Vrge

Vrge web sitesi giriş sayfasında, görsel üzerinde okunabilir ve büyük puntolar ile kullanılmış Freight Big yazı tipi sergileniyor. Odak noktasını ve beyaz alanı korumak için kullanılan, ‘güvenli alan’ı (Safe – Area) ön plana çıkaran beyaz çerçeve, rahat, minimal ve modern bir tasarım sunuyor.
Screen Shot 2015-11-30 at 12.34.52
Freight Sans yazı tipi hem içerikte, hem de aksiyonu belli etmek için altı çizili olarak, butonlarda kullanılmış.
03
Alt sayfalara doğru scroll ettiğimizdeyse, tipografi hiyerarşisini koruyarak başlık ve içerik metinlerinin giriş sayfasındaki şekilde kullanılması rahat, minimal ve modern tasarımın devam etmesini sağlamış.

Freight Sans’a sahip ol!
Freight Big’e sahip ol!

Bugün ilk makalen bizdendi.

Daha fazlası için SHERPA Blog okuru olmalısın.
Giriş Yap Ücretsiz kaydol

Benzer Yazılar

İLGİNİ ÇEKEBİLİR
Hava durumundan çok daha fazlası: İlham veren 7 yaratıcı arayüz weather-app-designs

Hava durumundan çok daha fazlası: İlham veren 7 yaratıcı arayüz

Gizle
KEŞFETMEYE DEVAM ET
Kurumsal çevre politikaları kullanıcı deneyimi için ne ifade ediyor?

Kurumsal çevre politikaları kullanıcı deneyimi için ne ifade ediyor?

Gizle