Girişimcilere yönelik markalaşma, web tasarım ve dijital pazarlama rehberi...

    korhan.blog

    Üstbilgi/Header Nedir?

    Geçmişte, web tasarımında “üstbilgi/header” dendiğinde genellikle logoyu, gezinme çubuğunu ve belki de bazı iletişim bilgilerini ve arama çubuğunu içeren web sitelerinin en üstünde bulunan sabit şerit akla gelirdi.

    Günümüzde, “üstbilgi/header” terimi bahsi geçenler dışında, ana sayfanızda ziyaretçiyi karşılayan, görünür tüm alan için kullanılmaktadır.

    Bir kullanıcı; sitenize sosyal medyada paylaşılan bir blog gönderisinden veya arama motoru sonuçlarından ulaşmadığı sürece, adres satırına sizin alan adınızı yazarak ana sayfanızdan sitenize giriş yapacaktır. Ayrıca diğer yollarla sitenize ulaşan kullanıcıların da web sitenizin neyle ilgili olduğunu anlamak ve daha fazla bilgi sağlamak adına bakacakları ilk yer yine ana sayfanız olacaktır. Ana sayfanıza göreceği ilk ekran “üstbilgi/header” bölümü olacaktır ve bu bölüm web sitenizin en önemli bölümüdür.


    Eğlenceli Bilim web sitesi için tasarladığım üstbilgi/header örneği

    Üstbilgi/Header Neden Önemlidir?

    Kullanıcı web sitesini özellikle de ilk kez ziyaret ettiği zaman, sayfadaki her şeyi dikkatlice ve ayrıntılı olarak incelemez. Sadece dikkatini çekecek ve web sitesinde biraz zaman geçirmeye ikna olabileceği bir şeyler bulmak için tarama yapar.

    Üstbilgi/Header bölümü kullanıcıyla karşılaştığımız ilk bölümdür ve ilk izlenim her zaman çok önemlidir.

    Kullanıcının göz taraması hakkında veri toplayan farklı deneyler yapılmıştır ve genellikle web sitesini taradığı çeşitli tipik modellerin olduğu sonucuna varılmıştır. Bu 3 tasarım düzeniyle ilgili makalede, yazar Steven Bradley, şu ortak modellerden bahseder: Gutenberg Diyagramı, Z-Modeli ve F-Modeli.

    Her Web Tasarımcının Bilmesi Gereken 3 Temel Tasarım Deseni

    Unutma kullanıcının sitenin “üstbilgi/header” bölümüyle karşılaştıktan sonra ekranı kaydırmasını veya daha ileri gidip bir bağlantıya tıklamasını sağlamak için yaklaşık 10 saniye gibi bir süren vardır ve hikayeni bu süre içinde hızlı ve doğru şekilde anlatman gerekir.

    Üstbilgi/Header Nasıl Tasarlanmalıdır?

    Çoğu kullanıcının, bir web sitesinin neyle ilgili olduğuna dair kuş bakışı bilgi sağlamak amacıyla ilk olarak kullandığı yerin ana sayfa olduğunu öğrendik ve bunu bilerek bu fırsatı değerlendirmemek ve bu fırsattan yararlanmamak pek de doğru olmaz.

    “Üstbilgi/Header”; bir web sitesinin beklentilerini karşılamak, kullanıcı deneyimini biraz daha öngörülebilir hale getirmek ve etkileşim oranını etkili bir şekilde arttırabilmek amacıyla tasarlanmalıdır.

    Kullanıcı, bir web sitesinin içeriği hakkında daha fazla bilgi edinmek isterse bunu sayfayı aşağı kaydırarak veya bir tıklama yoluyla yapması gerektiğini bilir. Bu deneyimler ve yetenekler kullanıcılarda zaman içinde oluşur ve bunları değiştirmek çok da kolay değildir. (Ör: Facebook bazen yeni bir kullanıcı deneyimi geliştirdiğinde önce tepki çeker, sonra insanları bu yeni deneyime alıştırır ve sonunda kabullenip bu yeni deneyimi kullanmaya başlarız. Kaydırma deneyimi tıklamaya göre artık mobil cihazlar yüzünden daha çok kullanılan bir deneyim haline gelmiştir ve bu deneyimler tasarımları da bu yönde etkilemiştir.) Biz, kullanıcıların yeteneklerinin ve deneyimlerinin ne yönde gelişmiş olduğunu biliyoruz ve tasarım yaparken bu yetenekleri her zaman göz önünde bulundurmak durumundayız.


    Phoenix Tasarım Kampı için hazırladığım üstbilgi/header örneği

    Üstbilgi/Header İçeriğinde Neler Olmalıdır?

    Elbette, ana sayfa üstbilgi/header tasarımınız markanıza özgü olabilir, ancak içeriğinde bulunan öğeler gerçekten orda olmalı mı konusu mutlaka sorgulanmalıdır. Buraya koyacağınız gereksiz her içerik kullanıcının asıl ulaşmasını istediğiniz yere varmasını engelleyen bariyerlere dönüşebilir.

    Üstbilgi/header içeriğinde bulunan öğeler gerçekten orda olmalı mı konusu mutlaka sorgulanmalıdır.

    Üstbilgi/Header bölümünde sıklıkla kullanılan içerik çeşitleri şu şekildedir:

    • Marka kimliğinin temel unsurları: Logo, marka adı, slogan, renkler vb.,
    • Gezinim menüsü ve başlıklar: ana menü, alt menüler, cta menu, top menu vb.,
    • Sunulan ürün veya hizmetin ana hatlarını veren metin bloğu,
    • Fotoğraf, video, slayt gösterimi, arkaplan görselleri,
    • Web sitesinin temel kategorilerine bağlantılar,
    • Sosyal ağlara bağlantılar,
    • Temel iletişim bilgileri: Adres, telefon, e-posta vb.,
    • Çok dilli arayüz durumunda dil seçicisi,
    • E-ticaret siteleri için alışveriş sepeti butonu ve para birimi çevirici,
    • Arama alanı,
    • Abonelik alanı,
    • Kullanıcıyı bir eyleme yönlendiren (form doldurma, ürün indirme, satın alma vb.) Call-To-Action (Eyleme Çağrı) butonu,
    • İletişim Formu

    Bu listeye göre, hangi tür içeriklerin senin web sitene uygun olacağını daha net bir şekilde düşünüp karar verebilirsin.

    Özet

    Üstbilgi/Header bölümünü, “Nedir?”,  “Neden önemlidir?”,  “Nasıl Tasarlanmalıdır?” ve “İçeriğinde Neler Olmalıdır?” başlıkları altında kısaca inceledim. Bu incelemenin, yeni web sitesi projelerine başlayacak girişimcilere, projeye başlarken ve içerik oluştururken fikir vermesi dileğiyle.

    İncelemeyi yaparken daha önceden hazırlanmış ve derlenmiş bazı dış kaynakları inceledim ve kendi deneyimlerinden faydalandım.

    Kaynaklar

    https://extendthemes.com/website-headers/
    https://tubikstudio.com/best-practices-for-website-header-design/
    https://www.designyourway.net/drb/30-interesting-examples-of-headers-in-web-design/
    https://premium.wpmudev.org/blog/website-headers-inspiration/
    http://vanseodesign.com/web-design/3-design-layouts/

     

    Yazının içeriğini aynı şekilde veya dilediğin gibi düzenleyip istediğin yerde -bu sayfaya bağlantı vermek koşuluyla- paylaşabilirsin. 

    Bu yazıya eklenmesini düşündüğün başka bir başlık varsa, içeriğin hatalı veya eksik olduğunu düşünüyorsan, yazıya eklememi istediğin detaylar varsa, anlaşılmayan bişey olduysa veya herhangi bir konuda sorun veya yorumun varsa aşağıdaki alanı kullanarak iletebilirsin.

    Ben Korhan. İzmir’de yaşıyorum, web tasarım ve geliştirme konusunda uzmanım.
    Ege Üniversitesi Bilgisayar Programcılığı ve Bilgisayar Mühendisliği bölümlerinden mezun oldum. 10 seneden uzun süredir bilişim sektöründe tasarım ve yazılım geliştirme konularında sayısız proje ürettim. Türkiye’nin bir çok şehrinde ve yurtdışında bulunan müşterilerime ve ajanslara uzman olarak düzenli web tasarım ve geliştirme hizmeti vermekteyim.

    Ayrıca; grafik tasarım, markalaşma, dijital pazarlama, sunucu, arama motoru (SEO) ve sosyal medya (SMO) optimizasyonu konularında da uzun süreli destek sağlamaktayım.

    Seninle türkçe, ingilizce ve almanca iletişim kurabilirim.

    Hemen Paylaş: