Sitenize Stratejik Olarak Animasyon Nasıl Eklenir?

Web tasarımında animasyon kullanımı tam olarak yeni bir şey değil.

Dönen 3D giflerin uzun süredir devam eden çağını hatırlıyor musunuz?

Flash'ın yaşamı ve ölümü ne durumda?

Apple, tüm mobil tabanlı cihazlarında Flash kullanımını yasakladıktan sonra, tasarımcılar animasyonu oyuna geri döndürmenin bir yolunu bulmakta hızlı davrandılar. Web geliştiricilerinin ve tasarımcılarının yaratıcılığı sayesinde artık CSS3 geçişlerinin büyüsüne, SVG animasyonlarına, yüksek kaliteli GIF'lere ve tabii ki After Effects ve Blender gibi programlarla oluşturulmuş animasyon videolarına sahibiz.

Son zamanlarda trendin düz siteler tasarlamak olduğu birkaç yıl vardı. Neyse ki, animasyon büyük bir geri dönüş yaptı ve şimdi 2018 ve sonrası için en büyük trendlerden biri.

Animasyonlar artık bir beklenti haline geldi.

Animasyonun UX ve UI Design üzerindeki olumlu etkisi, insanların görsel yaratıklar olması ve her zaman harekete ve harekete ilgi duymaları nedeniyle şaşırtıcı değildir. Animasyonlar herhangi bir süreci hayata geçirebilir ve onu bir deneyime dönüştürebilir. Hareketler, kullanıcıların bir şeyler olduğunu bilmelerini sağlar.

Örneğin, form hücrelerinin içindeki animasyonlar, kullanıcılara bir hata yaptıklarını veya eksik bilgiler olduğunu bildirebilir. Veya bir şifre girerken ve şifre yanlışsa, yıldız işaretleri kırmızıya dönebilir, biraz dans edebilir ve kaybolabilir.

Ya da bu eğlenceli oturum açma animasyonuna ne dersiniz? Web tasarımında animasyon olanakları her geçen gün artıyor. Neden sitenize bazı stratejik animasyonlar da eklemiyorsunuz?

Sitenizi Animasyon

Sitenize animasyon ekleme seçenekleri oldukça geniştir, ancak bu, atlama simgeleri ve dönen düğmelerle dolu olması gerektiği anlamına gelmez. Tasarımınıza dahil ettiğiniz animasyon miktarında bir denge olması gerekir. Nereye bakacağınızı bilemeyeceğiniz kadar çok hareket eden bir sayfa yerine "yumuşak hareket" çizgisinde düşünün. Animasyonun aşırı kullanımı, aşırı minimalizm kadar acı vericidir!

Adobe XD gibi bir program kullanmak, sitenize stratejik olarak yerleştirmek için farklı animasyonları deneme sürecinde yardımcı olabilir. Doğrudan WordPress'te oluşturmayı seviyorsanız, her modülün içinde çok sayıda animasyon olanağı bulunan Divi Builder harika bir seçenektir.

Makalenin sonunda, sitenize animasyon eklemenize yardımcı olacak bazı harika kaynaklara giden birkaç bağlantı ekledim.

Sitenizin kullanıcı deneyimini ve genel görsel kompozisyonunu iyileştirebilecek farklı animasyon türlerine bir göz atalım.

Fonksiyonel veya Estetik

Animasyonların web tasarımında iki kullanımı vardır; işlevsellik ve estetik.

Fonksiyonel Animasyonlar

Animasyonlar, ziyaretçilerin sitenizdeki kullanıcı yolculuklarında yardımcı olabilir. Harekete geçirici mesajlara veya kaçırmalarını istemediğiniz önemli bölümlere dikkat çekerler. İşlemleri kolaylaştırırlar ve görsel olarak hoşturlar.

Animasyonlar Yükleniyor

En yaygın işlevsel animasyon ve web sitesi tasarımında ilk yaygın olanlardan biri, yükleme animasyonudur. Bunlar daha önce bir site ilk açıldığında bulunurdu, ancak artık siteler anında yüklendiğinden, video yükleme, indirmelerin ilerlemesi ve sitenizin sahip olabileceği diğer işlemler gibi şeyler için kullanılıyor.

Yükleme animasyonunuzun etkili olabilmesi için markanızla eşleşmesi gerekir. Siteniz eğlenceli ve renkliyse, yükleme animasyonunuz zıplayan bir toptan renkli bir döngüye kadar her şey olabilir. Öte yandan, siteniz ciddi ve resmiyse, yükleme animasyonu bu stile uymalıdır.

fareyle üzerine gelme

Göz önünde bulundurmanız gereken diğer yaygın işlevsel animasyonlar, fareyle üzerine gelmelerdir. Fareyle üzerine gelme animasyonlarını görmeye zaten oldukça alıştık ve çoğu insan bunları bekleyecektir. Bir düğmenin üzerine gelindiğinde renk değiştirmesini sağlamak, menünüzde veya harekete geçirici mesajda kesinlikle kullanmayı düşünmeniz gereken temel bir animasyondur.

Fareyle üzerine gelmeyi kullanmanın diğer yolları, düğme gibi görünmeyen düğmeler içindir veya tıklamadan önce fareyle üzerine gelme hakkında bilgi göstermek istiyorsanız.

kaydırma

Kaydırma efektli web siteleri artık benzersiz bir fenomen değil. Paralaks kaydırma çok popüler hale geldi (ve doğruyu söylemek gerekirse biraz yorucu olmaya başladı). Bu nedenle, animasyonlu kaydırmayı kullanmak istiyorsanız alışılmışın dışında düşünün. Bölümden bölüme hareket eden öğeleri, kaydırma ile aşamalı olarak görünen öğeleri dahil edin. Estetiğin yanı sıra işlevselliği de düşünün.

Estetik Animasyonlar

Estetik veya dekoratif animasyonlar, bir siteyi görsel olarak daha çekici kılan, ancak işlevsellik açısından her zaman yardımcı olmayan animasyonlardır. İlk Walt Disney çizgi filmlerinin yapıldığı döneme ait eski bir mecaz vardır, animasyon bir "yaşam yanılsaması"dır. Animasyonun statik bir görüntüye yaptığı, onu canlandırmak, nefes almasını sağlamaktır.

Doğru miktarda estetik animasyon ile siteniz unutulmaz olabilir.

Tıpkı işlevsel animasyon gibi, dekoratif animasyonun da bir dengeye sahip olması gerekir. Kendinize bu animasyonlu arka planın gerçekten gerekli olup olmadığını veya markanızla tam olarak eşleşip eşleşmediğini sorun. Her fotoğrafın ekranda canlandırılması mı gerekiyor yoksa bu kadar çok açılır pencereye mi ihtiyacınız var? Eklediğiniz animasyonların sitenizi hoş görünmesi için yeterli olduğundan ancak bunaltıcı olmadığından emin olun.

Animasyonlu Arka Planlar

Şu anda en moda animasyonlu arka planlar, basit hareketli noktalardan karmaşık ışık efekti hareketlerine kadar parçacıklı arka planlardır. Bunlar, tüm sayfa için veya yalnızca bölümler için arka plan olarak eklenebilir. Sitenizin alanlarının daha fazla kişiliğe sahip olmasını sağlayabilirler. Eğilimlerin değiştiğini unutmayın, bu nedenle parçacıklı bir arka plan kullanırsanız sitenize gerçekten uygun olduğundan emin olun.

Sınırsız Yaratıcılık

Son olarak, siteniz için animasyonun yapabileceği şey, sınırsız yaratıcılık sunmaktır. Hemen hemen her şeyi canlandırabileceğiniz için, yaratıcı olasılıklar sonsuzdur. Animasyonlu arka planlardan ekranda hareket eden şeylere ve hatta yanıp sönen bir karakter gibi incelikli animasyonlara kadar.

Bir site, animasyona o kadar çok güvenebilir ki, sayfalar arasındaki yolculuk gerçek bir deneyimdir. Örneğin, otomobil üreticisinin yıllar içindeki geçmişini gösteren yeni Porsche sitesini ele alalım.

Ya da izometrik çizim ve animasyonlu kaydırmayı bir araya getirin ve RollPark gibi harika bir site elde edin.

Daima Mobil Cihazlar İçin Optimize Edin!

Animasyonlarınızı her zaman mobilden kontrol etmeniz gerektiğini hatırlatmamam haksızlık olur. Gerektiği gibi çalıştıklarından emin olun ve çalışmıyorsa ayarlamalar yapın. SVG animasyonları kullanıyorsanız, .svg grafikleri sonsuz ölçeklenebilir olduğu için pek sorun yaşamazsınız.

Her iki durumda da, her zaman mobil cihazlardan kontrol etmek ve animasyonlarınızı tüm formatlar için optimize etmek sitenizi çok daha iyi hale getirecektir!

Sitenizi Canlandırmanıza Yardımcı Olacak Araçlar

Burada, sitenizde kullanabileceğiniz farklı animasyon türleri için pratik makalelere bağlantıların bir listesi bulunmaktadır.

• Ücretsiz animasyon kitaplıklarından oluşan bir koleksiyon
• DIVI Builder animasyon yetenekleri
• Parçacık Arka Plan yaratıcısı
• CSS ile basit parçacıklı arka planlar oluşturmanın iki yolu
• SVG Animasyonunu Kullanma

Sonuç olarak

Animasyonlarınızı işlevsellik ve estetik açıdan dengeli tutun. Bunlar, sitenizi ezici hale getirmek için değil, hayata geçirmek için kullanılan araçlardır. Yaratıcı olmayı ve kutunun dışında düşünmeyi unutmayın.

Bir sonraki web sitenizi oluştururken (veya mevcut sitenizi güncellerken), tasarıma biraz animasyon ekler misiniz? Unutmayın: Canlı sitelere kalıcı olarak herhangi bir yeni kod eklemeden önce bir hazırlık sitesinde veya yerel sitede deneme yapmak en iyisidir!

Bundan sonra ne tür bir web sitesi animasyonu deneyeceksiniz?