() translation by (you can also view the original English article)
Mari lihat beberapa alat "prototyping" yang tersedia untuk desainer web saat ini, tanpa urutan tertentu:
- Framer
- Adobe XD
- Adobe After Effects
- Adobe Animate CC
- Craft Prototype
- Principle
- Atomic
- Proto
- JustinMind
- Origami
- Flinto
- Webflow
- Marvel App
Mengumpulkan ide "stakeholders" dan client pada awalnya mudah, namun bila keadaan menjadi sulit kita memerlukan alat untuk membantu mempercepat feedback. Web menjadi lebih rumit bagi para desainer front-end, dengan banyaknya permintaan interaktif. Tindakan seperti menggesek (swipe) dan menyeret (drag) hanyalah sebagian kecil, dan memikirkan bagaimana keseluruhan puzzle itu bisa cocok adalah inti dari seni prototyping yang sebenarnya.
Dimana Prototyping Cocok?
Menurut definisi, "prototype" adalah sampel awal yang dibangun untuk menguji konsep spesifik. Sebuah prototype digunakan untuk mengevaluasi dan meningkatkan sebuah sistem untuk mendapatkan "insight" yang lebih baik mengenai proyek secara keseluruhan. Kita semua mengerjakan proyek setiap hari dengan beberapa yang lebih rumit dibanding yang lain, tapi kapan saatnya meminta tool untuk membantu mendapatkan umpan balik?
Beberapa akan berpendapat "code" jauh lebih cepat untuk memulai, tapi ada saat ketika lebih baik menghabiskan waktu menggunakan prototype daripada merekayasa sesuatu yang mungkin saja tidak akan terealisasi. Prototype menghasilkan umpan balik untuk "interaksi" dan "penempatan". Kerangka gambar (Wireframe) interaktif memberi pemahaman yang lebih baik kepada klien tentang bagaimana sebuah project cocok untuk pengguna mereka.
Di lain waktu, prototyping sebelum coding dapat memberikan keuntungan pada project dengan mengidentifikasi "kasus" yang mungkin telah dilewatkan.
Prototyping dan Ruang Lingkup Desain Web
Ketika bertanya pada diri sendiri terkait apakah ini masih cocok diterapkan di ruang lingkup saat ini, kita pasti bisa mengaitkan permintaan terhadap kerja "motion" (gerakan) Interaksi sederhana dapat dipotong untuk dijelaskan secara verbal, namun dalam konteks lain, ini membantu untuk mendapatkan perspektif bagaimana interaksi dapat dipicu - dan lebih banyak klien menuntut untuk melihat bukti konsep sebelum menandatangani sesuatu. Penting sekali, sekarang lebih dari sebelumnya, untuk memiliki ide tentang kemana harus beralih saat kebutuhan akan prototype harus muncul.
Dengan banyaknya tool yang tersedia di market, yang mana yang akan Anda gunakan? Mari perhatikan.
1. Framer
- Lisensi Plus: $(15/mo) (Hanya Untuk Mac)
- Lisensi Enterprise: Hubungi
Framer meminjamkan keakraban pengeditan visual dengan fleksibilitas kode, memberikan alur kerja mulus yang dilengkapi dengan pratinjau perangkat, kontrol pada versi dan pembagian sederhana. Aplikasi yang membantu mempelopori pola interaksi baru untuk membuat aplikasi yang hebat. Ambil data dari API favorit Anda, ambil masukan pengguna yang sebenarnya untuk diuji, dan kerjakan dengan pengguna aktual dan umpan balik (feedback). Impor grafis langsung dari Sketch, Photoshop atau Figma.
Meskipun Framer mungkin tampak seolah-olah digunakan secara khusus untuk aplikasi seluler, namun juga dapat dimanfaatkan untuk proyek non-aplikasi, atau digunakan sebagai library mandiri. Bila menggunakan library Framer JS saja, Anda menghindari IDE sepenuhnya. Intinya ini adalah framework JavaScript open source untuk prototyping yang cepat. Tentukan animasi dan interaksi, lengkap dengan filter, fisika pegas, efek 3D dan lainnya. Meskipun CoffeeScript tidak diperlukan, dokumen menggunakan CoffeeScript dan juga IDE.
Perlu diketahui bahwa Framer tidak dimaksudkan untuk digunakan untuk menciptakan animasi siap produksi.
@UXDesignDad @framer Hey Andre! Framer adalah alat prototyping untuk Mac. Jadi tidak ada aplikasi produksi 😁
— Krijn Rijshouwer (@krijnrijshouwer) February 2, 2017
Karena Framer memiliki konsep sendiri tentang layer dan code yang cukup berat, Anda tidak dapat menggunakannya dalam hal DOM biasa (yang ada) seperti yang mungkin Anda lakukan dengan GreenSock. Sebenarnya, ia menempatkan kanvasnya sendiri di DOM dan semua animasi dijalankan di dalam kanvas itu.
- https://framer.com/features/handoff
- https://framer.com/getstarted/guide
- https://framer.com/pricing/2017
- https://framer.com/getstarted/import
2. Adobe XD
- Harga: Memerlukan Akun Adobe Creative Cloud
Gambar, gunakan ulang, dan remix vector dan raster artwork untuk membuat wireframes, layout layar, prototype interaktif dan aset siap produksi semua dari aplikasi yang sama. Gunakan dengan tool canggih seperti Repeat Grid yang dibuat khusus untuk XD, dan dengan layer, simbol, dan peen tools untuk desain UX. Tambahkan interaksi menggunakan banyak animasi untuk membuat transisi antara art board untuk mensimulasikan flow aplikasi/website.
Client dapat memberi komentar secara langsung pada prototype Anda saat Anda membagikannya secara langsung, dan melihat desain secara real time pada perangkat yang sebenarnya. Desain dapat disesuaikan dan diperbarui secara otomatis di seluruh platform. Beralih dengan mudah dari wireframing, desain visual, desain interaksi, prototyping, preview dan sharing, semua dalam satu alat.
Meski XD masih merupakan produk beta, tetap harus dilihat apakah akan bertahan di masa mendatang. Anda dapat membaca lebih lanjut tentang fitur yang dirilis di sini untuk tetap mengetahui tentang perubahan dan penyempurnaan kedepannya. Kami bahkan menerbitkan 15 seri yang mencakup semua alat penting yang Anda butuh untuk mulai mendesain dan membuat prototype dengan Adobe XD:
3. Adobe AfterEffects
- Harga: Membutuhkan Akun Adobe Creative Cloud
After Effects tidak secara khusus dibuat sebagai tool prototype untuk situs web dan aplikasi (walaupun Anda masih dapat melakukannya), namun ini membantu membangun motion (gerakan) prototype untuk mereka yang ingin memodifikasi animasi mockup untuk klien. Buat motion graphic untuk video atau buat efek animasi untuk Web. Berikut adalah artikel bagus di Tuts+ karya Charles Yeager:
Juga periksa sepuluh bagian seri ini di Tuts+, Welcome to After Effects.
4. Adobe Animate CC
- Price: Membutuhkan Akun Adobe Creative Cloud
Adobe Animation adalah evolusi Flash Professional. Ini adalah alat yang mencakup fitur seperti timeline, keyframe, pilihan ekspor yang melimpah, dukungan untuk library JavaScript pihak ke-3, penyesuaian posisi kamera dan banyak lagi. Meskipun ditujukan lebih kepada animator, jangan terkecoh dengan pemikiran bahwa Anda tidak dapat menggunakannya untuk kebutuhan lain. Ingat bahwa alat melakukan sebanyak yang Anda inginkan dan hanya dibatasi oleh imajinasi Anda. Gunakan untuk wireframes web, pengujian animasi untuk aplikasi dan lainnya. Anda bisa membaca tentang cara kerjanya dalam Adobe Animate di artikel berikut:
5. Craft Prototype
- Harga: Gratis. Membutuhkan Sketch Seharga $99
Bangun prototype kualitas tinggi dengan file desain nyata Anda. Craft adalah bagian dari keluarga Invision; Sebuah perusahaan yang memiliki banyak tool (seperti Macaw dan Easee) akhir-akhir ini dari entitas luar.
Craft Prototype adalah tool yang hebat yang memungkinkan Anda merancang data nyata, membuat panduan style dalam satu klik. Dengan prototype Anda bisa bekerja langsung dari Sketch; Semua sekaligus. Dengan mirroring (pencerminan) secara real time ke telepon Anda, Anda bisa segera menguji prototype desain. Bila Anda siap untuk membagikannya, Anda dapat mempublikasikan karya Anda langsung ke Invision untuk mendapatkan umpan balik instan dari klien dan pemegang saham. Ini bahkan memungkinkan Anda membuat prototype dengan fidelity yang lebih tinggi dengan gerakan, memberi Anda timeline untuk menyesuaikan visual menggunakan keyframes. Buat HTML dan CSS, code native swift, dan dokumentasi untuk pengembang Anda. Tonton video pendek ini yang menjelaskan Craft 2.0 Preview - Prototype in Sketch di Vimeo.
6. Principle
- harga: $129.00 (Hanya untuk Mac)
Principle membuat perancangan user interface animasi dan interaktif lebih mudah . Entah Anda mendesain flow dari aplikasi multi layar, atau interaksi dan animasi baru, Principle memungkinkan Anda membuat desain terlihat dan terasa menakjubkan. Aplikasi ini sangat mirip UI pada Sketch termasuk aspek lainnya seperti alignment, pembuatan artboard dan screen connection, ditambah pratinjau real-time. Klik layer animasi untuk menyelam lebih dalam ke keyframes dan sesuaikan easing curve kustom seperti yang Anda inginkan pada tool animasi lainnya. Prinsip memberi Anda kebebasan untuk bereksperimen tanpa membatasi Anda terhadap transisi yang telah ditentukan sebelumnya, ditambah lagi Anda dapat mengimpor artboards dari Sketch juga.
Aplikasi Prinsip Mirror untuk iOS memungkinkan orang lain melihat desain Anda pada perangkat mereka. Saat merancang, Anda dapat berinteraksi langsung dengan mencolokkan perangkat ke komputer atau mengekspor aplikasi Mac mandiri untuk dilihat orang lain.
7. Atomic
- Tingkat Pemula: $15/bulan
- Profesional: $25/bulan
- Unlimited: $25/bulan
Atomic adalah aplikasi berbasis web yang terintegrasi dengan Sketch, memungkinkan Anda mengimpor desain dari sana atau dari pilihan Anda. Membawa desain ke Atom sangat sederhana; gunakan plugin Sketch atau "drop" elemen dari tool desain favorit Anda.
Atomic memiliki tool drawing dan layout yang sudah terpasang untuk merancang dari awal atau membangun berdasarkan desain yang diimpor. Hubungkan desain Anda dengan cepat menggunakan berbagai gerakan dan transisi untuk mobile atau desktop. Gunakan CSS khusus untuk menerapkan style tambahan dan juga mengekspor CSS Anda untuk dibagikan dengan developer lain. Baca lebih lanjut tentang fitur Atom di situs mereka.
8. Proto
- Freelancer $25/bulan
- Startup $40/bulan
- Agency $80/bulan
- Corporate $160/bulan
Buat animasi yang canggih untuk pola desain interaksi dengan timeline yang mudah digunakan dengan Proto. Aplikasi ini hadir dengan satu set library UI lengkap seperti iOS9, Material Design, Windows 10 dan lainnya. Desain dapat diimpor menggunakan Sketch atau plugin Photoshop; Impor mereka di layer dan disinkronisasikan dengan Dropbox. Ekspor aset UI secara langsung. Pratinjau prototype di browser atau perangkat yang menggunakan aplikasi proto untuk iOS atau Android. Bagikan dengan klien atau anggota tim untuk berkolaborasi dan menghasilkan umpan balik. Proto terintegrasi dengan alat pengujian pengguna terdepan untuk mendapatkan umpan balik dan wawasan yang kuat.
Pelajari lebih jauh terkait fitur di website Proto.
9. JustinMind
- Profesional: $19/bulan
- Perusahaan: Hubungi
JustinMind adalah produk berbasis aplikasi untuk mengubah mockups sederhana menjadi prototype interaktif untuk iOS dan Android, dan membuat wireframe web dan mobile. Manfaatkan library yang telah ada, tanamkan HTML dan dokumen ke dalam apa pun yang Anda mau. Akun berbayar memungkinkan beberapa pengguna untuk secara bersamaan berinteraksi dengan prototype yang sama sehingga membuat umpan balik mudah didapat. Ini bahkan memiliki library yang banyak dari widget yang telah ada yang sudah ada yang disesuaikan dengan template perangkat yang dipilih untuk proyek Anda. Elemen seperti tombol interaktif, kotak centang, daftar, dan bahkan layout parallax ada sesuai keinginan Anda.
Jika Anda baru mengenalnya, alat ini dilengkapi dengan tutorial dan video terpandu untuk semua orang mulai dari pemula sampai ahli. Meskipun ditawarkan secara gratis untuk kemampuan sharing pada browser, Anda harus upgrade versi ke akun berbayar untuk kolaborasi dengan anggota tim Anda. Dengan JustinMind Prototyper Anda dapat mengimpor gambar dari alat desain apapun atau langsung dari browser web Anda dan mengubahnya menjadi prototype web yang menarik dengan tool "image hotspot". Export prototipe Anda ke dokumen HTML yang berfungsi penuh dan membuatnya tersedia untuk dilihat di browser web manapun.
10. Origami
- Harga: Gratis, Untuk Mac
Origami dibangun dan digunakan oleh perancang di Facebook dan telah digunakan untuk membuat aplikasi seperti Instagram, Messenger and Paper. Salin apa saja dari Sketch dan sisipkan layer native ke Origami Studio. Penyesuaian yang cepat, menambahkan "behavior", dan meng-animasi-kan layer apapun tanpa harus kembali. Alat ini menawarkan kepada desainer serangkaian gesture dan animasi transisi yang umum terjadi pada pola UI.
Origami menawarkan fitur yang berguna untuk prototiping interaktif beserta plugin untuk Sketch dan Photoshop serta perpustakaan dokumentasi lengkap dengan forum.
Ada fitur "Export ke Code" yang memungkinkan Anda mengkonversi desain visual ke contoh code tertulis untuk iOS, Android dan Web Anda tidak dapat langsung membagikan prototype dengan individu yang beroperasi pada perangkat selain perangkat Anda sendiri, meskipun Anda dapat melihat pratinjau prototype Anda dengan Origami Live, tersedia untuk Android dan iOS. Simak tutorialnya untuk lebih memahami di website Origami.
11. Flinto
- Uji coba gratis 14 hari
- Flinto Lite; Berlangganan berbasis web $20/bulan
- Aplikasi Mac: $99
Flinto untuk Mac adalah tool berbasis aplikasi yang memungkinkan Anda untuk membuat sesuatu dari prototype sederhana hingga prototype yang komprehensif dengan interaksi. Tidak ada program atau timeline; pada intinya, ini adalah tool prototype untuk designer. Tempat objek dan komponen ditempat yang Anda inginkan. Transisi dapat sederhana atau kompleks serta dapat digunakan kembali. Anda dapat mengontrol setiap layer, termasuk spring atau cubic-bezier.
Gunakan "perancang perilaku" untuk menciptakan interaksi mikro yang ada dalam satu layar. Ini sangat cocok untuk hal-hal seperti efek tombol, tombol toggle, animasi perulangan dan animasi berbasis gulir (scroll).
Menambahkan area bergulir ke layar Anda juga mudah; Pilih layer, dan klik tombol "scroll group". Anda dapat menyesuaikan berbagai pilihan, membuat grup scroll, dan bahkan membuat animasi berbasis scroll.
Semua perubahan yang Anda lakukan di Flinto untuk Mac dapat segera diuji di jendela pratinjau, atau pada iPhone atau iPad yang terhubung dengan WiFi menggunakan aplikasi penampil iOS gratis.
Aplikasi iOS untuk menampilkan Flinto tersedia gratis di App Store sehingga Anda dapat mengirimkan file Flinto ke siapa pun.
12. Webflow
- Starter Tier: Free
- Lite: $16/bulan
- Pro: $35/bulan
Webflow adalah aplikasi berbasis web lainnya yang berjalan langsung di versi terbaru Chrome dan Safari. Ini berarti saat ini dioptimalkan hanya pada browser tersebut, namun kode yang dihasilkan memiliki dukungan lintas browser.
"Buat situs yang dinamis dan responsif tanpa menulis code. Luncurkan dengan sekali klik, dan nikmati hosting tercepat dan paling andal di web. Ekspor bersih, kode semantik untuk diserahkan kepada developer."
Webflow sangat terfokus pada animasi web, interaksi dan desain web responsif. Interaksi 2.0 akan segera hadir dan akan menawarkan kontrol yang lebih besar untuk animasi dan interaksi di "break point", dan tentu saja kemudahan membangun secara visual vs. proxy kode.
Untuk memberi tahu anda semua kemungkinan yang bisa dilakukan di Webflow, periksa live demo berikut yang juga bisa dilihat di Webflow atau periksa code yang dihasilkan dalam demo CodePen. Juga, sangat bermanfaat untuk merasakan UI melalui video ini.
Kualitas code yang dihasilkan semantic, terbaca dan mudah dikerjakan jika Anda mengekspor dan menggunakannya secara eksternal atau menyerahkannya ke developer. Berikut adalah beberapa demo yang menampilkan code yang dihasilkan.
Saat ini Interaksi V1 telah tersedia dan Interaksi 2.0 akan mencakup lebih banyak penyesuaian dengan animasi jenis parallax dan interaktivitas yang dibangun secara visual; animasi berdasarkan posisi kursor/live-scroll. Webflow berharap untuk segera meluncurkan versi beta sehingga Interaksi 2.0 akan menjadi bagian besar dari antarmuka (interface) dan alasan besar bagi banyak perancang dan pengembang untuk menggunakan Webflow.
- https://wishlist.webflow.com/ideas/WEBFLOW-I-17
- http://3d-transforms.webflow.com
- https://webflow.com/prototyping
- https://webflow.com/feature/interactions-v2
- https://interactions.webflow.com
- https://flexbox.webflow.com
Terima kasih kepada Waldo Broodryk dari Webflow yang telah menjawab banyak pertanyaan dan membagikan demo dan pengetahuannya.
13. Marvel App
- Gratis (1 pengguna, 2 project)
- Pro $12/bulan
- Perusahaan $48/bulan
Marvel editor berbasis browser memungkinkan Anda untuk menghubungkan semua desain Anda bersama-sama, menambahkan gesture dan transisi untuk membuat prototype Anda terasa seperti aplikasi nyata atau website. Buat prototype untuk iPhone, iPad, Desktop, Apple TV, Apple Watch dan Android.
Marvel hadir dengan fitur seperti kolaborasi, komentar, merancanng bersama-sama di browser Anda dengan "Canvas", ditambah Anda bisa menambahkan gambar menggunakan Photoshop, Sketch atau pena dan kertas. Pengguna dapat mengeklik dan menyeret untuk membuat hotspot interaktif pada desain yang bereaksi saat diklik atau disentuh. Marvel hadir dengan fitur keren lainnya seperti plugin Sketch dan bahkan tool iOS. Aplikasi iOS sekarang menyertakan Canvas (disebutkan sebelumnya), alat bantu-cepat Marvel yang memungkinkan Anda membuat mock-up aplikasi dari awal. Aplikasi ini juga menyertakan Iconfinder dan Unsplash yang menyediakan database epik lebih dari satu juta foto dan ikon untuk digabungkan ke dalam desain Anda.
Marvel juga memiliki fitur seperti "user role", peng-organisasi-an project menggunakan folder, menyinkronkan desain dari Google Drive, opsi untuk menyematkan video dan audio dari YouTube, Spotify, Vimeo dan SoundCloud.
Kesimpulan
Tidak peduli tool yang Anda gunakan, pilih yang sesuai untuk Anda, yang Anda rasa paling nyaman. Tinggalkan komentar di bawah ini jika Anda pernah memiliki pengalaman dengan tool yang disebutkan diatas untuk membantu orang lain memutuskan yang harus digunakan. Saya harap artikel ini membantu Anda mendapatkan lebih banyak wawasan dan mampu memutuskan pilihan ketika saatnya tiba.
Terima kasih kepada kawan-kawan berikut atas masukan, berbagi pengetahuan dan opini mereka selama penelitian saya:
