header | bildirgec.org

İlham alınacak kaynaklar serisine devam ediyoruz. Bu bildiride ilham alabileceğiniz 50 adet web tasarımını bulabileceksiniz. Buyrun:

1). feed stitch

2). tolingo

3). snoop media

ilham alınacak 30 footer tasarımından sonra (ayrıca yorumlarda gelen istek üzerine) şimdi de 24 ilham alınacak header'ı (web sitesi başlığı) bu bildiride bulabilirsiniz. Dilerseniz daha önce bildirilen 30 yaratıcı illustration website başlığına da bakabilirsiniz.

01 - nomilktoday.be

02 - thatindiedude.com

Web sitenizin başlığı ziyaretçi üzerinde hemen etki yapar bu nedenle özenle hazırlanması gerekir.

Bu yazıda 5 farklı türde etkili başlık örneklerine ulaşabileceksiniz.

Büyük Başlık

Büyük başlıklar çok güzel görünüyor ancak kullanmak riskli olabilir.

1 - Lewro’s Blog

2 - Chris Hortsch

Bu yazıda web tasarımındaki başlıkların (site başlıkları ve içerik başlıkları) verimliliğini arttırmak için uygulanabilecek bazı kolay ve hızlı tekniklerden bahsedeceğim. Verimli başlıklar kullanıcılar ile daha hızlı iletişim kurdukları gibi onların fazla düşünmesine gerek kalmadan sitenizin içeriği hakkında bilgi sahibi olmalarını sağlar. Bu kurallar uygulamanız gereken kuralların tamamını içermemesine rağmen tasarım aşamasında göz önünde bulundurmanız gerektiren kurallardır.

1. Başlıklarınızın İçerikten Gözle Görülür Bir Biçimde Ayrı Olmasına Özen Gösterin
Başlıklarınız içeriğinizden farklı ve ayrı bir şekilde görünmelidir. Tıpkı site içi bağlantılarınızın rengini değiştirip altını çizili görüntülediğiniz gibi, başlıklarınızın görünümü de sitenin geri kalanına kıyasla daha özgün olmalıdır. Renkler, yazıtipi boyutu ve farklı yazıtipleri kullanarak başlıklarınıza kontrast uygulayın. Altı çizili elementlerin bağlantılarla sınırlı kalması sitenin genel uyumluluğu açısından önemli olduğunu unutmayın.

2. Daha Sıcak Renkler Kullanın

Sıcak renkler, soğuk renklere oranla daha dikkat çekicidirler. Sıcak renkler aktiftir, dikkat çekerler ve sayfanın geri kalanından daha ön planda görünürler. Soğuk renkler ise sayfayla bütünleşir. Mümkün olduğu kadar sıcak renkler kullanarak okurlarınızın dikkatini daha çabuk çekereken onları içeriğin kendisine odaklanmalarına yardımcı olmaya çalışın.

blonuzda en alta indiğinizde içinizi karartan birşeyler oldu mu? hemen yukarı mı çıkmak istediniz? "Header Nedir" yazımızda üzerinde durduğumuz sayfa başlığı imajlarından biraz aşağılara inelim ve tasarımcıların bloglarının diplerine gömdükleri sanatsal çalışmalara bir göz atalım. her ne kadar çok önemsenmese ve dikkat edilmese de gerçekten tasarımı bir kalıba oturtmak için uygulanan pek narin hoş footerlar bunlar;

• 
  
• 
  

Bir web sitesini açtığımızda ilk dikkatimizi çeken elemanlardan biri, header tabir ettiğimiz, site başlığıdır herhalde. Vandelay Design 30 yaratıcı site başlığını derlemiş. İşte bir kaç örnek:

Merchand de Trucs

Mike Poss

birçok site tasarımının sadece header ve footer tasarımları ile dikkat çekici kılındıkları aşikar bir durum. footer tasarımları sayfanın en altında kaldığı için pek ilgi çekmezken headerlar ise girişte gözümüzü alan ilk görsel cümbüştür. bugün bu işi özel olarak yapan kaynak sitelere dahi ulaşmak mümkün olmakta. hatta tasarımda söz sahibi sitelerden smashmagazinin yılın 2.ayında düzenlediği header tasarım yarışmasından da bu ilgiyi görmek mümkün. bedava header grafiği sunan listesine ulaşmak için sizleri selcukhoca'nın kaynak bildirisine ve şuradaki adrese yönlendiriyorum. bu adresleri bir tasarımcı olarak ilmal etmenizi istemediğimi belirtip sizleri herbiri birer esin kaynağı olabilecek header tasarımlarımlarıyla başbaşa bırakıyorum.

*son örnekte kendi header imajımı ekliyor ve sizden gelecek örnekleri bekliyorum.

HTML4'ün yavaş yavaş beklentilere cevap verememesiyle birlikte yeni arayışlara giren tasarımcılar div ayraçlarını CSS ile verimli şekilde kullanmaya başlamışlardı. Ne kadar iyi kodlamalar yapılsa da HTML4'ün artık yetmediği ortaydı.

HTML5 ise dilde yalınlık ilkesini amaç edinen yeni özellikleri ile kullanıcıların işini kolaylaştıracak. Daha az kodla sitelerimize aynı görünümleri verebileceğiz. Alistapart kaynağında okuduğum html5 içeriğinde bu yalınlaşma gayet iyi açıklanmış.