Image

QUICK CONTACT













Image

5 Simple Rules For Creating A Professional Looking UI Motion In Your Product

24 Sep 2020 by Billy Gani
Entah saat membuat aplikasi perangkat atau bekerja dalam presentasi bisnis yang kuat - Anda tentunya ingin memberikan tampilan yang terbaik, salah satunya dengan memberikan gerakan UI atau UI motions. Animasi dapat membantu Anda untuk menciptakan alur, proses perjalanan, meningkatkan atau memperhalus perubahan, menarik perhatian dan juga meningkatkan ketertarikan. Gerakan dapat menciptakan tindakan biner ke dalam bentuk yang lebih ramah terhadap pengguna (user-friendly).
 
Animasi dan motions merupakan hal yang kuat, tetapi juga perlu Anda ketahui lebih dalam tentang bagaimana cara menggunakannya, jika tidak, kehadirannya malah dapat mengganggu. Dalam artikel ini, kami akan mencoba untuk menjelaskan beberapa cara untuk menghasilkan animasi sederhana dalam produk UI Anda.
 
Jangan Memberikan Animasi Yang Kekanakan
 
Tentunya kita sering melihat animasi yang kekanakan digunakan oleh pembicara seperti dosen atau guru. Animasi yang kekanakan ini mudah untuk disadari - tidak memiliki arah yang konsisten, tidak berkontribusi ke dalam alur presentasi (atau perangkat) dan biasanya kita yang melihatnya ingin cepat selesai menontonnya.
 
 
Fakta bahwa ada banyak jenis animasi seperti ini dapat menjadi sebuah jebakan karena jenis ini sangat tidak direkomendasikan untuk dipakai. 
 
Jika Anda tidak yakin tentang animasi apa yang harus dipilih - jangan membuat animasi untuk produk UI Anda.
 
Pilih Arah Pergerakan Yang Sederhana
 
Pilih arah pergerakan animasi dari perangkat lunak (atau transisi slide) yang sederhana dan tetap gunakan gerakan tersebut hingga akhir presentasi dari produk Anda. Animasi klasik ini dapat digunakan dalam aplikasi ataupun presentasi tentang produk yang Anda berikan. Berikut ini salah satu contoh dari 3 elemen yang melayang dari arah bawah layar.
 
 
Dalam contoh ini, 3 elemen berasal dari  arah yang sama dan muncul bersamaan. Animasinya sederhana dan menciptakan arus, tetapi belum terlihat terlalu menarik.
 
Berikan Penundaan Kecil Diantara Masing-Masing Animasi
 
Anda dapat lebih membuat tampilan presentasi produk UI atau presentasi Anda lainnya lebih menarik dengan memberikan sedikit penundaan (delay) diantara setiap elemen. Penundaan ini hanyalah berjarak sangat kecil, sekitar 0.15 detik saja.
 
Jangan menunggu untuk memulai animasi kedua SETELAH elemen pertama selesai, mulailah beranimasi terhadap elemen kedua dalam jarak beberapa milidetik setelah elemen pertama sudah mulai bergerak.
 
Contoh: 
 

  • Elemen 1: masuk dalam 0 detik, 0 milidetik, animasi membutuhkan 500 milidetik
  • Elemen 2: masuk dalam 0 detik, 150 milidetik, animasi membutuhkan 500 milidetik
  • Elemen 3: masuk dalam 0 detik, 300 milidetik, animasi membutuhkan 500 milidetik

Jadi, elemen 3 dapat memulai animasi sebelum elemen 1 selesai, tetapi penundaan singkat menciptakan pengalaman gerakan yang lebih baik diantaranya. Lihat hasil di bawah - penggunaan delay membuat gerakannya menjadi sedikit lebih menarik meskipun masih belum sempurna.
 
Tidak Ada Pergerakan Linier Dalam Setiap Aktivitas
 
Anda tentunya mengingat energi kinetik, bukan? Orang biasanya melihat sebuah elemen berakselerasi atau melambat ketika mereka mulai bergerak atau hampir mencapai akhir dari gerakan mereka. Dalam kebanyakan mekanisme animasi (entah dalam PowerPoint atau dalam UI produk), Anda tentunya dapat menemukan opsi yang dapat memudahkan atau mempermudah animasi yang Anda gunakan.
 
 
Hal ini menjadi salah satu aturan penting dalam animasi. Jadi, jika Anda ingin memproduksi gerakan yang alami - pastikan untuk mempermudah atau memperhalus gerakan animasi Anda. 
 
Kombinasikan Penundaan Kecil Dengan Hasil Akhir Yang Lambat
 
Gabungkan hasil akhir yang halus dengan penundaan kecil diantara setiap elemen. Hal ini menjadi gabungan dari 2 aturan sebelumnya dan menjadikannya cara terbaik dalam menghasilkan animasi bergerak untuk presentasi produk Anda. Elemen pertama muncul dan melambat ketika elemen kedua dan ketiga masih bergerak dan menciptakan gerakan yang menarik dan alami.
 
 
Seperti inilah tampilan animasi - Elemen di dalamnya bergerak satu demi satu dengan hasil akhir yang mulus.
 
 
 
Berikut diatas adalah beberapa aturan sederhana yang dapat Anda ikuti untuk menyajikan presentasi UI produk yang lebih terlihat profesional dan berkualitas. Jika Anda masih memiliki kendala dalam menggunakan aturan diatas untuk UI produk Anda, kami dapat membantu. 
 
Eannovate sebagai salah satu agency web development di Jakarta dengan kualitas dan layanan terbaik dapat membantu anda dalam bidang UI UX Design di Jakarta. Atau juga jika sebenarnya anda hanya memerlukan aplikasi perangkat dan website sederhana yang berkualitas dengan harga yang terjangkau, ExpressWeb juga kini hadir sebagai bagian dari Eannovate untuk memenuhi kebutuhan anda dalam pembuatan UI UX Design di Jakarta dengan memberikan website dan aplikasi perangkat dengan harga yang lebih terjangkau serta cepat dan mudah, tanpa mengurangi kesan profesional dari perusahaan anda.
 
Selain itu, Eannovate sebagai salah satu SEO agency di Jakarta dengan kualitas dan layanan terbaik juga hadir untuk melengkapi bisnis anda dalam bidang SEO marketing di Jakarta. Dengan memberikan layanan terbaik untuk SEO services di Jakarta seperti FREE SEO Audit, kami menjamin bahwa website anda dapat kami diagnosa dan membuatnya muncul pada pencarian page 1 di Google. Buatlah perusahaan anda lebih dikenal oleh target audiens anda dengan menyerahkan layanan jasa Digital Marketing di Jakarta hanya pada Eannovate.
 
Anda mencari website yang menyajikan informasi teknologi kreatif yang dilengkapi dengan berita startup, info gadget terupdate, dan berita di dunia IT terbaru dan terkini? Anda dapat mengunjungi blog kami, AlterSpace.
 
Jika ada pertanyaan mengenai aplikasi perangkat (mobile apps), UI UX dan digital marketing Jakarta,  jangan sungkan untuk langsung menghubungi kami di
Telp : 021-5437-5601 (Senin - Jumat, 9 pagi - 5 sore) ,
 
Email : hello@eannovate.com atau menggunakan contact form.
 
 
 
 
 
Reference: Mobile Spoon
 

AYO BUAT IDEMU JADI KENYATAAN!

Hubungi kami untuk membicarakan ide anda. Ayo bersama membuatnya menjadi kenyataan!

AYO MULAI!

CONTACT

Image
LOKASI
INDONESIA

Ruko Kosambi Baru blok A ext 1 no 66. Jakarta Barat.


Image
TELEPON
INDONESIA
+6221 5437 5601
+62813 8251 8448


Whatsapp no of Eannovate
WHATSAPP
+62813 8251 8448
Click number above

Whatsapp of Web, UI UX Design, Mobile App Development, SEO in Jakarta, Indonesia
E-MAIL
hello [at] eannovate.com

Office hours of Web, UI UX Design, Mobile App Development, SEO in Jakarta, Indonesia
JAM KERJA
Mon-Fri 9.30am - 6.00pm