En çekici tasarım uygulamalarını tartışmak söz konusu olduğunda, paralaks kaydırmanın tanıtıma ihtiyacı yoktur. Genel olarak, Paralaks Kaydırma, WordPress web sitelerinde yaygın olarak görülür. Arka plan resminin ön plan öğelerinden daha yavaş hareket ettiği bir efekttir. Bu, düz iki boyutlu bir yüzeyde üç boyuta sahip olduğu yanılsamasını verir. Birçok oyun bu trendi uzun süredir kullanıyor Ancak, web tasarımında nispeten yakın zamanda yerini aldı ve büyük bir popülerlik kazandı. O kadar yaygın ki, ne olduğunu bilmiyor olsanız bile internette gezinirken muhtemelen bir yerde görmüşsünüzdür. Paralaks kaydırma kavramı, çekici ve benzersiz görünen bir yanılsama yaratmaya çalışır. Web tasarımına estetik değer katar ve paralaks kaydırmadaki içeriğe dikkat çeker, bu da dağınıklıktan değerli içeriği vurgulamaya yardımcı olur.
İçindekiler gizle
1. Kullanıcı deneyimi önemli ölçüde iyileşir:
2. Hikaye anlatma sürecine yardımcı olur:
3. Hemen çıkma oranlarında önemli azalma:
1. Paralaks Arka Plan Kaydırma:
2. Paralaks Dikey Kaydırma:
3. Paralaks Şeffaflık Etkisi:
4. Paralaks Yatay Kaydırma:
5. Paralaks Ölçek Etkisi:
1. Her zaman web sitenizin birincil amacını hatırlayın:
2. Paralaks kaydırma efektini aşırı kullanmayın:
3. Prototip paralaks kaydırma efektleri yapın ve bunları test edin: Sabitle
4. İçeriği mobil kullanım için planlayın:
5. Web sitenizin duyarlılığı:
1. The Goonies'in hikayesi:
2. Köpek stüdyosu:
3. Ateş İzleme:
Bu tasarım trendi, düz tasarım trendi ortaya çıktığında ortaya çıktı. Düz tasarım trendinden önce gerçekçi tasarım trendiydi. Bu trendle, derinlik hissi ve üç boyutlu görünüm yaratmak için alt gölgeler, yansımalar ve benzeri diğer püf noktaları üzerinde durulacaktır. Düz tasarım fazlasıyla iki boyutluydu ve bu tür hileler, üç boyutlu bir görünüm yaratmak için onlarla çalışmayacaktı. Bu boşluğu gören paralaks kaydırma, düz bir tasarıma üç boyut kazandırmak için bir konsept olarak ortaya çıktı.
Paralaks kaydırmayı daha ayrıntılı olarak anlamak için önce neden yatırım yapmaya değer bir uygulama olduğuna bakmalıyız.
1. Kullanıcı deneyimi önemli ölçüde iyileşir:
Toplu iğne
Bazı insanlar, paralaks kaydırmanın, herhangi bir katkı olmaksızın kullanıcı arayüzüne karmaşıklık katan ek bir özellik olduğu görüşündedir. Ancak, mikro etkileşimler ve animasyonlar, düz kullanıcı yüzlerine kıyasla ilgi çekici kullanıcı arayüzleri oluşturmak için büyük bir fark yarattığı için bu doğru değildir. Kullanıcı deneyimi (UX) için mükemmel bir değere sahiptir.
2. Hikaye anlatma sürecine yardımcı olur:
Toplu iğne
Başka birine bir hikaye anlatmak zorunda kalsaydık, bunu zahmetsizce yapabilirdik. Bununla birlikte, web sitesi tasarımında aynı kolaylık ve hikaye anlatımı akışına sahip olmak çok zor olabilir. Noktaları birleştirmek, geçişi kolaylaştırmak ve izleyiciyi bağlı tutmak çoğu zaman zordur. Paralaks kaydırma, hikayenin akması için ilgi çekici ve sürükleyici bir deneyim yaratarak bu soruna yardımcı olur. Arka plan ve ön plan öğelerinin hızında bir fark olduğundan, öğelerin hızının verimli bir şekilde ayarlanması hikaye anlatımı deneyimini önemli ölçüde iyileştirebilir.
3. Hemen çıkma oranlarında önemli azalma:
Toplu iğne
Hemen çıkma oranı, web sitesini tam olarak incelemeden önce web sitesini tıklayan ve sekmedeki geri düğmesini tıklayan kişi sayısını ifade eder. Sık ve yüksek hemen çıkma oranları SEO sıralamasını önemli ölçüde etkileyebilir. Paralaks kaydırma web siteleri, çoğu tek sayfa kaydırma siteleri olduğundan, önemli ölçüde daha düşük hemen çıkma oranlarına sahiptir. Kullanıcıların paralaks kaydırmaya tanık olmalarından elde ettikleri dinamik deneyim, onları meşgul ediyor.
Paralaks kaydırma kullanmanın avantajlarını ele aldığımıza göre, web tasarımcılarının kullanabileceği çeşitli paralaks kaydırma tekniklerini tartışabiliriz. Paralaks etkileri için iki geniş kategori vardır. Kaydırma tabanlı Paralaks efektleri ve Fare tabanlı paralaks efektleri.
Kaydırma tabanlı paralaks efektleri, bir web sitesinde aşağı kaydırdığınızda karşılaşacağınız paralaks efektleridir. Her tür paralaks kaydırma, farklı bir ihtiyaç ve amaca hitap eder. Paralaks kaydırma efektlerinden bazıları şunlardır:
1. Paralaks Arka Plan Kaydırma:
Paralaks kaydırma kullanmanın en eski ama etkili yollarından biridir. Bunu kullanarak, kullanıcı web sitesinde gezinirken arka plan görüntüsü değişecekti. Bu, çekici hikayeleri stil ile anlatmaya yardımcı olur.
2. Paralaks Dikey Kaydırma:
Paralaks Dikey Kaydırma, farklı hızlarda hareket edecek kayan öğeler kullanarak, kullanıcıların web sitesinin kendileriyle birlikte hareket ettiğini hissetmelerini istediğiniz web siteleri için idealdir. Bu, birden fazla katmanda da yapılabilir.
3. Paralaks Şeffaflık Etkisi:
Paralaks Şeffaflık Etkisi, kullanıcı aşağı kaydırdığında metnin veya görüntünün yavaşça solduğu yumuşak bir efekttir. Ayrıca, kullanıcı yukarı kaydırdığında tekrar kaybolur.
4. Paralaks Yatay Kaydırma:
Paralaks Yatay kaydırma, kullanıcı web sitesini aşağı kaydırdığında yatay olarak hareket hissi yaratır. Soldaki elemanlar merkeze yaklaşır. Bu bir hareket hissi yaratır.
5. Paralaks Ölçek Etkisi:
Paralaks Ölçek Etkisi, kullanıcının tünel efektini yakınlaştırma ve uzaklaştırma oluşturmasını sağlar. Yakınlaştırma en-boy oranıyla orantılıdır, bu nedenle harika görünen benzersiz bir illüzyon yaratır. Kullanıcıyı başka bir boyuta götüren bir çarpıtma etkisi gibi geliyor.
Paralaks kaydırma efektlerinin farklı varyasyonlarını tartıştığımıza göre, web siteniz için bir paralaks kaydırma efekti tasarlarken akılda tutulması gereken temel tasarım uygulamalarını tartışmaya geçebiliriz:
1. Her zaman web sitenizin birincil amacını hatırlayın:
Toplu iğne
Paralaks kaydırma eğlencelidir ve büyüleyici olabilir. Sadece izleyiciler için değil, tasarımcılar için de. Bu, etkileyici bir paralaks kaydırma etkisi olan ve içeriğe odaklanmayan bir web sitesine sahip olmak anlamına gelmemelidir. Diğer tasarım öğeleri gibi paralaks kaydırma, ziyaretçiyi olmasını istediğiniz yerlere yönlendirmesi gereken görsel ipuçları olarak çalışmalıdır. Bir ürünü satmak, içeriği yaymak veya potansiyel müşteriler oluşturmak gibi iş hedeflerine ulaşılmasına yardımcı olmalıdır.
Aklınızda herhangi bir bağlam veya amaç olmadan paralaks kaydırmayı aşırı kullanırsanız, sitenizde etkilenmiş izleyiciler çekebilirsiniz, ancak bunlar etkili olası satışlara veya dönüşümlere dönüşmez. Kullanıcının yapmasını istediğiniz şeyin şansını artırmak için paralaks kaydırmayı kullanın. Bunun için mükemmel bir hile, sayfanın alt kısmında ilgi çekici ancak incelikli bir CTA'yı sabitlemektir. Bu şekilde, kullanıcılar sitede gezinirken paralaksın hareket halinde olduğunu göreceklerdi. Ayrıca, statik ve her yerde hazır bulunan bir veya iki sabit düğmeye sahip olacaklardı. Bu, ziyaretçiyi ne olduğunu görmek için düğmeye tıklamaya çeker.
2. Paralaks kaydırma efektini aşırı kullanmayın:
Toplu iğne
Paralaks kaydırma efektinin kendisine bağlı belirli bir wow faktörü vardır. Ziyaretçinin gözünde ani bir ilgi yaratan herhangi bir web sitesinin sıradan ve durgun doğası için kırılır. Paralaks kaydırmayı kullanmak, web sitesinin öğelerini farklı hızlarda hareket ettirdiğinden, paralaks kaydırma kullanırken eğlence ve kaos arasında doğru dengeyi bulmak çok önemlidir. Web sitesinde çok sayıda hızlı hareket eden öğe veya çok fazla hareketli öğe varsa, ziyaretçinin yetişmesi bunaltıcı olabilir. Görsel kılavuzlarını web sitesinin her yerine fırlatır ve kafa karışıklığı yaratır.
3. Prototip paralaks kaydırma efektleri yapın ve bunları test edin: Toplu iğne
Geliştirme aşamasında sonlandırmadan önce etkileşimli bir prototip oluşturmak her zaman iyi bir fikirdir. Bu, tasarımcıların paralaks kaydırma efektlerini canlı hale getirmeden önce test etmelerine yardımcı olur. Tasarımcılar, kullanılabilirlik ve kullanıcı deneyimi üzerindeki etkisini test etmelidir. Paralaks yaklaşımı çok yönlü ve farklı olduğu için farklı insanları farklı şekillerde etkileyebilir. Kullanışlı paralakstan, dikkatin dağılmasına neden olan paralaks kaydırma efektleri oluşturmaya sapmak kolaydır. Bu nedenle, objektif ve web tasarımı anlayışına sahip gerçek kullanıcılarla iyice test edin. Ayrıca, etkiyi yarattığınız kişiler oldukları için genel bir kitleyle test edin.
4. İçeriği mobil kullanım için planlayın:
Toplu iğne
İnternette gezinmek artık bilgisayarlarla sınırlı değil. Bunun yerine, kullanıcıların yarısından fazlası akıllı telefonlarında ve tabletlerinde gezinmeyi tercih ediyor. Google ayrıca, web sitelerini masaüstüne kıyasla mobil için farklı şekilde düzenleyen ve sıralayan arama motoru sonuçlarını da değiştirdi. Bu, web siteniz masaüstü taramada iyi bir sıralamaya sahipse, ancak düşmanca bir mobil tasarıma sahipse, telefonunuzdan arama yaptığınızda Google'da üst sıralarda yer almayacağı anlamına gelir. Paralaks kaydırma, mobil uyumlu değildir. Tabletler bir dereceye kadar destekliyor ancak cep telefonları desteklemiyor. Bunun için pratik çözüm, mobil siteniz için paralaks efektleri kullanmamaktır.
Sitenizin temel düzeni, mobil ortama kolayca çevrilebilecek şekilde tasarlanmalıdır. Çakışan ve taşan herhangi bir bölüme dikkat edilmelidir. Arka plan, içeriğin okunabilirliği ile çelişmemelidir. Mobil site için yalnızca gerekli tasarım öğelerini saklayın. Bu size iki şekilde yardımcı olacaktır - tarayıcıyı cep telefonlarında kullanan kullanıcılar mobil verileri kullanıyor olabilir. Daha hafif bir siteye sahip olmak, siteyi daha hızlı yüklemelerine ve sitenizde gezinmek için daha az veri harcamalarına yardımcı olur. Ayrıca SEO sıralamanızı bu şekilde etkilemez.
5. Web sitenizin duyarlılığı:
Toplu iğne
Artık bir web sitesini yüklemek için dakikalar veya saatler süren ağ bağlantılarımız yok. Herkes, kullanıcıların bir web sitesinde bir saniyeliğine bulunabileceği ve bir saniye sonra diğerine geçebileceği hızda internete erişebilir. Bu hız kolaylığı ile seçeneklerin kolaylığı geliyor. İnsanlar her gün birkaç web sitesine göz atıyor. Web siteniz nispeten hızlı yüklenmiyorsa, web sitenizin yüklenmesini ve şaşırtıcı paralaks etkisini göstermesini beklemek için etrafta dolaşmazlar. Paralaks ağır bir hiledir ve optimize ettiğinizde bile; sayfa yükleme süresinde bir isabet alırdı. Paralaks kaydırmanın web sitenize önemli ölçüde katkıda bulunduğunu düşünüyorsanız, onu mümkün olduğunca optimize etmek sizin göreviniz haline gelir.
Artık paralaks kaydırmanın tüm yönlerini ve bundan en iyi şekilde nasıl yararlanabileceğimizi anladığımıza göre, web sitesi tasarımlarında paralaks kaydırmayı başarıyla uygulayan bazı web sitelerine bakalım:
1. The Goonies'in hikayesi:
Toplu iğne
Bu web sitesi, klasik The Goonies filmini vurgulamak için özel bir paralaks kaydırma efekti kullandı. Film konusu ve yönetmenin adı, yayın tarihi, karakter profilleri ve daha fazlası gibi diğer ayrıntılar hakkında konuşmak için sürükleyici paralaks kaydırma kullanır. WebFlow kullanılarak oluşturulur ve klasik filme bir övgü olarak çalışır. Web sitesini ziyaret ettiğinizde, ilk etkileşim, kullanıcının web sitesi ile hikayenin içinde seyahat ediyormuş gibi hissetmesine yardımcı olan Paralaks Ölçek Etkisini kullanır. Her paralaks efekti, ziyaretçiye görsel ipucunu yönlendirmek için kullanılır ve zahmetsizce yapılır. Ayrıca sürükleyici bir hikaye anlatımı deneyimi için ses kullanır.
2. Köpek stüdyosu:
Toplu iğne
Dogstudio, sanat, teknoloji ve tasarımı harmanlayan yaratıcı bir stüdyodur. Bunu göstermek için web sitelerini akıllıca tasarladılar. Web sitesinin merkezinde, kullanıcı web sitesinde gezinmeye devam ettikçe ölçeklenen ve dönen bir köpek vardır. Fareyi son projelerinin üzerine getirdiğinizde köpeğin üzerindeki ışık da değişmeye devam ediyor. Fare tabanlı paralaks efektleri de vardır. Web sayfasının başlangıcında, Farenizi sola getirirseniz, köpek sağa doğru eğilir ve bunun tersi de geçerlidir. Paralaks kaydırmanın etkili bir kullanımıdır.
3. Ateş İzleme:
Toplu iğne
Firewatch, Campo Santo tarafından yaratılmış bir oyundur. Bu oyunu tanıtmak için paralaks kaydırmayı ince ama en etkileyici şekilde kullanan bir web sitesi var. Siteyi ziyaret ettiğinizde, olduğu gibi sürükleyici görünen bir banner görseli ile karşılaşıyorsunuz. Web sitesini aşağı kaydırdığınızda, görüntü ve içerik yukarı doğru hareket ederek basit ama etkili bir paralaks kaydırma efekti oluşturur. Web sitesi, olduğu kadar pürüzsüz hale getirmek için 6 katman kullanır. Web sitesinin geri kalanı, tüm içeriğin bulunduğu statiktir. Bu, içeriği okumanıza ve aşırı yapılmış paralaks efektleriyle deniz tutmadan oyun hakkında bilgi edinmenize yardımcı olur. Dikkati çekmek için bir paralaks efekti kullanırlar, ardından ziyaretçinin ilgisini çekmek için ilgili bilgileri sağlarlar.
Artık paralaks kaydırmanın neden günümüzde bu kadar popüler olan bir tasarım trendi olduğunu biliyorsunuz. Web tasarımcılarının yararlanabileceği birçok avantajı vardır. Mevcut birçok paralaks kaydırma varyasyonu nedeniyle başka bir web sitesinde tekrarlanabilirlik kapsamı yoktur. Bu listede belirtilen web siteleri, efektin tamamen hikaye anlatımı amacıyla veya web sitesinin hissini geliştirmek için ek bir unsur olarak nasıl kullanılabileceğini de kapsar. Web sitenizde paralaks kaydırmayı neden ve nerede kullanmanız gerektiğini anlayın ve bundan yararlanın. Sadece estetik değer için zorlamayın.
