2021'de Web Sitesi Başlık Tasarımı: Örnekler ve En İyi Uygulamalar

Bir web sitesini birinci, ikinci, hatta onuncu kez ziyaret ettiğinizde ilk gördüğünüz şey nedir? Birçoğumuz için bu başlık.

Bunun nedenlerinden biri, gözlerimizin doğal olarak sayfanın en üst kısmına çekilmesidir. Bir film izlemek ya da bir gazete makalesi okumak gibi. Hikayenin ortasından değil, en başından başlamak istersiniz.

Ve dürüst olalım, tasarımcılar ve tüketiciler olarak, bir web sitesi hakkında başlığından anlatabileceğiniz çok şey var. Markasını orada bulacaksınız. İçeriğine ilişkin üst düzey bir genel bakış elde edeceksiniz. Diğer şeylerin yanı sıra bir harekete geçirici mesaj ve ek şirket bilgileri de bulabilirsiniz.

Başlık, az miktarda gayrimenkul kaplasa da, sitenin en önemli bölümlerinden biridir ve bu nedenle, muhtemelen sitedeki çoğu içerikten daha fazla etkileşim alacaktır.

Peki, bu etkileşimi en üst düzeye çıkarmak için nasıl tasarlarsınız?

Başlangıç ​​olarak, WordPress temanız veya şablonunuz tarafından sağlanan temel başlık tasarımını kullanmak istemezsiniz. Bu iyi bir başlangıç ​​noktası, ancak konu nelerin dahil edileceği, nasıl düzenleneceği ve nihai kullanılabilirlik için nasıl tasarlanacağı konusunda düşünülecek çok şey var.

Gönderi boyunca, harika web sitesi başlıkları örnekleri ve bunları oluşturmaya yönelik ipuçları da bulacaksınız. Bu nedenle, ister tasarım ilhamı için burada olun, ister mükemmel web sitesi başlığını oluşturmaya yardımcı olun, kontrol etmeniz gereken çok sayıda görsel örneğe sahip olacaksınız.

Web sitesi başlığı, bir web sitesinin logo, gezinme ve bazen diğer bilgilerin, bağlantıların ve düğmelerin bulunduğu üst kısmıdır.

Örneğin, Elementor web sitesindeki başlık şudur:

Başlık, her web sitesinin değerli bir parçasıdır:

• Markanın logosuna ev sahipliği yapar (ve ziyaretçilerin logoyla karşılaştığı tek yer olabilir)
• Ziyaretçilere web sitesinin ilk izlenimini sunar
• Site için içindekiler tablosu olarak çalışır
• Tek tıklama veya arama sorgusu ile siteyi keşfetmeyi kolaylaştırır
• Bir sonraki adımı atmaya hazır kişiler için hızlı işlem düğmeleri içerir
• Şirketle ilgili ek bilgiler, şirketle nasıl iletişim kurulacağı ve daha fazlasını sunar

Başlık siteden siteye benzer bir amaca hizmet etse de, oluşturabileceğiniz farklı başlık türleri vardır. Her şey oluşturduğunuz web sitesinin türüne, markanın stiline ve orada ne kadar bilgi depolamak istediğinize bağlıdır.

The Dog Bar web sitesindeki bu başlık, en yaygın web sitesi başlık tasarımıdır:

Logo ekranın en solunda ve gezinme menüsü, e-ticaret simgesi ve CTA en sağda.

HubSpot bize tipik mobil web sitesi başlığının nasıl göründüğünü gösterir:

Yine, logo en solda. Ancak bu durumda, navigasyon ve diğer bağlantılar bir hamburger simgesinin altına sıkışmış durumda.

Mobil ve masaüstü arasındaki çizgiler bulanıklaştıkça, web sitelerinin YOTEL gibi karma bir başlık tasarımını benimsediğini görmek şaşırtıcı değil:

Tipik tek satırlık başlık gibi görünüyor. Ancak, bir hamburger menü simgesi, masaüstü ziyaretçileri için ek gezinme bağlantıları içerir.

Tonlarca içeriğe sahip web siteleri, her zaman hangi kategorilerin veya sayfaların başlığa çıkacağını seçip seçemez. Bu yüzden Digital Agency Network'ün web sitesindeki gibi bir mega menü elde edersiniz:

"Ajanslar" üst düzey menüsünün altında, konuma ve büyük olasılıkla popülerliğe veya boyuta göre düzenlenmiş ajans konumlarının bir listesini görüyoruz.

“Feed” üst düzey menüsünün altına baktığınızda, aynı olmasa da benzer bir mega menü yapısı görüyoruz:

Akış, haberler, vaka çalışmaları ve blog kategorilerine ayrılmıştır. Ek olarak, bu menü sağda birkaç göz alıcı “Öne Çıkan Gönderi” içerir.

Bu arada, bunlardan birini oluşturmanız gerekiyorsa, Elementor ve JetMenu ile bunu kolayca yapabilirsiniz.

Michelin yıldızlı restoran The Inn at Little Washington, başlığını saklamak için sola hizalanmış bir kenar çubuğu kullanır:

Bu dikey başlık tasarımı, konaklama ve diğer hizmet tabanlı işletmeler için web sitelerinde popüler bir seçim olma eğilimindedir.

Bazı web siteleri, Subway'in yaptığı gibi başlığın üstüne bir yardımcı program çubuğu ekleyebilir:

Bu, konum, iletişim, erişilebilirlik, sosyal medya ve diğer şirket bilgileri veya ana menüye kolayca sığmayan bağlantılar sağlamak isteyen şirketler için yararlıdır.

Bazı web siteleri başlığa bir promosyon veya bildirim çubuğu ekleyebilir. Bu Urban Outfitters örneği bize hem promosyon hem de yardımcı program çubuğunun nasıl ekleneceğini gösterir:

Promosyon çubukları başlığın altında görünebilse de, bunları yukarı yerleştirmek ve sağ köşede bir "X" ile kapatılabilir hale getirmek daha yaygındır.

Perakendede yaygın olan bir site ailesinin parçası olan web siteleri, Gap'in yaptığı gibi, diğer mağazalarına hızlı bağlantılar içeren başlığın üzerine ek bir çubuk ekleyebilir:

Çok siteli gezinme için ayrı bir çubuk oluşturmak yerine, bu bağlantılar Gap'in yardımcı program çubuğunun içinde görünür.

Web sitenizin başlık tasarımına tam olarak neyin ait olduğuna bir göz atalım.

Marka bilinirliği oluşturmak ister misiniz? O zaman logo, ziyaretçilerin bir web sitesinde gördüğü ilk şey olmalıdır.

Cosmopolitan, izlenmesi gereken iyi bir örnektir:

Logo tasarımı, parlak rengi ve uzun karakterleri ile başlığın geri kalanından güzel bir şekilde sıyrılıyor. Ve logo alan için uygun boyutta olduğundan, diğer öğeleri bunaltmaz veya başlığı fazla beyaz alan almaya zorlamaz.

Harika görünen ve akılda kalıcı bir logo tasarlamayı buradan öğrenin.

Gezinme, ziyaretçilerinizin sitede ne olduğunu ve her sayfanın birbiriyle nasıl ilişkili olduğunu anlamalarını geliştirmelidir. Neler olup bittiğini kolayca kuşbakışı görebilirlerse, orada ne olduğunu keşfederken kendilerini daha güvende hissedeceklerdir.

Web sitenizin boyutuna bağlı olarak, kaç tane ve ne tür navigasyona ihtiyacınız olduğuna karar vermeniz gerekir. Burada Dollar Shave Club'ın başlığında gördüğünüz gibi birincil navigasyon var:

Ancak, DSC'nin solda bir hamburger menüsüne de sahip olduğuna dikkat edin. Ziyaretçilerin bu ikincil gezinme altında buldukları:

Çizginin üzerindeki bağlantılar, birincil gezinmedekilerle aşağı yukarı aynıdır, ancak bu sefer ikinci düzey bağlantıları içerirler.

Satırın altındaki bağlantılar, DSC'nin diğer tüm sayfalara karışıklık yaratmadan navigasyondan erişilebilir olmasını sağlar. Dahası, onları hamburger simgesinin altına yerleştirerek, kullanıcıların Bize Ulaşın, Kariyer ve SSS gibi faydalı sayfaları bulmak için altbilgiye gitmesi gerekmez.

Her web sitesinin ziyaretçileri yönlendirdiği bir eylemi veya hedefi vardır. Web sitesi, sayfaları boyunca göz alıcı harekete geçirici mesajlar içerecek olsa da, CTA'yı da başlığa koyarak ziyaretçilerin akıllarında tutmak iyi bir fikirdir.

Masaj Kıskançlığı bunu burada yapar:

CTA, sitede olduğu gibi tasarlanmalıdır. Global düğme tasarımınızı tanımlamak için Elementor'un Global Site Ayarlarını kullanırsanız, burada da geçerli olacaktır.

CTA'nız ayrıca başlığın sağ ucuna yerleştirilmelidir. Bu göz alıcı bağlantı yalnızca başlığa görsel denge getirmekle kalmaz, aynı zamanda dönüştürmeye yardımcı bir kısayol olarak da çalışır.

Bu, insanların bir dizideki ilk ve son öğeleri diğerlerinden daha fazla hatırladığını söyleyen Seri Konum Etkisi tasarım ilkesi ile açıklanmaktadır. Böylece, dönüştürmeye hazır olduklarında, site içeriğindeki CTA'yı bulmak zorunda kalmayacaklar. Bunu yapmak için doğrudan başlığa gidebileceklerini bilecekler.

Büyük içerik arşivlerine veya ürün envanterlerine sahip web siteleri, başlıkta bir arama çubuğuna sahip olmaktan büyük fayda sağlayacaktır.

Mashable, bunu yapan böyle bir dijital yayındır:

Burada dikkat edilmesi gereken birkaç şey var.

Birincisi, arama çubuğunun yalnızca bir büyüteçle temsil edilmemesidir. “Ara” kelimesi ile eşleştirilmiştir. Birçoğu için yeterince tanınabilir bir simge olsa da, herkesin ne olduğunu bildiğini varsaymamak en iyisidir. Ayrıca, insanların kolayca bulması için kendi başına çok küçük olabilir.

Ayrıca, Mashable'ın kullanıcıları aramalarını yapmak için nasıl yeni bir sayfaya yönlendirmediğine dikkat edin. Arama çubuğu, sonuçları sorguya göre otomatik olarak doldurur ve bu da daha iyi bir kullanıcı deneyimine yol açabilir.

E-ticaret işlevine sahip web sitelerinin ana başlığında veya yardımcı program çubuğunda her zaman e-ticaret öğeleri bulunmalıdır. İşte Sephora'nın bunu nasıl yaptığı:

En sağ köşede üç e-ticaret öğesi vardır:

1. Oturum aç/Hesap (kişi simgesi)
2. İstek listesi (kalp simgesi)
3. Sepet (alışveriş çantası simgesi)

Çoğu zaman, bu e-ticaret bağlantıları yalnızca simgelerle temsil edilir. Ancak, tasarladığınız simgelerin kolayca tanınabilir olup olmadığından veya bir etiketle eşleştirilmelerinin yararı olup olmadığından emin değilseniz, bunları A/B testi yapın.

Başlık, bir web sitesinin güvenilir bir parçasıdır. Özel bir dönüş yapmak isteseniz de, yerleşik normlardan çok uzaklaşmak istemezsiniz.

İşte doğru dengeyi sağlamak için bazı ipuçları:

Genellikle sayfadaki tasarımı ve içeriği geliştirmek için beyaz alanın nasıl kullanılacağına odaklanırız. Ancak beyaz boşluk, web sitesi başlık tasarımında da değerli bir varlıktır.

Boşluğun BBC başlığını nasıl etkilediğine bakalım:

Yeni başlayanlar için, oturum açma düğmesi ile gezinme arasında önemli bir boşluk var. Bu, ziyaretçileri oturum açarak deneyimlerini optimize etmeye teşvik ederken logo odasının parlamasını sağlar.

Ardından, eşit aralıklı dokuz bağlantı ve aralarında ince bölme çizgileri bulunan navigasyona sahipsiniz. Aralarından seçim yapabileceğiniz çok sayıda kategori olabilir, ancak boşluk, ziyaretçilerin her birine tek tek odaklanmasına yardımcı olacaktır.

Ardından, arama çubuğuna yerleştirilmiş alanınız var. Bu pratik amaçlar için kullanışlıdır. Geniş bir arama çubuğu tasarlayarak, kullanıcıların onu bulması ve kullanması daha kolay olacaktır.

Bu tasarım seçimi, ziyaretçilerin dikkatini siyah çubuğun sonundaki büyük beyaz bloğa çektiği için akıllıca bir seçimdir. Özünde, arama çubuğu CTA'nın rolünü oynar.

Elementor ile özel bir başlık oluşturarak aralığın kontrolünü elinize alabilirsiniz:

Üstbilginizdeki öğelerin her birinin etrafındaki kenar boşluklarını ve dolguyu ve blok içindeki her bir öğenin etrafındaki dolguyu (yukarıdaki gezinme örneğinde olduğu gibi) düzenleyebilirsiniz.

Genel olarak Google, bir web sitesinin mobil ve masaüstü sürümünün aynı içeriği içerdiğini önerir. Bununla tartışmıyorum. Masaüstündeki başlık, mobil cihazdakiyle aynı logoya, bağlantılara ve bilgilere sahip olmalıdır.

Bununla birlikte, tasarlanma biçimlerinin farklı olması gerektiğini söyledi.

Chick-fil-A'yı örnek olarak kullanalım. Menü alt navigasyonu açıldığında masaüstü başlığı şöyle görünür:

Dört üst düzey gezinme bağlantısı vardır. Bunlardan biri açıldığında, altlarında yatay bir sıra olarak bir alt navigasyon belirir.

4 veya 14 bağlantı olması farketmez. Bu gezinme, bir mobil sitenin başlığına sığmaz. Mobil sitenin bunu yapmasının nedeni budur:

Sol köşedeki hamburger simgesi, tam boyutlu bir dikey başlık ortaya çıkarmak için açılır. Arama çubuğu, gezinme bağlantıları, Chick-fil-A One üye alanı ve CTA burada yaşıyor.

Masaüstünden aynı başlık içeriği, yalnızca daha mobil uyumlu bir sunumla.

Bunu yapmak için Elementor özel başlık oluşturucusunu kullanabilirsiniz:

Duyarlı Modunuzu akıllı telefon veya tablet görünümüne geçirin ve bu daha küçük ekranlar için düzeni, hizalamayı, animasyonu ve ihtiyacınız olan her şeyi özelleştirin.

Birinin bir web sitesinde başlığı kullanmasının birkaç nedeni vardır. Başlığı düzenlerken onları duraklatmak ve seçeneklerini değerlendirmek yerine, tam olarak aradıklarını bulmaları kolay ve hem de hızlı.

Asana'nın bunu nasıl yaptığına bir göz atalım:

Asana logosu, başlığın en sol köşesinde bulunur. Hemen yanında navigasyon var. Logo ve tüm gezinme bağlantıları arasındaki eşit aralık, logo (yani Ana Sayfa bağlantısı) ve gezinmenin bir bütün olarak düşünülmesi gerektiğini gösterir. Bu, ortak bölge yasası olarak adlandırılan tasarım ilkesine dayanmaktadır.

Sağ tarafta, dil değiştirici simgesi, "Satışlarla İletişim Kur", "Oturum Aç" ve "Ücretsiz deneyin" CTA'sı var. Bu bir karmakarışık seçenek, ancak başlığın diğer ucuna düşürülecekleri mantıklı.

Asana'nın başlık içeriğini düzenlemek için iyi bir iş çıkarmasının tek yolu bu değil. Bu “Neden Asana?” alt navigasyon şuna benzer:

Mega menü, bir web sayfasını biçimlendirdiğiniz şekilde biçimlendirilmiştir. Yapı şöyle görünür:

• H2 etiketi: Neden Asana?
• H3 etiketleri: GENEL BAKIŞ, ÖZELLİKLER, TÜM PLANLAR
• H4 etiketleri: H3'lerin altındaki kalın başlıklar

Renkli simgeler burada gerçekten gerekli değildir. Gezinme yapısı ve açılır menüde düzenlenme şekli, başlık içeriğini incelemeyi inanılmaz derecede kolaylaştırır.

Bu arada, bu düzen ve hiyerarşi fikrini, başlıkla birlikte gidecek ek çubuklar tasarlarken de uygulayabilirsiniz. East Bay Inn sitesinden güzel bir örnek:

Ana başlık çubuğu, grubun en büyük ve en parlak olanıdır. Yazı tipleri de diğerlerinden daha kalın ve daha büyüktür. Bu şekilde tasarlayarak, ana odak başlığa gidecek ve ardından ziyaretçiler gerektiğinde ek bilgi için diğer afişlere başvurabilecekler.

Başlık, yazı tipi seçimlerinizle yaratıcı olmanın yeri değildir. Logo hariç tabii.

Örneğin Dribbble'ı ele alalım:

El yazısı yazı tipi, logo için mükemmel bir seçimdir. Eşsiz, akılda kalıcı ve size web sitesinde bulunan işin el yapımı doğası hakkında çok şey anlatıyor.

Bununla birlikte, el yazısıyla yazılmış bir yazı tipini - ya da dürüst olmak gerekirse, oldukça stilize edilmiş herhangi bir yazı tipini - başlık kadar küçük bir alanda okumak zor olacaktır. Bu nedenle, metin bağlantılarınız ve bilgileriniz için bir serif veya sans serif web yazı tipi seçmek en iyisidir.

Akılda tutulması gereken diğer iki şey:

Boyut söz konusu olduğunda, minimum 16 piksel hedefleyin - bu, ana başlık ve ona bağlı tüm çubuklar için geçerlidir.

Renk gelince, renk kontrastına dikkat edin. Fontlarınız ile arka plan arasında en az 4,5:1 oranında bir oran olmalıdır. Yine, bu, başlığın yanı sıra çevresinde yer alan ikincil bilgiler için de geçerlidir.

Tamamen özel bir başlık oluşturuyorsanız, bu yazı tiplerini Elementor'daki Stil düzenleyici altında ayarlayabilirsiniz. Tipografiyi ve renkleri sitenizin geri kalanından uyarlamak istiyorsanız, Global Ayarlarınızda bunların tam olarak istediğiniz gibi tanımlandığından emin olun:

Simgeler, resimler ve videolar gibi görsel öğelerin navigasyonda kullanılması söz konusu olduğunda, bunu yapmak için iyi bir nedeniniz olmalıdır.

Yukarıda birkaç örnekte gördüğümüz gibi, simgeler arama çubuğu, alışveriş sepeti, konum bulucu, dil değiştirici vb. gibi web sitesi başlık öğeleri için yararlı olabilir. Yaygın olmayan veya belirsiz yorumlara sahip simgeleri kullanma konusunda dikkatli olun.

Resim ve videolara gelince, bu hantal öğeler olmadan daha iyi durumda olabilirsiniz. Zaten web sitenizi en yüksek hızda yüklemeye çalışıyorsanız, başlığınıza resim dosyaları eklemek (elbette logo dışında) muhtemelen en iyi fikir değildir.

Bununla birlikte, görüntülerin bir ziyaretçinin başlıktan ve özellikle gezinmeden ihtiyaç duyduklarını ne kadar hızlı alabileceğini gerçekten iyileştirebileceği birkaç kullanım durumu vardır.

İşte MINI USA'dan gerçekten harika bir örnek:

Elbette MINI, modellerinin her birinin adını sıralayabilirdi. Bununla birlikte, eşlik eden görseller, gruptan birini seçmeyi çok daha kolay hale getirecek.

Navigasyondaki diğer bazı iyi kullanım durumları mega menüler ve bloglar veya haber siteleridir.

Kaçınılması gereken tek şey videolar olacaktır. Videolar izlenmek içindir ve başlık, uzun etkileşimler için ideal bir yer değildir (sadece 30 saniye uzunluğunda olsa bile).

Animasyonların etkili olması için her zaman en üst düzeyde olması gerekmez. Örneğin, navigasyona uygulanan küçük animasyonlar, doğru şekilde yapılırsa odağı ve etkileşimi gerçekten iyileştirebilir.

Bazı örneklere bakalım.

Bu Florida Akvaryumu web sitesinden:

Bir ziyaretçi ana gezinme bağlantılarından birinin üzerine geldiğinde, geri kalanı kaybolur. Bu, kullanıcıların mevcut içeriğe odaklanmasına yardımcı olan ilk animasyon efektidir.

Ardından, bağlantıların ikincil veya üçüncül düzeyinin üzerine geldiklerinde, üzerine gelinen sayfa diğerlerinden farklı bir renge döner.

Hedef, navigasyonuna odaklanmak için animasyon kullanan başka bir web sitesidir:

Bununla, ikinci seviye gezinme slaytları açılırken pürüzsüz bir kayma animasyonu elde ediyoruz. Ayrıca bir solma etkisi elde ederiz. Ancak bu, gezinme için değil sayfa için geçerlidir.

İster özel bir başlık şablonu tasarlıyor olun, ister Elementor sayfa oluşturucunuzdan sayfaya bir Gezinme Menüsü ekliyor olun, navigasyonunuza animasyonu kolayca uygulayabilirsiniz:

Bu animasyonları Düzen altında bulacaksınız. Gelişmiş altında Hareket Efektleri de mevcut olsa da, tüm gezinme menüsünü bir kerede canlandıracaklar. Seçilen sayfayı hayata geçirmek için küçük dozlarda animasyon kullanmak en iyisidir.

Çok az içeriğe sahip web sayfaları tasarlamıyorsanız, web sitenize yapışkan bir başlık eklemek muhtemelen iyi bir fikirdir. Uzun tek sayfalık web sitelerinin yanı sıra uzun beslemelere sahip web siteleri (haber ve e-ticaret siteleri gibi) kesinlikle birinden faydalanacaktır. Bu şekilde, ziyaretçiler sayfada ne kadar ileri giderlerse gitsinler başlığa her zaman ellerinin altında olacaklardır.

NNG, ziyaretçilerinizin yoluna çıkmamaları veya deneyimlerine zarar vermemeleri için yapışkan başlıkların nasıl tasarlanacağına dair birkaç faydalı ipucuna sahiptir:

1. Ziyaretçi kaydırmaya başladığında onları küçültün.
2. Ziyaretçilerin birinin nerede bitip diğerinin nerede başladığını bilmeleri için başlık ve içerik arasında güçlü bir karşıtlık oluşturun.
3. Animasyonu küçük tutun.

Champion web sitesi bu kuralları takip eder ve alışveriş deneyimini iyileştirmeye nasıl yardımcı olabileceğini görebilirsiniz:

Bu yapışkan efekti denemek istiyorsanız, kodunuzu düzenleme konusunda rahat olmanız gerekir (biraz).

NNG'nin dikey navigasyonlar hakkında söyleyecek gerçekten harika şeyleri vardı:

• Başlığı doldurmadan ihtiyacınız olduğu kadar çok bağlantı ekleyebilirsiniz.
• Web sitenizin sayfalarını kolayca ölçeklendirebilir ve web sitesi başlık tasarımını ciddi şekilde etkilemeyebilirsiniz.
• Ziyaretçiler web sitesinin sol kısmından aşağıya bakmaya alıştıkları için taramaları daha kolaydır.
• Kullanıcılar, sosyal medyada ve web uygulamalarında geçirdikleri tüm zamandan itibaren dikey gezinme hakkında bilgi sahibidir.
• Dikey gezinme, masaüstü ve mobil arasında tutarlı bir deneyim yaratacaktır.

Ama düşünülmesi gereken bir yer sorunu var.

Yatay başlık genellikle ince olacak şekilde tasarlanmıştır. Ne olursa olsun, ziyaretçiler sayfayı aşağı kaydırdıkça birçok yapışkan başlık küçülecek ve böylece fazla gayrimenkul kaplamayacaklar.

Kenar çubuğu tarzı gezinmeler, yalnızca biri hamburger menü simgesine tıkladığında görüntülenecek şekilde tasarlanmadıkça bu lükse sahip değildir. Alfond Inn için bunun gibi:

Bununla birlikte, yapışkan kenar çubuğu menünüzü yeterince kompakt hale getirebilirseniz, kullanıcı deneyiminde bir kesinti olmasını önleyebilirsiniz. Delaney Hotel'den bunun nasıl yapılacağına dair güzel bir örnek:

Kenar çubuğu, sitedeki 1200 piksele kıyasla yalnızca 250 piksel genişliğindedir.

Bu eğitim, web siteniz için yapışkan bir kenar çubuğu navigasyonu oluşturma sürecinde size yol gösterecektir.

Şeffaf başlıklar, öğelerin hala orada olduğu başlıklardır - logo, gezinme, CTA vb. - ancak arkalarında sağlam bir arka plan yoktur. Tahmin edebileceğiniz gibi, bu, bazı sitelerde başarılı olmak için zor bir tasarım seçimi olabilir.

Bunun en büyük nedenlerinden biri, yoğun bir arka planın önünde veya düşük renk kontrastı olan bir metnin önünde göründüğünde metnin okunmasının çok zor olabilmesidir. Bu nedenle, ziyaretçi kaydırırken başlık tamamen gözden kaybolmadıkça, gezinme ve içindeki diğer metinler belirli bölümleri kaydırdıklarında okunamaz hale gelme riskiyle karşı karşıya kalırsınız.

Bununla birlikte, bu tasarım seçiminin çalıştığı bazı web siteleri var.

Conti di San Bonifacio bu sorunu şu şekilde çözüyor:

Başlık yalnızca sol köşede beyaz bir logo ve sağda beyaz bir hamburger menü simgesinden oluşur. Her sayfanın üstünde, beyazla iyi bir kontrast oluşturan, renk açısından zengin bir video veya resim bulunur. Ve site görseller açısından çok ağır olduğu için, başlığın görünürlüğünün tehlikeye girmesi çok nadirdir.

Bu minimal web sitesi başlık tasarım stilini beğendiyseniz ve temanız size otomatik olarak şeffaf bir arka plan sağlamıyorsa, bu Elementor öğreticisiyle kendi başınıza nasıl oluşturacağınızı öğrenin.

Başlık, kapladığı alan ve sağladığı faydalar arasındaki oran benzersiz olduğundan, web sitenizin en önemli unsurlarından biridir.

Başlıklar birkaç amaca hizmet eder. Tüm web sitesine genel bir bakış ve bağlantılar, iyi tasarlanmış mega menüler ve arama çubuğu aracılığıyla kolay gezinme sağlarlar. Ayrıca, markanızı şirket logoları, doğru tipografi ve renk şemaları ile tanıtmak için harika bir yerdir. Son olarak, CTA'lar, e-ticarete hızlı erişim ve bu öğeleri vurgulayan animasyonlar aracılığıyla etkileşimi en üst düzeye çıkarabilirler.

Farklı başlık türlerini ve özel başlık oluşturmaya yönelik en iyi uygulamaları tartıştık ve örnekler sağladık. Bu nedenle, bu kılavuzu izleyin ve daha iyi etkileşimler ve marka bilinirliği için kendi benzersiz başlığınızı oluşturun.