Web Yaratıcıları Olarak Bize İlham Veren Animasyonlu 9 Web Sitesi

Web yaratıcıları, web sitelerini, ürünlerinin veya hizmetlerinin gerçek değerini temsil eden en son, modaya uygun tasarım efektleriyle güncellemek için hiç bitmeyen bir arayış içindedir. Ancak renk paletleri, tipografi, yanıt verme, içerik stratejisi ve çok daha fazlası arasında, gelişmiş tasarım teknikleri düşüncesi biraz korkutucu olabilir. Tasarımı tuzuna değecek bir web sitesine ulaşmanın en iyi yollarından biri, ilham almak için meslektaşlarınıza bakmaktır. Kendinize onların tasarımları hakkında neyi sevdiğinizi, tasarımınızla nasıl alakalı olabileceğini ve onu ihtiyaçlarınıza göre nasıl değiştirmek istediğinizi sormak gerçekten çok basit olabilir.

Bu dokuz yaratıcı web sitesi animasyon örneğini inceleyelim ve profesyonellerden öğrenmeye başlayalım.

Handwrytten'ın ana sayfalarının kahraman bölümünde kullandığı animasyon teknikleri, ürünlerinin dokunaklı bir temsilidir: kalem ve mürekkebi birleştirmek. Bu tasarımdaki (diğerlerinin yanı sıra) önemli bir değer, web sitesi ziyaretçisinin ürünün sunduğu faydaları ve onu kullanarak ne kazanacağını hemen anlamasıdır.

Çizgi film illüstrasyonuyla yan yana yerleştirilmiş elle yazılmış bir kartın fotoğrafı gerçekten her şeyi anlatıyor. Sayfadaki diğer tasarım öğelerine gelince, gün batımı turuncusu ipuçlarıyla temiz beyaz ve siyah renk şeması, incelik ve sanatsal yetenek arasında bir denge kurar. Bu web sitesine göz attıktan sonra, kesinlikle daha fazla etrafa bakmak ve Handwrytten'in ürünü hakkında daha fazla bilgi edinmek için motive olduk.

Crisp, illüstrasyonların küçük boyutuna rağmen yankı uyandıran marka mesajlarını ileten vektör illüstrasyonlarına küçük animasyon efektleri ekler. Her vektör çiziminin abartısız animasyonu, gerçekten de Crisp'in marka kişiliğine insani bir dokunuş katıyor. Özellikle müşteri desteğinin tartışıldığı bölümdeki animasyonlu şenlik ateşini seviyoruz. Ana sayfada zarif bir şekilde kullanılan minimalist, düz tasarıma hayat katar. Bu, heyecan verici bir kullanıcı deneyimi için gerekli olan yaşama sevincini eklerken bu modaya uygun düz tasarım tekniklerini kullanmanın mükemmel bir yoludur.

Corebook, siz siteyi aşağı kaydırırken ince ve zarif animasyonlarla ziyaretçilerini tam karanlık modda web sitesinde karşılar. Corebook, kendi benzersiz yöntemiyle, siyah arka planı üzerine koyu gri arasındaki kontrast eksikliğine rağmen, kolay ve net bir şekilde görülebilen kahraman animasyonları tasarlamanın bir yolunu bulur.

Animasyon içeriği seçimi minimalist ancak bilgilendiricidir. Bu, yalnızca birkaç kare şekil ve renkle mümkün kılınmıştır, animasyonlar, müşterilerin Corebook'a katıldıktan sonra ellerinde olacakları bitmiş ürün türünü (bir marka kitabı) gösterir: endüstri standartlarına ulaşan ve modern görünen kendi marka kitapları, modaya uygun ve sofistike.

Best Day Ever, döngülü bir animasyon tekniği kullanır, böylece hayvan illüstrasyonları hareket etmeye devam etmek için tetikleyicilere ihtiyaç duymaz. Web sitesi ziyaretçisinin gördüğü resim, ekranda görülebildiği sürece sürekli hareket eder.

Sözcükler ve cümleler kısa olduğundan ve olması gerekenden daha uzun olmadığından, sayfa boyunca içerik öncelikli bir yaklaşım vardır. Minimal metin ile neşeli, renkli bir tasarımın birleşimiyle, samimi animasyonlarla çok iyi uyum sağlayan tam da bu tür bir yaklaşımdır. Hayvanların hareketleri yalnızca eşleştirildikleri metne hayat vermekle kalmaz, aynı zamanda her kullanıcı için bir konuşma deneyimi sağlar.

Best Day Ever'ın web sitesi, tek bir fikir ve tasarım ilkesini (bu durumda enerjik tazeliği incelikle birleştirme teması) nasıl alabileceğinizin ve bunu renk şemanız, içerik stratejiniz ve gelişmiş tasarım efektleriniz aracılığıyla tutarlı bir şekilde nasıl temsil edebileceğinizin en iyi örneğidir.

Klasik top çukurunu kim sevmez? Klasik marka renklerini beyaz bir arka plan üzerinde kullanan Google, bir kez daha altını vuruyor.

Tek bir fare izleme efektiyle Google, web sitesi ziyaretçisini gerçekten bir top çukurunun içindeymiş gibi hissettiren bir kullanıcı deneyimi yaratmayı başarıyor! Ve sayfayı aşağı kaydırdığınızda, olan tek şey topların büyümesidir. Topların altında hiçbir içerik yok, bu tam olarak gerçek şeyde olduğu gibi.

Google, bize bu ürünün ne işe yaradığına dair anında, sansasyonel bir anlayış sağlamayı başarıyor ve bunu basit bir ana metin başlığı açıklaması ve CTA düğmesi ile yapıyor.

Google'ın bizi hayal kırıklığına uğratmayacak bir sonraki maceramızı planlamamıza yardım etmek üzere olduğunu biliyoruz. Düğmenin üzerine geldiğinizde renk değiştiren efektleri gördünüz mü? Bu, vurgulu efekti bir renkten diğerine geçmek yerine dört ayrı renge dönüşen bir düğmeyi ilk kez görüyoruz.

Daha önce gördüğümüz hiçbir şeye benzemiyor. Gözlerimizin önünde, hareket eden ve bir hayvanın resmini oluşturan hareketli soyut şekiller görüyoruz. Güzel hayvanlara hayranlık duyarak ve başka hangi hayvanları kullandıklarını merak ederek merakımızı uyandırır.

Bu tam olarak web sitenizin ziyaretçisinin sahip olmasını istediğiniz düşünce sürecidir. Ona görsel bir hikaye anlatıyorsun ve bu hikayenin bir sonraki sayfasına dönmesini istiyorsun.

Bunu düşünürseniz, hikaye anlatımı ve nesli tükenmekte olan türlerin nedeninin pek çok ortak noktası vardır: ikisi de dinleyicinin dikkatini çekmek ve onu (kurnazca da olsa) konunuzun birinci derecede önemli olduğuna, yani dinlemeye değer olduğuna ikna etmekle ilgilidir.

Esrar endüstrisi hala oldukça yeni ve taze, bu yüzden onu bir ürün olarak satan bir web sitesi için aynı hissi veren bir görünüme ve havaya ihtiyaç duyacağı mantıklı.

Sadece ana sayfada kaç tane tasarım tekniğinin gerçekleştiğini takdir etmeyi bırakalım: hareketli görüntü koleksiyonlarının arkasında bir slayt gösterisi arka planı, 3D efektler, dönen kelimeler… ve hepsi güzel görünüyor.

Birisi bu ana sayfayı nasıl görebilir ve web sitesini daha fazla keşfetmek istemez? Sadece bunu yaparsanız, aşağı kaydırdıkça dudak uçuklatan animasyonların daha da muhteşem hale geldiğini görebilirsiniz.

Sayfayı aşağı indirdiğinizde kavanozun aşağı doğru dönmesini ve arka plan beyaza dönerken renkli arka plandaki nesnelerin sayfanın kenar boşluklarına kaymasını seviyoruz. Çok yaratıcı. Ne kadar aşağı giderseniz, daha güzel 3B nesneler yukarı doğru dikey kaydırma efektini koruyor.

Bu tekniklerin tümü bir araya geldiğinde, sadece merak uyandıran görselleri ve tasarımcıların bir sonraki adımda ortaya koyduğu şeyleri görmek için bile, web sitesini daha fazla okumaya ve okumaya devam etmek istediğiniz gibi bir his yaratır.

Diğer sayfalara giderseniz, ana sayfanın ana içeriğindeki 3B nesnelerin, hareket etmeye devam ederken arka planın kalıcı bir parçası haline geldiğini göreceksiniz. Bu süreklilik seçimi, noktayı eve daha da yaklaştıran bütünsel hikaye anlatımına izin verir: Biz harika bir ürünüz.

Ana sayfada aşağı kaydırırken akrobatik bir hareketle inen renk şeması, 3D tasarım, abartısız görüntü hareketi mi yoksa kredi kartı çizimi mi?

Her şeyden birazdır.

Buradaki renk şeması uzun bir yol kat ediyor. Çok sayıda beyaz boşlukla çevrili turuncu tonları ve basit, yuvarlak bir sans-serif yazı tipi, hepsi birlikte çok bütünsel bir şekilde çalışır. Ancak burada asıl ilgi çeken şey, kredi kartı gösterimi için kullanılan animasyon teknikleridir.

RappiPay, özgünlük ve olağanüstü katılım için oyumuzu alıyor. Site içeriği, ziyaretçiyi dibe vurana kadar sayfada aşağı doğru yönlendirir, çünkü kredi kartı sayfada çok yumuşak bir şekilde kayarken, diğer resimlerin ve illüstrasyonların görünmesini tetikler. Ve kredi kartının, nakit paraları ortaya çıkarmak veya bir kürenin etrafına noktalı çizgiler çizmek gibi diğer unsurlarla etkileşimi arasında, kart tamamen akrobatik dönüşler gösterir.

Kredi kartının hikayeyi güzel, aksiyon ve canlılık dolu anlatması gibi, aynı zamanda yüksekte bitiyor. Sonunda, kart sahibinin satın alımlarını gösteren dairesel kesik, bize bu kartın ne kadar çok özellik ve yeteneğe sahip olduğunu ve kart sahibinin onu gerçekten her yere ve her yere nasıl götürdüğünü anlatıyor.

Minimalist ve modern kelimeler burada aklımıza gelen tek şey. Bir resim bin kelime söylüyorsa, hareketli bir resmin 5.000 veya muhtemelen daha fazlasını anlattığını söyleriz.

Tamam, şimdi sıra sende. Burada listelediğimiz animasyon teknikleri, web yaratıcılarının web sitelerine animasyonlu özellikler eklerken başarabileceklerinin yalnızca küçük bir kısmıdır. Her geçen gün daha fazla ilham kaynağı oluyor ve görülecek ve öğrenilecek çok şey var. Tasarımcılar olarak sloganımız, temel bilgilerle başlamaktır ve kemerinizin altında basit animasyon uygulamalarınız olduğundan, web siteniz dünyaya hareket ettirici ve sarsıcı olmanın ne demek olduğunu gösterebilir.