Bir sonraki WordPress istemci projeniz için 15 zarif altbilgi tasarımı (ve onu işe yarayan şey)
Olağanüstü bir web sitesi altbilgisi tasarlamak, her web geliştiricisi veya tasarımcı tarafından yapılması gereken şeyler listesinde asla en iyi değildir. Sayfanın altında olduğu göz önüne alındığında, çoğu ziyaretçi tarafından neredeyse hiç düşünülmeyen bir şey olarak görmezden gelmek yeterince kolaydır. Ancak, altbilgi web sitenizin önemli bir alanıdır. Clicktale tarafından yapılan bir araştırmaya göre, ziyaretçilerin yaklaşık% 76’sı web sitenizin gagasının dışına çıkacak ve% 22’si aşağı kaydıracak. Sitenizin altına kaydıran ziyaretçiler açıkça daha fazla bilgi arıyorlar, bu da onlara sezgisel ve ilginç bir şekilde vermeniz gerektiği anlamına geliyor. Tüm web’den iyi altbilgi tasarımlarının bazı örneklerine bakarak, ilham alabilir ve kendi siteniz için en uygun olanı ve çekici olma eğiliminde olan ziyaretçi türlerini denemeye başlayabilirsiniz.
Bu makalede, web sitenizin altbilgisine eklemeniz gereken öğeleri önererek başlayacağız, ardından ilham almanız için 15 zarif altbilgi tasarımının kapağına döneceğiz! Altbilgeni tasarlamadan önce web sitesi altbilgisinize ne dahil edilmelidir, kendinize sitenizin altına ulaştıktan sonra ziyaretçilerin ne yapmasını istediğinizi sormalısınız. ‘Hakkımızda’ sayfanızı okumalarını, bülteninize abone olmalarını veya Facebook sayfanızı beğenmelerini istiyor musunuz, başlıkta veya kenar çubuğundaki seçeneği bulmak için yukarı kaydırmaya güvenemezsiniz.
Ziyaretçilere başka neler kontrol etmeleri gerektiğini hatırlatarak mümkün olduğunca rahat olmak. Web sitesi altbilgisine dahil edilecek en yaygın bileşenlerden bazıları şunlardır: Telif Hakkı Bilgileri
İletişim Bilgileri (telefon numarası, e -posta adresi)
Adres (haritalar ve isteğe bağlı talimatlarla)
Site haritanıza bağlantılar, gizlilik politikaları, kullanım koşulları, basın kiti vb.
Navigasyon bağlantısı
Popüler konulara ve/veya en son blog yayınlarına bağlantılar
Yaklaşan etkinlik
Simgeler ve/veya sosyal medya widget’ları
Bülten Kayıt Formu
Üyeler için giriş alanı
Site arama alanı
Mini resim galerisi
Logo veya marka resmi
Görev beyanı
Para iade garantisi
Ödüller, sertifika, dernekler
Referans
Video gömülü
“Harekete geçme daveti” büyük (bağış yapmak, sipariş vermek, iletişim kurmak, abone olmak vb.)
Altbilginize dahil etmeyi düşünebileceğiniz her şeyi tam olarak sıkmaktan kaçının. Bunun yerine, en önemli içerik seçeneklerinden sadece birkaçını seçin ve temiz ve çekici bir şekilde göstererek deney, ziyaretçilerinizin yapmasını istediğiniz büyük bir şeyi büyütebilir ve vurgulayabilir.
Alt altına dahil etmek istediğiniz çok fazla bilginiz varsa, sayfanın altından uzanan büyük bir altbilgi olan ‘Fat Footer’ tasarımından yararlanmak isteyebilirsiniz ve ziyaretçiler kadar çok şey alabilirsiniz. . Aşağı kaydırdıklarında tüm bilgisayar ekranı. Sütunu kullanmak ve çok fazla metin altı çizili olmaktan kaçınmak, çok sayıda bağlantı varsa, altbilginizin daha düzenli görünmesine ve taranmasına yardımcı olabilir. Şimdi 15 zarif altbilgi tasarımına dönelim! 1. Tessmae’s Tüm NaturalTessmae’s, minimum bir görünümü koruyan fantastik bir yağ altbilgisi örneği sunar. Birçok site genellikle diğer içeriklerden ayırmanın bir yolu olarak altbilgi için koyu arka planlar kullanırken, bu hafif kalır – okumayı çok kolaylaştırır.
Bu altbilgideki bültenin kaydedilmesine, geniş bir site içeren çok büyük bir metin ve bir kayıt formu gösteren açık bir vurgu vardır. Altında, navigasyon bağlantısına düzgün bir şekilde düzenlenmiş sütunlara erişilebilirken, bazı harika sosyal simgeler en altta öne çıkıyor. Bu özel altbilgi ile iyi çalışan şey, ziyaretçilerin bültene kaydolarak harekete geçmeleri için teşvik edildiği açıktır. Ancak bunu yapmak istemiyorlarsa, yapılacak ikinci en bariz şey Tessmae numarasını aramak veya sosyal profillerini görmek. Ve son olarak, sadece sitede daha fazla bilgiye göz atmak istiyorlarsa navigasyon bağlantısı vardır.
En İyi Made Co. Beyaz arka planını altbilgiye genişleten başka bir çevrimiçi perakende sitesidir ve yine de sitenin ana bölümünden net bir şekilde ayrılık yapar. Bu durumda, ayırmayı yapmak için akıllı bir yatay gezinme menüsü eklenir. Yalnızca dört bağlantıda sınırlı bir menüyü korumak, kullanıcıların tıklanacak her türlü bağlantı tarafından bunalmamasını sağlar. Altbilginin ortasında, şirket markalı görüntüleri garantisi ile birleştiriyor. Marka imajı en belirgin şey olsa da, solda davet eden bülten kayıt formunu ve sağda iletişim bilgilerini görmek yeterince kolaydır. Bu altbilgide yer alan seçeneklerin miktarını minimumda tutarak, ziyaretçiler bir sonraki adımda ne yapılacağı konusunda net bir şekilde anlayabilirler. Fusion Design Creative Solutions
Fusion Design Creative Studios, sadece önemli navigasyon bileşenlerini çok yaratıcı bir şekilde düzenleyen çok temiz görünümlü bir altbilgiye sahiptir. Altbilginin kendisi karanlık ve iyi bir arka plan görüntüsü gösterse de, aslında içeriği, bunun aksine değil. Üç sütun, arka plan görüntüsüne çok dağınık olmadan bu özel altbilgi için gerekli olan doğru miktardadır. Her sütuna dahil edilen metnin (ortada sola düzleştirilmiş, sonra sağa hizalanmış) nasıl düzgünleştirilmesinin iyi bir denge oluşturulmasına yardımcı olduğunu unutmayın. Son olarak, en altta öne çıkan merkezi bir sosyal simge var. Arka plan görüntüsünün birçok parçası aşağı kaydırdığınızda tüm sitelerde görülebilir, bu nedenle altbilgi iyi akan diğer parçalar gibi hisseder. Ziyaretçiler daha sonra hizmetlerinin yaratıcı özelliklerini kontrol etmek isteyip istemediklerine, genel navigasyon bağlantılarından onlar hakkında daha fazla bilgi edinmek isteyip istemediklerine karar verebilir, telefonla veya sosyal medyaya bağlanabilirler. 4. Brian Gardnerfooter, ‘şişman’ bir altbilgi olsa bile, üç veya dört sütunlu bir koleksiyon kullanarak çok fazla bilgi eklemeye gerek yoktur. Brian Gardner’ın kişisel web sitesi bunun için iyi bir örnektir ve yukarıdaki örnekte gördüğümüze benzer bir arka plan altbilgisi görüntüsü görüntüler.
Zarif ancak çok gösterişli olmayan iki renk basit renk şemasına bağlı arka plan görüntüsü. Dahil olan tek içerik, çok az alıntılar, sosyal simgeler ve üç navigasyon bağlantısıdır-çok az bir sitenin genel görüntüsüne göre. Bu altbilgi ile iyi çalışan şey, bu altbilginin çok basit ve pürüzsüz olması, ancak yine de ziyaretçilerin ne yapacağını açıkça anlatmasıdır. Sadece bir altbilgi görünümünü, aklınıza gelebilecek her navigasyon bağlantısıyla dekore etmek zorunda kalmadan ne kadar harika yapabileceğinizi gösterir. 5. Piksel
Tabii ki, altbilgideki çoğu ziyaretçi tarafından çok fazla uğraşmadan daha fazla bilgi girmenin bir yolu var.Pikseller, küçük metin, basit tipografi, kontrast renkler ve farklı genişliklere sahip sütunlar kullanarak bu kuyuya ulaşır.Ziyaretçiler tam olarak hangi metnin tıklanabileceğini (parlak türbülanslı metinle temsil edildiği gibi) ve hangi metnin onlara söyleyeceği (beyaz metinle işaretlenmiş) olduğunu biliyorlar.Orta sütundaki daha uzun metnin okunması da daha kolaydır, çünkü her iki taraftaki diğer iki sütundan daha geniştir. Genel olarak, altbilgi, çeşitlileri hızlı bir şekilde tanımlayabilmek için her şeyi düzenli ve kolay görüldüğünde olağanüstü bir iş çıkarır. sunulan bilgi türleri.Ziyaretçiler, daha sonra ne yapacağınızla ilgili çeşitli seçenekler arasından seçim yapmak için kolaylık sağlar.6. Erate Eated, arka plan olarak siyah gibi çok koyu renkleri kullanırken ne kadar temiz ve okumanın ne kadar kolay yapabileceğinizi gösteren bir web sitesi altbilgisine sahiptir.Burada kullanılan sadece üç sütun vardır, bunların hepsi ziyaretçilere benzersiz olmalarını sağlar.Özellikle iyi işleyen şey, parlak renkler ve geniş mesafelerle çeşitli bilgi türlerini vurgulayan simgelerin bir kombinasyonudur.Sosyal simgelerin nasıl sıkışmadığına dikkat edin;Ayrıca keşif sütununun altındaki noktaların simgeleri de değil.Bu altbilgi, net davranmak için sadece bir davetiye vurgulamaya karar vermeyen, ancak görüntülenecek pek çok seçeneği olmayan herkes için büyük ilham verecektir.Hemen hemen tüm web siteleri bunun gibi basit ve çok yönlü altbilgi tasarımlarından yararlanabilir.İşbirliği
Sabitlik, basitlik ve güçlü bir aksiyon davetiyesi gösteren biraz daha küçük bir altbilgiye sahip bir örnektir.Burada, büyük bülten kayıt formu ana odak noktasıdır, çünkü tüm dipnotların neredeyse yarısını geçirir.Kayıt formuna ek olarak, Collabivive’ın sol tarafta daha küçük ve daha özlü hale getirerek sütun altbilgisi trendini nasıl kullandığını görmek ilginçtir.Aşırı ziyaretçileri önlemek için seçilen dört sütunun her biri için yalnızca üç seçenek.Önde gelen büyük kayıt formları ve üç veya dört ek seçenek sütunu açısından iki dünyadan en iyisini isteyenler için, bu altbilgi bunun için ideal bir model olarak işlev görebilir.Bu aynı zamanda tüm bilgisayar ekranını karşılayan çok şişman bir altbilgi tasarımının büyük bir hayranı olmayan herkes için de idealdir.8. Griflan Design Inc.
Altbilgide hareket etme büyük davetinin, yukarıdaki örneklerden bazılarında gördüğümüz çok büyük bir kayıt formu olması gerekmez. Griflan Design Inc. için, altbilginin ortasındaki büyük kırmızı düğmeden, ziyaretçilerinin e -posta yoluyla ideal olarak iletişim kurmalarını istedikleri açıktır. Aslında, bu, aslında altbilgide herhangi bir navigasyon bağlantısı sağlamadığını gördüğümüz bir örnektir. E-posta düğmesine ve alttaki renkli sosyal simgeye ek olarak, iyi göze çarpıyor, başka hiçbir şey görülemiyor ve iyi! Bu, böyle siteler için iyi çalışır. Sonuçlarınızın sizinle doğrudan iletişim kuran ziyaretçilerden geldiği kişisel bir web siteniz veya küçük bir işletme web siteniz varsa, ek gezinme bağlantıları içermeyen bir altbilgi ve bunun yerine iletişim bilgilerine büyük odaklanmak daha fazla ziyaretçiyi teşvik etmek için çok etkili olabilir. sizinle iletişime geçmek için. Bazı eylemler yapmalarını istiyorsanız ziyaretçilerin her zaman bir hatırlatmaya ihtiyacı vardır. 9. Kaliforniya’dan Baxter Baxter of California web sitesi altbilgisi tasarımı, Sol tarafta mini bir sütun ve sağdaki büyük bülten kayıt formuna sahip olan Collaboiv’den gördüğümüze benzer. Ancak bunun bahsetmeye değer bazı farklılıkları var. Bunlardan biri, bu beyaz arka plana sahip bir altbilginin başka bir örneğidir. Bu aynı zamanda futbol işbirliğinden daha büyüktür, yani sütun küçük görünmüyor. Daha fazla bağlantı için yer var ve bağlantının metni oldukça küçük, böylece sosyal simge altındaki konforla eşleşiyor. Altbilginize eklemeniz ve vurgulamanız gereken net talimatlarınız varsa, çok büyük ve dağınık görünmesini nasıl sağlayacağınız hakkında fikirler için Baxter of California tasarımına bakabilirsiniz. Kayıt formu altındaki “İlk Satın Alma İçin% 15 indirim alın” mesajı için metin, bunun boyunca cümle için çok büyük, ancak kalan içerik minimal ve dengeli olduğu için sadece işe yarıyor. 10. Spark kutusu
Sparkbox, genellikle diğer web sitelerinde görmediğiniz bir altbilgi tasarımına sahiptir.İlk bakışta oldukça basit görünüyor, sitenin sol taraftaki adres bilgileri ve sağ taraftaki bazı sosyal simgelerle nasıl yapıldığını görmek için bir bağlantı görüntüler.Ortada, “Daha Fazla Altbilgi?”Büyük haritayı ve gelecekteki olayları görmek için genişletmek için tıklayabilirsiniz.Ziyaretçileri sitelerinizi daha fazla keşfetmenizi merak etmenin benzersiz yolları hakkında konuşun!Bu, gerçekten benzersiz bir altbilgi tasarımı arayan ve bunu yapma becerilerine sahip biri için ilginç bir fikir olabilir (ya da en azından birisini bunu yapmak için kiralamak için para).Genişletilebilen ve bağlantısı kesilebilen kısım, genellikle diğer web sitelerinin ana alanlarında kullanılan iyi bir tasarım trend, neden altbilgide de olmasın?11. Molamila Molamil, bir bütün olarak keşfedilecek çok harika bir web sitesine sahiptir ve geleneksel bir altbilgi tasarımı ve sitenin benzersizliğine uyacak şekilde biraz baharat alan bir altbilgi (menü olarak ikili bir işlevi olan) ile biter. Bu, tüm ekranı karşılamayı amaçlayan bir altbilgidir ve minimum ekran için içerik etrafında yeterli alan sağlar. İletişim bilgileri için bir sütun, biri navigasyon ve diğeri sosyal medya için. Birçok beyaz alan tüm seçenekleri okumayı kolaylaştırır ve buna benzer bir tasarım stili istiyorsanız daha iyi bir yazı tipi kullanabilirsiniz. Temel olarak, bu altbilgi iyi çalışır, çünkü sayfaya kaydırdığınızda her şeyi ön ve ortada en temiz ve en temiz şekilde yerleştirir. Benzersiz ve farklı bir altbilgi tasarımını seviyorsanız, bu yeniden yapım ve kendi benzersiz yolunuza göre ayarlanmaya layık olabilir. 12. Teasjenier World of Teas’ın Jenier World, görsel tasarım hakkında parlak bir web sitesi altbilgisi var. Altbilginin ayrılması, bahçede akan bir dalga ve üzerinde yüzen geminin silueti ile bir su gövdesi ufku yaparak yapılır. Altbilgi İçeriği, ziyaretçileri bültenlerine kaydolmaya, iletişim kurmaya veya sosyal medyaya bağlanmaya teşvik eden bir metin görüntüsü ile güzel bir şekilde tasarlanmıştır. Bu, navigasyon bağlantısının katılımı olmadan gerçekten harika görünen başka bir altbilgidir. Altbilgisine daha fazla görsel cazibe merkezi getirmek isteyen herkes bundan ilham alabilir. Güzel grafikler, altbilginizi ve içeriğinizi yapmanın kesin bir yoludur. 13. Smoothie tasarruf edin
Savse smoothies, temelde altbilginizi neredeyse birkaç alanla dolu bir boyuta nasıl dönüştürebileceğinizi gösterir. Bültenlere kaydolmak, sayfanın sonuna ulaştıklarında ziyaretçilerine göndermek istedikleri açık bir mesajdır. Büyük formda, ziyaretçiler işle nasıl başa çıkacaklarını kolayca görebilir ve bunları sosyal medyada takip edebilirler. Bu basit, okunması kolay ve dağınık değil. Bu dipnotlar, bülten kayıtlarını artırmaya çalışan her birey veya işletme için iyi bir ilham kaynağı olabilir. Ve en iyi yanı, dahil edilecek çok fazla bağlantınız olmadığı sürece, diğer genel altbilgi içerik seçenekleriyle de birleştirebilirsiniz. 14. Öyleyse, ek navigasyon seçenekleriyle tıkamak istemediğinizde altbilginizin nasıl şaşırtıcı görünmesini sağlıyorsunuz? Fffunction bunu bazı ilginç istatistikler girerek ve bunları çeşitli yazı tiplerinde ve renklerde göstererek yapar. Ziyaretçilerinizle paylaşmaya değer olduğunu düşündüğünüz gerçekleriniz, numaralarınız veya diğer bilgileriniz varsa, altbilginizi yaratıcı bir şekilde görüntülemek için kullanmak, ziyaretçilerinizi eğitmek, eğlendirmek ve hatta başa çıkmak için düzgün bir yol olabilir. Bu tür içeriklerin nadiren altbilgide çalıştığını görürsünüz, bu da onu daha ilginç hale getirir. 15. 13 Yaratıcı
