Design makin hari makin berkembang, yang dulunya hanya berupa lukisan, poster, seni rupa kini makin berkembang mengikuti teknologi yang ada. kalau sebelumnya ada User Interface, lalu ada User Xperience, nah sekarang ada Interaction Design. Intercation Design adalah sebuah perilaku user dalam menggunakan web/app.
Contoh mudah Interaction Design adalah ketika kita mengetikkan pasword dan salah maka textbox akan berwarna merah dan bergoyang, warna merah dan goyang adalah interaksi yang mengingatkan bahwa pasword yang kita masukkan adalah salah, coba kalau ada beberapa textbox dan tidak ada peringatan bahwa pasword kita salah? atau tidak memberitahu secara spesifik dimana kesalahan kita?
selain itu kita sebagai designer harus bisa mendeliver animasi tersebut ke bagian development atau engineer, kan gamungkin kalau kita mendeliver ke enginer dengan kata kata "jika salah pasword maka textbox bergetar", kan gamungkin hehehe, kalau bisa kita harus membuat design secara spesifik mungkin agar tidak terjadi miss comunication
Terus bagaiman cara membuat animasi tersebut? ya setiap designer pasti punya tools andalan, namun yang ditutorial ini kita akan membuat Interactio Design dengan Adobe XD, yups tools yang ngga asing lagi dikalangan UI UX Designer
Langkahnya
Step 1
Buka New Project di Adobe XD
Step 2
Buat design simple di satu artboard
Step 3
Duplikat artboard yang pertama dibuat menjadi beberapa artboard yang lain
Step 4
Artboard yang di copy tadi di buat motion yang berbeda, di contoh dibawah yang saya bedakan adalah warna dan yang saya motionkan atau gerakan adalah icon yang berada di tengah alias icon :smile: :)
Step 5
Prototype, arahkan button akan menuju artboard nomor berapa.
Step 6
Disini yang penting, kita memanfaatkan auto animate di Adobe XD, pastikan asset di artboard dan artboard yang lain memiliki nama yang sama, karna disitu kuncinya, sejujurnya saya baru tau akan fungsi auto animate di Adobe XD
dan jadinya akan sebagai berikut :
Kalau sudah jadi seperti itukan enak untuk men deliver ke bagian engineer, oiya pastikan udah curhat dulu ya ke engineer tentang interaction yang akan kamu buat, jangan sampai interaksi yang sudah kamu buat sematang mungkin eh ternyata tidak bisa diterapkan atau bisa diterapkan namun akan memakan waktu yang sangat lama untuk implementasinya. Kan fungsi seorang UI UX adalah menemukan meetspot atau titik tengah antara Business Goals, User Needs, dan juga Technologi.
nah gimana? mudahkan? sebenernya ini adalah catatan tentang betapa noraknya saya bahwa "auto animate Adobe XD" bisa melakukan hal diatas, karna biasanya saya menggunakan After Effect yang tentunya sangat menguras waktu.
Untuk yang belum jelas bisa melihat tutorial sebagai berikut :
Sekian tutorial dan curhatannya, semangat!
Terimakasih :)
Contoh mudah Interaction Design adalah ketika kita mengetikkan pasword dan salah maka textbox akan berwarna merah dan bergoyang, warna merah dan goyang adalah interaksi yang mengingatkan bahwa pasword yang kita masukkan adalah salah, coba kalau ada beberapa textbox dan tidak ada peringatan bahwa pasword kita salah? atau tidak memberitahu secara spesifik dimana kesalahan kita?
selain itu kita sebagai designer harus bisa mendeliver animasi tersebut ke bagian development atau engineer, kan gamungkin kalau kita mendeliver ke enginer dengan kata kata "jika salah pasword maka textbox bergetar", kan gamungkin hehehe, kalau bisa kita harus membuat design secara spesifik mungkin agar tidak terjadi miss comunication
Terus bagaiman cara membuat animasi tersebut? ya setiap designer pasti punya tools andalan, namun yang ditutorial ini kita akan membuat Interactio Design dengan Adobe XD, yups tools yang ngga asing lagi dikalangan UI UX Designer
Langkahnya
Step 1
Buka New Project di Adobe XD
Step 2
Buat design simple di satu artboard
Step 3
Duplikat artboard yang pertama dibuat menjadi beberapa artboard yang lain
Step 4
Artboard yang di copy tadi di buat motion yang berbeda, di contoh dibawah yang saya bedakan adalah warna dan yang saya motionkan atau gerakan adalah icon yang berada di tengah alias icon :smile: :)
Step 5
Prototype, arahkan button akan menuju artboard nomor berapa.
Step 6
Disini yang penting, kita memanfaatkan auto animate di Adobe XD, pastikan asset di artboard dan artboard yang lain memiliki nama yang sama, karna disitu kuncinya, sejujurnya saya baru tau akan fungsi auto animate di Adobe XD
dan jadinya akan sebagai berikut :
Kalau sudah jadi seperti itukan enak untuk men deliver ke bagian engineer, oiya pastikan udah curhat dulu ya ke engineer tentang interaction yang akan kamu buat, jangan sampai interaksi yang sudah kamu buat sematang mungkin eh ternyata tidak bisa diterapkan atau bisa diterapkan namun akan memakan waktu yang sangat lama untuk implementasinya. Kan fungsi seorang UI UX adalah menemukan meetspot atau titik tengah antara Business Goals, User Needs, dan juga Technologi.
nah gimana? mudahkan? sebenernya ini adalah catatan tentang betapa noraknya saya bahwa "auto animate Adobe XD" bisa melakukan hal diatas, karna biasanya saya menggunakan After Effect yang tentunya sangat menguras waktu.
Untuk yang belum jelas bisa melihat tutorial sebagai berikut :
Caler Edwards
https://www.youtube.com/watch?v=VisaLaF7GWU
Sekian tutorial dan curhatannya, semangat!
Terimakasih :)
Komentar
Posting Komentar