Tasarım Trendi: Web Tasarımında Sıvı Animasyon
Hoş tasarım aksanları, ziyaretçileri web sitenizde tutan beklenmedik bir kullanıcı deneyimi yaratan şeylerden biri olabilir.
Tam olarak bunu yapan bir trend tekniği, web tasarımında sıvı animasyon kullanılmasıdır. Eğilimi ile ilgili harika olan şey, içeriğinizle çalışan bir arayüz oluşturmak için çok farklı şekillerde kullanabilmenizdir.
Burada, bu trendin çeşitli örneklerine ve sizin için nasıl çalıştırabileceğinize bakacağız. (Bu animasyonların her birinin nasıl çalıştığına dair iyi bir fikir edinmek için örnekleri tıkladığınızdan emin olun.)
Envato Elements'i keşfedin
Sıvı Animasyon Nedir?
Sıvı animasyonlar, ekranda su benzeri bir his veren hareketlerdir. Bu animasyonlar genellikle dalgalanan veya dalgalanabilen ve akabilen yavaş, akışlı bir harekete sahiptir. (Ve işte bunu yapan şey; sıvı animasyonlar gerçekçi hissetmek zorunda.)
Sıvı animasyonlar, fareyle üzerine gelme durumu olarak veya bir videonun veya hareketli animasyonun bir parçası olarak etkili olabilir. Kaydırma sırasında sıvı bir animasyonu bile etkinleştirebilirsiniz.
Bu teknik popülerlik açısından gerçekten patlamaya başladı, çünkü çoğunlukla bilgisayarlar ve daha küçük web cihazları ve tarayıcılar tekniği verimli bir şekilde sunma kapasitesine sahipler.
Bu trendin kökleri, animasyonlu tasarımda damla şekilleri kullanmaya geri dönebilir. Geçen yıl oldukça moda olan bu tasarımların birçoğunda (yukarıda Fleava dahil) bir miktar sıvı animasyon öğesi vardı.
Sıvı Katmanlar
Sıvı animasyon, portföy web siteleri ve yaratıcı ajanslar için popüler bir tekniktir, çünkü muhtemelen burası birçok tasarımcının test ve yeni tasarım konseptleriyle oynamak için rahat hissettiği bir yerdir.
Sıvı animasyon, katmanlı efektler gibi diğer trendlerle uyumlu çalışır. (Ayrıca, buradaki örneklerin çoğunda diğer eğilimlerden bazılarını göreceksiniz.)
Ilya Kulbachny, basit bir tasarıma çok fazla görsel ilgi eklemek için iki farklı şekilde iki farklı sıvı animasyon katmanı kullanıyor. En üst katman, sıvı etkileşimi ve kullanıcı etkileşiminden etkilenmeyen bir hız ile hareket eden metin içerir.
Arka plan katmanı bir görüntü gibi görünür ancak resmin üzerine geldiğinizde kenarlar sıvı akışında hareket eder. Görüntü fareyle üzerine gelindiğinde su benzeri hareketlerle kaydırılır.
Sıvı Vurgulu İşlemleri
Sıvı vurgulu animasyon durumları, bu trendin en popüler kullanımlarından biri olabilir. Fare, animasyonlu fareyle üzerine gelindiğinde öğenin üzerine gelinceye kadar sizi sıvı animasyona yönlendirecek hiçbir şey yoktur.
Kullanıcılarla etkileşime girebilecek basit ve keyifli bir araçtır.
Sıvı animasyonlarla ilgili olan şey, hareketin o kadar gerçekçi ve akıcı olması, aslında hareketin nasıl gerçekleştiğini ve çalıştığını görmek için insanları onunla oynamaya teşvik ediyor.
Sıvı “Kaydırma”
Sıvı animasyon harika bir “kaydırma” veya gezinme aracı yapar. (Bundan emin olmak için yukarıdaki örneği tıklamak isteyeceksiniz.)
Farenin ekran üzerindeki römorkörler ve çekilmesiyle, görüntünün hareketi bir akvaryumda dönüyormuş gibi hissediyor. Tüm öğelerin hiçbir yere gitmeden etrafınızda hareket ettiğini görebilirsiniz.
Sonra durduğunuzda, hareketlerinizle birlikte gelen dalgaların ve hızın ekrana yerleştiği küçük bir animasyon anı var.
Hareket inanılmaz derecede gerçekçi ve kullanıcıları tasarım alanının içine taşıyor.
Sıvı Arkaplan / Ön Plan
Sıvı animasyon, tasarımın arka planında veya ön planında bir tasarım öğesi olabilir ve kullanıcıdan etkileşim olmadan “çalışır”.
Güzelliğin Ötesinde Arzu Devrimi, bunu yapan bir arka plan / ön plan unsuruna sahiptir. Küçük lekeler ekran boyunca hareket eder ve hatta birbirine bağlanır. Fare ek bir fareyle üzerine gelindiğinde daha fazla canlandırır ve şekillendirir.
İşaretçi ayrıca imleç olarak bir blog ile sıvı bir his ve ekrandaki hareket için gerçekçi bir his var. Damla işaretçisi neredeyse diğer öğelerin hareketine uyması için yavaşlar.
Sıvı Sinemagraf
Sinemagraf görüntüleri bir trend olarak gelip geçti ve daha likit animasyonlarla yeniden ortaya çıkıyor.
Bu tasarımlar, içinde bir miktar sıvı hareketi olan sabit ve hareketli bir görüntünün - genellikle arka planda - bir kombinasyonunu içerir.
Yukarıdaki örnekte 1 Eksi 1'den, görüntüdeki kadın elbisesinin hareketi sayesinde su altında görünüyor. Basit ama görsel olarak ilgi çekici. Web sitesi tasarımı, kaydırma altında çeşitli diğer animasyon tekniklerini de kullanıyor.
Sualtı Hareketi
Yukarıdaki örnekte - sualtı tarzı hareket - ima edildi ve burada baskın animasyon efekti.
Sualtı hareketi, yavaş, akıcı bir hareket bu tekniği kullanmanın popüler bir yoludur. Les Animals, su altında hareket eden bitkilere benzeyen animasyonlu bir illüstrasyon kullanır. Şekiller kaygan ve akıcı, yavaş ve sakin bir düzende akar.
Tasarımla etkileşime girerseniz, fare hareketinde ek bir sıvı animasyon durumu vardır. İnce ve arayüz tasarımının geri kalanına mükemmel uyum sağlar.
Sıvı Tipografi
Bunlardan birazını zaten gördük, ancak tipografi için sıvı animasyon efektleri de geçerli olabilir.
Bu tekniği yazı üzerinde çalışmanın hilesi kelimelerin okunabilirliğini korumaktır. Herhangi bir noktada metin okunamayan bir noktaya uzatılır veya çekilirse, animasyon çok ileri gitmiştir.
Bunu başarmak oldukça hassas bir denge olabilir, ancak iyi yapıldığında bakmak ve etkileşim kurmak eğlenceli olabilir. Metin öğelerindeki sıvı animasyon, Myles Ng'den yukarıdaki örnek gibi kendi başına çalışabilir veya fareyle üzerine gelme durumu olarak işlev görebilir.
Sonuç
Sıvı animasyon büyük ölçüde trend olan bir tasarım tekniğidir. Motion, web sitenizin tasarımıyla ilgilenen kullanıcıların daha uzun süre kalmasına yardımcı olabilir ve içerikle etkileşim kurmak için bir neden daha sağlayabilir.
Bu web sitesi tasarım tekniği basit ve gerçekçi görünmelidir. Çok hızlı veya zorlanmış görünen hareketler, sıvı bir animasyondan beklediğiniz ince hareketle aynı hoş görünüme sahip olmayacaktır.
