Prototipe sempurna dan desain hand-off dengan Marvel

Sep 14, 2025

Bagaimana caranya

A person sat in a cafe using Marvel on their laptop and displaying a finished prototype on their smartphone.

Dengan kurva pembelajaran yang lebih pendek daripada aplikasi invision dan alat handof desain baru untuk tim perusahaan, tidak ada waktu yang lebih baik untuk mengeksplorasi betapa Marvel dapat menjadi solusi yang cepat dan mudah untuk memototyping aplikasi web dan seluler dalam tim.

Marvel membantu tim mengambil desain mereka (dibuat dalam sketsa atau keajaiban itu sendiri) dari ide sketsa untuk inisial untuk konsep yang diuji. Alat kolaborasi mendorong pemangku kepentingan tidak hanya untuk mereka mengatakan tetapi untuk menjadi bagian dari alur kerja desain.

01. Buat proyek Marvel pertama Anda

Marvel's new design screen, indicating the locations of the buttons to create new designs. — Setelah Anda memilih proyek Anda, klik salah satu dari dua tombol untuk memulai proses desain

Daftar ke Marvel untuk memulai, di mana hanya nama dan alamat email Anda yang diperlukan. Pilih proyek desain atau proyek prototipe. Proyek prototipe adalah ketika Anda mengunggah layar yang sudah Anda rancang (biasanya dalam sketsa). Sebuah proyek desain adalah ketika Anda mulai dari awal dan Anda ingin menggunakan alat desain Marvel sendiri untuk membuat mockup fidelity rendah (ini adalah pilihan yang luar biasa untuk iterasi cepat dan brainstorming).

Pilih proyek desain, lalu beri nama, lalu pilih iPhone X dan klik tombol Buat Proyek. Dari sini (kami akan menyebutnya dasbor proyek dari sini keluar), klik tombol desain di sisi kiri, atau tombol mulai mendesain di tengah jendela.

02. Desain prototipe kesetiaan rendah

Marvel's protoyping screen, showing how easy it is to add mocked up components, include smartphone camera screens. — Anda dapat menggunakan dan mengadaptasi komponen yang sudah jadi, seperti layar kamera ini

Tujuan inti kami di sini adalah untuk memvisualisasikan ide-ide kami dengan cepat tanpa membuang-buang terlalu banyak waktu untuk apa hasil akhir akan terlihat. Dari sini kami dapat membuat bentuk, gambar, teks, komponen siap pakai seperti bilah tab, dan bahkan seluruh komponen layar penuh seperti layar kamera ini (yang dipilih dari bilah sisi kiri dan bergabung dengan tangan kanan sidebar).

Menggambar bentuk, membuat lapisan teks dan membuat perubahan visual sederhana cukup mudah bahkan untuk non-desainer, meskipun desainer berpengalaman akan menyukai seberapa cepat mereka dapat memberikan ide bersama dan mengklik tombol Tambahkan ke proyek.

Meskipun Anda tidak dapat mengharapkan gambar vektor, masking, dan alat desain kompleks lainnya, antarmuka ini akan merasa cukup akrab jika Anda sketsa, pengguna Adobe XD atau Figma (pada kenyataannya, kami akan membahas mengimpor desain kesetiaan lebih tinggi dari sketsa sebentar). Apa yang dapat Anda harapkan adalah memperbesar, menyelaraskan, mengelompokkan, alat desain visual dasar, kontrol mouse seperti menyeret, mengubah ukuran dan memutar dan beberapa pintasan keyboard yang praktis.

03. Menerima umpan balik

Namun, Marvel tidak hanya untuk desainer. Meskipun mungkin memerlukan perancang untuk menciptakan desain akhir dalam aplikasi desain standar industri, ide harus (dan lakukan) berasal dari semua jenis pemangku kepentingan (manajer, klien, pengembang, dan sebagainya).

Tidak peduli apa peran utama Anda dalam tim, itu harus sangat mudah untuk mengatakan: "Hei, bisakah ini ide?", Dan kemudian tunjukkan itu secara visual. Marvel's. Pop. Aplikasi seluler mengurangi penghalang entri bahkan lebih jauh dengan membawa alat desain yang disederhanakan ini ke perangkat seluler karena, mari kita hadapi itu, ide-ide dapat datang kepada kita saat paling aneh. Gagasan yang dibuat sketsa di atas kertas dapat dikonversi ke layar Marvel interaktif menggunakan kamera perangkat. Desain perlu didemokratisasi, di mana ada yang bisa mengatakan tanpa dibatasi untuk menggunakan aplikasi desain yang kompleks.

04. Mengintegrasikan Marvel dengan Sketsa

Setelah melakukan brainstorming ide-ide kesetiaan rendah dengan tim Anda, Anda akan ingin mengejek iterasi pertama di aplikasi desain Anda. Meskipun Anda dapat sepenuhnya mengunggah layar PNG yang diekspor dari aplikasi desain apa pun, Sketch adalah aplikasi yang disarankan karena ada plugin sketsa khusus yang mengotomatiskan proses (dan bahkan menyiapkan desain sehingga dapat diperiksa oleh pengembang nanti). Dukungan Photoshop untuk handoff desain akan datang kemudian, namun Adobe tidak memuji Photoshop untuk desain antarmuka pengguna lagi, karena membuat Adobe XD.

Dari dasbor, klik Pengaturan & GT; Integrasi & gt; Plugin sketsa, lalu unduh plugin. Setelah Anda menginstalnya, dan file desain Anda terbuka, tekan sinkronisasi atau sinkronkan semua tombol di bilah Marvel (ini muncul di atas daftar layer) untuk mulai memilih proyek Marvel untuk menyinkronkan layar.

05. Interaksi Prototipe.

Marvel screen showing how you can create interactions, for example placing your thumb on the thumbprint scanner to progress to the next screen. — Seret-pilih wilayah untuk membuat hotspot untuk menautkan dari satu layar ke layar lainnya

Tapi tentu saja kami tidak dapat menguji prototipe jika kami belum menambahkan interaksi kepada mereka, jadi mari kita lakukan sekarang. Pindah kembali ke dashboard Marvel, di mana Anda akan melihat layar yang kami sinkronkan, klik Lihat salah satu layar untuk masuk ke mode layar.

Dari sini kita masih dapat menavigasi melalui layar menggunakan panah kiri dan kanan di kedua sisi jendela, klik Timer untuk memiliki siklus Marvel melalui layar setelah beberapa detik (berguna untuk presentasi!), Atau klik Tidak Ada Komentar untuk Tambah komentar atau anotasi pertama Anda di layar.

Mungkin hal pertama yang akan Anda perhatikan adalah tajuk tetap dan tombol footer tetap yang muncul di dekat sudut kiri atas dan bawah layar masing-masing. Tombol-tombol ini diseret dan mereka juga dapat dipindahkan untuk menandai wilayah cutoff bagian header yaitu untuk tetap diperbaiki ke bagian atas viewport yang dapat digulir. Anda juga dapat menggunakan bidang teks di sudut kanan atas dan kanan bawah untuk menentukan nilai ini secara manual.

Tetapi bagaimana kita benar-benar menautkan satu layar ke layar lain? Sederhana: dengan mouse, seret-pilih wilayah di layar yang akan menautkan ke layar lain (ini disebut 'hotspot'). Setelah Anda selesai melakukannya, antarmuka akan muncul di bagian bawah jendela yang memungkinkan Anda untuk menyesuaikan di mana pengguna dibawa, transisi apa pun yang terjadi selama interaksi dan gerakan apa yang diperlukan untuk mengaktifkan interaksi itu (ketuk, gesekan dll ).

Dan tentu saja, kita dapat menggunakan alat prototipe ini bahkan pada mockup fidelity rendah. Bahkan, disarankan agar Anda melakukannya, semua saat menggunakan fitur komentar untuk membahas dan mengulangi.

06. Membagikan desain ke pengembang

A screen grab of Marvel showing how easy it is for developers to access detailed information from handed off designs, such as the positions and sizes of each element. — Handof desain memudahkan desain dan pengembang untuk bekerja satu sama lain

Ketika tim Anda mempertahankan kepercayaan penuh pada desain akhir, divalidasi menggunakan alat komentar dan pengujian pengguna, saatnya untuk menyerahkannya kepada pengembang yang kemudian dapat memeriksa dan kode. Penting untuk diingat bahwa seorang desainer tidak 'selesai' begitu desain diserahkan dan bahwa desainer dan pengembang harus selalu berkomunikasi dalam harmoni untuk mengawasi perkembangannya sampai selesai. Pengembang juga dapat memiliki beberapa pertanyaan, sehingga fitur komentar harus tetap sangat aktif.

Tekan tombol putar, lalu klik Handoff di sudut kiri bawah untuk membuka antarmuka handoff desain. Dari sini, pengembang akan dapat mengklik elemen-elemen desain dan memeriksa gaya individu yang membuatnya, menggunakan bilah sisi di sisi kanan (seperti antarmuka inspektur dalam sketsa, figma atau adobe xD). Satu-satunya perbedaan di sini adalah bahwa pengembang dapat mengklik tombol Salin untuk menyalin gaya sebagai kode ke clipboard.

Artikel ini awalnya diterbitkan dalam edisi 301 NET, majalah terlaris di dunia untuk desainer dan pengembang web. Membeli Masalah 301. atau Berlangganan ke NET. .

Dapatkan lebih banyak wawasan tentang prototyping iterative

Generate NYC 2018 runs from the 25th-27th April 2018 — Marisa Morby memberikan ceramah tentang bagaimana pengujian prototipe iteratif akan membantu Anda menciptakan desain yang menang, setiap kali di menghasilkan New York dari 25-27 April 2018

Ketika sebagian besar perusahaan perlu membuat desain web baru, proses biasanya dimulai dengan ide-ide pitching, bergerak untuk merancang, kemudian mengembangkan, dan kemudian ditayangkan. Tetapi bagaimana jika itu tidak berhasil? Itu banyak waktu, usaha, dan uang untuk dibelanjakan hanya untuk mengetahui bahwa sebuah ide berkinerja buruk.

Untungnya, dalam pembicaraannya di Hasilkan New York dari 25-27 April 2018 , Marisa Morby, Kepala Penelitian di Clearhead, akan menunjukkan kepada Anda cara yang lebih baik untuk membuat dan memvalidasi desain baru yang lebih cepat, lebih mudah, dan lebih murah daripada proses desain tradisional menggunakan prototyping dan pengujian iteratif.

Hasilkan New York berlangsung dari 25-27 April 2018. Dapatkan tiket Anda sekarang .

Artikel terkait:

10 Alat Prototyping Top
Alat Wireframe terbaik 18
Cara Menghindari Jebakan Prototyping

Prototipe sempurna dan desain hand-off dengan Marvel

01. Buat proyek Marvel pertama Anda

02. Desain prototipe kesetiaan rendah

03. Menerima umpan balik

04. Mengintegrasikan Marvel dengan Sketsa

05. Interaksi Prototipe.

06. Membagikan desain ke pengembang

Dapatkan lebih banyak wawasan tentang prototyping iterative

Bagaimana caranya - Artikel Terpopuler

Kiat Pengembangan Visual: Ceritakan Kisah dengan Karya Seni Anda

Cara Memperbaiki Portofolio Desain Anda

Cara Membuat Halaman Komik

Bagaimana cara mengubah font di Bio Twitter Anda

Gambar Geisha Bad-Ass

Buat efek portal di Maya

Buat matahari terbenam sensasional di Photoshop

Memodelkan spaceship untuk desain gameplay

Kategori