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 dönemini hatırlıyor musunuz?

Flash'ın hayatı ve ölümü nasıl olacak?

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, SVG animasyonlarının, yüksek kaliteli GIF'lerin ve tabii ki After Effects ve Blender gibi programlarla oluşturulmuş animasyonlu videoların büyüsüne sahibiz.

Son zamanlarda trendin düz siteler tasarlamak olduğu birkaç yıl vardı. Neyse ki, animasyon büyük bir şekilde geri döndü 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 hareket ve hareketten etkilenmesi nedeniyle şaşırtıcı değildir. Animasyonlar herhangi bir süreci hayata geçirerek 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 bilgilerin eksik olduğunu bildirebilir. Veya bir şifre girerken ve yanlışsa, yıldızlar kırmızıya dönebilir, biraz dans edebilir ve kaybolabilir.

Kinetik Kullanıcı Arayüzünden Animasyon

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

Darin tarafından Dribbble'da animasyon

Sitenizi Canlandırma

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ı arasında bir denge olması gerekir. Nereye bakacağınızı bilemeyecek kadar çok hareket eden bir sayfa yerine “yumuşak hareket” çizgileri boyunca 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'e eklemeyi seviyorsanız, her modülde birçok animasyon olanağıyla birlikte gelen Divi Builder harika bir seçenektir.

Makalenin sonuna, sitenize animasyon eklemenize yardımcı olacak bazı harika kaynaklara 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ı yolculuğuna 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 esas olarak bir site ilk açıldığında bulunurdu, ancak şimdi 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 olması 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 stili izlemelidir.

Canlandırma Sharon Yar ve Dilys Lim on Behance

Tom Cole Architecture sitesinin UXPin'inden animasyon

hover

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ışkınız ve çoğu insan onları bekleyecektir. Üzerine gelindiğinde bir düğmenin rengini değiştirmek, 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üğmelere benzemeyen düğmeler içindir veya tıklamadan önce fareyle üzerine gelmeyle ilgili bilgileri göstermek istiyorsanız.

Design Shack'ten Animasyon

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ırma kullanmak istiyorsanız, kutunun dışında düşünün. Bölümden bölüme hareket eden öğeleri, kaydırma ile kademeli olarak görünen öğeleri dahil edin. Estetiğin yanı sıra işlevselliği de düşünün.

Youandigraphics tarafından animasyon

estetik animasyonlar

Estetik veya dekoratif animasyonlar, bir siteyi görsel olarak daha çekici hale getiren ancak işlevselliğe mutlaka yardımcı olmayan animasyonlardır. İlk Walt Disney çizgi filmlerinin döneminden kalma eski bir metafor var, animasyonun bir "hayat yanılsaması" olduğu. Animasyonun durağan bir görüntüye yaptığı şey onu canlandırmak, nefes aldırmaktı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 hareketli arka planın gerçekten gerekli olup olmadığını veya markanıza uygun olup olmadığını sorun. Her fotoğrafın ekrana canlandırılması mı gerekiyor yoksa o kadar çok açılır pencereye mi ihtiyacınız var? Eklediğiniz animasyonların, sitenizi güzel görünmesine ancak bunaltıcı olmamasına yetecek kadar olduğundan emin olun.

Hareketli Arka Planlar

Şu anda en trend animasyonlu arka planlar, basit hareketli noktalardan karmaşık ışık efekti hareketlerine kadar parçacık arka planlarıdır. Bunlar, tüm sayfa için veya sadece bölümler için arka plan olarak eklenebilir. Sitenizin alanlarının daha fazla kişiliğe sahip olmasını sağlayabilirler. Trendlerin değiştiğini unutmayın, bu nedenle parçacık arka planı kullanıyorsanız, sitenize gerçekten uyduğundan emin olun.

Femme Fatale'den Animasyon

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

Son olarak, siteniz için animasyonun yapabilecekleri sınırsız yaratıcılık sunmaktır. Hemen hemen her şeyi canlandırabildiğ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 ince 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 tarihini gösteren yeni Porsche sitesini ele alalım.

Ya da izometrik çizim ile hareketli kaydırmayı bir araya getirdiğinizde RollPark gibi harika bir site elde edersiniz.

Rollpark'tan Animasyon

Her zaman mobil için optimize edin!

Animasyonlarınızı her zaman mobilden kontrol etmeniz gerektiğini size hatırlatmamam haksızlık olur. Olması gerektiği gibi çalıştıklarından emin olun ve değilse ayarlamalar yapın. SVG animasyonları kullanıyorsanız, .svg grafikleri sonsuz ölçeklenebilir olduğundan çok fazla sorun yaşamamalısınız.

Her iki durumda da, her zaman mobil cihazlarda kontrol etmek ve animasyonlarınızı tüm biçimler 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 makalelerin bağlantılarının bir listesi bulunmaktadır.

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

Sonuç olarak

Animasyonlarınızı işlevsellik ve estetik açısından dengeli tutun. Bunlar, sitenizi canlandırmak için kullanılan araçlardır, onu ezici kılmak için değil. Yaratıcı olmayı ve kutunun dışında düşünmeyi unutmayın.

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

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

Bu eğitimlerle kendi animasyonlarınızı yaratın!

• CSS ile SVG animasyonları nasıl oluşturulur
• Animasyon oluşturmak için CSS3 geçişleri ve dönüşümleri nasıl kullanılır?