2022'de Web Siteniz İçin 17+ En İşlevsel Ana Sayfa Tasarım Örnekleri

Güncelleme: 06 Nis 2022 Yazan: Tasarım Ekibi

Okuyucu Açıklaması: Sitemizdeki yönlendirme bağlantıları aracılığıyla satın aldığınızda, bir komisyon kazanabiliriz (sizden hiçbir ek ücret ödemeden)

Birisi web sitenizi ziyaret ettiğinde ve kırık resimlerle, okunması zor yazı tipleriyle, koyu renklerle ve net bir mesajla ana sayfanıza girdiğinde, web sitenizden en kısa sürede ayrılma ihtimalleri vardır. Bu nedenle, ziyaretçilerinizin kalması ve müşterilere veya okuyucuya dönüşmesi için mümkün olan en işlevsel ana sayfa tasarımına ihtiyacınız var.

İyi tasarım ana sayfasının temel amacı, ziyaretçilerinizi müşterilerinize veya hayranlarınıza dönüştürmektir. Ana sayfanızda, birinin tıklayıp kaydolabileceği veya ürününüz hakkında daha fazla bilgi edinebileceği herhangi bir harekete geçirici mesaj (CTA) yoksa, ne yapacaklarını bilemezler ve herhangi bir işlem yapmadan ayrılırlar. Bu nedenle odak noktamız, ana sayfa tasarımınızın en az bir veya iki belirli CTA'ya sahip olduğundan emin olmak olacaktır.

Amacımız, göze çarpan ve estetikle ilk kez gelen ziyaretçilerinize hitap eden bir ana sayfa oluşturmak için ne gerektiğini anlamak için çok çalışan tasarımcılar, UI/UX uzmanları ve geliştiricilerden oluşan ekipler tarafından oluşturulan birçok iyi tasarım ve işlevsel ana sayfayı incelemektir. İyi yapılandırılmış ana sayfanın ana ve en önemli yönleri olan yazı tiplerinin, renklerin, etiket satırlarının, sloganların ve eylem çağrılarının kullanımını tartışacağız.

Well Design Ana Sayfasının amaçları ve faydaları

Ziyaret ettiğiniz her web sitesinin farklı bir mesajı ve amacı vardır, hedef kitlenizin web sitenizin ana sayfasına geldiklerinde ne yapmasını ve anlamasını istiyorsunuz? En önemlisi, kim olduğunuzu ve daha sonra ne yapmalarını istediğinizi anlamalarıdır. Kısaca sloganınız ne yaptığınız ve web sitelerinizin ne hakkında olduğuna dair hızlı detayların açıklaması.

Çoğu ziyaretçi ilk olarak ana sayfanıza geleceğinden, işletmenizin veya web sitenizin ne olduğunu 2 saniyeden daha kısa bir sürede dönüştürmeniz gerekir, bu konuda resimlerinizin, renklerin, tipografinin, onları tutmak için harekete geçirme düğmelerinin güzel tasarım düzeni ile yapılacaktır. siteniz ve sunmak istediğiniz ürün veya hizmetiniz hakkında daha fazla bilgi edinmelerine yardımcı olun.

Daha fazla dönüşüm elde etmek için Kullanıcı Deneyimini (UX) ve Kullanıcı Arayüzünü (UI) iyileştirin

Görüntüler, ana sayfanızın düzeninde çok önemli bir rol oynar, insanların, nesnelerin, hayvanların, teknolojinin görüntüleri, ziyaretçilerinizin web sitenizin ne hakkında olduğunu birkaç saniye veya daha kısa sürede bilmelerini sağlar. Ayrıca hedef kitlenizi, web sitenizi ilk ziyaret ettiklerinde ne beklediklerini anlamamız gerekiyor. ana sayfanız çevrimiçi mağazada mı ve mal veya dijital ürün mü satıyorsunuz yoksa daha fazla bilgi odaklı mı? Nest şirketi evim için bana ürün satmaya çalışacak, ancak United Healthcare bana ihtiyaç duyabileceğim belirli sağlık sigortası hakkında bilgi verecek.

Sayfanıza iyi yerleştirilmiş harekete geçirme düğmeleri veya yeni ziyaretçilerinizin haftalık haberlerinize kaydolabileceği bülten kaydı ile ziyaretçilerinizi yakalamak için iyi tasarım ana sayfasının tüm özel yönlerini gözden geçireceğiz. Size özel web sitenizdeki logonun yerleşimi, yazı tipi boyutu, genel ana renkler ve neden bazı renklerin iyi çalıştığı ve bazı renklerin o kadar hoş olmayabileceği hakkında konuşacağız. Kullanıcı deneyiminin güzel bir akışa sahip olduğundan ve insanların sinirlenip sitenizden ayrılacakları için ana sayfanızda belirli bir bilgi veya ürün ararken kafalarının karışmamasını veya kaybolmamasını sağlamak istiyoruz.

En iyi ana sayfa nasıl düzenlenir ve tasarlanır?

Peki, iyi bir dönüşüm sağlayan ana sayfa tasarlamak için neye ihtiyacınız var? Öncelikle size en popüler şirketlerin web sitesi ana sayfalarından bazılarının açıklamalarıyla birlikte harika örnekler vereceğiz, böylece onları bu kadar harika yapan şeyi karşılaştırabilir ve görebiliriz. Bu, yeni başlayan herhangi bir tasarımcı için uzmanların ne yaptığı hakkında fikir edinmesi için iyi bir uygulamadır. Kendi web sitenizi yapmak istiyorsanız, başlamanıza yardımcı olacak ayrıntılı yazımız var. Sonuçlarınızdan memnun olmadan önce ana sayfanızı düzenlemenize ve farklı tasarımları test etmenize yardımcı olacak birçok ücretsiz grafik tasarım yazılımı vardır.

Ana sayfanızı akılda kalıcı kılmak için illüstrasyonlar, simgeler, vektör grafikleri gibi görseller kullanmanızı öneririz, stok fotoğraflar ana sayfanızı tasarlarken önemli bir rol oynar çünkü ziyaretçilerinizin kendilerini güvende ve hoş hissetmelerini sağlar.

Açıklamalı en iyi ana sayfa tasarım örnekleri ve onları en unutulmaz yapan şey

Artık birçok farklı kategoriden iyi tasarımlı ana sayfaların en iyi örneklerini nihayet görebiliyoruz, bu şirketlerin hepsi birçok kaynakla ve renkleri, yazı tiplerini, harekete geçirici mesaj düğmelerini birçok A/B testi yaptılar. hangi renklerin veya görüntülerin diğerlerinden daha iyi çalıştığını görmek için. İnsanların nereye tıkladıklarını ve nereye tıklamadıklarını görmek için ısı haritalarını kullanırlar, böylece harekete geçirici mesaj düğmesini o yere koyabilirler. Her bir web sitesi ana sayfası tasarımını neyin öne çıkardığını ayrıntılı olarak açıklayacağız.

1. Adobe

Adobe, reklam öğeleri için en iyi bilinen yazılım şirketlerinden biridir. Photoshop'tan After Effects'e kadar birçok tasarım projemizde Adobe kullanıyoruz. Yazılımlarının ücretsiz denemesi için kaydolmanızı istiyorlar, bu nedenle ana eylem çağrısı bu. “Ücretsiz” kelimesini gördüğünüzde, kaybedecek hiçbir şeyiniz olmadığı için muhtemelen onları bir deneyeceksiniz.

Kendi etkileşiminizi oluşturmak için Adobe yazılımını nasıl kullanabileceğinizi gösteren arka plan animasyonlu büyük kaydırıcıya sahip çok temiz ve düz ileri düzen. İkinci CTA, başlamaya hazır değilseniz, belki de sundukları farklı yazılım veya ürünlerden daha fazlasını öğrenmek isteyebilirsiniz.

Ana Renkler: Beyaz, Kırmızı, Siyah, Mavi, Turuncu, Yeşil
Slogan: Yaratıcı yolculuklar burada başlar.
Slogan: Video, tasarım, fotoğraf ve UI/UX uygulamalarımızla ilhamınızın akmasını sağlayın
Harekete Geçirici Mesaj (CTA 1): Ücretsiz İz Başlat
Harekete Geçirici Mesaj (CTA 2): Daha Fazla Bilgi Edinin

2. Yuva

Nest en büyük kamera ve termostat e-Ticaret web sitelerinden biri, çok sayıda ürün resmi kullanıyorlar, ana sayfayı ziyaret ettiğinizde tam olarak ne sattıklarını biliyorsunuz, ana büyük resimlerin altında sattıkları tüm ürünler var, böylece tıklayıp keşfedebilirsiniz satın almak için özel ürün.

Çok farklı ürünleri olduğu için, saygılar üzerinde belirli bir harekete geçirici mesaj butonları yok. Ana sayfa süper temiz ve profesyonel görünümlü, büyük yazı tiplerini kullanıyorlar. "Google Nest'e Hoş Geldiniz", yararlı evinizi oluşturun güzel sloganı burada kalmanızı ve daha fazlasını keşfetmenizi istiyor.

Ana Renkler: Beyaz, Siyah, Yeşil, Gri
Slogan: Google Next'e hoş geldiniz.
Slogan: Yardımsever evinizi inşa edin.
Harekete Geçirici Mesaj (CTA 1): Yok
Harekete Geçirici Mesaj (CTA 2): Yok

3. WordPress

Şirketimiz için kullandığımız ve sevdiğimiz şekliyle WordPress, internetteki tüm web sitelerinin %43'ünden fazlasını sağlayan en çok kullanılan web sitesi oluşturucudur. Ana sayfa, bir sonraki web sitenizi oluşturmak için yazılımı kullanmanız için sizi karşılayan büyük bir slogan ile çok temiz. Size sitelerini oluşturan diğer kişilerin resimlerini gösterirler, böylece hemen bugün başlayabilirsiniz.

WordPress, web sitenizi oluşturmaya başlamak için kullanabileceğiniz ve yükleyebileceğiniz temalara dayanmaktadır, ana sayfanızı görselleştirmenize ve yukarıda tartıştığımız gibi ihtiyaçlarınıza göre özelleştirmenize yardımcı olacak birçok ücretsiz portföy teması vardır.

Ana Renkler: Beyaz, Siyah, Mavi
Tagline: Dünyanın en popüler web sitesi oluşturucusuna hoş geldiniz.
Slogan: Web'in %43'ü WordPress üzerine kuruludur.
Harekete Geçirici Mesaj (CTA 1): Web Sitenizi Başlatın
Harekete Geçirici Mesaj (CTA 2): Yok

4. Kare boşluk

Squarespace, reklam öğeleri için en popüler web sitesi oluşturucularından biridir. Kendi kişisel veya e-ticaret web sitenizi kullanmak ve başlatmak için çok aynı, ücretsiz olarak deneyebilir ve ardından isterseniz aylık abonelik alabilirsiniz. Squarespace, başlamak için birçok modern ve temiz, kullanımı kolay hizmet öncesi şablona sahiptir.

Squarespace, mesajı iletmek için büyük resim ve çok büyük yazı tipleri kullanır, Her şeyi satmak için her şey ana slogandır. Ayrıca, web sitesi oluşturucularını test etmek isteyen herkes için sorunsuz olan ücretsiz denemenizi başlatmak için “Kredi kartı gerekmez” ifadesini eklerler.

Ana Renkler: Siyah, Pembe, Beyaz
Slogan: Her şeyi satmak için her şey
Slogan: Ücretsiz web sitesi denemenizi bugün başlatın
Harekete Geçirici Mesaj (CTA 1): Başlayın
Harekete Geçirici Mesaj (CTA 2): Başlayın

5. DropBox

Dropbox, sağ tarafta iki kişinin bilgisayar ekranına baktıklarını ve muhtemelen sahip olmanızı istedikleri ilk izlenim olan dosyaları paylaştığını gösteren güzel fotoğraflarını kullanır. Daha önce tartıştığımız gibi görüntülerin güzel kullanımı ve ana sayfanın ortasında bazı güzel simge illüstrasyonları.

Sol üst taraftaki büyük slogan, "Hayatı düzenli tut" ve altında mavi renkte yalnızca bir "Sizin için Planı Bulun" eylem çağrısı, üzerine tıklamanızı ve ne sunduklarını ve her bir planın ne kadar olduğunu görmenizi sağlar.

Ana Renkler: Siyah, Mavi, Turuncu
Slogan: Hayatı düzenli tutun ve çalışın - hepsi tek bir yerde
Slogan: Dropbox, tüm dosyalarınıza güvenli erişim sağlar.
Harekete Geçirici Mesaj (CTA 1): Size Uygun Planı Bulun
Harekete Geçirici Mesaj (CTA 2): Yok

6. Über

Uber, bir kişinin neredeyse tam ekran büyük bir görüntüsünü kullanır, bu durumda bir arabanın kapısını açan bir kadın, araba/taksi şirketi oldukları için insanları ve arabaları görüntü olarak kullanan, sloganı bile okumadan ne yaptıklarını bilmemizi sağlar. görüntüleri kullanmadan önce bahsettiğimiz çok güçlü.

Uber'in iki harekete geçirici mesaj düğmesi vardır, biri "Araba kullanmak için kaydolun", diğeri "Bir yolculuk rezervasyonu yapın" yani ya Uber sürücüsü olmak istersiniz ya da belirli bir yere Uber yolculuğu yapmak istersiniz. Bu, çoğunlukla görüntü ve beyaz ve siyah iki renk kullanan çok basit ve modern bir web sitesidir.

Ana Renkler: Siyah, Beyaz
Slogan: Sürücü koltuğuna geç ve paranı al
Slogan: En geniş aktif sürücü ağına sahip platformda sürün.
Harekete Geçirici Mesaj (CTA 1): Sürmek için kaydolun
Harekete Geçirici Mesaj (CTA 2): Araç rezervasyonu yapın

7. WooCommerce

WooCommerce, kendi çevrimiçi mağazanızı oluşturmak için en büyük e-ticaret platformlarından biridir. Çok basit ana sayfa düzeni neredeyse ikiye bölünmüş. Sol tarafta, iki harekete geçirici mesajla birlikte "İstediğiniz e-ticaret web sitesi oluşturun" güzel, büyük bir sloganınız var - biri "Yeni bir mağaza başlatın", size tam olarak ne yapmanız gerektiğini söyler.

Sağ tarafta, kendi çevrimiçi mağazanızı oluşturmak için kullanabileceğiniz web sitesi veya tema örnekleri vardır, kendi mağazanızı oluşturmanıza yardımcı olmak için iyi tasarlanmış ve kodlanmış birçok ücretsiz WooCommerce teması vardır.

Ana Renkler: Siyah, Beyaz, Mor
Slogan: Tam olarak istediğiniz e-ticaret web sitesini oluşturun
Slogan: WooCommerce, WordPress üzerine kurulu özelleştirilebilir, açık kaynaklı bir e-ticaret platformudur
Harekete Geçirici Mesaj (CTA 1): Yeni Bir Mağaza Başlatın
Harekete Geçirici Mesaj (CTA 2): Özelleştirin ve genişletin

8. Sıcak Kavanoz

Ana sayfa tasarımınızı tamamladıktan sonra, şirketi ısı haritasının arkasına sıcak kavanoz, ziyaretçilerinizin nereye tıkladığını ve harekete geçirici mesaj düğmelerinin doğru yerleştirilip yerleştirilmediğini görmek için onlarla kaydolmanızı şiddetle tavsiye ederiz.

HotJar ana sayfası çok basit ve moderndir, üstte büyük slogan ve sol tarafta yaratıcı illüstrasyon videosu ve sağda harekete geçirici mesaj düğmesi bulunur. Bu, her gün bunu yapan bir şirketten bekleyeceğiniz gibi, çok güzel ve temiz bir UI/UX düzenidir. İyi tasarlanmış ana sayfaya harika bir örnek, ayrıca size geçen ay kaydolan 26.657 şirketin güzel istatistiklerini verir.. geçen ay kaç yeni kişinin kaydolduğu konusunda size güven verir.

Ana Renkler: Siyah, Beyaz, Turuncu
Tagline: Kullanıcıların sitenizde nasıl davrandığını , neye ihtiyaç duyduklarını ve nasıl hissettiklerini hızlı bir şekilde anlayın.
Slogan: Verileri ve geri bildirimleri yavaş, manuel olarak harmanlama günleri sona erdi.
Harekete Geçirici Mesaj (CTA 1): Ücretsiz Deneyin
Harekete Geçirici Mesaj (CTA 2): Google'a kaydolun

9. eDüğün

Web'deki en büyük düğün planlama araçlarından biri olan eWedding, "921.470+ çiftler yanlış olabilir" istatistikleriyle üstte temiz ve basit düzen büyük slogan, güvenilir bir şirket oldukları konusunda size gönül rahatlığı sağlar. Kaydolduğunuzda araçların nasıl göründüğünü gösteren güzel büyük resim.

Daha önce bildiğimiz gibi CTA "Kullanımı Ücretsizdir" Ücretsiz çok güçlü bir harekete geçirici mesaj düğmesidir, çünkü kaybedecek hiçbir şeyleri olmadığı için birçok kişi ürününüzü deneyecektir. Tye ayrıca görsel estetik için metinle birlikte güzel illüstrasyon simgeleri kullanır.

Ana Renkler: Mor, Beyaz, Yeşil
Tagline: Düğün planlama ve yönetim araçlarında yeni standart
Slogan: Planlayıcınızı ateşleyin, 7/24 sizin için çalışıyoruz
Harekete Geçirici Mesaj (CTA 1): Kullanımı ücretsiz
Harekete Geçirici Mesaj (CTA 2): Şimdi Başlayın

10. garanti

En büyük medicare çevrimiçi web sitelerinden biri olduğundan emin olun, planınızı bulmanıza yardımcı olabileceği için çizgi film görünümlü kadınlara sahipler, gerçek kişiyle konuşmak istemiyorsanız sanal asistanı deneyebilirsiniz. Kolayca yolunuzu bulmak için çok fazla beyaz alana sahip, çok temiz, iyi tasarımlı web sitesi.

Planları görmek veya planları karşılaştırmak için tıklayabilir veya telefon numarasını sayfanın ortasına koyduklarından onları arayabilirsiniz. Kullanabileceğiniz tüm seçenekleri görmek güzel, böylece ne yapacağınızı bilememekten vazgeçmezsiniz.

Ana Renkler: Siyah, Beyaz, Yeşil
Slogan: Ben Emma, ​​sanal Medicare yardımcınız.
Slogan: Ürünleri bulmanıza, fiyatları karşılaştırmanıza ve kendi başınıza kaydolmanıza yardımcı olabilirim.
Harekete Geçirici Mesaj (CTA 1): Planlara Bakın
Harekete Geçirici Mesaj (CTA 2): Emma'yı Deneyin

11. Bluehost

En büyük barındırma sağlayıcılarından biri olan Bluehost, barındırma ve web siteleri oluşturmaya odaklanan çok güzel ve temiz bir ana sayfa tasarımına sahiptir. Ana sayfa ikiye bölünmüştür, solda sitenizi güzel bir harekete geçirici mesajla barındırmayı teklif ediyorlar ve sağda "inşa etmeye başla" CTA ile web sitenizi oluşturmaya başlayabilirsiniz.

Ortadaki göze çarpan bir kişi sizi sitenizi oluşturmaya ve oluşturmaya davet ediyor, kolay ve basit, hoş ve temiz bir mesaj. Ayrıca, 2021'de en iyi barındırma için PC editörlerinin tercihi oldukları için bir rozetleri var, ödül olarak güvenlik ve güvenliği iyi kullanıyorlar.

Ana Renkler: Siyah, Beyaz, Mavi
Slogan: Hepsi Bir Arada Web Barındırma.
Slogan: Yeni Oluşturucumuz, WordPress web sitesi oluşturmayı eğlenceli ve kolay hale getirir.
Harekete Geçirici Mesaj (CTA 1): Sitenizi barındırın
Harekete Geçirici Mesaj (CTA 2): Oluşturmaya başlayın

12. Kanun Bul

FindLaw, yasal konulara veya posta koduna göre arama yapabileceğiniz, Amerika Birleşik Devletleri'ndeki tüm avukatların veri tabanına sahip bir web sitesidir. Avukat bulmanın çok kolay olduğunu gülen, tıpkı sizin gibi büyük bir insan imajı kullanıyorlar. FindLaw, ırk ve cinsiyete dayalı insan çeşitliliği ile sitenin ana odak noktası olarak görüntüyü kullanır.

Tam ortasında, bilgilerinizi veya posta kodunuzu girebileceğiniz ve bölgenizdeki tüm avukatların veritabanını kolayca arayabileceğiniz büyük bir arama çubuğu vardır. “Avukatımı Bul” CTA'sı parlak turuncu renktedir, bu yüzden onu kaçırmazsınız.

Ana Renkler: Siyah, Beyaz, Turuncu, Gri
Slogan: Tüm Yasal İhtiyaçlarınız İçin Yardım Alın
Slogan: FindLaw avukat bulmayı kolaylaştırıyor
Harekete Geçirici Mesaj (CTA 1): Avukatımı Bul
Harekete Geçirici Mesaj (CTA 2): Yok

13. Sucuri

Sucuri, saldırıya uğradığında veya virüs bulaştığında web sitenizi temizlemek için iyi bilinen sitelerden biridir. CTA'yı beğeniyoruz “Saldırıya Uğramış Siteyi Onar”, ana sayfaya geldiğinizde ne yapmanızı istediklerine dair hiçbir soru yok. Buraya bir sorunla geldiniz, muhtemelen kendi web siteniz saldırıya uğradı ve sizin için kolayca düzeltebilirler.

Bilgisayarın sağ tarafında bir resim var ve kırmızı ekran, saldırıya uğramış bir web sitesini gösteriyor, muhtemelen tam olarak sizinki gibi görünüyor, böylece sorunla kolayca bağlantı kurabilirsiniz. Sağ altta telefon numarasıyla Canlı Sohbet var veya sorunları çözmenize yardımcı olması için canlı kişiyle sohbet edebilirsiniz. Canlı sohbet, diğer kişiyle konuşurken kendinizi güvende ve rahat hissetmeniz için yeşil renktedir.

Ana Renkler: Siyah, Beyaz, Yeşil, Kırmızı
Slogan: Web Sitelerini Temizliyor ve Koruyoruz
Slogan: Hack'leri düzeltir ve gelecekteki saldırıları önleriz. Her site için bulut tabanlı bir platform.
Harekete Geçirici Mesaj (CTA 1): Saldırıya Uğramış Siteyi Düzeltin
Harekete Geçirici Mesaj (CTA 2): Daha Fazla Bilgi Edinin

14. WP Motoru

WP Engine, WordPress için bir numaralı barındırma şirketi olduklarını söyleyen çok büyük sloganı olan çok temiz ve basit bir ana sayfaya sahip iyi bilinen bir WordPress barındırma şirketidir. İki CTA kullanıyorlar, biri Planlar ve Fiyatlandırma mesajıyla mavi renkte, diğeri ise tüm ürünlerimizi görüyor. Sağ tarafta size hız, analiz ve sohbeti gösteren çok güzel bir illüstrasyon görseli kullanıyorlar.

Volvo, yelp, petco gibi şirketlerin de web sitelerini barındırmak için WP Engine kullandıklarını size güvende hissettirmek için ürünlerini kullanan diğer popüler şirketlerin logoları var. Temiz ve basit ana sayfa, herhangi bir soru sormanız gerekirse, sağ alt tarafta bir aşk sohbeti de var.

Ana Renkler: Siyah, Beyaz, Tork, Mavi
Slogan: WordPress için 1 numaralı platformda yaratıcılığınızı güçlendirin
Slogan: İşletmeniz için en iyi WordPress barındırma çözümünü seçin
Harekete Geçirici Mesaj (CTA 1): Planlar ve Fiyatlandırma
Harekete Geçirici Mesaj (CTA 2): Tüm ürünleri görün

15. Birleşik Sağlık Hizmetleri

United Healthcare, sağlık ve sağlık sigortası için en büyük web sitelerinden biridir. Çok temiz görünen web sitesi, gülümseyen ve selfie çeken bir aile görüntüsü kullanıyorlar, mutlu ve güvende görünüyorlar. Web sitesi doğrudan konuya güzel bir slogan olan “Sizin ve aileniz için sağlık planları alın” kullanıyor, bunun altında bir CTA'nız var “Planınızı bulun” bu web sitesine girdiğinizde kendinizi güvende hissettiriyor ve burada kalmak istiyorsunuz ve daha fazla seçenek keşfedin.

Ana Renkler: Beyaz, Tork, Mavi
Slogan: Siz ve aileniz için her yaşta ve aşamada sağlık planları alın
Slogan: 2022'yi kapsamak için hala zaman var
Harekete Geçirici Mesaj (CTA 1): Planınızı bulun
Harekete Geçirici Mesaj (CTA 2): Bir plan bulmak için yardım alın

16. Zarif Temalar

En büyük WordPress sayfa oluşturucularından biri olan zarif temalar, teknoloji ve yazılıma odaklanan çok zarif ve çekici güzel bir ana sayfaya sahiptir. Büyük slogan ve ayrıca pembe renkte çok belirgin harekete geçirici mesaj ile. Sağda çok güzel bir görsel kullanıyorlar, güzel sloganıyla “geleceğine yatırım yap” güzel tipografi ve illüstrasyonlar kullanıyorlar.

Ayrıca, herhangi bir özel sorunuz varsa, sağ altta bir canlı sohbet simgesi kullanırlar. Kitlelerini %10 indirimle hedefleme konusunda çok netler.

Ana Renkler: Mavi, Pembe, Beyaz
Slogan: WordPress Serbest Bırakıldı
Slogan: Dünyanın En Popüler WordPress Temaları ve Nihai Görsel Sayfa Oluşturucu
Harekete Geçirici Mesaj (CTA 1): Divi'nin Gücünün Kilidini Açın
Harekete Geçirici Mesaj (CTA 2): Fiyatlandırma

17. Lyft

Lift, minimalist ve sofistike ana sayfa tasarımına sahip başka bir büyük araba/taksi sağlayıcısıdır. Hemen hemen her tasarım ana sayfasında olduğu gibi logo sol üst köşededir, Lyft logosu parlak pembe renktedir, bu nedenle çok belirgindir. Ortada, arkada yolcusu olan bir kadın şoförün resmi var. Bu ana sayfaya girdiğinizde size tam olarak ne söylemeye çalıştıklarını bilirsiniz.

Büyük sloganı "Haydi gidelim" ve harekete geçirici mesajla, aracınızı sürün veya binmek için kaydolun, daha fazlasını keşfetmek için iki seçeneğiniz var. Yazı tiplerinin güzel kullanımı ve tıpkı sizin gibi insanların fotoğrafları ile çok temiz ve minimal tasarım.

Ana Renkler: Siyah, Pembe, Beyaz
Slogan: Hadi gidelim
Slogan: Kendi saatlerinizi belirleyin. Kendi şartlarınıza göre kazanın.
Harekete Geçirici Mesaj (CTA 1): Sürücüye uygula
Harekete Geçirici Mesaj (CTA 2): Sürüş için kaydolun

18. Starbuck

Starbuck muhtemelen dünyanın en büyük kahve dükkanı oldukları için tanıtıma ihtiyaç duymazlar, kişisel olarak pek çok çeşidi olan Starbuck kahvesini seviyorum. Starbuck kahve severler için kahveye odaklanmıştır. Logo yeşil olduğu için ana sayfa tasarımının çoğu yeşil ve açık yeşildir. Kahvesini yeni alırken gülümseyen bir adam resmi kullanıyorlar, bunun altındaki başka bir resim de iki kahve kapuçino, bu da kendinizinkini almak istemenizi sağlıyor.

Şimdi bir CTA katılımı ile Starbuck'a üye olmanızı ve kahvenize göre ödüller, güzel görseller, renkler ve “Ruh halinizi seçin” sloganını almanızı istiyorlar.

Ana Renkler: Siyah, Yeşil, Kahverengi
Slogan: Ruh halinizi seçin
Slogan: Gününüze bir heyecan patlaması ekleyin
Harekete Geçirici Mesaj (CTA 1): Şimdi Katılın
Harekete Geçirici Mesaj (CTA 2): Kış menüsünü keşfedin

19. Yakınlaştırma

Zoom, çevrimiçi toplantı için en büyük platform, bu olabildiğince temiz bir ana sayfa, solda test ve CTA ve sağda video bulunan büyük bir kaydırıcı kullanıyorlar ve Zoom video konferansı ile insanların yüzleri birbirine bağlanıyor.

CTA turuncu renktedir ve beyaz "Ücretsiz kaydolun" metni bulunur veya fiyatları ve planları arayabilirsiniz. Ne yaptıkları ve ürünlerine kaydolarak daha fazla keşfetmenizi istedikleri hakkında hiçbir soru yok.

Ana Renkler: Siyah, Beyaz, Mavi
Slogan: Yakınlaştırma Öğrenim Merkezi
Slogan: Zoom tam size göre
Harekete Geçirici Mesaj (CTA 1): Ücretsiz kaydolun
Harekete Geçirici Mesaj (CTA 2): planlar ve fiyatlandırma

20. Nane

Nane, sadece sizin için basitleştirilmiş kişisel finans için 1 numaralı uygulamadır. Ana sayfa çok temiz ve doğrudan konuya yönelik, büyük sloganı “Parayı Yönetmek” ve elinde telefon tutan bir kişinin büyük resmi, uygulamanın ne kadar kolay ve basit olduğunu gösteriyor. Parayı simgelediği için yeşil renklerin kullanımı çok güzel.

Ana Renkler: Siyah, Yeşil, Açık Yeşil
Slogan: Parayı yönetmek, basitleştirildi
Slogan: İşi kişisel finanstan alan uygulamaya merhaba deyin
Harekete Geçirici Mesaj (CTA 1): Mint'e kaydolun
Harekete Geçirici Mesaj (CTA 2): App Store veya Google Play

21. AirBnB

Hiç tatile gittiyseniz, muhtemelen airbnb'yi herhangi bir otele alternatif olarak biliyorsunuzdur. Herhangi bir ülke veya eyaletteki herhangi bir yeri rezerve edebilir ve birinin evi, dairesi veya odası olarak kalabilirsiniz. Web sitesi siyah, “nereye gideceğimden emin değilim” ve CTA “esneğim” baskın beyaz sloganlı, dağlarda bir kubbede duran büyük bir adam görüntüsü var, yaratıcı görüntünün güzel kullanımı.

Web sitesi, baskın ve odak noktaları beyaz olmak üzere neredeyse %90 siyahtır. Çok modern ve zarif bir görünüm.

Ana Renkler: Siyah, Beyaz
Slogan: Nereye gideceğinizden emin değil misiniz? Mükemmel.
Slogan: Bir sonraki seyahatiniz için ilham kaynağı
Harekete Geçirici Mesaj (CTA 1): Esnekim
Harekete Geçirici Mesaj (CTA 2): Yok

22. anne

MoMa, dünyanın en popüler müzelerinden biri, tasarımcıysanız veya herhangi bir yaratıcıysanız, ziyaret etmeniz gereken müzelerden biridir. Ana sayfa, modern müzeden beklediğiniz gibi çok yaratıcı. Mevcut sergiye odaklanarak çok parlak renkler kullanıyorlar.

CTA, biletlerinizi rezerve etmek veya geçerli tarih ve saatte sergilenenler hakkında daha fazla bilgi edinmek içindir. Büyük resimler, yeri ziyaret ettiğinizde ne göreceğinize dair bir fikir verir. MoMa saygı, benzersiz bir web sitesine sahip olabileceğiniz ve yine de ziyaretçilerin daha sonra ne yapacaklarını ve sitenizi nasıl daha fazla keşfedeceklerini bilmelerini sağlayan CTA'lara sahip olabileceğiniz şekilde çok yaratıcı ve benzersizdir. Bu düzen neden işe yarıyor, çünkü izleyicilerinin soyutlama ve sanat vizyonuna sahip yaratıcı profesyoneller olduğunu biliyorlar.

Ana Renkler: Siyah, Beyaz, Yeşil, Mor
Slogan: Sizi görmek için sabırsızlanıyoruz
Slogan: Ziyaretinizi planlayın
Harekete Geçirici Mesaj (CTA 1): Zamanlanmış biletleri rezerve edin
Harekete Geçirici Mesaj (CTA 2): Daha fazla bilgi edinin

Ana sayfa tasarımı yazlık

En iyi tasarım ana sayfalarının çoğunu, neyin işe yaradığını ve neden ana sayfanızın nasıl görünmesi gerektiğine ve web sitenizi tasarlarken ana odak noktanızın ne olması gerektiğine dair mükemmel örnekler olduklarına dair ayrıntılı açıklamalarla keşfediyoruz.

Yeni web sitenize başlarken en iyi yol, ne tür ziyaretçileri çekmeye çalışacağınız konusunda bir araştırma yapmaktır, bunlar profesyonel mi, aile odaklı mı yoksa eğlenceli ve benzersiz siteyi seven yaratıcı kişiler mi? Kapsamlı UI/UX araştırması yapmak, ana sayfanızın nasıl görünmesi gerektiğini belirlemenize yardımcı olur ve hedef kitlenizin kafasını karıştırmaz. CTA'larınız göze çarpan yerlerde olmalı ve sitenizde neden tıklamaları ve herhangi bir işlem yapmaları gerektiğini bilmelerini sağlamalıdır.

Ziyaretçileriniz daha sloganınızı okumadan sitenizin ne hakkında olduğunu bileceğinden, fotoğrafları, illüstrasyonları veya hızlı videoları kullanmak size görsel hedeflerden yararlanmanızı sağlayacaktır. Kullanıcılarınızın kafasını karıştırmamak için büyük yazı tipleri ve temiz mesaj kullandığınızdan emin olun. Çok fazla CTA eklemeyin, bir veya iki ilk kez gelen ziyaretçilerin tıklaması için yeterli olacaktır, onlara çok fazla seçenek verirseniz ne yapacaklarını bilemeyecekler, bu nedenle yanlış anlamadan kaçınmanız gerekir.

Çoğu insan web sitenizi aşağı kaydırmayacağından, en önemli bilgilerinizi ekranın üst kısmında tutun, çoğu işlem ekranın üst kısmında gerçekleşir, bu nedenle ana odak noktanız budur.