Footer Nedir, Nasıl Olmalıdır? Footer Örnekleri ve İpuçlarıyla
Başlamak için: Bir web sitesi kurun → | Bir alan adı alın →
Bazen ufak detaylar büyük fark yaratır. Bir web sitesini nasıl kuracağınıza karar verme aşamasında web sitenizin footer (alt bilgi) tasarımı, muhtemelen listenizde üst sıralarda yer almaz. Düşünmeniz gereken pek çok detay olsa da, genellikle gözden kaçırılan bu içeriğin bazı ziyaretçiler için önemli olabileceğini unutmayın.
Biraz üzerine düşünerek ve stratejik planlama yaparak iyi bir şekilde tasarlanmış bir footer, iş hedeflerinize ulaşmanıza yardımcı olabilir.
Bu kılavuzumuzda, web sitesi kurarken footer’ına nelerin ekleneceğinden kendi footer’ınızı nasıl oluşturacağınıza kadar tüm bilgileri işleyeceğiz. Ayrıca size ilham verecek 12 web sitesi footer örnekleri paylaşıp konuyla ilgili merak edilen sorulara değineceğiz.
Footer Ne Demek?
Bir web sitesi; “header” (üst bilgi), “body” (sayfanın ana içeriği) ve “footer” (alt bilgi) bölümlerinden oluşur.
Footer nedir? Bir web sitesinde “alt bilgi” anlamına gelen footer, web sayfasının en altında yer alan içerik şerididir ve genellikle web sitesinin her sayfasında tekrarlanır. Web sitenizin önemli bir parçasıdır.
Ana sayfa tasarımınız genellikle ziyaretçilere siteniz hakkında ilk izlenimi veren detay olsa da, footer’ınız muhtemelen insanların gördüğü son detaydır. Doğru içerik ve tasarımla, web sitenizin ana hedeflerine ulaşmasına yardımcı olurken aynı zamanda kalıcı olarak pozitif bir izlenim yaratabilir.
Bu stratejik alan, site ziyaretçilerini iletişim kurmaya veya e-posta listenize abone olmaya teşvik eden son bir CTA (eylem çağrısı/harekete geçirici mesaj) eklemek için ideal bir noktadır. Footer alanınız:
İkincil bir web sitesi menüsü olarak işlev görebilir.
Ziyaretçilerin önemli bilgileri es geçmemesini sağlar.
Ziyaretçilerin net bir şekilde gezinmesini ve çeşitli sayfalara yönlendirilmesini sağlar.
SEO ile uyumlu anahtar kelimeleri tekrarlama fırsatı sunar. SEO Nedir detaylı bilgi için yazımıza göz atın.
Aldığınız ödüller, sertifikalar veya referanslar gibi size özel unsurları öne çıkarabileceğiniz bir alandır.
Sosyal medya hesaplarınızı ve iletişim bilgilerinizi paylaşabileceğiniz bir alandır.
Şartlar ve koşullar, güvenlik, gizlilik politikası ve diğer yasal konularla ilgili temel bilgileri ekleyebileceğiniz düzenli bir alan sunar.
Formalite gereği web sitenize yerleştirilmesi gereken bilgileri footer kısmında tek bir yerde tutarak, web sitenizin geri kalan kısımlarını ilgi çekici bir kullanıcı deneyimi oluşturmaya ve yeni müşteriler çekmeye ayırabilirsiniz.
Footer Nasıl Olmalı?
Paylaşacağımız web sitesi footer örneklerinde göreceğiniz gibi, footer’ların boyutları farklılık gösterebilir. Ancak çoğu footer bölümü oldukça küçüktür ve yalnızca amaca en uygun bilgileri içerir.
Küçük bir alanda tasarım yapmak zor bir iştir. Bunu daha önce mobil web sitesi tasarlamış olan herkes bilir. Sınırlı alana sahip olmak, alanı mümkün olan en iyi şekilde kullanmak için dahil ettiğiniz her bir öğenin önemini dikkatli bir şekilde düşünmeyi gerektirir.
Web sitenizin footer alanını tasarlarken bu bölüme ne yazılır diye merak ediyor olmalısınız. İşte dikkate almanız gereken en önemli noktalar şunlardır:
Temel bilgileri dahil edin
Ziyaretçilerin web sitenizin footer alanında görmeyi bekleyeceği birkaç temel bilgi vardır. Bu bilgiler web sitenizin her sayfasında tekrarlandığı için, bu detaylar ziyaretçilerinizin her zaman erişebileceği bir yerde olacak ve bu detayları yalnızca bir kez doldurmanız gerekecek.
Genel tasarım kurallarına bağlı kalın ve gizlilik politikanızı ve kullanım koşullarınızı ekleyin. Bu aynı zamanda profesyonel ve güvenilir görünmenizi sağlar.
Bunun dışında bir gezinme menüsü ve kurumsal e-postanız, telefon numaranız, adresiniz ve sosyal medya kanallarınız gibi iletişim bilgilerini eklemek de oldukça yaygın bir uygulamadır. Bazı büyük firmalar kurumsal tarihlerini, yasal olarak koyulması zorunlu bilgileri ve işe alım/kariyer gibi bağlantıları bu bölüme koyuyor. Ayrıca sizinle iletişime geçilmesi için küçük bir online form da ekleyebilirsiniz.
Son olarak, içinde bulunduğunuz yılı ve telif hakkı simgesini eklediğinizden emin olun. Bu, web sitenizden çalıntı yapmaya çalışan kişilere karşı korunmanızı sağlar.
Gezinme bilgileri net olmalıdır
Sitenizin ziyaretçileri sayfanızın en altına ulaşsa da, bu siteden çıkacakları anlamına gelmez. Tam aksine, kendilerini kayıp, ilgisiz veya daha fazla bilgiy muhtaç hissediyorlarsa, footer alanınıza kolay anlaşılır bir web sitesi gezinme menüsü ekleyerek sitenize göz atmaya devam etmelerini teşvik edebilirsiniz.
Sitenizin çeşitli bölümlerini listeleyin ve bu bölümlere bağlantı vererek ziyaretçilerin sitenizin içeriği hakkında genel bir anlayış kazanmasını sağlayın. Ayrıca bir arama çubuğu eklerseniz, aradığını bulamayan ziyaretçiler hızlı bir şekilde arama yaparak istedikleri bilgilere ulaşabilirler.
Karakterinizi ortaya koyun
Web sitenizdeki tüm içerikler, karakterinizi ve görsel marka kimliğinizi yansıtmak için bir fırsattır. Aynı şey footer bilgileriniz için de geçerlidir. Footer bölümünüz, sorunsuz bir tarama deneyimi sunmak için web tasarımınızın diğer kısımlarıyla uyumlu olmalıdır.
Marka, logo renklerinize ve yazı fontunuza bağlı kalın. Burası aynı zamanda ziyaretçilerinizin dikkatini çekecek ilginç bir mikro metin dokunuşu eklemek için de ideal bir yerdir. Ziyaretçileri blogunuza kaydolmak veya sosyal kanallarınıza davet etmek için seçtiğiniz kelimelerle üslubunuzu ve marka kişiliğinizi yansıtmaya çalışın.
Blog açmak ve web tasarım konularında detaylı bilgi için Blog Nasıl Açılır ve Web Tasarım Nedir göz atabilirsiniz.
İpucu: “İletişimde kalalım” veya “sizden haber almak isteriz” gibi yaratıcı ifadeler, basit bir “ abone olun” ifadesinden çok daha cazip olabilir.
Estetik bir sunum hazırlayın
Footer, Banner'lar gibi sitenin ortalarında bulunmaz, web sitenizin en altında olması, bu alanın web sitenizin diğer kısımlarından daha az ilgi çekici olacağı anlamına gelmez. Hatta ziyaretçilerinizin en son gördüğü ve aklında kalan bölüm bu olabilir. Site içeriklerinize olduğu gibi bu alanın tasarımına da önem verdiğinizden emin olun. Ziyaretçilerin bu son ve önemli bilgileri kolayca bulabilmesi için tasarımınızı sade ve yalın tutun.
Site hiyerarşisi ve düzenini göz önünde bulundurarak tasarımın temel ilkelerini hesaba katın. İş hedeflerinizle bağlantı kurarak, hangi bilgileri vurgulamak istediğinize karar verin. Ziyaretçilerin e ticaret sitenize gitmesini, çok yakında yapacağınız webinar'inize kaydolmasını veya iletişime geçmesini mi istiyorsunuz? Vurgulamak istediğiniz şey ne ise, boyut, renk veya beyaz boş alan kullanarak bu öğenin öne çıkmasını sağlayın.
Daha bilgiye mi ihtiyacınız var? En güncel web tasarımı trendlerine göz atın ve web sitesi footer bilgilerinin nasıl kullanıldığını görün.
Footer Örnekleri
Artık temel bilgileri edindiğinize göre, footer tasarımı için ilham toplama zamanı geldi. İster sıfırdan bir web sitesi kurmayı öğreniyor olun, ister bir hazır web sitesi şablonu kullanıyor olun, Wix kullanıcıları tarafından oluşturulan bu footer örnekleri size kendi web sitenizi tasarlamanız için iyi fikirler sunacak.
01. House Number 3
Bu restoranın web sitesinde, footer bölümünde gerekli tüm bilgiler verilmiş. Google Haritalar ve canlı sohbet eklentisi sayesinde restoranla kolayca iletişime geçilebiliyor. Bu küçük detaylar, müşterilerinin ihtiyaçlarına önem verdiklerini ve iletişime açık olduklarını gösteriyor.
Footer bölümünde site haritası bulunmamasına rağmen web sitesinin ana menüsü ekranın üst kısmına sabitlenmiş; bu da ziyaretçilerin sayfalarda kolayca gezinebilmesini sağlıyor.
Son olarak, footer bölümünde de devam eden ve genel tasarımla kusursuz bir şekilde bütünleşen farklı bir web sitesi renk şeması kullanılmış.
02. Lola Pate
Görsellere çok fazla önem veren bir yaşam tarzı markası olan Lola Pate, Instagram akışını footer bölümüne eklemiş. Bu sadece marka kimliğini güçlendirmekle kalmıyor, aynı zamanda site ziyaretçilerinin tıklayıp ürün resimlerini daha büyük bir formatta görmesini teşvik ediyor.
Marka ayrıca bu alanı, ziyaretçileri “kabilemize katıl” şeklinde davet eden son bir eylem çağrısı (CTA) eklemek için de kullanmış. Eğlenceli bir mikro metin ile eşleştirilen bu stratejik hamle, insanların e-posta listelerine abone olmalarını sağlayacak.
Ayrıca müşterilerin gözden kaçırma ihtimaline karşı, kargo ve iade sayfasının buraya eklenmesi, online mağazalar için iyi bir uygulamadır.
03. Willowbrook Farm
Bu web sitesi footer örneği, bir site ziyaretçisinin görmeyi bekleyeceği tüm bilgileri içeriyor. Web sitesinin tüm sayfalarına tekrar yönlendiren düzenli bir menü, cazip bir abone olma seçeneği ve iletişime geçme yöntemi gösteriliyor. Zıt bir renk kullanılarak “Abone Ol” butonu öne çıkarılmış ve daha davetkar bir hale gelmiş.
Bu tasarım, çiftliğin küçük işletme web sitesinin geri kalan bölümleri ve genel görünümle uyumlu. İllüstrasyonda görülen renk paleti doğa duygusunu çağrıştıran ve footer’a daha samimi bir görünüm kazandıran hoş bir dokunuş sağlıyor.
04. Letsone
Letsone’nin bu şık web sitesi footer bölümü, markanın özünü mükemmel bir şekilde yansıtırken, ziyaretçilere ihtiyaçları olabilecek tüm bilgileri sunuyor. Başlıklarında kullanılan aynı arka planı kullanarak uyumlu bir görünüm oluşturmuşlar. Ayrıca footer bölümüne logolarını da ekleyerek markalaşma çabalarını daha da güçlendirmişler.
Tüm öğeler, listeler ve başlıklar kullanılarak son derece titiz bir şekilde düzenlenmiş. Eylem çağrısı (CTA) butonu, footer’ın en üst kısmına yerleştirilmiş ve büyük bir yazı tipiyle yazılarak bir hiyerarşi oluşturulmuş. Ziyaretçilerin canlı sohbet seçeneğini gözden kaçırmamalarını sağlamak için bu işlevi parlak, kontrast oluşturan bir pembe tonuyla ön plana çıkarmışlar.
05. Jérome Studio
Sürdürülebilir aksesuarlar satan bu marka, iyi tasarımın illa karmaşık olması gerekmediğini vurguluyor. Yalnızca iki nötr renkle hazırlanan web sitesi footer bölümü, tüm doğru bilgileri aktarma ve çekici tasarımı koruma konusunda mükemmel bir örnek.
Jérome Studio, net bir hiyerarşi anlayışına sahip, titiz bir düzen oluşturmuş. Footer, site tasarımın geri kalanını tamamlıyor ve diğer canlı estetik detaylarla mükemmel bir şekilde birleşerek zarif bir görünüm oluşturmuş.
Hem serif hem de sans-serif yazı tipinin kullanılması, başlıklar ile diğer yazılar arasında fark yaratan, ince bir tasarım dokunuşu örneği. Web sitesinin tamamında aynı yazı tipi kullanılarak bütünleştirici bir tasarım yapılmış.
06. Useless Treasures
Bu online sanat mağazasının web sitesindeki footer bölümünde, çağdaş bir görünümle daktiloyu anımsatan nostaljik bir yazı tipi bir arada kullanılmış. Ziyaretçileri “bize çiçeklerle konuşun” ifadesi ile davet eden sıra dışı metni ile, Useless Treasures üzerine iyi düşünülmüş ve benzersiz bir marka kimliği sunuyor. Bu, footer’a ekledikleri gif resmi aracılığıyla da kendini yansıtıyor ve tekrardan bakma isteği uyandıran değişik bir hava katıyor.
İnternet üzerinden resimler satan bir işletme olarak Useless Treasures, footer bilgilerinde en önemli detayları eklemeye özen göstermiş: kargo bilgileri, iade politikası ve ödeme yöntemlerini gösteren logolar. Ayrıca tasarımcının Instagram hesabına ve alandaki en iyi portfolyo web sitelerinden biri olan kişisel web sitesine de bir bağlantı verilmiş.
Sizde online sanat eserleri yapmak için ücretsiz fotoğraf düzenleme programları kullanabilir, portfolyo web sitesi şablonlarından size en uygun olanı özelleştirerek web sitenizi oluşturabilirsiniz.
07. Seven Grams Caffe
Kahveyi en iyi ifade eden detaylar, elbette toprak rengi tonlar ve dumanı tüten bir kahve makinesidir. Seven Grams Caffe, sıcak renk şeması ve insanın canını çektiren hazırlanmış ürünlerin yakın çekimleri ile web sitesinde keyifli bir kahve ortamı sunuyor. Web sitesinin footer bölümü, bir kafe ortamının bulanık bir fotoğrafı da eklenerek hoş bir veda görüntüsü oluşturulmuş.
Ayrıca footer alanında kafe açılış saatleri ve telefon numaraları da dahil olmak üzere gerekli tüm detayları aktarmışlar. Ayrıca müşterilerin şubeleri bulmasını kolaylaştırmak için New York’taki üç farklı şubeyi vurgulayarak Google Haritalar’a bağlantı vermişler.
08. Avec Clyde
Etik giyim markası Avec Clyde, online mağazasının sade tasarımını tamamlayan, basit bir web sitesi footer tasarımı kullanmış. Belli belirsiz ve göze fazla çarpmayan bu footer, ziyaretçilerin web sitesinin geri kalan kısımlarına odaklanmasını sağlarken aynı zamanda yararlı bir bilgi kaynağı olarak işlev görüyor.
Ekranın üst kısmındaki sabit menü, web sitesinin ana gezinme yöntemi olarak işlev görürken, footer bölümü, müşterilerin ihtiyacı olabilecek diğer önemli ayrıntıları görüntülemesine olanak sağlıyor. Örneğin, bir moda markası için hoş bir dokunuş olarak beden ölçülerine ve SSS sayfasına bağlantı verilmiş.
“Arkadaş olalım” ifadesini içeren mikro metin, davetkar bir hava katıyor ve markanın samimi yaklaşımını vurgulamasına yardımcı oluyor.
09. Harasat
Yüksek kaliteli gıda tedarikçisi Harasat, profesyonel ve sade bir web sitesi footer’ı hazırlamış. Her şey mükemmel bir şekilde hizalanmış ve estetik görünümlü, şemaya benzer bir düzen oluşturulmuş. Arka planda koyu gri, açık gri ve beyaz olmak üzere yalnızca üç renk kullanan Harasat, gerekli tüm bilgileri vermiş. Web sitesinin içeriğini net bir şekilde ortaya koyan bu tasarım sayesinde, ziyaretçiler bu markanın ne yaptığını kolayca anlayabiliyor ve sitede gezinmeye devam edebiliyor.
Fare imleci ile üzerine gelindiğinde renk değiştiren hover efektinden, listelenen üç farklı konuma kadar her bir detay ince bir şekilde düşünülmüş. Her bir lokasyonun adresini ve telefon numarasını aynı anda göstermek yerine, her birinin iletişim bilgilerini görmek için ziyaretçilerin bu lokasyonlara tıklaması teşvik ediliyor. Bu ince dokunuş, temiz ve profesyonel bir görünüm sunuyor ve footer bölümünün sade ve temiz kalmasını sağlıyor.
10. Becca Slack
İçerik yaratıcısı, yazar ve komedyen Becca Slack’in hazırladığı bu kişisel web sitesi zarif ve büyük bir footer bölümüne sahip. Eserlerini ve videolarını sergilediği tek sayfalık web sitesinin alt kısmına yerleştirilmiş bu bölüm, ideal bir kapanış hissi yaratıyor.
Slack, iletişim bilgilerini vurgulayarak ve bir iletişim formu koyarak, iş birliği veya işveren potansiyeli için kendisine ulaşılmasını teşvik ediyor. Slack, geleneksel iletişim yöntemlerinin yanı sıra, canlı sohbet seçeneği sunmuş ve tercih ettiği sosyal medya kanallarına bağlantı vermiş.
Tüm bunlar, başarılı renk uyumları kullanan sade bir tasarım ve web sitesinin diğer bölümlerindeki tasarımı yansıtan ince bir yazı tipi eşleştirmesi ile sunulmuş. Mavi üzerine beyaz “Gönder” butonu öne çıkıyor ve ziyaretçileri iletişime geçmeye davet ediyor.
11. Triptyc London
Bu moda markası, tüm temel bilgileri düzgün bir şekilde özetleyen iki renk tonlu footer’ıyla, web sitesini temiz ve sade tutmuş. Genel footer tasarımı şık ve hem web sitesi tasarımına hem de ürünlere (kadınlar için yüksek kaliteli gömlekler) mükemmel bir şekilde uyum sağlıyor.
Şartlar ve koşullar, çerez kullanımları veya kabul edilen ödeme yöntemleri gibi müşterilerin aklındaki tüm soruları yanıtlamak için footer’a özel bir menü eklemişler.
Triptyc, ayrıca ziyaretçileri e-posta listelerine abone olmaya davet etmek için son bir şans tanımış. Koyu arka plan üzerinde, belirgin bir “Hemen Abone Olun” butonu öne çıkıyor ve ziyaretçileri harekete geçmeye teşvik ediyor.
12. Holly Oddly
Kendini “tuhaf kağıt ve tuhaf eşyalar” markası olarak ilan eden bu marka, footer bölümüne hoş bir eklenti yapmış. Buradaki diğer web sitesi footer örneklerinden farklı olarak Holly Oddly, bu bölüme kendisi ve markası hakkında kısa bir açıklama eklemeyi seçmiş. Daha fazlasını okumak için “Hakkında” sayfasına tıklanabiliyor. Bu içerik detayı, kişisel bir dokunuş sağlayarak, site ziyaretçilerinin kendilerini evinde hissetmesini sağlıyor ve kişisel markasını güçlendiriyor.
Ayrıca, üzerine gelindiğinde metnin pembe görünmesini sağlayan bir vurgulama efekti ekleyerek web sitesinin geri kalanıyla aynı renk paletine sadık kalmış. Başarılı bir Instagram hesabı olan Holly Oddly, ziyaretçilerin dikkatini footer bölümündeki Instagram simgesine çekerek takipçi sayısının da artmasını sağlıyor.
Footer - SSS
Header nedir?
Header, bir web sayfasının en üst kısmında bulunan bölümdür ve genellikle site logosu, menü, arama çubuğu ve diğer önemli navigasyon öğelerini içerir. Header, kullanıcıların siteye kolayca erişmelerini sağlayan bir arayüz unsuru olarak işlev görür ve genellikle site tasarımının görsel ve işlevsel açıdan önemli bir parçasıdır.
Mail footer nedir?
Word footer nedir?
HTML de footer etiketi nedir?
HTML'de <footer> etiketi, bir web sayfasının alt kısmında bulunan ve genellikle sitenin genel bilgilerini veya iletişim bilgilerini içeren bir yapıdır. Footer, sitenin marka kimliğini yansıtabilir, site haritası veya hukuki uyarılar gibi ek bilgiler içerebilir ve genellikle diğer sayfa bileşenlerinden ayırt edilir. Tarayıcılar ve arama motorları tarafından sitenin alt kısmı olarak tanınarak kullanıcıların daha iyi bir kullanıcı deneyimi yaşamalarına yardımcı olur.
Rami Mert Kandiyoti
SEO and Content Marketing Specialist
