Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(): http:// wrapper is disabled in the server configuration by allow_url_fopen=0 in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Warning: getimagesize(http://indonesiamendesain.com/wp-content/uploads/2020/09/Screen-Shot-2020-07-16-at-13.07.54-300x136.png): failed to open stream: no suitable wrapper could be found in /home/yfzbjhce/indonesiamendesain.com/wp-content/plugins/td-cloud-library/shortcodes/header/tdb_header_logo.php on line 792

Tren Desain Animasi Liquid Ini Akan Membuat Desain Web Kamu Lebih Keren

- Advertisement -
- Advertisement -
- Advertisement -

Aksen desain yang menyenangkan dapat menjadi salah satu hal yang menciptakan pengalaman pengguna yang tak terduga yang membuat pengunjung di situs web Anda.

Teknik tren yang melakukan ini adalah penggunaan animasi liquid dalam desain web. Yang hebat tentang trennya adalah Anda dapat menggunakannya dalam berbagai cara untuk membuat antarmuka yang berfungsi dengan konten Anda.

Di sini, kita akan melihat berbagai contoh tren ini dan bagaimana Anda dapat membuatnya bekerja untuk Anda. (Pastikan untuk mengklik contoh-contoh untuk merasakan bagaimana masing-masing animasi ini bekerja.)

Apa itu Liquid Animation?

animasi cair

Animasi liquid adalah gerakan di layar yang terasa seperti air. Animasi ini sering kali memiliki gerakan lambat dan mengalir yang dapat beriak atau surut. (Dan itulah yang membuatnya bekerja; animasi liquid harus terasa realistis.)

Animasi liquid dapat berlaku sebagai keadaan mengambang atau sebagai bagian dari video atau animasi bergulir. Anda bahkan dapat mengaktifkan animasi cair pada gulir.

Teknik ini benar-benar mulai meledak dalam popularitas, terutama karena komputer dan perangkat web dan browser yang lebih kecil memiliki kapasitas untuk membuat teknik secara efisien.

Akar tren ini mungkin kembali menggunakan bentuk gumpal dalam desain dengan animasi. Banyak dari desain tersebut (termasuk Fleava, di atas), yang agak trendi tahun lalu, memiliki unsur animasi cair.

Lapisan Liquid

animasi cair

Animasi liquid adalah teknik populer dengan situs web portofolio dan untuk agensi kreatif, mungkin karena ini adalah tempat di mana banyak desainer merasa nyaman menguji dan bermain dengan konsep desain baru.

Animasi liquid bekerja bersamaan dengan tren lainnya, seperti efek berlapis. (Anda juga akan melihat sekilas tren lain di sebagian besar contoh di sini.)

Ilya Kulbachny menggunakan dua lapisan animasi liquid dalam dua cara berbeda untuk menambahkan banyak minat visual pada desain sederhana. Lapisan atas termasuk teks yang bergerak dengan animasi liquid dan kecepatan yang tidak terpengaruh oleh interaksi pengguna.

Lapisan latar belakang tampak seperti sebuah gambar tetapi ketika Anda mengarahkan kursor ke gambar, tepinya bergerak dalam aliran liquid. Gambar bergeser dengan gerakan mouse di atas dengan gerakan seperti air.

Tindakan Melayang Liquid

animasi cair

Keadaan animasi liquid melayang mungkin salah satu kegunaan paling populer dari tren ini. Tidak ada yang memberi Anda isyarat ke animasi liquid sampai mouse bergerak di atas item dengan status hover animasi.

Ini adalah alat sederhana dan menyenangkan yang dapat melibatkan pengguna.

Hal yang menarik dari animasi cair adalah gerakannya sangat realistis dan lancar sehingga mendorong orang untuk terus bermain dengannya untuk melihat bagaimana gerakan terjadi dan bekerja.

“Scroll” Liquid

animasi cair

Animasi liquid adalah alat scroll atau navigasi yang hebat. (Anda pasti ingin mengklik contoh di atas untuk yang satu ini.)

Dengan tunda dan tarikan mouse di layar, gerakan gambar terasa seperti Anda berputar di akuarium. Anda dapat melihat semua elemen bergerak di sekitar Anda tanpa pergi ke mana pun.

Lalu ketika Anda berhenti, ada momen kecil animasi ini di mana riak dan kecepatan yang menyertai gerakan Anda tampak menetap di layar.

Gerakannya terasa sangat nyata dan membawa pengguna ke ruang desain.

Latar Belakang Liquid / Latar Depan

animasi cair

Animasi liquid dapat menjadi elemen desain di latar belakang atau latar depan desain dan “dijalankan” tanpa interaksi dari pengguna.

Beyond Beauty, The Revolution of Desire memiliki elemen latar belakang / latar depan yang melakukan ini. Gumpalan kecil bergerak di layar dan bahkan terhubung satu sama lain. Mereka lebih bernyawa dan berubah bentuk ketika mouse terlibat dengan status hover tambahan.

Pointer juga memiliki nuansa cair dengan blog sebagai kursor dan nuansa realistis dengan gerakan di layar. Blob pointer hampir melambat agar sesuai dengan gerakan elemen lainnya.

Cinemagraph Liquid

animasi cair

Gambar Cinemagraph telah datang dan pergi sebagai tren, dan muncul kembali dengan animasi yang lebih liquid.

Desain ini termasuk kombinasi gambar diam dan bergerak – sering di latar belakang – yang memiliki beberapa gerakan cair untuk itu.

Dalam contoh di atas dari 1 Minus 1, wanita dalam gambar tampak di bawah air berkat pergerakan gaunnya. Ini sederhana tetapi menarik secara visual. Desain situs web menggunakan berbagai teknik animasi lainnya di bawah gulungan juga.

Gerakan Bawah Air

animasi cair

Itu diisyaratkan pada contoh di atas – gerakan gaya bawah air – dan di sini inilah efek animasi yang dominan.

Gerakan bawah air, gerakan lambat, mengalir adalah cara populer untuk menggunakan teknik ini. Les Animals menggunakan ilustrasi animasi yang terlihat seperti tanaman yang bergerak di bawah air. Bentuk bergeser dan mengalir dalam pola yang menenangkan dan lambat.

Jika Anda berinteraksi dengan desain, ada status animasi liquid tambahan pada gerakan mouse. Ini halus dan sangat cocok dengan sisa desain antarmuka.

Tipografi Liquid

animasi cair

Kami sudah melihat sedikit dari ini, tetapi efek animasi liquid juga dapat berlaku untuk tipografi.

Trik untuk membuat teknik ini bekerja pada huruf adalah untuk menjaga keterbacaan kata-kata. Jika suatu saat teks ditarik atau ditarik ke suatu titik yang tidak dapat dibaca, animasinya sudah terlalu jauh.

Ini bisa menjadi keseimbangan yang agak rumit untuk dicapai, tetapi ketika dilakukan dengan baik bisa menyenangkan untuk dilihat dan berinteraksi dengan. Animasi liquid pada elemen teks dapat berjalan sendiri, seperti contoh di atas dari Myles Ng, atau berfungsi sebagai status hover.

Kesimpulan

Animasi liquid adalah teknik desain yang sedang tren. Motion dapat membantu pengguna lebih lama tertarik pada desain situs web Anda dan memberikan satu alasan lagi untuk berinteraksi dengan konten.

Teknik desain situs web ini harus terlihat sederhana dan realistis. Gerakan yang terlalu cepat atau tampak dipaksakan tidak akan memiliki daya tarik menyenangkan yang sama dengan gerakan halus yang Anda harapkan dari animasi liquid.

sumber: designshack.net

- Advertisement -

Latest articles

7,350 Followers
Follow

Related articles