Paralaks Kaydırma ile Tasarım Yapma: Yapılması ve Yapılmaması Gerekenler

0
13

Paralaks kaydırma, tasarımcıların iki boyutlu bir ekranda 3B deneyimler oluşturmaları için yaratıcı bir araçtır. Paralaks kaydırma efekti derinlik ve boyut ekleyerek kullanıcıya sürükleyici, ilgi çekici bir deneyim sunar; markaların sürekli olarak başarmaya çalıştığı bir şey!

Paralaks kaydırma, öğelerin 3B kaydırma efekti oluşturmak için farklı hızlarda hareket ediyormuş gibi göründüğü bir web tasarım tekniğidir.

Yakın nesnelerin hızlı geçerken, uzaktaki nesnelerin daha yavaş geçtiği bir arabada sürüşün derinlik algısına benzer.

Birkaç tür paralaks kaydırma modeli vardır, ancak hepsi istenen efekti üretmek için ayrı içerik katmanları kullanır. Tasarımcılar, her katman için farklı kaydırma hızları ayarlayarak, kullanıcı kaydırdıkça ekranda hareket eden nesneler yanılsaması yaratır.

Tasarımınızda bir paralaks kaydırma oluşturmak ister misiniz? UXPin’de çok kolay! 14 günlük deneme sürümünü edinin ve hızlı bir şekilde nasıl yapacağınızı görün.

Paralaks Kaydırmanın Kısa Tarihi

Paralaks kaydırma, Disney’in Pamuk Prenses ve Yedi Cüceler gibi animasyon filmleri için bir sinema tekniği olarak 1930’lara kadar uzanır. 1980’lerin başında, video oyunu tasarımcıları 2D oyunlar için 3D efektler oluşturmak için paralaks kaydırmayı kullandılar, özellikle 1981’de Jump Bug.

Paralaks kaydırma, Internet Explorer 6’da Javascript ve CSS 2 kullanarak web tasarımını ilk kez 2007’de yaptı.

Bugün paralaks kaydırma, web tasarımcılarının sürükleyici görsel deneyimler yarattığı inanılmaz derecede karmaşık olabilir.

Eşsiz kullanıcı deneyimleri oluşturmak için oldukça etkili bir araç olmasına rağmen, tasarımcılar paralaks kaydırmanın olumsuz yanlarını göz önünde bulundurmalıdır; bunun olumsuz etkileri olabilir!

Sayfa Hızı

Paralaks kaydırma, özellikle paylaşılan barındırma planlarındaki web siteleri için bir sayfa hızı katilidir. Google’a göre, e-ticaret web siteleri için eşik iki saniyedir. Ancak diğer çoğu web sitesi için ortalama 3-6 saniye arasındadır.

Peki, e-ticaret söz konusu olduğunda hedefleriniz neler? Kullanıcıyı web tasarım becerilerinizle etkilemek veya ürün satmak için mi? Sayfa hızınızı optimize edemiyorsanız, e-ticaret veya hızın önemli olduğu web siteleri için paralaks kaydırmadan kaçınmak isteyebilirsiniz.

Paralaks kaydırma için sayfa hızının nasıl artırılacağına ilişkin bu makaleye göz atın.

İçeriği Nasıl Etkiler?

Paralaks kaydırma efekti eklemeden önce sormanız gereken bir diğer soru da içeriği nasıl etkiler?

Örneğin, Kolaj Üretimi web sitesinde tasarımcılar, satış noktaları için bir paralaks efekti eklemeyi seçtiler.

Ancak, kaydırdıkça yukarıdan ve aşağıdan kesildiği için içeriğin bir kısmını okumak zor. Kullanıcı tüm içeriği doğru şekilde tüketemediğinden bu iyi bir kullanıcı deneyimi değildir.

İçeriğinizi okumak için kullanıcılara ihtiyacınız varsa, basit tutun! Tasarımcıların içeriği kullanıcılara sunmasının ve yine de okunaklılığı sürdürmesinin başka yolları da vardır.

Paralaks Kaydırma Etkiniz Kullanıcının Dikkatini Dağıtıyor veya Rahatsız Ediyor mu?

Paralaks kaydırmanın yeri var. Yaratıcı bir ajans için, potansiyel müşterileri web tasarım becerilerinizle etkilemek mantıklıdır.

Ancak, araba sigortası teklifleri arıyorsam, teklif formuna ulaşmak için bazı süslü paralaks efektleri arasında gezinmek için gerçekten zaman harcamak istiyor muyum? Muhtemelen değil!

Kullanıcıların hızlı bilgi istediği rekabetçi endüstriler için paralaks kaydırma, hemen çıkma oranlarını ve dönüşümleri olumsuz etkileyebilir.

Her zaman içeriği, bağlamı ve web sitesinin kullanıcıya nasıl hizmet etmeye çalıştığını düşünün.

Paralaks kaydırmanın on harika örneğini bulduk. Bu web sitelerinin çoğu için öne çıkan bir tema, tasarımcıların bir hikaye anlatmak için paralaksı nasıl kullandıklarıdır.

Bu örneklerden göreceğiniz gibi, paralaks güçlü bir hikaye anlatımı aracı olabilir, ancak çok dikkatli düşünme ve planlama gerektirir.

NIIKA

NIIKA, Avustralya merkezli bir yaratıcı ajanstır. Kahraman görüntüsü, bazı ince hareketlerle güzel bir soyut tasarıma sahiptir. Siz kaydırdıkça büyük hareketli başlıklar ajansın hizmetlerini görüntülerken, soyut nesneler sayfada hareket eder.

Daha aşağıda, başka bir paralaks kaydırma efekti, ajansın iletişim bilgilerinin üstte kaydırıldığı arka planda sabitlenmiş özel bir harita kullanır.

NIIKA ayrıca, altbilgiye yakın “BİZİMLE ÇALIŞIN” eylem çağrısı için bir paralaks efekti kullanır.

NIIKA, paralaks kaydırmasında çok fazla kopya kullansa da, kritik bilgileri veya mesajları asla kaybetmezsiniz.

CAN

CANN, bir Amerikan esrarlı tonik içecek üreticisidir. Web sitesi, marka hikayesini anlatmak için sürükleyici, kesintisiz bir paralaks kaydırma efekti kullanıyor.

Geliştiriciler, CANN’in web sitesini böylesine karmaşık bir paralaks kaydırma efektini barındıracak şekilde optimize ederek harika bir iş çıkardılar.

Kopya ve içerik okunaklı ve paralaks etkisi, markanın hikayesini efervesan bir toniği temsil eden baloncuklarla tamamlamaya yardımcı oluyor. Web tasarımı ayrıca, CANN’in üç çeşidini temsil etmek için renkleri etkili bir şekilde kullanır.

Web tasarımcıları da dönüşümler için tasarımı optimize etmek için süslü efektlerden vazgeçerek CANN’in mağazasında harika bir iş çıkardılar.

oyuncak kavgası

Toy Fight, İngiltere merkezli bir yaratıcı ajanstır. Web sitesi, ana sayfada basit ama zarif bir paralaks kaydırma efektine sahiptir ve sayfanın ortasında net bir harekete geçirici mesaj görünür.

Toy Fight, kahramandan sayfanın içeriğine geçiş yapmak için her sayfada bir paralaks efekti kullanır. Bu geçişler zekice çünkü animasyonlar biraz saçma, içeriğin geri kalanı şirketin hizmetlerini ve geçmiş çalışmalarını açıklıyor – neredeyse perdeyi geri çekmek gibi.

Toy Fight’ın web sitesi, paralaks kaydırmanın bir hikayeyi anlatmaya nasıl yardımcı olabileceğinin harika bir örneğidir.

Bahçe

Garden, ödüllü bir Portekiz tasarım stüdyosudur. Web sitesi, siz kayarken güneşin battığı bir bahçe gün batımının kahraman görüntüsü için güzel bir paralaks efekti kullanır.

Daha aşağıda, çizgiler ve simgeler, siz kaydırdıkça çizilmiş gibi görünür. İnce efektler, gözlerinizi Garden’ın hizmetleri ve manşetleri gibi önemli bilgilere çeker.

Akıllı hareket

Smart Move, İsveç’teki Greater Örebro Area’da uzmanlığı çekmek ve elde tutmak için bir girişimdir. Web sitesinin ana sayfası, Örebro’nun özelliklerini ve kültürünü her birine ilgili bağlantılar ile sergileyen etkileyici bir yatay paralaks kaydırma efektine sahiptir.

Paralaks etkisi sizi doğa, ticaret, ev hayatı, eğlence ve gece hayatı dahil olmak üzere çeşitli İsveç ortamlarında akıllıca gezdirir.

Bertani Şarapları

Bertani, İtalyan bir şarap üreticisidir. Web sitesinde, markanın hikayesini anlatmak için görseller, videolar ve kopyalarla birlikte yatay bir paralaks efekti bulunuyor.

Efekt, sizi marka, bağı ve şarapları arasında bir yolculuğa çıkarmak için yatay ve dikey hareketin bir karışımını kullanır. Bertani’nin tasarımcıları, karmaşık bir yatay paralaks efektini zorlayıcı hikaye anlatımıyla dengelemek için iyi iş çıkardılar. Her şey mantıklı ve mesajlaşma öne çıkıyor.

Quentin Goupille

Quentin Goupille, Paris’ten serbest sanat yönetmeni, illüstratör ve film yapımcısıdır. Portföyü, her projenin arkasındaki hikayeyi anlatmaya yardımcı olmak için paralaks kaydırma efektlerini kullanır.

Her sayfa farklıdır ve Quentin, kullanıcıyı her filminde bir yolculuğa çıkarmak için paralaks efektleri kullanır. Sonuç, Quentin’in hikaye anlatımını ve yaratıcılığını sergilemeye yardımcı olduğu için etkileyici.

Quentin Goupille’in web sitesi, yaratıcıların çalışmalarını benzersiz ve ilgi çekici bir şekilde sergilemek için paralaks efektlerini nasıl kullanabileceğine dair mükemmel bir örnektir.

Yumurta Hakkında Çılgınlık

Crazy About Eggs, serbest dolaşan ve tavuklarının sağlıklı bir çiftlik hayatı yaşamasını sağlayan Hollandalı bir yumurta çiftçisidir.

Web sitesi, küçük öğeleri ve alt başlıkları tanıtmak için ince paralaks kaydırma efektleri kullanır. Ürünün faydaları her iki tarafta da ilerlerken, şirketin yumurta kutuları siz yarıya kadar kaydırdıkça sabit kalır.

Bu, markayı ön planda tutmanın ve kullanıcının ürüne aşina olmasını sağlamanın inanılmaz yaratıcı bir yoludur. Kullanıcı bir daha süpermarkette olduğunda, Crazy About Eggs’in ambalajını muhtemelen tanıyacaktır.

Kibana

Kibana, Fransa’da konaklama, etkinlik alanları, bahçeler, pazar ve diğer açık hava deneyimleriyle bir tatil beldesidir.

Kahraman resminde bir metin girişi bulunur. Kaydırırken, Kibana’nın güzel bahçelerinden birine dalıyorsunuz ve anında orada olmayı diliyorsunuz!

Daha fazla kaydırdıkça, ince hareketler kullanıcının dikkatini Kibana’nın temel özelliklerine ve güzel resimlerine çeker. Altbilginin yanında, tasarımcılar Kibana’nın ekibini tanıtmak için akıllı bir paralaks efekti kullanır.

Özet

Paralaks kaydırma güçlü bir araçtır, ancak tasarımcılar, kullanıcıları etkilemek için anlamsız animasyonlar yerine bir hikaye anlatmaya yardımcı olmak için kullanmalıdır. Paralaksı yukarıda gösterdiğimiz örnekler kadar etkili kullanmak çok zaman, işbirliği ve planlama gerektirir.

Her zaman kullanıcının ihtiyaçlarını göz önünde bulundurun ve kullanıcı deneyimini olumsuz etkiliyorsa paralaks efektlerini kullanmayın.

Harika Kullanıcı Deneyimleri Tasarlamak için UXPin’i Kullanma

UXPin, tüm ekibi bir projenin başarısına katkıda bulunmaya davet etmenize olanak tanıyan güçlü bir işbirliğine dayalı tasarım aracıdır. UX tasarımcıları, sürükleyici görsel deneyimler ve kullanıcı arayüzleri tasarlamak için UXPin’i kullanabilir.

14 günlük ücretsiz UXPin denemesiyle bugün güzel kullanıcı deneyimleri oluşturmaya başlayın!

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz