Scribd
Unggah
36 tayangan

Tutorial Marvelapp

Tutorial ini menjelaskan cara membuat prototype aplikasi interaktif menggunakan platform MarvelApp dengan langkah-langkah sebagai berikut: mendaftar akun, membuat proyek baru, mengunggah desain, menambahkan transisi antardesain, memainkan prototype, dan berbagi hasilnya.

Diunggah oleh

Shandra Wikusdiyanti
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
36 tayangan

Tutorial Marvelapp

Tutorial ini menjelaskan cara membuat prototype aplikasi interaktif menggunakan platform MarvelApp dengan langkah-langkah sebagai berikut: mendaftar akun, membuat proyek baru, mengunggah desain, menambahkan transisi antardesain, memainkan prototype, dan berbagi hasilnya.

Diunggah oleh

Shandra Wikusdiyanti
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 12

Tutorial marvelapp

1. Login ke https://marvelapp.com/

2. Klik create project untuk membuat lembar kerja baru, kemudian pilih prototype.

3. Kemudian akan muncul laman seperti di bawah ini, ketikkan nama aplikasi prototype
kalian, misalkan syariplanner.com, lalu pilih jenis platform aplikasi kalian. Kalau aplikasi
Tutorial marvelapp

kalian akan ditampilkan di web maka pilih website sedangkan kalau aplikasi kalian
berbasis mobile maka pilih icon mobile sesuai kebutuhan kalian ya.

Setelah semua diisi lalu klik create project.

4. Klik tombol upload or create design


Tutorial marvelapp

Dan muncul tampilan seperti di bawah ini, kemudian pilih tombol select pada pilihan design
in marvel.

5. Maka akan muncul toolbar dari marvelapp ini, kemudian buat desain sesuai dengan
kebutuhan kalian.
Tutorial marvelapp

6. Jika desain pertama sudah selesai kemudian lanjutkan membuat desain untuk aksi
selanjutnya. Jadi desain prototype itu harus dibuat secara berurutan, contohnya untuk
masuk ke aplikasi syariplanner, saya harus memiliki tampilan login yang telah saya buat
pada langkah nomor 5 di atas, kemudian aksi yang akan saya tampilkan jika desain
tampilan login sudah dibuat yaitu menampilkan tampilan landing page dari syariplanner
atau halaman awal dari syariplanner. Untuk membuat desain baru, klik tombol new design
di pojok kiri bawah.

Maka akan muncul lembar kerja yang kosong, kemudian gunakan toolbar yang disediakan di
sebelah kiri lembar kerja seperti di bawah ini.
Tutorial marvelapp

7. Jika kalian sudah selesai membuat desain klik tombol close, maka akan muncul tampilan
di bawah ini.
Tutorial marvelapp

Lalu selanjutnya klik tombol prototype untuk membuat efek transisi pada desainnya, seperti di
bawah ini.

Maka akan muncul tampilan di bawah ini.


Tutorial marvelapp

8. Kemudian klik dan Tarik kursor mouse untuk membuat titik peralihan gambar yang
menandakan jika kita mengklik tombol sign in maka akan ada aksi peralihan selanjutnya
yaitu menampilkan tampilan halaman awal/landing page dari aplikasi syari planner yang
saya sudah. Sesuaikan dengan kebutuhan kalian saja asalkan desain kalian memiliki sebuah
desain tombol untuk melakukan peralihan tampilan.
Tutorial marvelapp

9. Lalu akan muncul tampilan seperti di bawah ini, centang desain gambar selanjutnya.
Karena saya membuat aksi di image 1 maka selanjutnya saya mencentang image 2 secara
berurutan.

10. Lalu pilih action untuk memilih jenis aksi yang diterapkan pada tombol yang telah kita
pilih, disini untuk kasus saya, saya memilih tombol click or tap saja.
Tutorial marvelapp

Untuk screen transition itu opsional boleh pakai ataupun tidak. Setelah selesai mengatur action
klik tombol close lalu akan kembali ke tampilan awal seperti di bawah ini.

Jika sudah ada blok biru seperti di atas maka aksinya berhasil diterapkan.

11. Klik tombol play di pojok kanan untuk melihat apakah efek yang kita tambahkan sudah
sesuai atau tidak.
12. Setelah itu maka kita akan dialihkan ke laman baru seperti di bawah ini, kalian bisa
langsung mengklik tombol sign in nya maka tampilan akan berubah ke desain selanjutnya
yaitu landing page/halaman awal.
Tutorial marvelapp

13. Jika sudah sesuai kita klik tombol Done.


Tutorial marvelapp

14. Kita akan dialihkan ke halaman awal seperti ini lagi.

15. Karena marvelapp fitur gratis ini tidak dapat di download karena fitur download ad ajika
kita berlangganan, maka kalian klik tombol share seperti gambar di bawah ini.
Tutorial marvelapp

16. Lalu akan muncul laman seperti di bawah ini kemudian klik tombol copy pada bagian share
link.

17. Lalu kirim link nya melalui WA ibu dan tuliskan di lembar kerjanya.

Anda mungkin juga menyukai