Media Pengembangan Web & App | by APPKEY

Pembuatan Aplikasi Mobile Programming Tutorial Prototyping Website dan Aplikasi Mobile di Justinmind

Tutorial Prototyping Website dan Aplikasi Mobile di Justinmind

-

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

prototyping-2

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.

  1. 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.
  1. 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.

Artikel Terkait  Praktis Mengelola Database dengan “Database Inspector”

  1. 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.

  1. 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.

    1. Menambahkan Layar (screen) Lainnya

prototyping-3

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.

  1. 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.

  1. 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.

Artikel Terkait  Menggunakan Python untuk Analisis Data? Begini Caranya!

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?


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Proses Komunikasi: Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Jasa Pembuatan Website Untuk Toko Online

Perusahaan yang menyediakan Jasa pembuatan website untuk toko online bisa kita temukan dengan mudah di internet. Masing-masing dari perusahaan...

8 Contoh Search Engine Terbaik yang Paling Banyak Digunakan di Indonesia

Dulu jika ingin mencari informasi tentang apapun biasanya kita akan menanyakan kepada seseorang yang lebih mengetahui informasi, atau datang...

Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

7 Aplikasi Membuat Aplikasi Android Secara Offline

Aplikasi membuat aplikasi android saat ini banyak dicari penekun IT untuk membuat aplikasi Android secara offline tanpa harus menggunakan...

Jasa Web

Bisnis online

Pengembangan

Murah

Profesional

Toko online

SEO

Pemasaran

Tips

Jasa Aplikasi

Pembuatan Aplikasi

Bisnis online

Pemasaran

Istilah IT

TIPS

TOOLS

JASA

HARGA

Jasa Marketing

Istilah SEO

Teknik SEO

Tips Marketing

Paling Sering dibaca
Mungkin Anda Menyukainya