9 Website Dengan Animasi Yang Menginspirasi Kami Sebagai Web Creator

Pembuat web sedang dalam pencarian tanpa akhir untuk memperbarui situs web mereka dengan efek desain paling mutakhir dan trendi yang mewakili nilai sebenarnya dari produk atau layanan mereka. Tetapi di antara palet warna, tipografi, daya tanggap, strategi konten, dan banyak lagi, pemikiran tentang teknik desain tingkat lanjut bisa jadi agak menakutkan. Salah satu cara terbaik untuk mencapai situs web yang desainnya sepadan dengan garam mereka adalah dengan mencari inspirasi dari rekan-rekan Anda. Menanyakan pada diri sendiri apa yang Anda sukai dari desain mereka, bagaimana itu bisa relevan dengan desain Anda, dan bagaimana Anda ingin memodifikasinya untuk kebutuhan Anda sebenarnya bisa sangat sederhana.

Mari kita lihat sembilan contoh animasi situs web kreatif ini dan mulai belajar dari para profesional.

Teknik animasi yang digunakan Handwrytten di bagian pahlawan di beranda mereka adalah representasi pedih dari produk mereka sendiri: menggabungkan pena dan tinta. Salah satu nilai kunci dalam desain ini (antara lain) adalah pengunjung situs web segera memahami manfaat yang ditawarkan produk, dan apa yang akan diperolehnya dengan menggunakannya.

Foto kartu tulisan tangan yang disandingkan dengan ilustrasi kartun benar-benar menjelaskan semuanya. Adapun elemen desain lainnya pada halaman, skema warna putih bersih dan hitam dengan sedikit oranye matahari terbenam memberikan keseimbangan antara kecanggihan dan bakat artistik. Setelah menelusuri situs web ini, kami tentu termotivasi untuk melihat-lihat lebih jauh dan mempelajari lebih lanjut tentang produk Handwrytten.

Crisp menambahkan efek animasi kecil ke ilustrasi vektor mereka yang menyampaikan pesan merek yang bergema meskipun ukuran ilustrasinya kecil. Animasi bersahaja dari setiap ilustrasi vektor memang menambahkan sentuhan manusia pada persona merek crisp. Kami terutama menyukai animasi api unggun di bagian yang membahas dukungan pelanggan. Ini menambah kehidupan pada desain datar minimalis yang digunakan secara elegan di seluruh beranda. Ini adalah cara sempurna untuk menggunakan teknik desain datar yang trendi ini sambil tetap menambahkan joie de vivre yang diperlukan untuk pengalaman pengguna yang menarik.

Corebook menyambut pengunjung ke situs web mereka dalam mode gelap penuh, dengan animasi yang halus dan ramping saat Anda menggulir situs ke bawah. Dengan cara unik mereka sendiri, Corebook menemukan cara mendesain animasi pahlawan yang mudah dan terlihat jelas, meskipun tidak ada kontras antara abu-abu gelap dengan latar belakang hitamnya.

Pilihan konten animasi minimalis namun informatif. Ini dimungkinkan hanya dengan beberapa bentuk dan warna persegi, animasi menggambarkan jenis produk jadi (buku merek) yang akan dimiliki klien setelah bergabung dengan Corebook: buku merek mereka sendiri yang mencapai standar industri dan terlihat modern, trendi, dan canggih.

Best Day Ever menggunakan teknik animasi looped sehingga ilustrasi hewan mereka tidak bergantung pada trigger untuk terus bergerak. Ilustrasi apa pun yang terlihat oleh pengunjung situs web akan terus bergerak selama dapat dilihat di layar.

Ada pendekatan konten-pertama di seluruh halaman, karena kata-kata dan kalimatnya singkat dan tidak lebih dari yang seharusnya. Persis jenis pendekatan inilah yang sangat cocok dengan animasi ramah, dengan kombinasi teks minimal dengan desain yang ceria dan penuh warna. Gerakan hewan tidak hanya menghidupkan teks yang dipasangkan dengan mereka, tetapi juga mencapai pengalaman percakapan untuk setiap pengguna.

Situs web Best Day Ever adalah contoh utama bagaimana Anda dapat mengambil satu ide dan prinsip desain (dalam hal ini tema menggabungkan kesegaran energik dengan kehalusan) dan mewakilinya secara konsisten melalui skema warna Anda, strategi konten Anda, dan efek desain lanjutan Anda.

Siapa yang tidak suka lubang bola klasik? Menggunakan warna merek klasiknya pada latar belakang putih, Google mencetak emas, sekali lagi.

Dengan satu efek pelacakan mouse, Google berhasil melakukan pengalaman pengguna yang membuat pengunjung situs web merasa seperti benar-benar berada di dalam lubang bola! Dan saat Anda menggulir halaman ke bawah, yang terjadi hanyalah bola menjadi lebih besar. Tidak ada konten di bawah bola, yang persis seperti aslinya.

Google berhasil memberi kami pemahaman sensasional langsung tentang untuk apa produk ini, dan mereka melakukannya dengan deskripsi judul teks pahlawan sederhana dan tombol CTA.

Kami tahu bahwa Google akan membantu kami merencanakan petualangan berikutnya yang tidak akan mengecewakan kami. Dan apakah Anda melihat efek perubahan warna saat Anda mengarahkan kursor ke tombol? Ini adalah pertama kalinya kami melihat tombol yang efek hovernya berubah menjadi empat warna terpisah, bukannya berubah dari satu warna ke warna lainnya.

Ini seperti tidak pernah kita lihat sebelumnya. Di depan mata kita, kita melihat bentuk abstrak animasi bergerak dan membentuk ilustrasi binatang. Ini memicu rasa ingin tahu kita, mengagumi hewan-hewan cantik dan bertanya-tanya, hewan apa lagi yang mereka gunakan?

Ini adalah persis proses berpikir yang Anda ingin pengunjung situs Anda miliki. Anda menceritakan sebuah cerita visual, dan Anda ingin dia membuka halaman berikutnya dari cerita itu.

Jika Anda memikirkannya, mendongeng dan penyebab spesies yang terancam punah memiliki banyak kesamaan: keduanya tentang menarik perhatian pendengar dan meyakinkannya (walaupun secara halus) bahwa materi pelajaran Anda sangat penting, alias layak untuk didengarkan.

Industri ganja masih cukup baru dan segar, jadi masuk akal jika situs web yang menjualnya sebagai produk membutuhkan tampilan dan getaran yang terasa sama.

Mari kita berhenti untuk menghargai betapa banyak teknik desain yang terjadi di beranda saja: latar belakang rangkai salindia di balik koleksi gambar animasi, efek 3D, kata-kata yang berputar…dan semuanya terlihat indah.

Bagaimana orang bisa melihat beranda ini dan tidak ingin menjelajahi situs web lebih jauh? Hanya jika Anda melakukan ini maka Anda dapat melihat animasi yang menakjubkan menjadi lebih menakjubkan saat Anda menggulir ke bawah.

Kami menyukai bagaimana begitu Anda turun ke bawah halaman, toples berputar ke bawah, dan objek pada latar belakang berwarna meluncur ke margin halaman saat latar belakang berubah menjadi putih. Sangat kreatif. Semakin rendah Anda pergi, objek 3D yang lebih indah mempertahankan efek gulir vertikal ke atas.

Semua teknik ini digabungkan menciptakan perasaan seperti Anda hanya ingin terus berjalan dan membaca lebih banyak situs web, bahkan hanya untuk melihat visual yang menarik dan apa yang telah dibuat oleh para desainer selanjutnya.

Jika Anda menavigasi ke halaman lain, Anda akan melihat bahwa objek 3D dari konten utama beranda telah menjadi bagian permanen dari latar belakang, saat masih mengambang dan bergerak. Pilihan kontinuitas ini memungkinkan pengisahan cerita holistik yang mendekatkan intinya ke rumah: Kami adalah produk yang luar biasa.

Apakah itu skema warna, desain 3D, gerakan gambar yang dikecilkan, atau ilustrasi kartu kredit yang turun dalam gerakan seperti akrobatik saat kita menggulir ke bawah beranda?

Ini sedikit dari segalanya.

Skema warna di sini berjalan jauh. Nuansa oranye dikelilingi oleh banyak ruang putih dan font sans-serif bulat yang sederhana semuanya bekerja sama secara holistik. Tapi yang benar-benar menarik di sini adalah teknik animasi yang digunakan untuk ilustrasi kartu kredit.

RappiPay mendapatkan suara kami untuk orisinalitas dan keterlibatan yang luar biasa. Konten situs memandu pengunjung ke bawah halaman sampai dia mencapai titik terendah, karena saat kartu kredit meluncur dengan mulus ke bawah halaman, itu memicu gambar dan ilustrasi lain untuk muncul. Dan di antara interaksi kartu kredit dengan elemen lain, seperti mengungkapkan tagihan uang tunai atau menggambar garis putus-putus di sekitar bola, kartu menunjukkan gerakan akrobatik ke bawah.

Sama seperti kartu kredit yang menceritakan kisah dengan baik, penuh aksi dan vitalitas, itu juga berakhir dengan tinggi. Potongan melingkar di bagian akhir yang menunjukkan pembelian pemilik kartu memberi tahu kita berapa banyak fitur dan kemampuan yang dimiliki kartu yang satu ini, dan bagaimana pemilik kartu benar-benar membawanya ke mana pun dan ke mana pun.

Kata-kata minimalis dan mutakhir adalah semua yang dapat kita pikirkan di sini. Jika sebuah gambar mengatakan seribu kata, kita akan mengatakan bahwa gambar animasi menceritakan 5.000 kata atau bahkan lebih.

Oke, sekarang giliran Anda. Teknik animasi yang kami cantumkan di sini hanyalah sebagian kecil dari apa yang dapat dilakukan pembuat web saat menambahkan fitur animasi ke situs web mereka. Semakin banyak inspirasi tersedia setiap hari, dan ada banyak hal untuk dilihat dan dipelajari. Moto kami sebagai desainer adalah memulai dengan dasar-dasar, dan karena Anda memiliki praktik animasi sederhana di bawah ikat pinggang Anda, situs web Anda dapat menunjukkan kepada dunia apa artinya menjadi penggerak dan pengocok.