Güzel Blog Tasarımının En İyi Örneklerinden 22'si

Yakın tarihli bir ankete göre, müşterilerin %70'i uzman ve içeriden tavsiyelere güveniyor. Bu doğru - bu, çoğu insanın blog yazarlarına ünlülerden, gazetecilerden veya politikacılardan daha fazla güvendiği anlamına gelir.

Ancak, insanların blogunuza ilk etapta aşık olmalarını nasıl sağlarsınız? (Tabii dikkat çekici içeriğin dışında.)

Nasıl ki web sitenizin ana sayfası işinizin ön kapısıysa, blogunuzun tasarımı da tıpkı bir karşılama paspası gibi, iş blogunuzun ön kapısıdır.

İnsanları görsel olarak çekemiyorsanız, içeriğinizi gerçekten okumaları (ve umarız abone olmaları) için sonraki adımları atmalarını nasıl sağlayacaksınız? Kaliteli içerik oluşturmayı bitirdikten sonra, onu blogunuzun ne hakkında olduğunu açıkça belirleyecek şekilde sunma zorluğuyla karşı karşıya kalırsınız.

Resimlerin, metinlerin ve bağlantıların doğru şekilde gösterilmesi gerekir — aksi takdirde okuyucular, çekici, takip etmesi kolay ve daha fazla ilgi uyandıracak şekilde gösterilmezse içeriğinizi terk edebilir.

Bu nedenle, okuyucularınız için mükemmel blogu tasarlama konusunda sizi doğru yola sokmak için bazı blog ana sayfası örnekleri derledik. Aşağıdakilere göz atın.

Güzel Blog Ana Sayfa Tasarımının İlham Veren Örnekleri

1. Scout'a Yardım Edin

Bazen en iyi blog tasarımları aynı zamanda en basit olanlarıdır. Müşteri hizmetleri yazılımı üreticisi Help Scout, blogunda sevdiğimiz benzersiz ama minimalist bir tasarım kullanıyor - kopya ve görselleri sınırlıyor ve negatif alanı kucaklıyor.

Bu blog hakkında özellikle sevdiğimiz şey, son veya özellikle popüler girişleri vurgulayan "En Son Gönderiler" bölümü de dahil olmak üzere tüm gönderiler için öne çıkan görsellerin kullanılmasıdır. Bu görüntüler okuyucuların dikkatini çeker ve gönderinin ne hakkında olduğunu gösterir. Ve işe yarıyor - bu blogun tasarımıyla ilgili her şey temiz ve okunabilir diyor.

2. Microsoft İş ve Yaşam

Tam açıklama: Daha önce Microsoft'un mikro sitelerinden tamamen fışkırdık. Eski tarz bir markayı canlandırmanın güzel, etkileşimli ve ilham verici marka içeriğine sahip bir blogdan daha iyi bir yolu var mı? Ayrıca bu hikayelerin düzeninde yer alan kare görseller Microsoft logosunu anımsatıyor. Bu, değerli marka tutarlılığına ulaşmasına yardımcı olur.

Microsoft Work & Life aynı zamanda bir işletme blogunun genel bir marka değişikliği için nasıl önemli bir varlık olabileceğinin en iyi örneğidir. Son yıllarda Microsoft, büyük ölçüde Apple ile rekabete yanıt olarak markasını insancıllaştırmaya çalıştı.

"Work & Life" mikro sitesinin basit bir sloganı var: "İşte, okulda, evde ve oyunda insanların bağlantıda, meşgul ve üretken kalmasına nasıl yardımcı olduğumuzu öğrenin." Tabiri caizse Microsoft'un daha yumuşak tarafı.

Belirli bir marka mesajını iletmeye çalıştığınızda, bunu hem estetik hem de içerik açısından iletmek için blogunuzu kullanabilirsiniz.

3. pando

İyi tasarlanmış bir blogun önemli bir yönü, tutarlı bir renk şeması ve stildir. Ne de olsa tüketicilerin %80'i, rengin bir markanın bilinirliğini artırdığını söylüyor.

Renk tutarlılığının tasarımın daha çeşitli unsurlarını nasıl birleştirebileceğini görmek ilginç. Başlangıç ​​döngüsünü araştıran bir blog olan Pando, sitesinin çeşitli bölümlerinde bir dizi renk paleti (turuncu, yeşil, soluk mavi, lavanta ve koyu sarı) içerir. Bu renkler arka planda, vurgulama çubuklarında ve metnin belirli alanlarında görünür.

Ancak aynı zamanda birkaç farklı yazı tipi de kullanır; bunların tümü, uyumlu bir renk şemasıyla birbirine bağlandığında kusursuz görünmeyi başarır.

4. Tasarım Sütü

Çevrimiçi bir çağdaş tasarım mağazası olan Design Milk, gönderilerini vurgulamak için basit bir düzen kullanıyor. Sol üstteki "Oku"nun yanındaki ok aşağıyı gösteriyorsa, çeşitli makaleler için öne çıkan görseller ve teaser metinleri arasında gezinebilirsiniz. "Oku"nun yanındaki ok yukarıyı gösteriyorsa, blog konularının ve vurgulanan gönderilerin mükemmel bir vitrini görürsünüz.

Bu, okuyucuları sitede daha uzun süre kalmaya teşvik etmeye yardımcı olan dahili bir bağlantı stratejisidir.

Her gönderinin üst kısmındaki sosyal simgeler, sitenin genel görünümüne hoş bir katkı sağlar. Kolay fark edilirler ve Design Milk'in içeriğini paylaşmayı kolaylaştırırlar. (Blogunuza sosyal düğmeler ekleme hakkında daha fazla bilgi edinmek için bu gönderiye göz atın.)

5. Fübiz

Bir sanat ve tasarım blogu olan Fubiz, harika kişiselleştirmeler de içeren gerçekten şık bir tasarıma bir örnek.

Blogun ana sayfası, okuyucuların "Öne Çıkanlar" arasında yan kaydırma yapmasını kolaylaştırır. Bunun altında, ziyaretçilerin "Sanat Aşığı"ndan "Serbest Çalışan"a kadar kişiliklerini, konumlarını ve aradıkları içerik türünü seçebilecekleri Yaratıcılık Bulucu yer alır. Buradan, okuyucular kendilerine özel olarak sunulan içeriğe göz atabilir.

Görüntüleri de sevmeden edemiyoruz. Öne çıkan her görüntünün farklı bir stili vardır. Bu güçlü fotoğrafları vurgulamak için tasarımı kullanan Fubiz, ziyaretçileri içeriğine görsel olarak çekebiliyor.

Benzer bir görünüm için Envato pazarındaki CMS Hub tema koleksiyonuna bakın.

6. Web Tasarımcı Deposu

"Webdesigner Depot" gibi bir adla bu tasarım haber sitesinin görsel açıdan çekici olması hiç de şaşırtıcı değil.

Özellikle sevdiğimiz bir şey, her bir gönderideki duyarlı resimlerdir. Okuyucular bir dizi makale üzerinde gezinirken görüntünün ince hareketi, ziyaretçilerin gözlerini yakalamaya yardımcı olur.

Ve en son makaleyi vurgulamak için öne çıkan görselin etkili kullanımına göz atın. Bu yaklaşım, izleyiciyi anında blogun en son içeriğine çeker.

Dahası, renk şeması, arka plan ve yazı tiplerinin tümü tutarlıdır; bu da bu blogun profesyonel görünmesini sağlar, ancak görmeye alışık olabileceğiniz temel blog şablonlarından farklıdır.

7. Ezilebilir

Demek istediğim, sadece şu başlık resmine bakın - koyu renkler, tanınabilir gadget'lar ve zıt metin. Kesinlikle okuyucunun dikkatini çekiyor - amaçlanan kelime oyunu değil.

Mashable, içeriğini ana sayfada göze çarpan üç bölüme ayırır:

• Yeni gönderiler, büyük bir öne çıkan görsel ve vurgulanan üç blokla dikkat çekiyor.
• Her bölüm için gönderiler, iki ila üç sütunun üstünde öne çıkan bir resim ve altında kısa bir başlık listesi ile dikkat çekiyor.
• Ardından, "Trend Olan" gönderiler sağda, gölge kutusu grafiğinin üzerinde kalın metinle gösterilir.

İçeriği görüntülemeye yönelik bu çok yönlü yaklaşım, okuyucuların hangi tür haberlerin kendileri için en önemli olduğuna karar vermelerine yardımcı olabilir. Dikkat çekici en çok okunan haberler, en sıcak gönderiler veya en çok ilgilendikleri konuyla ilgili haberler arasında hızlıca seçim yapabilirler.

Her gönderiyi sonlandıran "İlgili Hikayeler" de okuyucuları aradıkları içeriğe daha fazla bağlamak için harika bir özelliktir.

8. İngiliz + Co

Brit + Co ana sayfasıyla ilgili her şey temiz, sıcak ve misafirperver diyor. Dağınıklıktan arınmış, içeriği daha kolay sindirilebilir hale getiriyor ve düzen son derece düzenli.

Ekim ayının 1'indeki avokado fenerlerinden Sevgililer Günü için yemek tariflerine kadar sitenin mevsimselliğini de araştırıyoruz. Sevimli ve her hikayenin içeriğini gösteren renkli, eğlenceli fotoğraflarla dolu.

İncelikli "Bu Haftanın Hikayeleri" başlığı, popüler içeriği çok fazla göze batmadan tanıtmanın güzel bir yolu olarak da hizmet ediyor. Artı, bu kadar harika görsellerle, Pinterest'in selamını not aldık. Blogunuz çok çekici görüntüler içerdiğinde bu simgeyi eklemek önemlidir.

9. Tesco Gıda Aşk Hikayeleri

İngiliz market zinciri Tesco'dan Tesco Food Love Stories'in renkli ve tutarlı tasarımını seviyoruz.

Marka tutarlılığından nasıl uzaklaştığımızı hatırlıyor musunuz? Bu markanın logoyu fotoğraflarına ve öne çıkan videolarına nasıl doğal bir şekilde dahil ettiğine bakın.

Tesco'nun başardığı şey, büyük bir sadelik ve cesaret dengesidir. Düzen minimaldir, ancak sıkıcı değildir. Sıcak ve davetkar tonlar, her içeriğin vurgulanmasını ve tarifi vurgular ve fotoğraflar, site genelinde renk çizgileri ekler. Bu, özellikle genel marka konseptinize uyuyorsa, doğru görselin nasıl çekici bir "az-çoktur" görünümü elde edebileceğinin harika bir örneğidir.

10. Merkez Noktası

HubSpot'un blogu, gözleri yormayan pek çok heyecan verici içeriği sayfaya sığdırmanın bir yolunu buluyor. Ekranın üst kısmında büyük bir resim, başlık ve daha fazlasını okumak için harekete geçirici mesaj içeren bir blog gönderisi bulunduğuna dikkat edin. Öne çıkan görsel, dikkatleri üzerine çekmek için fotoğraf ve grafiklerin çekici bir kombinasyonu ile markaya özgüdür.

Sağda, blogdaki çok çeşitli içerikle okuyucuların ilgisini çekecek en iyi gönderilerin bir listesi var. Bu, okuyucuların HubSpot ile bağlantı kurmasını veya daha fazlasını öğrenmesini kolaylaştırır.

Artı, yine o tutarlılık var. Sayfayı aşağı kaydırmaya devam ettikçe, aradığınız konu, podcast, video veya blog gönderisi ne olursa olsun her bölüm görsel olarak tutarlıdır. Bu stratejiyi kullanmak, marka güveni oluşturmanıza yardımcı olabilir.

11. Tipografiyi Seviyorum

Tasarımla ilgileniyorsanız, yazı tiplerinin gücünü anlarsınız. Doğru yazı tipi, bir web sayfasında kelimelerin şarkı söylemesini sağlayabilirken, yanlış seçim, okunması zor bir karmaşa olabilir. Bu nedenle, yüzlerce yazı tipine sahip bir blog, blog tasarımıyla yaratıcı olmalıdır.

Tipografiyi Seviyorum, temiz ve basit bir tasarımla dengeyi tam olarak sağlıyor. Üç dikey sütun, blog temalarını ve en iyi gönderileri blog'a en son eklenenlerden ayırır. Bu arada, sağ taraftaki sütunu vurgulanan blog özelliklerine ayırır. Bu bölüm, blogun sol tarafındaki gönderilere hakim olan parlak renkleri ve şekilleri dengeleyen eğlenceli tıklanabilir grafiklere (tatlı kaset gibi) sahiptir.

İlk kez bir blog oluşturuyorsanız, ödünç almak için bu akıllıca bir yaklaşımdır. Başarılı bir blog başlatmak için bu ipuçlarına da göz atabilirsiniz.

12. 500 piksel

500px fotoğrafçılık blogu, öne çıkan bir makale ve okuyucuyu çekmek için büyük, cesur, yüksek tanımlı bir fotoğrafla öne çıkıyor.

Artı, sosyal bağlantıların tam orada olması, açıkça ekranın üst kısmında gösterilmesi ne kadar havalı? Okuyucuların içerikle ilgilenmesini sağlar ve fotoğrafların paylaşılmasını kolaylaştırır. Ayrıca resimli içerikler, Facebook'ta resimsiz gönderilere göre iki kattan fazla etkileşim alıyor.

13. Kablolu

Blogunuzda ne kadar çok konu varsa, okuyucularınız için deneyim o kadar kaotik olabilir. Wired'ın blog tasarımının canlandırıcı sadeliğini bu yüzden seviyoruz.

Ekranınızın boyutuna bağlı olarak, yalnızca ekranın üst kısmında sekiz veya daha fazla başlık olabilir, ancak bu tasarımın taranması ve derinleştirilmesi yine de kolaydır.

Her gönderi, sizi içine çekmek için öne çıkan bir resim içerir. Ardından, çarpıcı yazı tipi seçenekleri, her gönderi için kategoriyi, yazarı ve başlığı bir bakışta hızlı bir şekilde anlamanızı sağlar.

Blogunuz basit başladıysa ve büyüdükçe çalışmasını sağlamakta zorlanıyorsanız, bu blog yeniden tasarlamak için harika bir ilham kaynağı. Bu çalışma kitabını blog web sitenizi yeniden tasarlamak için de kullanabilirsiniz.

14. altın

Golde, harika iletişim için görüntüleri kullanan başka bir blog. Marka adını blogu "The Golden Hour" için bir başlangıç ​​noktası olarak kullanan Golde, öne çıkan bir görseli her blog gönderisinin odak noktası haline getiriyor.

Ardından muhteşem fotoğraf, her fotoğrafta sarı ve yeşil tonları kullanıyor. Bu, sizi her blog gönderisine çekmek için tutarlı, sıcak ve çekici bir his yaratır.

Bir gönderiye tıkladığınızda, bu blog, ürünleri, tarifleri ve diğer yararlı kaynakları öne çıkarmak için metnin altındaki alanı mükemmel bir şekilde kullanır.

15. Yeniden Kodla

Reklamlar, birçok blog için gelir elde etmenin yararlı bir yoludur. Birçok küçük işletme, ürünlerini ve hizmetlerini öne çıkarmak için bir blog sunar. Aynı zamanda, diğer bağımsız bloglar, içeriklerinden para kazanma ihtiyacı ile tasarımı dengelemek için mücadele edebilir.

Recode, asimetrik bir ızgara yapısı kullanarak en son teknoloji haberlerini sunar. Başlık metniyle eşleştirilmiş kalın küçük resimler, tamamı büyük harflerle kaplanmış metin içeren daha büyük resimlerle hizalanır.

Resim ve metne yönelik bu çeşitli yaklaşımlar, görüntüleyenlerin okumak istedikleri gönderiyi taramasını ve seçmesini kolaylaştırır. Düzen, bazı animasyonları da içerir ve bu, blog düzenine heyecan katar.

Bu tasarım, harika bir kullanıcı deneyimi olmasının yanı sıra, blogun gözleri rahatsız etmeyen reklamlarla iç içe geçmesini sağlar. Aynı zamanda organik içerikle karışmazlar ve Recode'un okuyucuları için özgün bir deneyim yaratmasına izin verirler.

16. Çoğul görüş

Bu blog, blog tasarımlarının çok süslü olması gerekmediğinin harika bir hatırlatıcısıdır.

Sayfanın üst ve ortasındaki kalın başlığa dikkat edin. Ardından, üstteki öne çıkan resimde parlak bir arka plan ve siyah üzerine beyaz basit bir metin kullanılır. Bu cesur marka varlığı, şirketin blogu boyunca sabit kalır.

Örneğin, temiz yazı tipleri logoyla eşleşir ve markanın net, bilgilendirici sesiyle aynı çizgide kalır. Izgara yapısı ve her bölümün başlıkları, blogda neler bulabileceğinizi anlamanızı kolaylaştırıyor.

Ayrıca üst kısımdaki kolay gezinilebilir arşiv bağlantılarını ve minimum kaydırma ile blog arşivini görmenin ne kadar kolay olduğunu da seviyoruz.

17. Mum boya

Birçok blog, okuyucularına sundukları her şeyden biraz göstermek ister. Ancak derinlik, okuyucular için genişlik kadar çekici olabilir. Ziyaretçilerinizin blog yazarlarınızın söyleyeceklerine dalmasını istiyorsanız, bu blog tasarımı onlara kolay bir seçim sunar; sadece okumaya başlayın.

Başlıkta genişletilmiş bir teaser ile, Crayon blogunun ekranın üst kısmındaki odak noktası en son blog yazısıdır. Bir okuyucu sayfayı aşağı kaydırdığında, blogdan daha fazla içeriğe sahip bir kılavuz bulacaktır.

Ayrıca, ilgilenilen blogları bir bakışta bulmayı kolaylaştıran konuya göre renk kodlamasını da seviyoruz. Burada daha fazla metin ileri blog tasarımı örneği görebilirsiniz.

18. Siyah Seyahat Kutusu

Herhangi bir karışıklığı gidermek için Black Travelbox valiz yapmaz. Seyahat için kişisel bakım ürünleri yapar. Ancak şirket, portatif balzamları, saç kremlerini ve daha fazlasını seyahat keyfi ile birleştirme konusunda harika bir iş çıkardı.

Ayrıca, bu şirketin "Travel and Slay" blogundaki kişiler, kanallar genelinde marka tutarlılığı hakkında bir iki şey biliyor. Blogun basit bir renk şeması vardır ve eşleşen yazı tipleri, mağazadan genel içeriğe kadar birleşik bir kullanıcı deneyimi oluşturmaya yardımcı olur. Aynı zamanda, okuyucuların dikkatini çekmek için cesur, renkli görseller kullanır.

Web sitesini ziyaret edin ve bir göz gezdirin - resimlerin bu kadar farklı olmasının harika olduğunu düşünüyoruz, ancak her blog girişi farklı bir "seyahat tutkusunu" vurguluyor. Ardından, her gönderiyi parlak fotoğraflar, akıllı röportajlar ve neşeli hikayelerle doldurur.

19. Piksel derecesi

Pixelgrade, yaratıcı insanlar ve küçük işletmeler için çarpıcı WordPress temaları oluşturan bir tasarım stüdyosudur. Blog sayfaları, net bir harekete geçirici mesaj ve kısa bir alıntıyla birlikte en son veya popüler blog gönderilerinden birini vurgulama konusunda harika bir iş çıkarıyor.

En sevdiğim yönü ise sayfa tasarımının markalarına %100 uyumlu olması. Bloglarının tasarımını beğendiyseniz, akıllı ve güzel tasarlanmış WordPress temalarından birini de denemek isteyebilirsiniz.

Daha fazla WordPress blog tasarımı fikri için, blogcular için WordPress temaları hakkındaki bu gönderiye göz atın.

20. BarkPost

HubSpot'ta köpekleri seviyoruz. Böylece köpek sahibi olarak hayata adanmış bir blog radarımıza girince dikkatimizi çekti.

Köpek abonelik kutusu şirketi BarkBox'ın blogu olan BarkPost, birçok nedenden ötürü harika bir tasarım örneğidir. İlk olarak, her başlıktaki büyük eğlenceli yazı tipine bakın — bir mobil cihazdan bile hızlı ve kolay okunabilir.

Sevimli görseller, her konu için gönderilerin de dikkat çekici olmasını sağlar ve tabii ki tümü markayla uyumlu, güvenilir mavi renktedir.

BarkPost'un kardeş şirketlerine dikkat çekmesi de hoşumuza gitti. İster köpek diş bakımıyla, ister yavru köpeğiniz için en iyi mamayla ilgileniyorsanız, bu eğlenceli blog tasarımı, hem köpek anne babalarının hem de köpek severlerin en son haberleri ve kaynakları bulmasını kolaylaştırıyor.

21. Şerefiye Endüstrileri Uluslararası

Kâr amacı gütmeyen kuruluşların blog yazamayacağını kim söylüyor? Hayır, yapmalılar. Sizinkini harika hale getirmek için bu nihai kar amacı gütmeyen pazarlama kılavuzuna göz atın.

Bu örnekte, Goodwill'in temiz, renkli navigasyonu (yine - güvenilir mavi) okuyucuyu bu blogun önemli unsurlarına çekiyor.

Gönderiler ayrıca düzgün bir şekilde konumlandırılmıştır ve okuyucular tarafından kolayca erişilebilir. Ayrıca ziyaretçiler, ekranın üst kısmındaki grafikteki basit düğmelerden bir konu seçerek kendileri için en önemli olan bilgi türünü seçebilirler.

Son olarak, Şerefiye blogunda kişisel hikayelere yapılan vurguyu seviyoruz. Bu tasarım, okuyucuları bu kuruluşun programlarına yönlendiren uzun biçimli tanıtımlara sahiptir. Bu yaklaşım, neden bu kadar çok insanın Goodwill'i desteklemeyi seçtiğini öğrenmeyi kolaylaştırır.

22. Yaylı

Kâr amacı gütmeyen blog trenini devam ettiren şey, kar amacı gütmeyen kuruluşların çoğunun en büyük kaynaklarını, kendini adamış insanları vurgulayarak basit bir ızgara biçimini mükemmel şekilde kullanan Springly'dir.

Bu blog, yararlı kaynaklar arayan kar amacı gütmeyen kuruluşlar için özlü metin ve net bir renk paleti ile basit bir tasarıma sahiptir.

Her makale kartında yazarın adı ve resmi yer alır ve dikkatleri katkıda bulunanlara çeker. Ayrıca, gönderiyi okumanın ne kadar süreceğini de gösterir.

Zamanı ve insanları ön plana çıkarmak, çoğu kar amacı gütmeyen kuruluşun odaklandığı şeyle uyumludur. Bu yaklaşım, blogu katkıda bulunma ve kullanma olasılığı en yüksek olanlar için daha değerli kılar.

Hala daha fazla ilham ve fikir mi arıyorsunuz? 70'ten fazla web sitesi blogu, ana sayfa ve açılış sayfası tasarımı örneğine göz atmak için burayı tıklayın.

En İyi Blogunuzu Oluşturmak İçin Bu Blog Tasarım Örneklerini Kullanın

Güzel bir blog oluşturmak sadece görünüşle ilgili değildir. Okuyucularınızın gerçekten aşık olmasını istiyorsanız, blogunuzun tasarımı kullanıcılarınızın ihtiyaç ve beklentilerine uygun olmalıdır. Onlar için en önemli olan nedir? Ve blogunuz başka kimsenin sunamayacağı ne sunuyor?

Bu ilham verici blog tasarımlarına göz gezdirmeyin. Blogunuzun hem izleyicilerinizle nasıl bağlantı kurabileceğini hem de blog tasarımınızı nasıl geliştirebileceğini hayal etmek için bunları bir sıçrama tahtası olarak kullanın. Ardından, okuyucu sayınızın büyümesini izleyin.

Editörün notu: Bu gönderi ilk olarak 2013'te yayınlandı ve kapsamlı olması için güncellendi.