Her şeyi yanlış yapıyorsunuz: WordPress sitenizi oluşturmak için paralaks kullanma pop
Yıllar boyunca, web sitesi aynı şekilde sunulan aynı bileşenden oluşur. Temel olarak metniniz ve medyanız var. Sadece bu. Ancak, kullanıcıların metinle etkileşime girmesine izin veren etkileşimli bir öğe görünür. Bu tür etkileri ve şeyleri yönlendirir. İçerikle kullanıcı etkileşimi arzusundan, paralaksın etkisi doğar. Hemen hemen herkes paralaksını şu anda çalışırken gördü, ancak bu herkesin ne olduğunu, nasıl çalıştığını veya ne kullanıldığını bildiği anlamına gelmiyor. Etkilerle yakınlığa sahip olanlar, bundan hoşlanma veya nefret etme eğilimindedir. Nadiren bir orta zemin vardır.
Bir tasarım öğesi itiraz edildiğinde, nedenini merak ettim? İnsanları bu kadar heyecanlandıran Parallax’ın nesi var? Neden rakipler olmasın? Ve savunucular neden bu kadar hevesli? Aşağıdakiler, paralaksın bir açıklaması, nasıl çalıştığı, ayrıca çekici bir tasarım tekniği olarak kullanımının savunulmasıdır. Burada, bu tasarım trendinin kitlenizi büyüleyebileceği ve onları kişisel hikayenize veya markanıza gerçekten şaşırtıcı bir şekilde çekebileceği görüşündeyim. Ve elbette, gerçek hayatın birçok örneğini ekleyeceğim.
Paralaks nedir? Paralaksın ilk olarak yan kaydırma video oyunları ortaya çıktığında tasarım estetiğinden kaynaklandığı düşünülüyordu. Bu, arka plan görüntüsü ön arka plan görüntüsünden daha yavaş hareket ettiğinde ve derin bir izlenim yarattığında yapılan görsel efektleri ifade eder. Bu daha sonra 2011 yılında HTML5 ve CSS3 kombinasyonu ile web tasarımı dünyasına uygulandı.
Erken paralaks rulolarının popüler bir örneği, düşen hikayelerinde New York Times tarafından uygulandı.Animasyonlu ve video arka planlarının birleşimi, gerçekten sürükleyici hisseden bir hikayenin deneyimi için yapılır.Gerçekten daha önce web’de böyle bir şey olmadı.Paralaks etkisinin dışında, hikayenin kendisi birkaç bölüme ayrıldı.Hala görülecek bir şey.New York Times’ın hikayesi, kar yağışı paralaklamanın popüler bir örneğidir.Paralaks tasarımı kavramı aslında oldukça basittir.Bu, kullanıcı sayfayı aşağı kaydırdığında ön arka plandan daha yavaş bir arka plan yaparak web sitesine üç boyutlu bir öğe ekler.Bu, arka planın üstünde yüzen metin ve görüntüler gibi görünmesini sağlar ve geri standart sitede bulunmayan bir etkileşim unsuru ekler.
Ancak konsept o kadar basit ki bazı insanları hayal kırıklığına uğratıyor. Paralaks hile olarak görülebilir. Sonuçta, sitenizin her zaman farklı içeriği veya özü yoktur. Ama animasyonlu efekti ekleyin ve aniden her şey daha ilginç hale geliyor mu? Fikir yanlış şekilde ovalayabilir. Purdue Üniversitesi’nde yapılan bir araştırma, popüler olmasına rağmen paralaks rulolarının her zaman kullanıcı deneyimini geliştirmediğini göstermektedir. Ama ne zaman? Tanrım, başarılı olsun! İşletme ve Sanat, tüm işletmelerin hikayelerini anlatacak bir hikayeye sahip görevlerle anlatıyor. Bu hikayenin tam anlamıyla “bir kez” bir tür anlaşma olması gerekmez, ancak bu hikayenin şirketiniz hakkında bir mesaj kabul edilebilir bir şekilde iletmesi gerekir. Bazı işletmeler için hikaye, yurt odalarında işletme kuran üniversite çağındaki girişimcileri içerir. Facebook gibi. Hikayelerinde insanlardan bağlantılı olabilecek, istekli ve esinlenebilecek sağlam bir anlatı var. Slogan “farklı düşünme” olduğu için, mesaj bir asi olmak, kutunun dışında düşünmek (bej) ve yaratıcılığı kucaklamakla ilgilidir. Ancak bir şirketin hikayesinin, kuruluşuyla doğrudan başa çıkması bile gerekmez. Bunun yerine, müşterilerin ve müşterilerin ürünlerini nasıl kullandıkları hakkında bir mesaj iletebilir. Hikaye, şirketin ürünleri olan biri tarafından yönetilecek yaşam tarzı ile ilgili olabilir. Elmaları düşünün. Hikaye yeniliklerden ve stillerden biridir.
Apple’ın “Farklı Düşün” kampanyası başarılı oldu çünkü en iyi anlatım bileşenini kullandı. Şirket tarafından kendisi veya ürünleriyle müşteri hayatının nasıl olduğu hakkında anlatılan hikaye, marka geliştirme ve pazarlamanın önemli bir bileşenidir. Birçok hikaye anlatımı işi dergi reklamlarında, mağaza ekranlarında ve profesyonel olarak dağıtılan pazarlama materyallerinde gerçekleşirdi. Şimdi, bir şirket hikayelerini web sitelerini bir hikaye anlatma platformu olarak kullanarak çevrimiçi maliyetlerin küçük bir kısmında anlatabilir. Bir pazarlama taktiği olarak Targengku yeni değil. Aslında, tüm iyi pazarlama bir hikaye ya da başka bir hikaye anlatıyor. Ancak bir anlatıcı veya karakter, etkileyici bir ortam ve nesir ile bir hikaye anlatmak, her işi eğlendiren bir şey değildir. Birçok durumda, bunu yapmak zorundalar ve web sitesi bunu yapmak için doğru yer. Neden? Niye? Bir düşünün:
Web sitesi sınırsız erişim sağlar. Herkes her gün sitenizi ziyaret edebilir. Televizyon reklamları sadece gündüz veya gece boyunca belirli noktalarda çalışır, ancak web sitesine 7/24 erişilebilir ve potansiyel kitlenize katlanarak artırılabilir.
Web sitesi etkileşimli bir platform sunuyor. Geleneksel pazarlama neredeyse web sitesi kadar etkileşimli değildir. Ziyaretçiler boş zamanlarında hikayenize göz atabilir, bağlantılara tıklayabilir, video izleyebilir, resim galerilerine vb. İçeriğinizle doğrudan etkileşime girebilirler, mesajınızı sadece pasif olarak gördüklerinden çok daha unutulmaz hale getirebilirler. Sitenizde hikayeler anlatmak veya hatta sadece alternatif navigasyon yöntemleri sunmak için paralaks rulolarını kullanmanın bazı dezavantajları vardır. SEO ile ilgili ana sorun. Bir -sayfa sitesi (çoğunlukla paralaks kaydırma siteleri) yalnızca bir HTML sayfasından oluşur, yani sitenizin yalnızca bir kez Google’da dizine eklendiği anlamına gelir. Yalnızca bir başlık etiketiniz ve bir URL’niz var. Bu, sitenizin arama sonuçlarında önemli bir darbe almasını sağlayabilir, bu da iş için gerçek bir sorundur.
Bununla birlikte, birçok geliştirici, sitenin ana hikayesini anlatmak için bir sayfa biçimi kullanarak çalışır ve ek sayfalar oluşturmak ve içeriği güncellemek için geleneksel bloglar sunar. Yavaş yükleme süresi de bir sorundur. Entegre video arka planları, birçok yüksek çözünürlüklü görüntü ve sesin yüklenmesi uzun zaman alabilir, ziyaretçilerin tam deneyimin tadını çıkarmadan önce zıplama riskini artırabilir.
Bu gördüm – evet, beyaz ekran – Gisele Bundchen’i içeren bir Undermarmour kampanyası için web sitesini görmeye çalıştığımda. İyi keder. Web sitesinin neden mükemmel bir hikaye platformu haline geldiğini (ve neden her işletmenin anlatacak bir hikayesi olduğunu) açıkça bildikten sonra neden paralaks hikaye anlatımı için mükemmel, mevcut konulara – Palalax’a dönebiliriz. Şu anda hala belirsizse, bir pacing iyi bir çevrimiçi hikaye için mükemmel bir arkadaş. Bu aşırı kullanılabilir, evet, ancak bunların çoğu etkili bir araçtır. Bu, hikayeleri anlatmak için paralaks rulolarının en büyük cazibe merkezlerinden biridir. Bu, okuyucuları en başından çekti ve hikayenin bir sonraki bölümünü ortaya çıkarmak için sayfayı aşağı kaydırmaya itti. Kitabın sayfalarını çevirmek gibi kaydırın. Ve hepimiz sürükleyici kitapların ne kadar olduğunu biliyoruz.
Fracking’in tehlikeleri sizi doğrudan hikayeye çeker.
Bu, ziyaretçilere yukarıda bahsettiğim gibi kontrol duygusunu verir, bir paralaks sitesinde kaydırma, kitap sayfalarını çevirerek eşitlenebilir, bu da site ziyaretçilerinin gördükleri üzerinde kontrol sahibi olduğu anlamına gelir. Rulo eylemi pürüzsüz olduğu için bu tıklamaktan farklıdır. Basit ve tekrarlayan bir hareket, hikayenin daha fazla bölümünü sürekli olarak ortaya koyuyor. Örneğin NASA Prospect sitesini ele alalım. Burada çalınan ses ve görsel öğeler var, bu da bunu interaktif hikaye anlatımının somut bir parçası haline getiriyor. Kuzey Dakota Üniversitesi öğrencileri tarafından oluşturulan döner hikayede, NASA ve İnsan Sanatları Programı ile çalışan döner hikayede tıklanacak parçalar, çalacak müzik ve okumak için kayıt girişleri var. NASA Prospect Citus ayrıca harika bir sese sahip . Bu, sunduğum iki örneğin benzersiz içerik deneyiminin gerçekten benzersiz olmasına izin verir, ancak sağlığınız için kaydırma sitesi, orijinal bir şekilde bilinen bilgilerin nasıl sunulacağının iyi bir örneğidir. Bu siteye göz attığınızda, farklı meyvelerle servis edilir.
Turuncu bir illüstrasyon dilimlerden sonra dilimlerle birlikte gelirken, bu meyvenin sağlıklı özelliklerini incelersiniz. Ve kaydırmaya devam ettiğinizde, diğer çeşitli meyvelerin faydalarını öğrenirsiniz ve veda bilgeliği “daha fazla meyve ye” ile terk edilirsiniz. Bu site, etkileşimli bir sanat eseri olarak basit ama çok etkili bir konsepte sahiptir. Renk ve bilgilendirici ile dolu sağlığınız için kaydırın. İşinizi nişinizdeki diğerlerinden farklı bir iş olarak oluşturmaya çalışırsanız, içeriğinizi öne çıkarırsanız, kısmen rakiplerinizden önemli bir web sitesi oluşturarak bunu başarabilirsiniz. Kaç web tasarımcının standart portföy siteleri var? Çok, değil mi? Ancak Alquimia’nın yaptığı şey, onları ayıran bir tasarım yapmaktır.
Tasarım şirketi, çeşitli müşteriler için etkileşimli ve tasarlanmış çevrimiçi web siteleri, uygulamalar ve çevrimiçi deneyimler yaratır.Ancak sitelerini öne çıkaran şey, ana sayfalar üzerindeki etkilerin ardından paralaks ve imleci kaydırmaktır.İmleciyi ekranın etrafında kaydırıp hareket ettirdiğinizde, arka plan yıldızı ters yönde hareket ederek daha geniş bir alan derinliği ekler.
Alquimia sitesi bir etkileşim katmanı ekler. Paralaks’ın neden çok etkili olduğunu anladıktan sonra hikayeleri anlatmak ve UX’i geliştirmek için paralaks kullanarak, bunları özellikle web sitelerine, WordPress sitelerine uygulamanın çeşitli yollarını tartışmaya başlayabiliriz. Paralaks anlatımını genel kullanıcı deneyimini de geliştirecek şekilde kullanmak için bazı ipuçları. Paralaks rulolarını kullanan hikayelerin gerçekten etkili olması için önceden benzersiz bir şey sunun, başlangıçta sitenizin diğerlerinden farklı olduğunu açıklamanız gerekir. İlk bakışta, üstte bir navigasyon menüsü ve başlık görüntüsü olan diğer tüm siteler gibi görünmemelidir. Demek istediğim, bu şeylere sahip olabilir, ancak hemen dikkat çekmek için farklı bir şey kullanmak çok daha iyi bir fikirdir. Halkı demans hakkında eğitmek için etkileşimli öğrenme deneyimleri sağlamak için Alzheimer Research UK tarafından yapılan çevrimiçi bir portal olan laboratuvardan iyi bir örnek geliyor. Tanıtım videosunu geçtikten sonra, bir laboratuvarda sanal bir yürüyüşe çıkmanızı sağlayan bir paralaks kaydırma özellikli site sunulur. Bu, insanların demans araştırmaları ile bağlantılı olarak bilim adamlarının ne yaptığını anlamalarına ve insanlara nasıl yardımcı olabileceklerini anlatmalarına yardımcı olur. “Tur” a geçtiğinizde, demans araştırma numaraları ve beynin mikroskop altında ne olduğu gibi çeşitli konular hakkında daha fazla bilgiyi tıklamanıza izin veren bir daire görünür. Mesele şu ki, bu site standart araştırma sitesinden farklı görünüyor ve büyük ölçekte öne çıkıyor. Pandu ziyaretçileri hikayeniz aracılığıyla her paralaks sitesi ziyaretçilere içerik yoluyla çeşitli şekillerde rehberlik edecektir. Ancak, bu her zaman beklendiği gibi hedeflenmez. Bir hikaye anlatmaya çalışırsanız, tasarım ziyaretçilere yol açmalıdır. Bu pasif bir şey olamaz. Rolls, ziyaretçileri bir konudan bir sonraki konuya kitaplardaki bölümler veya paragraflardaki cümleler gibi mantıklı bir şekilde getirmelidir. Yaban hayatı sitesinin bu konuda ne yaptığını gerçekten seviyorum. Yaban hayatı, karakter tasarımları, animasyon, zengin medya, UX ve UI entegrasyonunu kullanarak önemli bir web sitesi ve dijital proje yapan “Dijital Öncü Mürettebat” dan oluşur. Vurguları, bireylerin markasının ve web sitelerinin hikayesini anlatmak, ziyaretçilere hikayeyi nasıl anlattıkları hikayesi boyunca rehberlik etmektir. Meta için bu nasıl?
İmleç “aşağı” düğmesine dönüştürülür, böylece her zaman ne olacağını bilirsiniz ve kullanıcı ile etkileşime girebilecek birçok slayt gösterisi widget/video vardır.Sizi zaman çizgisine, mekiğin lansmanına ve aya inişten geçen katmanlı bir kaydırma efekti ile bu siteyi veya anlattığı hikayeyi hemen unutmayacaksınız.”Bir sayfa” dan daha fazlasını yapın, ziyaretçileri bir bölümden diğerine taşımak için paralaks haddeleme kullanan büyük miktarlarda bir çok sayfa teması var.Ancak, birçoğu sadece temel sitelerdir, ancak sayfalar yerine bir kaydırma parçası vardır.Paralaks kaydırmanın bir hikaye anlatımı tekniği olarak atanması için gerçek bir anlatı olması gerekir. Bir Brewlife Pazarlama Ajansı sitesine bakın. Bu bir portföy sitesi, elbette, ama burada da kesin bir hikaye var. Paralaks yöntemi, ziyaretçileri şirketin ne olduğu ve müşterinin çalışmalarına nasıl yaklaştıkları hakkında daha fazla bilgi edinmeye teşvik etmek için sorunsuz bir şekilde kullanılır. Ve bu tek sayfa bir site bile değil. Bireysel bir blog ve örnekler için sayfaları var. Ve en iyi bölüm? Zarif temadan divi teması kullanılarak inşa edildi. Ziyaretçileri “Sırada ne var?” Her iyi hikaye okuyucuyu sayfayı çevirmeye teşvik etmelidir; Bundan sonra ne olacağını merak etmek için. Parallax web siteniz aynı şeyi içerik ve/veya navigasyon yoluyla yapmalıdır. Bazı siteler navigasyonu sadece yuvarlayarak bırakmayı seçer. Ancak, bu her zaman yeterli değildir. Bazen, içeriğe ek olarak navigasyon dahil, ziyaretçilerin hikayedeki konumlarını bulmalarına yardımcı olabilir. Ayrıca, seçtikleri takdirde geçmeleri için bazı kontroller verdi. “Tekneyi” ayırın, ziyaretçilerin gerçekten “Sırada ne var?” çekici görüntüler ve sürükleyici metin ve metin sinyalleri ile.
Aşağı ok, ziyaretçileri gitmeleri gereken yere yönlendirmeye de yardımcı olur. Ve anlatı hikayesi gibi, tekneyi deneyimliyor gibi durumlarda, önde gelen oklarla “kaydırma” kelimesi var, bu yüzden bir sonraki adımda ne yapmanız gerektiği hakkında hiçbir soru yok. Haruki Murakami, haşlanmış harikalar diyarı ve dünyanın sonu gibi eserleriyle tanınan ünlü bir romancıdır. Okuyucunun “Sırada ne var?” Alt satırın ilk teması üzerine inşa edilen bu sitedeki her kaydırma, başka bir alıntı, diğer kitaplar, keşfedilecek diğer özellikleri ortaya çıkarır. En üstteki bağlantı sizi aynı yere işaret ediyor, ancak rulo bulmacalarla dolu ve oldukça ilginç. Haruki Murakami Situs, okuyucu uyarısını tutmak için benzersiz bir tasarım kullanıyor. Yukarıda tartışılan okuyucuyu “sırada ne var” sormaya teşvik etme fikriyle sitenizdeki ziyaretçileri daha uzun süre tutun. İyi bir paralaks sitesi, ziyaretçilerinizi sitenizde geleneksel sitelerden daha uzun tutabilir. Vurgu rulolar üzerinde olduğundan, bahçenin dibine kayma ve oradaki yolculuğun tadını çıkarmaları muhtemeldir!
Genişletilmiş site yatarak tedavi dönemi, tüm sayfalarda çeşitli noktalarda hareket etme ve görüntüleme davetine öncelik vermeniz gerektiği anlamına gelir. CTA’yı sayfanın altına bırakmaya çalışmayan Ben Bodyguard uygulaması için, geleneksel satışların kopyasına uygun. Ve bu durumda, başarılı olmalı çünkü Ben gecekondu mahallelerinde yürürken takip ettiğiniz açık bir anlatı var. Bununla birlikte, anlattığınız hikaye o kadar doğrusal değilse, ziyaretçiler aşağı kaydırıldığında (ve aşağı ve aşağı) potansiyel müşterileri yakalamak için CTA’yı erken veya ana içeriğin yanına görüntülemek için iyi bir fikir. sayfa.
Başka bir örnek, Salatalık Seltzer’in yaratıcısından Cornelius Krump’dan geldi. Bu site, bir sayfa teması için bir çocuk teması olarak inşa edilmiştir. Bu site ile ilgili her şey, hoş bir avantaj sağlarken üst sınıf alkol tedarikçisi web sitesini taklit eder. Salatalık Yeşil Bıyık, sen kimsin? Kaydırmadan önce “Meraklı?” Bir okla, daha fazlasını öğrenmek için sizi çekin. Tıklandıktan sonra, şirketin kökeninin hikayesine götürülürsünüz ve kaydırdığınızda, kalın görüntüler, dokulu arka planlar ve kişilik girip görünmez. Pitchfork dergisinin geleneksel navigasyon unsurunu korumak, makaleler ve geleneksel stil haber içeriği sunan müzik dünyasında (küçük bir nostalji ile) olanları kapsayan bir çevrimiçi müzik dergisidir. Üstteki ana menüde beklediğiniz gibi, Site genelinde gezinme ve taş düzeninde manşetler ve görüntüler görüntülenir.
Kilise dinamik ve etkileşimli kullanıcı deneyimleri oluşturmak için ince kaplama kullanarak yükseldi. Kilise web sitesi yükselişi, minimum kaplamanın ne kadar etkili olduğuna dair iyi bir örnektir. Özel bir tema kullanılarak inşa edildi. Başlamak için, kalın bir başlık ve ilgili makaleye bağlantı içeren bir video arka planı vardır. Ancak kaydırdığınızda, görünümün altına bağlı veranda için ana navigasyonun göreceksiniz. Oradan, boyutlandırılmış metin ve yayılmış bağlantılarla dolu daha fazla resim ile karşılanacaksınız. Burada hiçbir şey gerçekten lüks değil ama genel düzen etkili ve ilginç. Ayrıca, navigasyon oldukça tanıdık, böylece ziyaretçileri karıştırmaz. Parşömenlerin tetiklediği kaplama etkisi Reebok’un daha fazla insan kampanyasına daha fazla boyut verir. Reebok web sitesinde “daha fazla insan deneyimi ol” başka bir örnektir. Burada oynanan alanın derinliğinde çok fazla yanılsama olmasa da, her kaydırma sürtünmenin etkisini tetikler. Arka plan değişti ve yeni içerik yerine kaydı. Bu dinamik ve biraz gelenekseldir, içerik katmanını daha çekici hale getirir. İş için Araçlar WordPress sitenize paralaks anlatımı uygulamak istiyorsanız, genel kavramın nasıl çalıştığını anlamanıza yardımcı olur. Birkaç temel öğreticiyi takip etmek size tüm parçaların nasıl birlikte gittiğine dair bir resim verecektir. Başından beri bir site oluşturmamayı seçerseniz, her zaman temayı veya eklentiyi kullanabilirsiniz, ancak hemen tartışacağız. İşte görmek için bazı yararlı öğreticiler ve makaleler:
Pure CSS Parallax web sitesi – sadece CSS’yi kullanarak bir paralaks efekti oluşturmak için iyi bir öğretici. Andy Shora’nın öğreticisi – Bu öğretici, CSS ve JQuery kullanarak bir paralaks sitesi oluşturmanıza rehberlik eder. WordPress hikayenizi yeni bir seviyeye getirmek için DIY kılavuzu – yukarıdaki Pitchfork dergisinden bahsettiğim kapak hikayesini beğendiyseniz, burada olduğu gibi nasıl yapılacağını öğreneceksiniz.
Şimdi, eklentiler ve temalar için … Eklenti ve Paralax temaları, kontrol edebileceğiniz ilgiyi çeken paralaks temaları ve eklentilerinin bir listesini topluyoruz. Çok fazla varyasyon var ve kesinlikle ihtiyaçlarınıza uygun olanı bulacaksınız. Paralaks tasarımının herkes için olmadığını tamamen fark ettim. Ancak sadece stil kötü kullanılabileceğinden, bundan kaçınmanız gerektiği anlamına gelmez. Aslında, hikayeler anlatmanın bir yolu olarak, paralaks ziyaretçilerin hayal gücünü yeni bir cesur bir şekilde şaşırtabilir ve yakalayabilir. Yani, saha ziyaretlerini, iade ziyaretlerini ve dönüşümü artırmak için bir araç olarak çok etkili olabilir. Kredi Görüntüsü: Enrico Strocchi, George Vale
Şimdi senden haber almak istiyorum. Sizce paralaks sitenin tasarımında iyi bir yeri var mı yoksa üstesinden mi geliyor? Bir hikaye anlatma hikayesi ne olacak? Ve en sevdiğiniz örnekler nelerdir? Aşağıda ses. Etiket:
tasarım paralaks
hikaye anlatımı WordPress
