Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Prototyping

Cara Membuat Prototype Interaktif dengan Marvel

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Marvel adalah perkakas online yang mengizinkan designer untuk membuat prototype dari proyek aplikasi ponsel dan situs. Pada panduan ini kita akan melihat cara menggunakan Marvel untuk pertama kalinya, membuat prototype game ponsel dan mempelajari proses bernavigasi antarlayar dan opsi yang berbeda.

Ada banyak alat untuk membuat prototype yang ada saat ini: InVision, Framer, Flinto, Pixate, dan lainnya. Jadi kenapa kita harus menggunakan Marvel? Saya selalu berpikir bahwa hal yang paling penting bukanlah alatnya tapi perasaan nyaman ketika bekerja: Saya nyaman dengan Marvel. 

Fitur

Beberapa fitur kebanggaan Marvel adalah:

  • Sinkronisasi Dropbox, saat kamu bekerja dengan Photoshop dan menekan Save, prototype-nya akan diperbaharui secara real-time.
  • Menambah sketsa dari aplikasi ponsel jika ingin memulainya dari sketsa kasar.
  • Mendukung aneka transisi dan gestru.
  • Kemampuan untuk membuat tim yang tak terbatas (kamu bisa memiliki tim untuk klien, tim disekitar hackday dan lainnya).
  • Bingkai perangkat untuk tujuan pratinjau.
  • Antarmuka yang sangat rapih dan penuh detil
  • Banyak pilihan untuk pembagian prototype.

Bisakah kita mulai?

1. Kontak Pertama

Langkah 1

Pergi ke https://marvelapp.com dan masuk. Ingat kamu membutuhkan sebuah akun Dropbox untuk menggunakan Marvel; Ini mengizinkanmu untuk mensinkronisasikan semua berkas yang kamu gunakan di prototype. Kamu tidak memerlukan Dropbox terpasang untuk menggunakan Marvel, tapi kamu harus bisa mengotentikasikannya ke Dropbox.com

Jika kamu telah mendaftar Dropbox, baik! Biarkan Marvel mengakses akunmu sehingga kamu bisa memproses tahap selanjutnya. Marvel menggunakan gambar yang kamu kerjakan namun tidak akan pernah mengakses berkas lainnya. Sekalinyakamu melakukan itu, kamu akan melihat layar berikut:

Marvel Welcome Screen

Langkah 2

Ini waktunya untuk membuat proyek pertama kita, klik tombol Create Project. Sebuah jendela akan muncul, masukkan nama Proyek. Perhatikan cara kamu bisa mengisi kolom tambahan seperti "sharing project with a team" (tidak untuk kali ini) atau menambahkan perlindungan kata sandi (bukan yang kita butuhkan sekarang) juga. Masukkan nama dari proyek. Dalam kasus saya, saya akan menggunakan "WORDS". Sekarang klik tombol Create project.

Create new project

Langkah 3

Setealh proyek terbuat kita akan membutuhkan beberapa konten. Perhatikanlah beberapa opsi baru yang kamu miliki di layar. Fokus pada Add designs from Dropbox dan Take photos of Sketches, opsi paling penting ketika kamu membuat proyek baru di Marvel.

Add designs from Dropbox or Take photos of sketches

Inilah saatnya untuk menggunakan berkas latihan yang telah saya lampirkan dalam panduan ini. Jika kamu belum memilikinya, pergi dan unduh salinannya di Github. Selanjutnya, kamu harus mengunggah semua berkas .png ke folder di akun Dropbbox-mu, di manapun yang kamu inginkan. Untuk panduan ini saya membuat sebuah folder bernama WORDS untuk meletakkan semua konten di dalamnya. Setelah selesai, kembali ke layar.

Sekarang klik tombol Add images from Dropbox, pilih semua gambar ke folder Dropbox dan proses.

Images added to Marvel

Langkah 4

Cek gambarnya. Ukuran mereka adalah 750x1334 px yang sesuai resolusi sebuah iPhone 6. Kita akan bilang ke MArvel bahwa kita ingin membuat sebuah prototype untuk ponsel ini. Caranya? Klik Settings untuk menampilkan jendela opsi baru. Kamu harus melihat cara bingkai iPhone 6 telah terpilih. Ini karena Marvel telah secara otomatis mendeteksi bingkai yang paling cocok berdasarkan ukuran dari layar kita. Terima kasih Marvel!

Mobile templates available in Marvel

Dari layar ini kamu akan bisa memilih binkgai perangkat lainnya dan mengonfigurasi pilihan yang berkaitan dengan tampilan dan perilaku dari prototype. Mari tinggalkan semua nya sesuai bawaan dan kembali ke layar sebelumnya untuk melanjutkan. Tekan ikon X untuk menutup jendela.

2. Prototype Kita

Langkah 1

Sekarang tiba bagian serunya: Mari buat interaksi pertama kita. Pindahkan kursor ke atas gambar dan kamu akan memunculkan pilihan baru. Apakah kamu melihatnya? Contohnya, mengarahkan ke 00-intro.png lalu klik Edit. Kamu akan melihat sebuah popup menunjukkan cara membuat hotspot. Pergi dan kamu akan ditampilkan sesuatu seperti ini.

Adding our first interaction

Tips: Gunakan opsi zoom di bagian atas menu jika kamu melihat gambarnya terlalu besar di layarmu. Saya menggunakan tingkat zoom 50%

Langkah 2

Untuk menambah interaksi dan transisi kita butuh untuk menambahkan "interactive areas" ke gambar kita. Area ini dikenal sebagai hotspots. Kamu bisa membuat mereka di manapun dengan mengklik dan menggeser hingga kamu mendapatkan bentuk yang kamu inginkan.

Buat sebuah hotspot di atas tombol Casual mode di desain kita. Ketika selesai, sebuah toolbar akan muncul. Kita akan menggunakannya untuk mengatur perilaku hotspot.

Tips: Kamu bisa mengganti posisi dan ukuran hotspot dengan memilih lalu memindahkan atau mengubah ukurannya.

Langkah 3

Di toolbar kamu akan melihat semua gambar yang kita punya di proyek. Kita telah membuat hotspot di atas tombol Casual mode, lalu klik gambar 01-Casual-option untuk memilih dan menghubungkan hotspot-nya ke gambar. Gambar ini akan jadi yang kita lihat di layar ketika kita berinteraksi dengan hotspot tertentu, mensimulasikan sebuah ketukan atau aksi klik.

Sekarang fokus ke Hotspot Behaviour. Kamu akan melihat bahwa pada awalnya tipe transisi-nya adalah None. Ini berarti tidak ada animasi di antara layar yang terjadi. Kita juga melihat bahwa aksi yang memicu interaksinya adalah Click or Tap (jika kamu akan menggunakan ponsel untuk menguji Prototype). Mari biarkan dia seperti itu sekarang.

Klik opsi Duplicate this hotspot. Pada jendela baru pilih gambar 02-Challenge-option. Klik tombol hijau untuk menyelesaikan aksi.

Tips: Menduplikasi hotspot menghemat waktu jika kamu ingin menggunakan interaksi  dan layar destinasi yang sama untuk beberapa gambar. Ingat bahwa hotspot yang diduplikasi berubah jadi hijau dan bukan biru.

Duplicating hotspots

Langkah 4

Itu adalah dasar dari pembuatan interaksi di MArvel. Mudah bukan? Sekarang klik ikon X untuk menutup toolbar. Menggunakan slider di atas, pindah ke gambar berikutnya, 01-Casual-option.

Langkah 5

Buat sebuah hotspot baru di atas Casual mode. Ingat, cukup klik dan geser. Kali ini hubungkan dia dengan gambar 06-casual-mode. Untuk mengubah efek transisi-nya klik Transition lalu pilih Fade. Kita mensimulasikan akses-nya ke salah satu mode game dari aplikasi.

Transitions in Marvel

Langkah 6

Buat sebuah hotspot baru di atas tombol Challenge mode dan tautkan dia dengan gambar 02-Challenge-option. Dengan opsi Duplicate this hotspot untuk menyalinnya juga ke gambar 00-Intro.

Buat hotspot lainnya, kali ini di atas ikon trophy di bagian bawah gambar. Tautkan hotspot ini ke 04-trophie image ubah Transition ke Slide Up. Gunakan Duplicate this hotspot dan salin dia ke 00-intro dan 02-Challenge-option.

Sekali lagi: buat sebuah hotspot di atas tombol No limit. Tautkan dia ke gambar 03-Nolimit-option. Ganti Transition ke Push Left dan gunakan Duplicate this hotspot untuk menyalinnya ke 00-intro dan 02-Intrp-Challenge-option.

Pada akhirnya, kamu harus memiliki sesuatu seperti di gambar berikut:

Our image with hotspots

Langkah 7

Gunakan slide di atas untuk berpindah ke gambar berikutnya: 03-Nolimit-option. Buat sebuah hotspot baru di atas opsi Back to menu. Sekarang klik opsi Link to last visited screen. Dengan begini, prototype kita akan mengembalikan ke halaman sebelumnya di mana kamu telah membuat interaksi. Ingat bahwa kita bisa mengakses layar ini menggunakan hotspot yang kita letakkan di gambar 00, 01, dan 02. Dengan Link to last visited screen kita bisa kembali ke gambar tersebut bukan hanya ke salah satunya.

Langkah 8

Mari pindah ke gambar berikutnya: 04-trophies. Fokus pada pilihan yang mengatakan Fixed header. Klik dan geser hingga mencapai nilai 92px. Dengan begini kita bisa menjaga header-nya tetap saat digulung ke atas dan bawah. Karena gambarnya setiggi 2050px, kitabisa melihat efek ini saat kita siap untuk menguji prototype kita.

Fixed header

Langkah 9

Buat sebuah hotspot baru di atas ikon di area kiri atas. Tautkan ke gambar 00-Intro dan pilih Slide Down sebagai Transition dan Duplicate this hotspot untuk 05-trophies-share dan juga untuk 08-results dan 09-trophies-unlocked.

More hotspots and transitions

buat hotspot lainnya di atas seluruh area Trophy title 1 tautkan ke gambar 05-trophies-share dan atur Fade sebagai Transition. Kamu bisa lihat hotspot yang telah dibuat pada gambar berikut:

Langkah 10

Lanjutkan ke gambar selanjutnya: 06-casual-mode. Di sini kita akan membuat sebuah hotspot untuk menampilkan menu jeda dan hotspot lainnya untuk menampilkan hasil yang akan dilihat di akhir permainan.

Jadi buat sebuah hotspot baru di atas ikon pada bagian tengah atas, di antara timer dan skor. Tautkan dia ke gambar 07-pause. Gunakan Fade sebagai Transiton. Buat hotspot lainnya di atas bagian tengah layar dan tautkan ke 08-results. Atur Slide Fade sebagai Transition.

Example of hotspots created using Marvel

Langkah 11

Gambar selanjut! Gunakan slider dan pergi ke 07-pause. Buat sebuah hotspot baru di opsi Continue. Kamu bisa menggunakan opsi Link to last visited screen atau tautkan hotspot ke 06-casual-mode untuk mensimulasikan efek dari kembali ke permainan dari menu jeda.

Buat juga sebuah hotspot di pilihan Back to menu dan tautkan dia ke gambar 00-Intro, pilih Slide Fade sebagai Transition.

Langkah 12

Kita hampir selesai! Pergi ke 08-results. Kamu akan melihat sebuah hotspot yang telah terbuat di ikon pada bagian atas. Buat yang baru di atas tombol New Game. Tautkan dia ke 06-casual-mode. Gunakan Fade sebagai Transition. Duplicate the Hotspot ke gambar 09-trophies-unlocked.

Buat hotspot lainnya, di tengah layar. Gunakan gambar di bawah sebagai referensi jika dibutuhkan:

Using Swipes gestures in Marvel

Tautkan hotspot ke 09-trophies-unlocked. Gunakan Slide Left sebagai Transition dan Swipe Left sebagai Action. Saat kamu melihat prototype ini di ponsel, kamu bisa menggunakan gestur ini untuk memicu interaksi (komputer desktop akan tetap menjalankan aksinya dengan klik).

Langkah 13

Lanjutkan ke 09-trophies-unlocked, gambar terkahir! Kamu harusnya memiliki dua hotspot yang terlah terbuat. Buat satu lagi di bagian tengah kiri layar. Tautkan ke 08-results, gunakan Slide Right sebagai Transition dan Swipe Right sebagai Action.

Selesai. Sekarang saatnya untuk melihat prototype kita dan membagikannya ke orang lain!

3. Mempratinjau dan Opsi Berbagi

Langkah 1

Klik opsi Preview di bagian atas. Sebuah jendela baru dengan prototype-mu akan muncul di dalam template iPhone 6. Dia hidup!  Klik ikon rumah untuk secara otomatis kembali ke layar awal.

Sekarang kamu bisa menelusuri dan berinteraksi dengan aneka hotspot yang telah kamu buat.

Prototyping with Marvel

Tips: Perhatikan cara kursor berubah saat kamu pergi ke sebuah hotspot (di komputer). Jika kamu tidak terlalu ingat di mana mereka, cukup klik atau ketuk layar untuk menemukan di mana mereka berada.

Langkah 2

Semua berjalan baik dan saya harap kamu suka hasilnnya! Sekarang tutup jendelanya dan kembali ke layar kamu bekerja sebelumnya. Klik opsi Close untuk kembali ke layar utama dari proyek.

Dari sini kamu akan bisa mengakses layar editing, menambah gambar baru, memperbaharui yang sebelumnya, menambah ikon aplikasi, dan lainnya. Kamu juga bisa menggunakan opsi Play untuk meluncurkan pratinjau di browser-mu.

Klik opsi Share. Kamu akan melihat semua opsi yang tersedia untuk membagikan prototype yang baru kamu buat ke designer, pengembang ataupun klien.

Sharing options in Marvel

Kamu jgua bisa mengunduh berkas yang kamu butuhkan untuk menjalankan prototype-mu dari manapun. Tutup jendela Share, lalu di layar proyek klik Download untuk mengunduhnya ke berkas zip dengan semua yang kamu perlukan.

Kesimpulan

Semua yang kita praktikkan di panduan ini akan membekalimu dengan kemampuan untuk memahami cara menggunakan Marvel untuk membuat prototype secara cepat. Jika kamu memiliki petanyaan tentang suatu bagian, atau Marvel secvara umum, cukup tinggalkan komentar. Saya senang untuk membantu!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.