Cara Mengembangkan Prinsip Desain Gerak
Cara Mengembangkan Prinsip Desain Gerak
Apa itu desain gerak?
Sundukovskiy mendefinisikan desain gerak sebagai "bagaimana Anda membuat karya non-live action bergerak dalam video Anda." Itu termasuk bagaimana logo muncul di layar. Apakah itu memudar? Muncul dengan gesekan? Apakah itu dibangun sepotong demi sepotong? Contoh lain termasuk bagaimana "sepertiga bawah" — spanduk di bagian bawah video yang mengidentifikasi pembicara — menghidupkan dan menonaktifkan, atau video penjelasan yang memperbesar tombol tertentu untuk menampilkan cara menggunakan produk. Tapi kami hanya menggores permukaan dengan contoh-contoh ini, karena kenyataannya adalah, grafik gerak hampir ada di mana-mana yang kita lihat hari ini — mulai dari ilustrasi situs web dan posting media sosial hingga tayangan slide konferensi dan papan reklame kota besar.
Mengapa desain gerak penting
Setelah Anda berhenti dan meluangkan waktu sejenak untuk memikirkannya, Anda akan segera menyadari bahwa gerakan praktis ada di mana-mana dalam hal antarmuka digital. Namun, mendesainnya dengan cermat adalah apa yang dapat menghasilkan pengalaman pengguna yang lancar dan menyenangkan yang memandu pengguna menuju informasi penting.
Gerak juga membantu membangun merek. Seperti contoh logo Pixar, gerakan menyampaikan informasi tambahan yang tidak dapat dilakukan oleh gambar statis dan itu "membantu membawa kepribadian dan kemanusiaan ke pesan kita," kata Szot. Seperti desain gerak itu sendiri, manfaatnya datang dalam banyak rasa: "Kami ingin desain gerak menjadi bantuan non-verbal yang mendukung ketika orang-orang mempelajari sesuatu yang baru, isyarat visual yang bermanfaat saat menyelesaikan tugas, atau hanya detail yang menyenangkan ketika kami merayakan hal-hal menakjubkan yang sedang dibangun komunitas kami."
Mengembangkan prinsip desain gerak untuk rebranding Webflow
"Ada selera di Webflow untuk membawa gerakan ke dalam visual kami," kata Sundukovskiy. Jadi pada akhir tahun lalu, ketika kami meluncurkan rebranding kami dengan logo baru, Misha dan tim kreatif yang lebih besar melihat peluang untuk memenuhi permintaan ini dan membangun menu lengkap pedoman desain gerak.
Tujuan inti mereka? Perjelas sasaran; audit di mana pun Webflow muncul secara visual — mulai dari media sosial dan situs web hingga iklan, materi iklan, acara, dan banyak lagi; membangun kerangka kerja; dan berulang kali mengulangi.
Langkah 1: Selaraskan pada tujuan inti
Tidak masuk akal untuk mulai bereksperimen dengan desain tanpa tujuan yang jelas. Jadi langkah pertama tim adalah mendokumentasikan visi yang jelas tentang apa yang mereka inginkan untuk dikomunikasikan oleh mosi mereka — dan menyelaraskan dengan pemangku kepentingan utama.
Pedoman gerak Webflow diperlukan untuk menyelaraskan dengan visual dan identitas merek kami yang lebih besar. Akibatnya, tim setuju bahwa prinsip desain gerak mereka diperlukan untuk memastikan bahwa Webflow — sebagai organisasi dan sebagai produk — selalu disajikan sebagai aspirasional, berani, pro yang jelas, dan berdimensi.
Langkah 2: Audit seluruh situs
Dengan tujuan yang ditetapkan untuk dicapai, langkah selanjutnya adalah mengidentifikasi semua tempat di situs web kami (dan aset digital lainnya seperti video dan iklan YouTube) di mana gerakan dapat lebih meningkatkan merek.
Sundukovskiy mengingat audit ini sebagai usaha besar yang "luas". Audit meluas jauh lebih dari sekadar mengidentifikasi aset kreatif; Ini juga melibatkan pengumpulan informasi sebanyak mungkin — termasuk di mana aset tinggal — sehingga tim dapat mulai mengidentifikasi dan mendokumentasikan pola. Misalnya, setiap kali video penjelasan bergeser antara tampilan antarmuka atau setiap posisi di mana logo dapat muncul dalam video diidentifikasi dan direkam.
Langkah 3: Bangun kerangka kerja
Setelah audit selesai, tim mulai membangun kerangka kerja untuk mendefinisikan dan menetapkan area merek visual di mana mereka perlu membuat aturan dan pedoman untuk desain gerak. Ini akan berfungsi sebagai fondasi yang akan mengatur bagaimana gerakan akan muncul di semua aset merek yang mereka temukan selama audit.
Untuk setiap kategori aset – yaitu, grafik 2D atau citra 3D – tim bertanya, "Bagaimana merek kami menyingkir sehingga kami dapat benar-benar memusatkan dan merayakan karya indah komunitas kami, tetapi tetap memastikan kami menyajikan Webflow secara konsisten?" kata Szot. Kerangka kerja dimulai sebagai serangkaian slide inspirasional yang berisi kata-kata seperti "profesional" atau "sinematik", kemudian tumbuh menjadi serangkaian tindakan berulang tertentu – seperti riak atau zoom.
Langkah 4: Mengulangi, mengulangi, mengulangi
Pekerjaan mereka tidak berakhir dengan kerangka kerja mereka. Szot, Sundukovskiy, dan tim mereka mencari umpan balik sebanyak mungkin dari kolega dan mitra.
Tidak semua ide berhasil. Faktanya, beberapa ide yang pada awalnya tampak bagus tidak bertahan dari tahap umpan balik. Tapi melewati filter kritis itu hanya membuat pesaing yang tersisa lebih kuat.
Memberikan pagar pembatas untuk mengembangkan dan menskalakan merek Webflow
Tim internal kami bermitra dengan The Digital Panda, agensi kreatif yang berfungsi sebagai mitra penting, untuk berkolaborasi dengan kami dalam pengembangan dan eksplorasi seputar prinsip dan pedoman desain gerak kami. "Tim kami menginvestasikan sejumlah besar energi dan sumber daya untuk menyusun ide dan menciptakan ide desain gerak yang dapat dinilai dan dieksplorasi oleh tim Webflow," jelas Ilya Kroogman, pendiri di The Digital Panda. Banyak putaran penyesuaian kemudian, kedua tim berakhir dengan menu semua kemungkinan status gerak untuk setiap jenis aset dalam repertoar Webflow. Hasil akhir tim kami mencakup pedoman yang menghidupkan gerakan dalam skala besar.
Salah satu contohnya adalah lintasan cahaya dengan sudut 63 derajat yang dapat digunakan di seluruh sistem untuk menyoroti informasi secara dramatis dan menyiratkan dimensi. Sudut 63 derajat adalah anggukan pada sudut goresan terakhir "W" di tanda logo kami, dan tingkat kehalusan dan kedalaman pemikiran ini terlihat dan hadir dalam bagaimana kami membawa gerakan ke dunia desain kami di Webflow.
8 saran untuk mengembangkan prinsip desain gerak Anda sendiri
Setelah melalui proses desain yang komprehensif ini baru-baru ini, Szot dan Sundukovskiy memiliki beberapa tips untuk dibagikan kepada sesama pemasar dan kreatif yang memulai eksplorasi desain gerak mereka sendiri.
- Berinvestasi dalam mencari tahu pesan inti Anda Mengembangkan pesan yang jelas merupakan sebagian besar pekerjaan desain gerak. Szot memperkirakan bahwa ini "menginformasikan 80% dari keputusan yang kami buat dan kemudian semuanya dari sana hanya penyempurnaan."
Untuk mencapainya, tanyakan pada diri sendiri pertanyaan seperti:
- Kisah apa yang Anda inginkan untuk diceritakan oleh mosi Anda?
- Apa tujuan dari mosi tersebut?
- Emosi apa yang ingin Anda bangkitkan? Apa yang ingin Anda soroti tentang merek tersebut?
- Jelajahi dan belajar dari apa yang dilakukan orang lain Selama proses desain, Sundukovskiy mengatakan bahwa tim melihat ke dunia desain digital yang lebih luas: "Apa yang dilakukan perusahaan lain? Apa yang dilakukan orang lain yang saya kagumi di luar angkasa?"
Papan suasana hati berfungsi sebagai cara yang bagus untuk mengumpulkan elemen yang ingin Anda ambil inspirasi. Akhirnya Anda akan mengulangi dan bermain-main cukup untuk mendapatkan sesuatu yang baru atau sesuatu yang terasa benar dengan siapa Anda sebagai sebuah merek.
- Bersandar pada tim Anda Desain gerak adalah salah satu bagian dari karya kreatif yang lebih besar di Webflow. Akibatnya, pekerjaan desain ini adalah upaya kelompok yang melibatkan banyak anggota tim kreatif internal yang berbeda – serta The Digital Panda – dan itu penting. Szot berkata, "Gerakan mengambil sebuah desa. Sangat membantu untuk dapat bertanya, 'Bagaimana pendaratan ini? Apakah perasaan ini benar?'"
Bekerja dengan The Digital Panda membuka tingkat kreativitas dan potensi baru bagi tim kami dan upaya desain gerak kami. Tim mereka menjabat sebagai ahli eksternal dan bekerja bersama desainer internal kami untuk menerjemahkan konsep merek Webflow baru menjadi gerakan. Selain itu, mereka memiliki seluruh bagian dari upaya desain kami, seperti konsep untuk pengungkapan logo 3D kami. Berkolaborasi dengan mitra kreatif yang kuat seperti The Digital Panda adalah pembuat perbedaan yang memungkinkan kami mewujudkan ide-ide terbaik kami.
- Desain untuk seluruh sistem, bukan satu proyek pada satu waktu Jika Anda mendesain untuk setiap proyek secara terpisah, merek tidak akan konsisten. Sundukovskiy mengatakan bahwa pekerjaan desain gerak Webflow "tidak dimulai hanya dengan satu elemen." Itu adalah upaya yang menantang timnya untuk melihat merek secara holistik dan mencari tahu di mana titik sentuh yang paling penting dan apa yang akan digunakan berulang kali.
Dia menjelaskan, "Kami harus bertanya pada diri sendiri, 'Bagaimana setiap elemen individu masuk akal ketika mereka bersatu dan melangkah ke prinsip merek kami?'" Inilah sebabnya mengapa audit menyeluruh sangat penting untuk umur panjang prinsip-prinsip gerak tim kami.
- Sesuaikan gerakan dengan konteks Pedoman gerak Webflow mencocokkan skala gerak dengan skala aset. Misalnya, kata Szot, acara yang lebih besar seperti pengungkapan fitur baru "mungkin pantas mendapatkan pengungkapan logo yang lebih dramatis atau sinematik."
- Pastikan gerakan Anda dapat dihasilkan dalam skala besar Misalnya, gaya gerak yang lebih seni maju mungkin membutuhkan waktu lebih lama untuk diterapkan oleh desainer. Tanyakan pada diri Anda, "Apakah itu sepadan dengan upaya ekstra?" dan nilai peta jalan jangka pendek dan jangka panjang tim dan perusahaan Anda untuk menilai bagaimana membuat keputusan gerakan yang dapat dieksekusi dalam skala besar tanpa mengorbankan kualitas.
- Jangan berlebihan Terlalu banyak gerakan, atau gerakan yang mencolok, bisa terasa mengganggu. Hindari hal ini dengan kembali ke pertanyaan panduan Anda: Apa tujuan yang mendasarinya? Kisah apa yang ingin Anda ceritakan? "Sama seperti kerajinan lainnya, gerakan membutuhkan banyak disiplin," kata Sundukovskiy. Tujuannya adalah "menciptakan hal-hal yang bermakna daripada menciptakan kekacauan digital." Szot setuju: "gerakan halus dan terkendali adalah kuncinya."
Selain itu, aksesibilitas sangat penting untuk desain — dan Webflow — dan berlebihan atau tidak memiliki niat yang jelas dengan gerakan dapat merugikan atau berbahaya bagi penyandang disabilitas.
- Dokumentasikan pedoman Anda Dokumentasi yang jelas dan dibagikan secara luas memudahkan untuk orientasi anggota tim baru yang perlu menerapkan gerakan dalam pekerjaan mereka. Memastikan pedoman Anda jelas dan dibangun dengan benar juga penting. Periksa untuk memastikan semua templat dan file kerja yang relevan templat, font, aset pra-render, dan lainnya — tersedia dan dikemas dengan cara yang mudah dicerna bagi siapa saja yang mungkin membutuhkannya atau membangunnya dengannya.
Iterasi pertama yang sukses
Setelah semua upaya ini, bagaimana pedoman gerak Webflow bekerja? Semua tanda menunjukkan kesuksesan: tidak hanya desain itu sendiri diterima dengan baik oleh komunitas, tetapi secara internal, rubrik membuat tim kami lebih bahagia dan lebih produktif. "Ada ratusan cara untuk menggunakan penjepit kertas," jelas Szot, "dan memiliki seperangkat kriteria membuat hidup jauh lebih mudah karena memberi Anda fokus kreatif untuk mencoba lima cara berbeda untuk menggunakannya" sebelum memilih yang terbaik.
Tapi, sesuai dengan Langkah 4 dari pendekatan kami untuk membangun prinsip-prinsip gerak — "iterasi, iterasi, iterasi" — kami tidak pernah benar-benar selesai. Tim kami terus menyempurnakan, mengisi situasi yang belum muncul, dan mengembangkan prinsip-prinsip gerak kami dengan merek — dan itu adalah inti untuk membangun merek yang dapat bertahan dalam ujian waktu.
Konsultasi Sekarang!