Bazen, en büyük farkı yaratan en küçük ayrıntılardır. Bir web sitesi oluşturmak söz konusu olduğunda , sitenizin altbilgisini tasarlamak muhtemelen yapılacaklar listenizin üstünde olmaz. Düşünmeniz gereken çok şey olsa da, genellikle göz ardı edilen bu içeriğin belirli ziyaretçiler için makyaj veya kırılma olabileceğini unutmayın.
Bazı düşünce ve stratejik planlama ile, iyi tasarlanmış bir altbilgi, iş hedeflerinize ulaşmanıza yardımcı olabilir.
Bu kılavuz, web sitenizin altbilgisine neyin dahil edileceğinden, kendi web sitenizi nasıl oluşturacağınıza kadar her şeyi kapsar. Ayrıca, ilham kaynağınız için 12 farklı web sitesi altbilgisi örneği bulacaksınız:
Web sitesi altbilgisi nedir?
Web sitesi altbilgisi , bir web sayfasının en altında bulunan içerik şerididir ve genellikle bir web sitesinin her sayfasında tekrarlanır. Web sitenizin başlığı ise, bir web sitesinin üst katında görünen bölümdür.
Senin iken ana sayfa tasarımı genellikle ne sitenizin ilk izlenim ziyaretçiler sağlar, sizin altbilgi insanlar görmek son şey olması muhtemeldir. Doğru içerik ve tasarımla, web sitenizin ana hedeflerine ulaşmanıza yardımcı olurken, olumlu ve kalıcı bir izlenim yaratabilir.
Bu stratejik nokta, site ziyaretçilerini iletişim kurmaya veya posta listenize abone olmaya teşvik eden nihai bir CTA (harekete geçirici mesaj) eklemek için ideal bir yerdir . Alt bilginiz ikincil bir web sitesi menüsü olarak hizmet verebilir ve ziyaretçilerin önemli bilgileri kaçırmadıklarından emin olur ve bunları açık gezinme ile çeşitli sayfalarınıza yönlendirir. Ayrıca, kazandığınız ödüller, referanslar veya sosyal hesaplarınız gibi belirli öğeleri vurgulamayı da seçebilirsiniz .
Son olarak, altbilginiz size şartlar ve koşullar, gizlilik politikası ve diğer yasal konular gibi temel bilgileri dahil etmek için organize bir yer sağlar. Tüm bu formail’lerin tek bir yere yerleştirilmesiyle, sitenizin geri kalanını ilgi çekici bir kullanıcı deneyimi oluşturmaya ve yeni müşteriler çekmeye adayabilirsiniz.
Web sitesi altbilgisi tasarımı için en iyi uygulamalar
Aşağıdaki web sitesi altbilgisi örneklerinde göreceğiniz gibi, altbilgilerin boyutu farklıdır. Bununla birlikte, çoğu oldukça küçüktür ve sadece en ilgili bilgileri içerir.
Daha önce bir mobil web sitesi tasarlayan herkes size küçük bir gayrimenkul parçasının daha basit bir tasarım süreci anlamına gelmediğini söyleyecektir. Sınırlı alan, alanı mümkün olan en iyi şekilde kullanmak için dahil ettiğiniz her bir öğenin önemini dikkatle düşünmeniz gerektiği anlamına gelir.
Web sitenizin altbilgisini tasarlarken dikkate almanız gereken en önemli noktalar şunlardır:
Gerekli bilgileri ekleyin
Ziyaretçilerin web sitesi altbilginizde görmeyi bekleyecekleri birkaç temel bilgi parçası vardır. Web sitenizin her sayfasında tekrarlandığından, bu ayrıntılar site ziyaretçileriniz için her zaman ulaşılabilir olacaktır ve yalnızca bir kez ilgilenmeniz gerekir.
Tasarım kurallarına sadık kalın ve gizlilik politikanızı ve kullanım koşullarınızı ekleyin. Bu aynı zamanda profesyonel ve güvenilir görünmenize yardımcı olacaktır.
Bunun dışında bir gezinme menüsü ve iş e-postanız , telefon numaranız, adresiniz ve sosyal medya kanallarınız gibi iletişim bilgileri eklemek yaygındır . Ayrıca iletişime geçmek için kısa bir çevrimiçi form da oluşturabilirsiniz .
Son olarak, yıl ve telif hakkı sembolünü eklediğinizden emin olun. Bu, web sitenizi intihal etmeye çalışan herkese karşı korunmanıza yardımcı olacaktır.
Net gezinme sağlayın
Site ziyaretçileriniz sayfanızın altına ulaşmış olsa bile, bu onların ayrılma zamanının geldiği anlamına gelmez. Aksine – kaybolmuş, ilgisiz veya daha fazlası için aç hissediyorlarsa , altbilginize net bir web sitesi gezinme menüsü ekleyerek onları taramaya devam etmeye teşvik edebilirsiniz .
Sitenizin çeşitli bölümlerini listeleyin ve ziyaretçilere sunduğunuz içeriği genel olarak anlamalarını sağlayın. Buna ek olarak, bir arama çubuğu eklemek , hayal kırıklığına uğramış ziyaretçilerin aradıkları bilgileri hızlı bir şekilde bulmalarına yardımcı olur.
Kişiliğinizi ifade edin
Web sitenizdeki her içerik, benzersiz kişiliğinizi ve marka kimliğinizi yansıtmak için bir şanstır . Aynı şey altbilginiz için de geçerli. Sorunsuz bir tarama deneyimi sunmak için web sitenizin tasarımının geri kalanıyla uyumlu olmalıdır .
Senin Stick marka renkleri ve ses. Bu aynı zamanda ziyaretçilerin dikkatini çekecek ilginç bir mikroskop dokunuşu eklemek için harika bir yer . Blogunuza kaydolmaya veya sosyal kanallarınızı kontrol etmeye davet ediyor olun, tonunuzu ve kişiliğinizi sözcük seçiminize yansıtmaya çalışın. Sonuçta, “arkadaş olalım” veya “sizden duymak isteriz”, basit bir “buraya abone olun” dan çok daha cazip olabilir.
Estetik yap
Web sitenizin en altında göründüğü için, altbilginizin sitenizin geri kalanından daha az çekici olması gerektiği anlamına gelmez. Aslında, ziyaretçilerinizin gördüğü son şey olabilir. İçeriğinizin geri kalanında olduğu gibi tasarımında da düşündüğünüzden emin olun. Ziyaretçilerin bu son, önemli bilgi parçalarını kolayca tüketebilmeleri için tasarımınızı temiz ve basit tutun.
Hiyerarşi ve düzeni dikkate alarak tasarımın temel ilkelerini dikkate alın . İşletme hedeflerinizle ilişkilendirerek hangi bilgileri vurgulamak istediğinize karar verin. Ziyaretçilerin çevrimiçi mağazanıza gitmesini , yaklaşmakta olan web seminerine kaydolmasını veya iletişim kurmasını ister misiniz? Her ne ise, bu öğeyi boyut, renk veya boşluk kullanımıyla öne çıkarın.
12 öne çıkan web sitesi altbilgisi örneği
Artık temelleri öğrendiğinize göre, web tasarımından ilham almanın zamanı geldi . Web sitenizi sıfırdan oluşturuyor veya bir web sitesi şablonu kullanıyor olsanız da , Wix kullanıcıları tarafından oluşturulan bu altbilgi örnekleri size kendi tasarımınızı oluşturmak için bolca fikir verecektir.
01. Ev Numarası 3
Bu restoran web sitesi kendi altbilgisinde gerekli tüm bilgileri sağlamıştır. Google Haritalar ve canlı sohbet widget’ı ile kolayca iletişim kurabilirler . Bu küçük ayrıntılar, müşterilerinin ihtiyaçlarını dikkate aldıklarını ve iletişime geçmeye açık olduklarını göstermektedir.
Altbilgide site haritası olmamasına rağmen, web sitesinin ana menüsü ekranın üst kısmına sabitlenir, bu da ziyaretçilerin sayfalarında kolayca gezinebilecekleri anlamına gelir.
Son olarak, altbilgide devam eden ve tasarımla sorunsuz bir şekilde birleşmesine yardımcı olan farklı bir web sitesi renk şeması vardır.
02. Lola Pate
Görsellere güçlü bir vurgu yapan bir yaşam tarzı markası olan Lola Pate, Instagram yayınlarını altbilgilerine eklemeye karar verdi . Bu, yalnızca marka kimliğini güçlendirmekle kalmaz, aynı zamanda site ziyaretçilerini ürün resimlerini daha büyük bir biçimde tıklayıp görüntülemeye ikna eder.
Marka bu noktayı ziyaretçileri “kabilemize katılmaya” davet eden nihai bir CTA dahil etmek için de kullandı. Eğlenceli bir mikrokopi ile eşleştirilen bu stratejik hareket, insanların posta listelerine abone olmasını sağlıyor .
Müşterilerinin kaçırması durumunda, gönderim ve iade sayfası buraya bağlanır, çevrimiçi bir mağazaya başlarken iyi bir uygulamadır .
03. Willowbrook Çiftliği
Bu web sitesi altbilgi örneği, bir site ziyaretçisinin görmeyi beklediği tüm bilgileri içerir. Web sitesinin tüm sayfalarına götüren organize bir menü, abone olmak için cazip bir teklif ve iletişime geçmenin bir yolu var. Renk kontrastı sayesinde “Abone Ol” düğmesi öne çıkıyor ve bu da onu daha davetkar hale getiriyor.
Tasarım, çiftliğin küçük işletme web sitesinin geri kalanıyla uyumludur ve uyumlu bir genel görünüm sağlar. Renk paleti FOOTER bir dostça bir görünüm vermek yardımcı hoş bir dokunuş – illüstrasyon yaptığı gibi, doğanın duygusu uyandırır.
04. letsone
Letsone tarafından tasarlanan bu şık web sitesi altbilgisi , ziyaretçilere ihtiyaç duyabilecekleri tüm bilgileri sağlarken , markalarının özünü mükemmel bir şekilde yakalar . Başlıklarındakiyle aynı tanınabilir arka planı kullanarak, uyumlu bir görünüm oluşturdular. Logolarını altbilgiye dahil ettiler ve yine marka bilinci oluşturma çabalarını güçlendirdiler.
Tüm elemanlar, listeler ve başlıklar ile son derece organize bir şekilde düzenlenmiştir. Hiyerarşi çok açıktır, CTA altbilginin üst kısmına yerleştirilir ve büyük bir yazı tipiyle yazılır. Ziyaretçilerin canlı sohbet seçeneğini kaçırmamasını sağlamak için , parlak, zıt bir pembe tonuyla öne çıkmasını sağladı.
05. Jérome Studio
Bu sürdürülebilir aksesuar markası, iyi tasarımın karmaşık olması gerekmediğini göstermektedir. Sadece iki nötr renkle, web sitesi altbilgisi, tüm doğru bilgileri iletmek ve çekici bir tasarım sağlamak için mükemmel bir iş çıkarır.
Jérome Studio, açık bir hiyerarşi anlayışı ile organize bir düzen yarattı. Altbilgi, tasarımın geri kalanını tamamlar, diğer keskin estetiklerle mükemmel bir şekilde birleşir ve zarif bir görünüm oluşturur.
Hem serif hem de sans-serif yazı tipinin kullanılması, başlıklar ve metnin geri kalanı arasında ayrım yapmaya yardımcı olan ince bir tasarım dokunuşu ekler. Web sitesi genelinde aynı yazı tipi eşlemesi kullanılır ve böylece birleşik bir tasarım sağlanır.
06. Yararsız Hazineler
Bu çevrimiçi sanat mağazasının web sitesi altbilgisi, daktiloyu hatırlatan nostaljik bir yazı tipiyle çağdaş bir görünümü birleştiriyor. Alışılmadık bir metinle birleştiğinde, ziyaretçileri “çiçeklerle bizimle konuşmaya” davet eden Yararsız Hazinelerin iyi düşünülmüş ve benzersiz bir marka kimliğine sahip olduğu açıktır. Bu, altbilgiye ekledikleri gif aracılığıyla da görülür ve ikinci bir görünüm almak istemenizi sağlayan yanakta bir dil havası ekler.
Çevrimiçi sanat satan bir işletme olarak , Useless Treasures altbilgilerine en önemli ayrıntıları dahil etmeyi sağlamıştır: gönderim bilgileri, iade yöntemlerini ve ödeme yöntemlerini temsil eden logoları. Ayrıca tasarımcı Instagram hesabı ve portföy web sitesine bir bağlantı var .
07. Yedi Gram Kafe
Hiçbir şey kahvenin toprak tonları ve dumanı tüten bir kahve makinesi olduğunu söylemez. Seven Grams Caffe, sıcak bir renk şeması ve pişmiş ürünlerin ağız sulandıran yakın çekimleri ile web siteleri boyunca kahve titreşimleri uyandırıyor. Web sitesi altbilgisi, bu atmosferin atmosferik bulanık bir fotoğrafla sahneyi ayarlayan bu yolculuğa ideal bir son.
Ayrıca, açılış saatleri ve telefon numaraları da dahil olmak üzere, altbilginin küçük alanında gerekli tüm ayrıntıları aktarmayı başardılar. Ayrıca, müşterilerinin bulması için ekstra kolay olması için Google Haritalar’a bağlanan üç New York lokasyonunu vurguladıklarından emin oldular.
08. Avec Clyde
Etik giyim markası Avec Clyde, çevrimiçi mağazalarının temiz tasarımını tamamlayan basit bir web sitesi altbilgisi için gitti. İnce ve mütevazi, ziyaretçilerin web sitesinin geri kalanına odaklanmasına izin verirken, yine de yararlı bir bilgi kaynağı olarak hizmet veriyor.
Ekranın üst kısmındaki sabit menü web sitesinin ana gezinme yöntemi olarak hizmet ederken, altbilgi müşterilerin aramaları gereken diğer önemli ayrıntıları görüntülemelerine olanak tanır. Örneğin, boyutlandırma sayfalarına bir bağlantı var – bir moda markası için hoş bir dokunuş ve ayrıca SSS sayfalarına bir bağlantı var .
“Arkadaş olalım” diyen mikroskop özellikle davetkar ve kolay yaklaşımlarını vurgulamaya yardımcı oluyor.
09. Harasat
Yüksek kaliteli gıda tedarikçisi Harasat, profesyonel, fırfırsız bir web sitesi altbilgisi hazırladı. Her şey mükemmel bir şekilde hizalanır ve estetik, ızgara benzeri bir düzen oluşturur. Sadece üç renk kullanarak – arka plan için koyu gri, açık gri ve beyaz – Harasat gerekli tüm bilgileri içermektedir. Ziyaretçiler, web sitesinin içeriğini açıkça belirterek, bu markanın ne yaptığını kolayca anlayabilir ve siteye göz atmaya devam edebilir.
Her ayrıntı, imleciniz üzerindeyken rengi değiştiren metnin üzerine gelindiğinde oluşan efektten, listelenen üç farklı konuma kadar iyi düşünülmüştür . Ziyaretçiler, her bir konumun adresini ve telefon numarasını bir kerede göstermek yerine, her birinin iletişim bilgilerini görmek için konumları tıklamaya davet edilir. Bu ince dokunuş, bu temiz, profesyonel görünümü oluşturmaya ve altbilginin darmadağın hissetmesini önlemeye yardımcı olan şeydir.
10. Becca Slack
İçerik oluşturucu, yazar ve komedyen Becca Slack’in bu kişisel web sitesinde zarif ve geniş bir altbilgi var. Tek sayfalık web sitesinin altına yerleştirildiğinde, çalışma ve video vitrini için ideal bir son.
Becca, iletişim bilgilerini vurgulayarak ve bir iletişim formu sağlayarak potansiyel ortak çalışanları veya işverenleri kendisine ulaşmaya teşvik eder. Geleneksel iletişim yollarının yanı sıra Becca, canlı sohbet seçeneği ve tercih ettiği sosyal medya kanallarına bağlanan sosyal simgeler de içeriyor.
Tüm bunlar sadece üç renk kullanan düzgün bir tasarım ve web sitesinin geri kalanında tasarımı yansıtan ince bir yazı tipi eşleştirmesi ile paketlenmiştir. Mavi üzerine beyaz gönderme düğmesi öne çıkıyor ve ziyaretçileri iletişime geçmeye davet ediyor.
11. Triptyc Londra
Bu moda markası, temizliği ve basitliği sağlar, tüm temel bilgileri düzgün bir şekilde saran iki tonlu bir web sitesi altbilgisi ile. Genel tasarım şık, web sitesi tasarımlarının yanı sıra ürün – kadınlar için yüksek kaliteli gömlekler ile mükemmel uyum sağlar.
Şartlar ve koşullar, çerezlerin kullanımı veya hangi ödeme yöntemlerini kabul ettikleri olsun, müşterilerinin sahip olabileceği tüm soruları ve sorguları yanıtlamak için altbilgiye özel bir menü eklediler.
Bunun da ötesinde, Triptyc bu son şansı ziyaretçileri posta listelerine abone olmaya davet etmek için kullandı. Konuyla ilgili “Şimdi Abone Ol” düğmesi, koyu arka planda öne çıkıyor ve ziyaretçileri harekete geçmeye teşvik ediyor.
12. Holly Tuhaf
Bu kendi kendini ilan eden “tuhaf kağıt ve tuhaf mallar” markası, altbilgilerine güzel bir katkı ekledi. Buradaki diğer web sitesi altbilgisi örneklerinden farklı olarak Holly Oddly, bu bölüme kendisi ve markanın kısa bir tanımını eklemeyi seçmiştir. Daha fazlasını okumak için kolayca ‘Hakkında’ sayfasına gidebilirsiniz . Bu içerik, site ziyaretçilerinin kendilerini evlerinde hissetmelerini sağlamak ve kişisel markasını güçlendirmek için kişisel bir dokunuşa yardımcı olur .
Ayrıca, fareyle üzerine geldiğinde metnin pembe görünmesini sağlayan bir vurgulu efekt ekleyerek web sitesinin geri kalanıyla aynı renk paletine yapıştı. Başarılı bir Instagram hesabıyla Holly Oddly, ziyaretçilerin dikkatini altbilgideki Instagram simgesine odaklayarak takipçilerinin sayısını artırmaya yardımcı oldu.
KAYNAK: https://www.wix.com/blog/2020/05/website-footer-examples/
Son Yorumlar