Bir Sonraki WordPress İstemci Projeniz için 15 Zarif Altbilgi Tasarımı (Ve Onları Çalıştıran Nedir)

İnanılmaz bir web sitesi alt bilgisi tasarlamak, hiçbir zaman her web geliştiricisinin veya tasarımcının yapılacaklar listesinin başında yer almaz. Sayfanın en altında olduğu göz önüne alındığında, çoğu ziyaretçinin neredeyse hiç fark etmediği bir şey olarak reddetmek yeterince kolaydır.

Ancak altbilgi, web sitenizin önemli bir alanıdır. ClickTale tarafından yürütülen bir araştırmaya göre, ziyaretçilerin yaklaşık %76'sı web sitenizin ekranının ötesine geçecek ve %22'si en alta kadar kaydıracaktır.

Sitenizin en altına inen bir ziyaretçi açıkça daha fazla bilgi arıyordur; bu da, bu bilgileri onlara sezgisel ve ilgi çekici bir şekilde sağlamanız gerektiği anlamına gelir. Web'deki harika altbilgi tasarımlarının bazı örneklerine göz atarak ilham alabilir ve kendi siteniz için en iyi olanı ve sitenizin çekme eğiliminde olan ziyaretçi türlerini denemeye başlayabilirsiniz.

Bu yazıda, web sitenizin altbilgisine eklemeniz gereken öğeleri önererek başlayacağız, ardından ilham almanız için kapak 15 zarif altbilgi tasarımına geçeceğiz!

Web Sitenizin Alt Bilgisine Neleri Eklemelisiniz?

Senin altbilginizi tasarlarken önce, onlar sitenizin altına ulaştıktan sonra yapacak bir ziyaretçi isterdim ne kendinize sormalısınız. 'Hakkımızda' sayfanızı okumalarını, bülteninize abone olmalarını veya Facebook sayfanızı beğenmelerini isteyip istemediğinize, başlık veya kenar çubuğunda bu seçenekleri aramak için tamamen geri kaydırmalarına güvenemezsiniz.

Ziyaretçilere başka neleri kontrol etmeleri gerektiğini hatırlatarak mümkün olduğunca kullanışlı hale getirin. Bir web sitesi altbilgisine yerleştirilecek en yaygın bileşenlerden bazıları şunlardır:

• Telif hakkı bilgileri
• İletişim bilgileri (telefon numarası, e-posta adresi)
• Adres (isteğe bağlı harita ve yol tarifleriyle birlikte)
• Site haritanıza, gizlilik politikanıza, kullanım şartlarınıza, basın kitinize vb. bağlantılar.
• Gezinme bağlantıları
• Popüler konulara ve/veya son blog gönderilerine bağlantılar
• Yaklaşan Etkinlikler
• Sosyal medya simgeleri ve/veya widget'ları
• Bülten kayıt formu
• Üyeler için giriş alanları
• Site arama alanı
• Mini resim galerisi
• Logo veya marka görselleri
• Görev beyanı
• Para iade garantisi
• Ödüller, sertifikalar, dernekler
• referanslar
• Gömülü video
• Büyük “harekete geçirici mesaj” düğmesi (bağış yapmak, sipariş vermek, iletişim kurmak, abone olmak vb.)

Altbilginize dahil olmak üzere aklınıza gelebilecek her şeyi kesinlikle sıkıştırmaya çalışmaktan kaçının. Bunun yerine, en önemli içerik seçeneklerinden sadece birkaçını seçin ve bunları temiz ve çekici bir şekilde sergilemeyi deneyin, belki de ziyaretçilerinizin yapmasını istediğiniz gerçekten büyük bir şeyi büyütüp vurgulayın.

Bir altbilgiye eklemek istediğiniz çok fazla bilgi varsa, sayfanın altından uzanan ve ziyaretçininki kadar kaplayan büyük altbilgi bölümleri olan 'yağlı altbilgi' tasarımından yararlanmak isteyebilirsiniz. aşağıya kaydırdıklarında tüm bilgisayar ekranı. Çok fazla bağlantı varsa, sütunları kullanmak ve altı çizili metinden kaçınmak, altbilginizin daha düzenli ve taranabilir görünmesine yardımcı olabilir.

Şimdi bu 15 zarif altbilgi tasarımına geçelim!

1. Tessmae'nin Tamamen Doğal

Tessmae's, minimal bir görünüm sağlayan harika bir kalın altbilgi örneği sağlar. Çoğu site, altbilgilerini içeriğinin geri kalanından ayırmanın bir yolu olarak genellikle koyu bir arka plan kullansa da, bu açık kalır ve okumayı çok kolaylaştırır.

Bu altbilgide, daha büyük metin ve sitenin genişliğini kapsayan büyük boyutlu bir kayıt formu içeren haber bültenine kaydolma konusunda net bir vurgu vardır. Altında, bazı şık görünümlü sosyal simgeler en altta öne çıkarken, gezinme bağlantılarına düzgün bir şekilde organize edilmiş sütunlara erişilebilir.

Bu özel alt bilgi ile iyi çalışan şey, ziyaretçinin haber bültenine kaydolarak harekete geçmeye teşvik edilmesinin açık olmasıdır. Ama bunu yapmak istemezlerse, yapılacak en belirgin ikinci şey Tessmae'nin numarasını aramak veya sosyal profillerini kontrol etmek olacaktır. Ve son olarak, sitede daha fazla bilgi için göz atmak istiyorlarsa bu gezinme bağlantıları oradadır.

2. Best Made Co.

Best Made Co., sitenin ana bölümünden net bir ayrım oluşturmaya devam ederken beyaz arka planını altbilgiye kadar genişleten başka bir çevrimiçi perakende sitesidir. Bu durumda, bu ayrımı oluşturmak için akıllı bir yatay gezinme menüsü eklenir.

Menüyü yalnızca bu dört bağlantıyla sınırlı tutmak, kullanıcıların tıklanacak her türlü bağlantıdan bunalmamalarını sağlar. Altbilginin tam ortasında şirket, markalı görüntüleri garantisiyle birleştirir.

Marka imajı en çok göze çarpan şey olsa da, solda davet eden haber bülteni kayıt formunu ve sağda iletişim bilgilerini fark etmek yeterince kolaydır. Bu altbilgide yer alan seçeneklerin sayısını minimumda tutarak, ziyaretçiler daha sonra ne yapacaklarını çok net bir şekilde anlayabilirler.

3. Füzyon Tasarımı Yaratıcı Çözümler

Fusion Design Creative Studios, yalnızca temel gezinme bileşenlerini çok yaratıcı bir şekilde organize eden gerçekten şık görünümlü bir altbilgiye sahiptir. Altbilginin kendisi karanlık ve güzel bir arka plan görüntüsüne sahip olsa da, aslında onunla çelişmek yerine üstündeki içeriği tamamlıyor.

Üç sütun, bu arka plan görüntüsüyle fazla uğraşmadan bu özel altbilgi için gereken doğru miktardır. Her sütunda yer alan metnin hizalanmasının (sola hizalanmış, ortalanmış ve sonra sağa hizalanmış) iyi bir denge oluşturmaya nasıl yardımcı olduğuna dikkat edin. Son olarak, en altta öne çıkan ortalanmış sosyal simgeler var.

Aşağı kaydırırken site genelinde birçok arka plan görüntüsü bölümü görülebilir, bu nedenle altbilgi, güzel bir şekilde aktığı başka bir bölüm gibi hissettirir. Ziyaretçiler daha sonra hizmetlerinin yaratıcı özelliklerini kontrol etmek, genel gezinme bağlantılarından onlar hakkında daha fazla bilgi edinmek, onlarla telefonla iletişim kurmak veya sosyal medya üzerinden bağlantı kurmak isteyip istemediğine karar verebilir.

4. Brian Gardner

Bir altbilginin, 'dolgun' bir altbilgi olsa bile, üç veya dört sütunluk bir dizi kullanarak bir ton bilgi içermesi gerekmez. Brian Gardner'ın kişisel web sitesi bunun harika bir örneğidir ve yukarıdaki önceki örnekte gördüğümüze benzer bir arka plan altbilgi resmi içerir.

Arka plan görüntüsü, zarif ama çok baskın olmayan basit iki renkli bir renk şemasına yapışır. Dahil edilen tek içerik, bazı kısa alıntılar, sosyal simgeler ve üç gezinme bağlantısıdır – genel sitenin son derece minimal görünümüne uygundur.

Bu altbilgiyle çok iyi çalışan şey, çok basit ve incelikli olmasına rağmen yine de ziyaretçilere tam olarak ne yapmaları gerektiğini söylemesidir. Aklınıza gelebilecek her gezinme bağlantısıyla süslemek zorunda kalmadan bir altbilgiyi ne kadar harika gösterebileceğinizi gösteriyor.

5. Piksel

Çoğu ziyaretçinin muhtemelen bir altbilgide görmek isteyeceğinden daha fazla bilgiyi çok fazla dağıtmadan dahil etmenin kesinlikle yolları vardır. Pixel bunu küçük metinler, basit yazı tipleri, zıt renkler ve farklı genişliklerde sütunlar kullanarak güzel bir şekilde başarır.

Ziyaretçiler tam olarak hangi metnin tıklanabilir olduğunu (parlak turkuaz metinle temsil edildiği gibi) ve hangisinin onları bilgilendirmek için orada olduğunu (beyaz metinle karakterize edilir) bilir. 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, sunulan çeşitli bilgi türlerini hızlı bir şekilde tanımlayabilmek açısından her şeyi düzenli ve göze kolay tutma konusunda harika bir iş çıkarır. Ziyaretçiler, bir sonraki adımda ne yapacakları konusunda çok çeşitli seçenekler arasından seçim yapma rahatlığını yaşarlar.

6. eRated

eRated, arka plan olarak siyah gibi çok koyu bir renk kullanırken ne kadar temiz ve okunması kolay yapabileceğinizi gösteren bir web sitesi altbilgisine sahiptir. Burada kullanılan yalnızca üç sütun vardır ve bunların tümü ziyaretçilere benzersiz bir seçim seçeneği sunar.

Özellikle işe yarayan şey, açık renkler ve geniş boşluklarla farklı bilgi türlerini vurgulayan simgelerin birleşimidir. Sosyal simgelerin nasıl bir araya toplanmadığına dikkat edin; Keşfet sütununun altındaki madde işareti simgeleri de değildir.

Bu alt bilgi, yalnızca tek bir net harekete geçirici mesajı vurgulamaya karar vermemiş ancak aynı zamanda görüntülenecek çok fazla seçeneği olmayan herkese büyük ilham kaynağı olacaktır. Pratik olarak herhangi bir web sitesi, bunun gibi basit ve çok yönlü bir altbilgi tasarımından yararlanabilir.

7. İşbirliği

Collabogive, basitlik ve güçlü bir harekete geçirici mesaj içeren, biraz daha küçük bir altbilgiye sahip bir örnektir. Burada, büyük haber bülteni kayıt formu, tüm altbilginin neredeyse yarısını kapladığı için ana odak noktasıdır.

Kayıt formuna ek olarak, Collabogive'ın sütun altbilgisi trendini sol tarafta daha küçük ve daha kompakt hale getirerek nasıl kullandığını görmek ilginç. Bunaltıcı ziyaretçilerden kaçınmak için dört sütunun her biri için sadece üç seçenek seçildi.

Öne çıkan büyük bir kayıt formu ve üç veya dört sütun ek seçenek açısından her iki dünyanın da en iyisini isteyenler için, bu altbilgi bunun için ideal bir model olarak hizmet edebilir. Ayrıca, tüm bilgisayar ekranını kaplayan gerçekten şişman altbilgi tasarımının büyük bir hayranı olmayan herkes için idealdir.

8. Griflan Tasarım A.Ş.

Altbilgideki büyük bir harekete geçirici mesajın, yukarıdaki birkaç örnekte gördüğümüz gibi, büyük boyutlu bir kayıt formu olması gerekmez. Griflan Design Inc. için, altbilginin ortasındaki o büyük kırmızı düğmeden, ziyaretçilerinin ideal olarak e-posta yoluyla kendileriyle iletişim kurmasını istedikleri açıktır.

Aslında bu, orada altbilgide herhangi bir gezinme bağlantısı sağlamayan gördüğümüz bir örnektir. E-posta düğmesi ve alttaki renkli sosyal simgelerin yanı sıra, güzel bir şekilde göze çarpıyor, bakılacak başka bir şey yok – ve sorun değil! Bunun gibi siteler için iyi çalışıyor.

Sonuçlarınızın sizinle doğrudan iletişim kuran ziyaretçilerden geldiği kişisel veya küçük işletme ile ilgili bir web siteniz varsa, fazladan gezinme bağlantılarını dışarıda bırakan ve bunun yerine iletişim bilgilerine büyük ölçüde odaklanan bir altbilgi, daha fazlasını teşvik etmede gerçekten etkili olabilir. Ziyaretçilerin sizinle iletişim kurması için. Bir tür eylemde bulunmalarını istiyorsanız, ziyaretçilerin her zaman hatırlatıcıya ihtiyacı vardır.

9. Kaliforniyalı Baxter

Baxter of California'nın web sitesi altbilgi tasarımı, Collabogive'da gördüğümüze benzer; sol tarafta mini sütunlar ve sağ tarafta büyük bir haber bülteni kayıt formu bulunur. Ancak bunun bahsetmeye değer birkaç farklılığı var.

Birincisi, beyaz bir arka plana sahip bir altbilginin başka bir harika örneği. Ayrıca Collabogive'ın alt bilgisinden daha büyüktür, yani sütunlar o kadar küçük görünmez. Daha fazla bağlantı için yer var ve bağlantı metni, sosyal simgelerin altlarına rahatça sığabileceği kadar küçük.

Altbilginize eklemeniz ve vurgulamanız gereken net talimatlarınız varsa, bunu çok büyük ve dağınık göstermeden nasıl başaracağınıza ilişkin fikirler için Baxter of California'nın tasarımına bakabilirsiniz. Kayıt formunun altındaki "ilk satın alımınızda %15 indirim kazanın" mesajının metni, bu uzunlukta bir cümle için çok büyük, ancak içeriğin geri kalanı minimal ve iyi dengelenmiş olduğu için işe yarıyor.

10. Kıvılcım Kutusu

Sparkbox, diğer web sitelerinde genellikle görmediğiniz bir altbilgi tasarımına sahiptir. İlk bakışta, sol tarafta adres bilgileri ve sağ tarafta bazı sosyal simgelerle sitenin nasıl yapıldığını görmek için bir bağlantı içeren yeterince basit görünüyor.

Ortada, “Daha Fazla Alt Bilgi?” etiketli bir düğme var. büyük bir haritayı ve yaklaşan etkinlikleri görmek için tıklayarak genişletebilirsiniz. Meraklı ziyaretçilerinizin sitenizin daha fazlasını keşfetmesini sağlamanın benzersiz bir yolu hakkında konuşun!

Bu, gerçekten benzersiz bir altbilgi tasarımı arayan ve onu oluşturma becerisine (veya en azından bunu yapacak birini tutacak paraya) sahip biri için ilginç bir fikir olabilir. Genişletilebilir ve daraltılabilir bölümler, bir web sitesinin diğer ana alanlarında sıklıkla kullanılan şık bir tasarım trendidir, peki neden altbilgi de olmasın?

11. Molamil

Molamil'in genel olarak göz atmak için gerçekten harika bir web sitesi var ve bir altbilgi ile sona eriyor (menüsü olarak ikiye katlanıyor), bu da bir tür geleneksel altbilgi tasarımını alıyor ve sitenin tuhaflığına uyması için biraz renklendiriyor. Bu, ekranın tamamını kaplaması amaçlanan ve içeriğin etrafında minimal bir görünüm için yeterli alan sağlayan bir alt bilgidir.

İletişim bilgileri için bir sütun, gezinme için bir sütun ve sosyal medya için bir sütun vardır. Çok fazla boşluk, tüm seçeneklerin kolayca okunmasını sağlar ve buna benzer bir tasarım stili istiyorsanız, muhtemelen daha süslü yazı tiplerinden kurtulabilirsiniz.

Esasen, bu altbilgi iyi çalışıyor çünkü sayfaya doğru kaydırdığınızda her şeyi mümkün olan en temiz ve en basit şekilde öne ve ortaya koyuyor. İlginç ve farklı altbilgi tasarımına meraklıysanız, bunu kendi benzersiz yönteminizle yeniden oluşturmaya ve düzeltmeye değer olabilir.

12. Jenier Çay Dünyası

Jenier World of Teas, tamamen görsel tasarımla ilgili mükemmel bir web sitesi altbilgisine sahiptir. Altbilginin ayrılması, sayfa boyunca akan dalgalar ve üzerinde yüzen bir gemi silueti ile bir su kütlesinin ufkunu oluşturarak yapılır.

Altbilgi içeriği, ziyaretçilerin haber bültenlerine kaydolmasını, iletişim kurmasını veya sosyal medyada bağlantı kurmasını isteyen metin görüntüleri ile güzel bir şekilde tasarlanmıştır. Bu, herhangi bir gezinme bağlantısı içermeden gerçekten harika görünen bir alt bilgi daha.

Altbilgisine daha fazla görsel çekicilik getirmek isteyen herkes bundan ilham alabilir. Güzel grafikler, alt bilginizi ve içeriğini fark etmenin kesin yoludur.

13. Smoothie'leri Kaydedin

Savse Smoothies, altbilginizi temelde birden çok alanla neredeyse tam boyutlu bir katılım formuna nasıl dönüştürebileceğinizi gösterir. Bültene kaydolmak, ziyaretçilerine sayfanın sonuna ulaştıklarında göndermek istedikleri açık mesajdır.

Büyük formun altında ziyaretçiler, işletme ile nasıl iletişime geçileceğini kolayca görebilir ve sosyal medyada onları takip edebilir. Basit, okunması kolay ve karışıklık yok.

Bu alt bilgi, bülten kayıtlarını artırmaya çalışan herhangi bir kişi veya işletme için büyük bir ilham kaynağı olabilir. Ve en iyi yanı, eklenecek bir sürü bağlantınız olmadığı sürece, onu diğer yaygın alt bilgi içeriği seçenekleriyle de birleştirebilmenizdir.

14. işlev

Peki, ekstra gezinme seçenekleriyle doldurmak istemediğinizde altbilginizin harika görünmesini nasıl sağlarsınız? fffunction bunu bazı ilginç istatistikler ekleyerek ve bunları farklı yazı tipleri ve renklerde görüntüleyerek yapar.

Ziyaretçilerinizle paylaşmaya değer olabileceğini düşündüğünüz gerçekler, rakamlar veya başka bilgiler varsa, bunları yaratıcı bir şekilde sergilemek için alt bilginizi kullanmak, ziyaretçilerinizi eğitmenin, eğlendirmenin ve hatta onlarla ilişki kurmanın düzgün bir yolu olabilir. Bu tür içeriğin altbilgilerde çok sık kullanıldığını görmüyorsunuz, bu da onu daha da ilginç kılıyor.

15. 13 Yaratıcı

13 Creative'in altbilgi tasarımının herhangi bir sitede çoğaltılması oldukça imkansız olsa da, altbilginizin tasarımını sitenizin geri kalanıyla nasıl uyumlu hale getireceğiniz konusunda daha fazla düşünmenize yardımcı olabilecek potansiyel bir örnek olarak burada gösterilmeye değer. doğal ve güzel görünüyor. 13 Creative, ana içeriğini öne çıkarmak için bir not defteri tasarımı kullanır ve ardından akıllıca altbilgi olarak yer imi fikrini kullanır.

Bu tasarım türü, içeriğin altbilgide minimumda tutulmasına da yardımcı olur. Altbilginize çok sayıda gezinme bağlantısı ve diğer seçenekler eklemek istiyorsanız, yer imi veya başka bir görsel tasarım çok iyi çalışmayabilir, ancak bu durumda gerçekten göze çarpıyor.

Çözüm

Ziyaretçilerinize web sitenizin alt kısmına ulaştıklarında bir sonraki adımlarını atmaları için birkaç iyi seçenek sunmak çok önemlidir. Ve yukarıdaki örneklerden, sayfa görüntüleme, haber bültenine kaydolma, sosyal takipçiler, müşteriler veya elde ettiğiniz müşterilerin sayısında potansiyel olarak büyük bir fark yaratabilecek birçok yaratıcı yol olduğu açıktır.

Yukarıdaki örneklerden hangi altbilgi favoriniz ve neden? En çok neyi beğendiğinizi bize bildirmek için aşağıya bir yorum bırakın!

Makale küçük resmi Wiktoria Pawlak / Shutterstock.com