Animasi Web Di Era Pasca-Flash

Dalam lingkungan yang sangat kompetitif ini, perusahaan dengan panik mencari cara untuk menarik dan mempertahankan perhatian orang. Saat kita menjalani kehidupan kita sehari-hari, aliran stimulasi visual yang tak ada habisnya memancar kepada kita dari iklan animasi di jalan, video di ponsel kita, belum lagi feed media sosial kita, menciptakan rasa gerakan konstan yang berlomba-lomba untuk perhatian kita.

Reaksi sepersekian detik terhadap gerakan di lingkungan kita dikembangkan dari kebutuhan untuk bertahan hidup dan dipicu oleh rangsangan lingkungan yang dianggap berpotensi mengancam atau berbahaya; orang memberi perhatian ekstra pada hal-hal yang bergerak. Saat kita menangkap sesuatu yang bergerak cepat dari sudut mata kita, otak memperingatkan kita dalam sepersekian detik karena otak bawah sadar kita telah bereaksi terhadap bahaya sebelum pikiran sadar kita memiliki waktu untuk memproses informasi tersebut.

Pengiklan mengetahui hal ini, dan itulah sebabnya kami memiliki iklan jalanan yang beranimasi di halte bus dan di peron kereta bawah tanah, iklan video yang muncul di aliran media sosial, dan papan reklame elektronik dengan video gerak penuh. Tekniknya adalah efek satu-dua pukulan yang dirancang untuk menyampaikan pesan pemasaran. Pertama, dengan menarik perhatian kita, dan kedua, menggunakan video dan animasi untuk menyampaikan pesan.

Jika gambar statis bernilai seribu kata, berapa nilai animasi?

Di sinilah animasi web masuk. Desainer web berharap untuk menangkap dan mempertahankan perhatian kita, dan mungkin menambahkan kejutan kegembiraan yang tak terduga. Animasi web dapat digunakan untuk memvisualisasikan berbagai langkah dalam proses atau ide yang kompleks, untuk mengilustrasikan pesan pemasaran sederhana, atau untuk memindahkan sesuatu di halaman web dengan cara yang alami dan lancar saat orang menggulir—sekali lagi, untuk menarik perhatian ke sesuatu.

Bagaimana Animasi Web Dimulai, Munculnya GIF

Selama hari-hari awal World Wide Web, segalanya agak statis dan membosankan. Halaman web sebagian besar didasarkan pada desain grafis dan tata letak dari dunia cetak. Namun, beberapa desainer melakukan upaya bersama — terlepas dari tantangan teknis dan bandwidth — untuk memasukkan bentuk awal animasi web agar lebih dinamis dan menarik. Salah satu penambahan pertama animasi GIF ke situs web adalah pada Batman Forever karya Jeffrey Zeldman pada tahun 1995. Pengunjung disambut oleh penerbangan Batman ke arah mereka, dianimasikan sebagai urutan gambar.

Situs promo Batman Forever menjadi salah satu situs terpopuler saat itu. Ini mengilhami desainer dan pengembang web lain untuk memasukkan animasi web GIF sebagai elemen unik dan menarik ke dalam situs web mereka.

Maju cepat 20 tahun dan GIF animasi sekarang ada di mana-mana. Mereka ada di Twitter, Messenger, iMessage, WhatsApp, Skype, Instagram, dan Facebook. GIF cocok untuk animasi loop pendek, urutan gambar, dan bahkan loop video pendek. Kekurangan yang disayangkan adalah format file GIF tidak memiliki transparansi variabel dan tidak mendukung saluran alfa; oleh karena itu, semua piksel sepenuhnya buram atau sepenuhnya transparan.

Animasi GIF adalah awal kebangkitan dalam desain web, tetapi tidak ideal. Terutama di masa-masa awal dial-up dan kecepatan internet yang lambat, GIF adalah babi bandwidth. Hasilnya adalah resolusi rendah, urutan pixelated. Kelemahan bagi desainer yang harus mengompresi GIF ke ukuran sekecil mungkin adalah palet 8-bit yang terbatas, yang mengakibatkan banyak kebingungan. Ini berubah dengan internet berkecepatan tinggi menjadi lebih umum di abad ke-21, dan sebagai akibatnya, animasi web menjadi terlihat lebih baik dengan jutaan warna, dan lebih halus dengan frame-rate yang lebih tinggi.

Fajar Animasi Web Flash

Ledakan animasi web yang besar datang dengan diperkenalkannya Flash pada tahun 1996 ketika Macromedia mengumumkan plugin web mereka dan alat animasi berbasis bingkai yang menyertainya: Macromedia Flash (setelah mereka mengakuisisi FutureSplash Animator, sebuah program animasi vektor). Flash memainkan peran utama dalam menghadirkan kemampuan baru ke web. Dari audio dan animasi hingga interaktivitas dan video, Flash membantu mendorong kemajuan internet.

Kesempatan untuk membangun animasi web sederhana, ramping, berbasis vektor di seluruh situs yang menyertakan interaksi, menciptakan apa yang bisa disebut periode "barok" desain web dengan (terlalu) banyak elemen animasi memenuhi lanskap. Namun demikian, Flash menawarkan sekilas kemungkinan desain web dinamis, membebaskan desainer untuk bereksperimen dan melepaskan periode evolusi desain web yang cepat.

Animasi flash ringan dan relatif mudah dibuat. Hanya berukuran beberapa kilobyte, mereka didistribusikan dalam format file SWF dan file menggunakan suara dengan grafik vektor yang tajam. Membuat animasi web menjadi proses yang disederhanakan yang tidak menambah banyak waktu pemuatan halaman web. Tetapi untuk semua itu, kelemahan signifikan tetap ada — plugin browser diperlukan untuk menjalankannya.

Selain itu, interaksi canggih di Flash diaktifkan oleh ActionScript (AS), bahasa pemrograman berorientasi objek yang mirip dengan JavaScript. ActionScript awalnya dirancang untuk mengontrol animasi vektor 2D sederhana tetapi kemudian berkembang menjadi alat yang canggih.

Sayangnya, animasi Flash tidak dimaksudkan untuk menjadi responsif, tidak berfungsi dengan baik di semua perangkat, dan akhirnya dihapus dari semua perangkat seluler populer. Meskipun ukuran filenya relatif kecil, Flash tidak dioptimalkan dengan baik dan akhirnya memakan CPU, yang juga merupakan masalah pada ponsel. Akhir era Flash datang setelah Steve Jobs memutuskan untuk tidak mendukung Flash di perangkat seluler Apple.

Flash dibuat selama era PC—untuk PC dan mouse. Namun era seluler adalah tentang perangkat berdaya rendah, antarmuka sentuh, dan standar web terbuka—semua area di mana Flash gagal.

Steve Jobs

Animasi Web Hari Ini

Saat ini, karena Flash sudah usang, kami memiliki kebutuhan yang berbeda untuk animasi web. Alat harus fleksibel dan ringan. Desainer web harus membuat konten yang responsif dan mudah beradaptasi untuk perangkat yang berbeda (desktop, tablet, dan seluler), dengan mempertimbangkan berbagai dimensi layar, browser, rasio aspek, kepadatan piksel, dan banyak lagi. Karya animasi web kami harus bekerja pada ponsel berukuran 5 inci, 720 piksel hingga tablet QXGA 9,7 inci, hingga layar Retina 6K 32 inci.

Teknologi telah matang ke titik di mana bahkan perangkat seluler yang kurang bertenaga memiliki bandwidth dan kekuatan pemrosesan untuk menangani animasi web yang sangat menuntut dan konten video resolusi tinggi. Ini tidak berarti situs web harus super "sibuk". Seperti biasa, ini tentang mencapai keseimbangan yang tepat antara animasi, interaksi dinamis, dan elemen statis. Fakta bahwa kita dapat mengimplementasikan banyak animasi web mewah hari ini tidak berarti kita harus melakukannya.

Desainer/animator web juga harus mempertimbangkan dukungan lintas platform. Sepuluh tahun yang lalu, desainer tidak harus memastikan bahwa kreasi mereka akan terlihat bagus di berbagai perangkat. Rasio aspek yang berbeda, orientasi potret, dan lanskap, serta berbagai kepadatan piksel dan jarak pandang harus diperhitungkan. Teka-teki ini memberi desainer web serangkaian tantangan baru dan potensi jebakan. Pengujian pengguna menghabiskan waktu yang berharga, lebih banyak hal bisa salah di banyak platform, dan animasi web harus lebih detail dari sebelumnya.

HTML5, CSS3, JavaScript, dan SVG (grafik yang dapat diskalakan) tampaknya menjadi solusi terbaik untuk animasi web. Menggunakan teknologi dan bahasa web modern ini akan membantu mengatasi sebagian besar, tetapi tidak semua, masalah di atas. Tetapi selalu merupakan ide yang baik untuk melangkah dengan hati-hati, terutama ketika berada di wilayah yang belum dipetakan, dan QA serta pengujian yang ekstensif adalah suatu keharusan.

Mengapa Menggunakan Animasi Web?

Animasi web dapat menarik dan menahan perhatian orang lebih lama daripada halaman web statis dan mengomunikasikan ide atau konsep dengan lebih jelas dan efektif. Animasi web yang sangat baik menyampaikan cerita di balik setiap gerakan. Ini semua tentang menghidupkan animasi dengan makna dan "jiwa" (lat. anima).

Animasi web harus lancar, bermakna, dan mendukung perjalanan pengunjung. Perancang/animator web perlu menyadari bagaimana animasi cocok dengan pengalaman pengguna, mencoba memprediksi kemungkinan aliran pengguna, dan kemudian mendukungnya dengan cara yang berarti.

Desainer web tidak boleh melihat animasi web dari perspektif teknis semata; mereka perlu melihatnya dari sudut pandang pengguna.

Salah satu hal penting tentang animasi adalah waktu. Waktu yang tepat memberikan makna fisik dan emosional pada sebuah animasi. Pengalaman harus mulus dan logis. Jika animasi tidak lancar (memiliki masalah waktu), orang dapat menganggapnya sebagai bug dan kehilangan semua motivasi untuk menjelajahi situs web lebih lanjut.

Animator perlu menggunakan waktu yang tepat untuk memberikan efek yang diinginkan. Berapa banyak keyframe yang harus digunakan dalam animasi? Perubahan dinamis seperti apa dalam animasi yang disebabkan oleh interaksi pengunjung, dan seberapa cepat respons muncul setelah interaksi? Apakah animasinya aneh, serius, menghibur?

Dari sudut pandang logis, kita dapat membagi animasi web menjadi dua tipe dasar:

• Animasi web statis non-interaktif, misalnya, animasi GIF.
• Animasi web dinamis dengan keterlibatan pengguna dan interaktivitas yang berubah pada input pengguna.

Contoh terbaik dari animasi dinamis adalah permainan, di mana pengguna memanipulasi konten di layar. Contoh sederhana lainnya adalah mengubah posisi elemen tertentu saat pengunjung situs menggulir melalui situs web pengguliran paralaks. Animasi tidak pasif, itu bervariasi tergantung pada tindakan pengguna.

Animasi web dinamis sering digunakan untuk menyajikan infografis animasi di situs web, sehingga orang lebih memperhatikan area tertentu saat menggulir halaman—ini adalah cara yang ampuh untuk menyoroti informasi yang relevan.

Pro dan Kontra Animasi Web

Berikut adalah beberapa pro dan kontra dari teknik animasi web, termasuk solusi lama yang tidak lagi digunakan.

Bagaimana dengan pro dan kontra dari animasi web secara umum? Animasi web yang dijalankan dengan baik masih dapat terlihat tidak pada tempatnya, jadi selalu ada baiknya untuk mengajukan beberapa pertanyaan penting (serta klien kuis dan anggota tim lainnya) sebelum melanjutkan untuk mengintegrasikan animasi ke dalam desain situs web.

Pertama, kita perlu memeriksa bagaimana animasi akan mempengaruhi pengalaman pengguna. Apakah ini akan meningkatkan UX situs web? Desainer harus:

• Periksa desain website yang ada (jika tersedia)
• Periksa audiens target dan platform perangkat keras yang mereka gunakan
• Periksa waktu muat situs dan beban CPU
• Jelajahi alternatif lain
• Perhatikan kegunaannya

Bukan ide yang baik untuk menggunakan animasi web di situs hanya untuk mengikuti tren.

Keputusan untuk menggunakan animasi web harus diperlakukan sebagai keputusan desain lainnya; desainer web harus mempertimbangkan pro dan kontra dan memastikan bahwa pengalaman pengguna tidak terganggu. Mereka juga harus bekerja dengan pengembang untuk memastikan persyaratan kode dan memastikan mereka tidak akan terjebak dengan kode yang tidak efisien yang mungkin harus diubah di kemudian hari.

Teknologi animasi web modern telah berkembang secara signifikan dalam 20 tahun terakhir—kinerja, bandwidth yang tersedia, dan kualitas rendering telah meningkat. Namun, desainer harus melangkah dengan hati-hati dan hanya menambahkan animasi ke situs web jika itu secara bermakna meningkatkan pengalaman pengguna.

Bacaan lebih lanjut di Blog Desain Toptal:

• Cara Membuat Animasi Pemuatan Kustom untuk Menurunkan Rasio Pentalan
• Membuat Ilustrasi Menekuk Pikiran dengan Sketsa dan Looper dalam Waktu Singkat
• Panduan Langkah demi Langkah untuk Animasi UI dengan Prinsip dan Sketsa
• Inspirasi Animasi Logo untuk Membuat Merek Anda Lebih Relatable
• Panduan Langkah demi Langkah untuk Membuat Video Penjelasan Produk Animasi