Justinmind Prototyper : Tutorial Prototyping Website dan Aplikasi Mobile

Last Updated on March 24, 2022 by

Justinmind prototype menjadi salah satu tools yang cukup populer dan banyak digunakan dalam membuat prototipe web dan aplikasi belakangan ini. Justinmind prototyper, adalah salah satu prototyping tools yang menawarkan pembuatan prototipe aplikasi dan web dengan cepat dan instan.

Justinmind Prototyper memudahkan Anda para developer membuat berbagai rancangan aplikasi maupun web tanpa ribet dengan coding karena menggunakan editor drag & editor.

Meski tergolong baru, Justinmind cukup populer di kalangan developer karena berbagai fitur yang dimilikinya serta dapat diakses secara gratis tanpa batas. Dengan menggunakan Justinmind prototyper, developer dapat mengekspor prototipe yang dibuat dalam bentuk format HTML sehingga dapat diakses secara online.

Meski fitur-fitur yang dimiliki Justinmind Prototyper tidak sebanyak dan selengkap UXPin maupun InVision, namun Justinmind bisa menjadi pilihan prototyper dengan beragam kelebihan yang dimilikinya.  Beberapa kelebihan yang dimiliki oleh Justinmind Prototyper:

1. Justinmind prototyper disajikan dalam kemasan yang praktis dengan editor drag and drop dalam meletakkan komponen-komponen yang dibutuhkan developer. Komponen-komponen tersebut pun diimplementasikan dengan istilah No Programming.
2. Simulasi dapat dilakukan secara instan, hanya dengan mengklik tombol simulate, Anda pun dapat dengan mudah melihat hasil prototipe aplikasi yang Anda buat.
3. Prototipe diekspor dalam format HTML sehingga para pengguna (users) yang menggunakan prototipe aplikasi tersebut dapat memberi feedback.
4. Justinmind Prototyper dapat digunakan secara gratis dan tidak terbatas. Namun Anda hanya perlu membayar saat ingin menambahkan elemen interaktif, effects, cloud collaboration, dan mengekspor desain.

Tutorial Dasar Protyping Web dan Aplikasi dengan Justinmind Prototyper

Berikut tutorial dasar protyping web dan aplikasi dengan Justinmind Prototyper.

1. Pertama, Anda perlu mendownload Justinmind Prototyper di www.justinmind.com kemudian ikuti panduan di website tersebut untuk instalasi.
2. Setelah menginstal Justinmind Prototyper dan membuka aplikasi tersebut, Anda akan disuguhkan pilihan template prototipe dari berbagai device, mulai dari desktop, smartphone, dan tablet. Pilih salah satu template yang Anda inginkan, kemudian klik ‘New Prototype’.

Anda dapat memulai prototipe Anda dari canvas kosong atau import dari prototyping dan designing tools lainnya seperti Adobe XD dan Photoshop. Pada tutorial ini, kami akan menggunakan canvas kosong.

3. Eksplor Justinmind User Interface

Justinmind Prototyper memiliki User Interface yang dibagi menjadi palet-palet yang berbeda dan dapat disesuaikan wireframe Anda. Berikut penjelasan terkait User Interface pada Justinmind Prototyper:

• Toolbar, yang berfungsi untuk memilih Shape (bentuk), Images (gambar), dan text elements (elemen teks) dari toolbar dan Anda dapat menambahkan ke canvas yang berisikan prototipe Anda. Klik tanda ‘+’ pada Toolbar untuk melihat elemen lain yang dapat Anda pilih seperti Dropdowns, Hotspots, dan Input Text Fields.
• Screens, berfungsi untuk melihat dan menambak screen baru pada Screens Palette. Screens pada Justinmind mirip seperti Artboards atau Frames pada aplikasi prototyping tools lainnya. Tiap screen memiliki canvas-nya sendiri dan seluruh prototipe dapat memiliki banyak screen yang berbeda-beda. Klik tanda ‘+’ pada palette untuk menambah screen baru.
• Canvas, tambahkan element pada canvas Anda untuk membangun desain dan wireframe Anda.
• Alignment, untuk menyelaraskan dan menyebarkan elemen pada Canvas.
• Properties, untuk melihat dan mengedit element’s styling, posisi,, dan visibilitas selama simulasi pada properti palette. Setiap elemen memiliki properti sendiri yang dapat dikostumisasi.
• Events, untuk membuat interaksi dan mengubah wireframe menjadi prototipe high-fi pada Events Palette.
• Layers, berfungsi untuk melihat dan menyusun ulang posisi elemen pada Canvas. Anda dapat menambahkan elemen untuk menyusun ulang dari atas atau dari bawah elemen lain. Anda juga dapat menyembunyikan dan menampilkan elemen tersebut pada saat mengedit dengan mengarahkan kursor ke elemen atau grup untuk melihat opsi ‘show’ atau ‘hide’.
• Libraries, Anda dapat menemukan banyak pre-styled elements pada libraries.

4. Tambahkan Elemen pada Canvas.

Pilih elemen pada Toolbar dan Libraries lalu tambahkan pada Canvas Anda untuk mendesain prototipe yang sudah dibuat. Untuk memudahkan pekerjaan Anda, dapat juga menggunakan shortcut pada keyboard.

5. Menambahkan Gambar

Anda dapat menambahkan gambar pada desain prototipe Anda dengan mengklik elemen gambar pada Toolbar. Pilih gambar Anda, bisa dari browser atau dari desktop Anda lalu drag (seret) ke Canvas Anda.

6. Menambahkan Input Interaktif

Justinmind memiliki banyak widget pre-made Input yang interaktif secara otomatis. Anda mengetikan teks ke dalam Input Text Field, lalu pilih nilai dari Dropdowns, dengan mencentang kotak centang, dan dapat banyak lagi tanpa menambahkan lebih banyak events.

Tempatkan widget pilihan Anda dari bagian Interactive Input Fields pada toolbar canvas lalu simulasikan prototipe buatan Anda untuk memeriksanya.

7. Menambahkan Layar (screen) Lainnya

Buka palette Screens, maka Anda akan mendapati daftar seluruh layar di prototipe Anda. Anda juga dapat menambahkan layar baru dengan kilk tombol ‘+’. Klik dua kali untuk menamai screen Anda.

Klik salah satu screen pada palet Layers atau klik dua kali pada Canvas untuk menemukan opsi perubahan ukuran Canvas, tipe perangkat, atau warna background pada screen.

8. Menambahkan Link dan Elemen yang Clickable

Navigasikan pada screen lain ketika Anda melakukan preview pada prototipe buatan Anda dengan menambahkan link yang interaktif. Anda dapat membuat link dengan tiga cara berbeda.

• Drag and drop

Pilih salah satu elemen pada Canvas yang ingin Anda tautkan pada screen lainnya. Kemudian drag atau seret elemen tersebut pada Screen Palette dan pada screen yang ingin Anda hubungan. Cara ini akan membuat sebuah ‘On Click + Navigate To’ secara otomatis.

• Right-click (klik kanan)

Pilih elemen yang ingin Anda tautkan ke elemen lain, lalu klik kanan pada elemen tersebut, lalu pilih opsi Navigate To pada opsi yang muncul. Lalu Anda dapat memilih salah satu screen yang ingin Anda hubungkan dan Anda dapat menambahkan efek transisi dengan tautan.

• Events Palette

Pilih salah satu elemen yang ingin Anda tautkan pada screen lainnya, lalu beralih pada Events Palette, lalu klik Add Event. Pada dialog Events, klik dropdown Choose Trigger, arahkan Mouse section dan pilih On Click.

Anda kemudian akan mendapati dropdown ‘Action’, lalu klik dan pilih ‘Navigate To’. Setelah itu, pilih screen yang ingin Anda hubungkan dari list yang tersedia dan klik OK untuk menyelesaikan pembuatan event. Pada dialog Events, Anda huga dapat memilih untuk menautkan pada layar yang dilihat sebelumnya di prototipe Anda atau URL eksternal.

8. Simulasikan Prototipe Anda

Periksa interaktivitas prototipe Anda secara real-time. Klik tombol ‘Play’ atau tekan F5 untuk meluncurkan simulasi dan melihatnya di browser. Anda juga dapat membagikan prototipe Anda untuk memperoleh feedback dari para reviewer. Untuk membagikan prototipe Anda, klik tombol ‘Share’ yang berada di atas editor.

Tempatkan prototipe buatan Anda pada ‘existing project’ atau ‘create a new one’. Klik share untuk mengupload prototipe pada akun Anda dan Anda akan memperoleh konfirmasi jika prototipe Anda berhasil di upload. Klik ‘view in my account” maka prototipe Anda akan dimuat sesuai dengan browser yang sedang Anda gunakan pada akun Justinmind Anda.

Ketuk tombol ‘Invite Reviewer’, yang akan membuka pop-up tempat Anda dapat memasukkan alamat email reviewer dan menulis instruksi atau komentar apa pun untuk mereka. Klik ‘Send Inivitation’ untuk mengundang pengulas. Mereka akan menerima email yang berisi tautan ke prototipe interaktif.

Anda juga dapat mensimulasikan prototipe And pada perangkat secara langsung. Caranya sebagai berikut:

1. Download aplikasi seluler Justinmind di Google Play Store maupn App Store.

2. Setelah itu, buka aplikasi seluler dan masuk dengan detail akun Justinmind Anda. Anda kemudian akan melihat daftar prototipe yang telah Anda bagikan ke akun online Justinmind Anda.

3. Ketuk prototipe untuk melihatnya. Prototipe dengan titik merah perlu diunduh sebelum Anda dapat melihatnya. Ketuk untuk mulai mengunduh.

Itulah penjelasan dan tutorial Justinmind Prototyper. Justinmind mengedepankan konsep No Programming sehingga cocok untuk Anda yang belum terlalu fasih bahasa pemrograman. Apakah Anda tertarik mencoba membuat prototipe aplikasi atau web dengan Justinmind?

Yuk kunjungi Web App di https://appkey.id/ untuk dapatkan informasi terbaru seputar pengembangan website dan aplikasi lainnya.