Pazarlamanın Görünümünü Değiştiren 6 Web Tasarım Trendi

Yayınlanan: 2016-11-08

2010 yılında çok önemli olaylar yaşandı.

Dubai'de resmi olarak açılan dünyanın en yüksek binası, Space X Dragon Capsule'ü başarıyla piyasaya sürdü, Apple iPad'i piyasaya sürdü ve Ethan Marcotte duyarlı web tasarımı yarattı.

Tek tasarım amacı ziyaretçilerin gözlerini kamaştıran, aşağıdaki gibi renkli bir görüntü sergileyen web sayfalarından çok yol kat ettik:

Bu resim, parlak renkler, görsel hiyerarşi ve kullanıcı deneyimi göz önünde bulundurulmadan modası geçmiş bir web tasarım trendini göstermektedir.

Web tasarımı artık işlevsellik ve kullanıcı deneyimine odaklanıyor. Ve insanların %46,1'i tasarımı iş güvenilirliğini belirlemek için en önemli kriter olarak gördüğünde neden olmasın.

İnsanların %46,1'i tasarımı iş güvenilirliğini belirlemede en önemli kriter olarak görüyor.

Tweetlemek için tıklayın

tıklama sonrası açılış sayfası tasarımı aynı gücü kullanır. Aslında, Numara Yazılım sadece sayfa yazı tipini değiştirerek form dönüştürme oranını %133 gibi etkileyici bir oranda iyileştirmeyi başardı.

Daha yeni tasarım standartları artık, ziyaretçiyi yanıp sönen bir harekete geçirici mesaj düğmesine yönlendirmek için kırmızı renkli yazı tipleri ve sarı vurgulu pasajlar gibi gösterişli, yüzünüzde görünen görsel öğeler kullanmaya odaklanmıyor. Yani, şuna benzeyen sayfalara bakmanıza gerek yok:

Bu resim, parlak renkler ve bir CTA düğmesini işaret eden çirkin kırmızı oklarla eski bir web tasarım trendini göstermektedir.

Geçmişte, 2018'de popüler olan tıklama sonrası açılış sayfası trendlerini tartıştık. Bugün, 2019'da dönüşüm oranlarınızı artırmanıza yardımcı olacak web tasarım trendlerine bakacağız.

1. Kart tabanlı düzen

Intercom, kart tabanlı tasarımın web'in geleceği olacağını tahmin ediyor çünkü size büyük miktarda kopya veya görüntüyü daha düzenli bir şekilde sergileme ve hikayenizi daha hızlı anlatma fırsatı veriyor.

Kart tabanlı bir sayfa düzeni, sayfa öğeleri arasında görsel kesme noktaları olmasını sağlar. Ayrıca, bu yaklaşım, sayfaya yerleştirdiğiniz kopya ve resim miktarından bağımsız olarak dağınıklığı ortadan kaldırır. Dahası, kart tabanlı tasarım, geleneksel sayfa kaydırıcısının mükemmel bir alternatifidir.

Essentials ana sayfası, bir grup global reklam öğesi tarafından oluşturulan resimleri sergilemek için kart tabanlı bir sayfa düzeni kullanır:

2. Uzun kaydırma sayfaları

Tüm hayati bilgilerinizi "ekranın" üzerine almak, daha önce birçok pazarlamacının, bir ziyaretçi CTA düğmesini göremediği takdirde, sizinle daha fazla etkileşime geçmeyeceğine veya satın almayacağına inandığı bir tasarım ilkesiydi.

O uygulama öldü. Ekranın üst kısmındaki tüm önemli bilgileri içeren "kısa" web sayfaları artık daha yüksek dönüşüm oranları için norm olarak kabul edilmemektedir. Bugünün web kullanıcıları kaydırma yapmayı bekliyor. İster 10x blog gönderisi, ister uzun kaydırmalı tıklama sonrası açılış sayfaları şeklinde olsun, daha fazla bilgi istiyorlar.

Uzun kaydırılan sayfa, ziyaretçileri sayfada işlem yapmadan önce olabilecek tüm soruların yanıtlarını sağlayarak teklifiniz hakkında görsel bir tura çıkarmanıza olanak tanır.

Kullanıcının teklifinizde gezinmesini gerektiren bir web sayfası veya tıklama sonrası açılış sayfası, şüpheleri giderir ve size daha ayrıntılı bir hikaye anlatma fırsatı verir.

Yapışkan bir kaydırma menüsü, sayfada nereye gidileceğinden sorumlu olduklarından, ziyaretçi için gezinme deneyimini geliştirir. Yapışkan kaydırma menüsü sayesinde ziyaretçi her zaman gezinmek istediği yerden sorumludur.

Mugs'ın sayfasıyla yaptığı şey şudur:

3. Dramatik tipografi

Daha iyi cihaz çözünürlüklerine, daha yüksek internet hızlarına ve bir dizi yaratıcı yazı tipine (Google Fonts ve Adobe Typekit sayesinde) daha fazla erişim, web sayfalarında ve tıklama sonrası açılış sayfalarında dramatik tipografiyi doğal bir geçiş haline getirir. Dramatik tipografi, marka kimliğinizi oluşturmanıza olanak tanır ve ziyaretçileriniz için içerik deneyimini geliştirme şansı verir.

Tipografi seçimlerinizle maceracı olun. Ancak, önceliğinizin okunaklı olması gerektiğini unutmayın, çünkü yazı tipi okunamıyorsa herhangi bir web sayfasına eklemenin bir anlamı yoktur.

Dramatik bir etki elde etmek için yazı tipi boyutunu artırmayı deneyin veya yazı tipi rengini çevresiyle karşılaştırın. Kural olarak, ziyaretçileri dönüşüm hedefinden uzaklaştırmamak için yazı tiplerini web sayfası başına iki türle sınırlayın.

Örnek olarak, Outbrain, tıklama sonrası açılış sayfalarında, sayfaya varır varmaz hemen dikkat çeken büyük yazı tipleri kullanır:

Bu resim, pazarlamacılara Outbrain'in ziyaretçilerin ilgisini çekmek ve olası satışları artırmak için tıklama sonrası açılış sayfasında yeni bir web tasarım trendi olan dramatik tipografiyi nasıl kullandığını gösteriyor.

4. Mikro etkileşimler

Mikro etkileşimler, daha büyük etkileşimler arasında gerçekleşir ve ziyaretçilere belirli bir eylemi zaten gerçekleştirdiklerini bildirerek mobil sayfa deneyimini geliştirir. Örneğin, bir düğmeye tıklayıp renk değişimine tanık olmak veya belirli bir eylemi gerçekleştirdikten sonra belirli bir sesi duymak.

Bu daha küçük etkileşimler, ziyaretçilerin eylemlerinin sonuçlarını görselleştirmelerine yardımcı olur, örneğin Nike'dan şuna benzer:

Mikro etkileşimler ayrıca ziyaretçilerin dikey bölünmüş ekranlar veya kart tabanlı bir düzen gibi standart olmayan düzenleri anlamasına yardımcı olabilir ve ziyaretçileri bir harekete geçirici mesajı tıklamaya teşvik edebilir:

Mobil sayfalarınızda mikro etkileşimleri kullanmanın bir başka yolu da, ürününüzün nasıl çalıştığına dair animasyonlu bir eğitim vermektir (ve ziyaretçilere hangi aşamayı görüntülediklerini göstermek için alt kısımda gezinme noktalarına sahip olmak):

5. Renk engelleme

Renk engelleme, bir mozaik oluşturmak için farklı renklerin kullanılmasını içerir. Öğeleri parçalamak ve onlara nefes almaları için yer açmak için içerik veya görüntü ağırlıklı web sayfalarında renk engellemeyi kullanabilirsiniz.

Bilek ana sayfasının yaptığı budur:

Ayrıca renk engelleme tasarım tekniğini vurgulu durumlarla eşleştirebilir ve ziyaretçiler imleçlerini blok üzerinde hareket ettirdiğinde renk bloklarının renk değiştirmesini sağlayabilirsiniz.

Barn + Co ana sayfası, aynı anda renk engelleme ve fareyle üzerine gelme durumunu göstermek için:

Barn + Co, tıklama sonrası bir açılış sayfası olmamasına rağmen, web sitelerine yeni tasarım trendlerini uygulama konusunda eğrinin önünde olduklarını gösteriyor. Bu tür etkileşimli öğeler, kullanıcı deneyimini ve markalarıyla genel etkileşimi geliştirmeye yardımcı olur.

6. Ekranları sayfa olarak kullanma

Uzun formlu bir satış sayfası için en uygun sayfa düzenini belirlemekte hiç zorlandınız mı? Artık mücadele etmeyin; bu trend tam size göre. Ekranları sayfa olarak kullanmak, web sayfası kaydırmaya yeni bir anlam kazandırır.

Ekranları sayfa olarak kullandığınızda, çoğunlukla her ekranı ayrı bir sayfa olarak hareket edecek şekilde yapılandırırsınız - kendi resmi, başlığı vb.

Uzun kaydırmalı sayfalar sizin veya ziyaretçileriniz için uygun değilse, gerekli bilgileri sağlarken her şeyi düzenli tutmak için sayfa olarak ekranlar mükemmel bir alternatif olabilir.

Google App, ekranları sayfa olarak kullanır:

Gezinti başlığından, fare ile kaydırarak veya ok tuşlarını kullanarak ekran arasında geçiş yapabilirsiniz.

Ekranlarınızı sayfa olarak kullanarak sayfa kaydırma tekerleğini yeniden icat edin.

Markanıza en çok hangi web tasarım stilleri uyuyor?

Web sayfası tasarımı, kullanıcı deneyimine ve işlevselliğe odaklanmalıdır. Eklediğiniz her öğe, dönüşüm hedefinize eklemeli ve bireysel bir amaca hizmet etmelidir.

Ziyaretçilerinizin görsel bir deneyimi tercih ettiğini mi düşünüyorsunuz? Kart tabanlı tasarım kullanın. Tanıtmak için oldukça karmaşık bir teklifiniz mi var? Ziyaretçileri hedefinize dönüştürmeye ikna etmek için her küçük ayrıntıyı açıklamak için uzun bir kaydırma sayfası kullanın.

Web sayfalarınıza en çok hangi tasarım trendi uyduğunu düşünüyorsunuz? Lütfen aşağıya yorum yapın ve bize bildirin.

Henüz tıklama sonrası açılış sayfaları oluşturmaya başlamadınız mı? Yüksek kaliteli tıklama sonrası açılış sayfaları tasarlayın, bugün bir Enterprise demosu için kaydolun.