Siapa Tahu Adobe CC Bisa Wireframe?

Wireframing adalah langkah utama dalam merancang antarmuka pengguna apa pun, baik situs web, aplikasi, atau produk perangkat lunak. Tanpa gangguan berupa visual, warna, tipografi, gaya, dan efek, Anda bisa lebih fokus dalam mendefinisikan hierarki konten dan pengalaman pengguna.

Melakukan gambar rangka dan prototipe dengan ketelitian rendah akan membantu Anda menguji dan mengulangi lebih awal dan lebih sering dalam prosesnya. Gambar rangka dengan ketelitian rendah memungkinkan desainer bekerja lebih cepat dan mengembangkan produk yang akan disukai pengguna.

Ada banyak alat wireframing yang berbeda untuk dipilih di alam liar. Yang mana yang Anda pilih akan bergantung pada preferensi pribadi dan gaya alur kerja Anda.

Sama seperti banyak desainer yang pindah ke desain digital dari dunia cetak, saya ahli dalam aplikasi Adobe seperti Illustrator, InDesign, dan Photoshop. Saya dapat menggunakannya secara efisien dan intuitif dari mana saja dan kapan saja (bahkan jika seseorang membangunkan saya di tengah malam dan menolak memberi saya secangkir kopi).

Tidak heran, aplikasi serbaguna ini juga menjadi alat yang saya gunakan untuk melakukan desain visual web dan aplikasi. Jadi, agar alur kerja saya menjadi yang paling efisien, saya juga menggunakannya untuk wireframing.

Di setiap proyek, saya biasanya mulai mendesain dengan membuat sketsa yang sangat kasar di atas kertas, atau di layar iPad atau smartphone saya jika saya tidak berada di dekat meja kantor saya. Sketsa-sketsa ini ada untuk memfokuskan pemikiran saya mengenai konsep yang dipilih; klien mungkin tidak akan pernah melihat satupun dari mereka. Ketika saya merasa yakin bahwa ide saya berhasil, saya beralih ke wireframing. Saya biasanya menggunakan gabungan Adobe Illustrator dan InDesign: Illustrator untuk membuat sebagian besar elemen kit UI dan InDesign untuk wireframing itu sendiri.

Saya akan menjelaskan proses langkah-demi-langkah tentang bagaimana juga memasukkan alat-alat itu ke dalam alur kerja wireframing Anda nanti di artikel, tapi sebelum saya masuk ke detailnya, izinkan saya menunjukkan kekuatan dan kelemahan menggunakan InDesign sebagai alat wireframing utama .

Pro dan Kontra Menggunakan Adobe InDesign sebagai Wireframe dan Alat Prototyping

Untuk beberapa waktu sekarang, Adobe InDesign tidak hanya menjadi aplikasi desktop publishing tetapi juga banyak digunakan untuk penerbitan digital dan pembuatan EPUB. Ada juga beberapa alasan mengapa ini adalah alat yang cocok untuk wireframing juga:

• Halaman master – Anda dapat dengan cepat dan konsisten menerapkan elemen desain global seperti navigasi, header, footer, dan sebagainya menggunakan halaman master. Anda dapat membuat halaman master sebanyak yang Anda butuhkan, dan selain itu, satu master dapat didasarkan pada master lainnya.
• Dukungan grid yang solid – Memungkinkan Anda dengan mudah membuat dan menerapkan berbagai jenis grid, kolom pelengkap, panduan horizontal dan vertikal untuk membuat modul, dan subgrid untuk kompleksitas dan presisi yang lebih besar.
• Tata letak alternatif – Memungkinkan gambar rangka untuk beberapa perangkat dan orientasi dalam file yang sama.
• Perpustakaan CC – Menghasilkan perpustakaan dari berbagai aset yang dapat digunakan kembali seperti objek, warna, karakter, dan gaya paragraf yang umum digunakan. Buat aset di InDesign, Illustrator, atau Photoshop, atau dengan aplikasi seluler Adobe Capture—mana pun yang Anda inginkan.
• Layers – Menyediakan kemampuan untuk mengatur, mengelompokkan, menampilkan/menyembunyikan, dan mengunci/membuka kunci objek dan konten secara selektif dalam wireframe. Setiap halaman dokumen InDesign multi-halaman memiliki jumlah dan urutan lapisan yang sama. Semua perubahan yang Anda buat pada lapisan tercermin di semua halaman, seperti visibilitas, urutan susun, atau penghapusan.
• Gaya dan tabel – Memberikan kontrol penuh atas tampilan teks, objek, dan tabel Anda melalui penggunaan gaya InDesign. Gaya dapat saling mewarisi memberikan kemampuan untuk mengalirkan pemformatan yang diinginkan dengan mudah di seluruh dokumen. Membuat dan memformat tabel untuk digunakan sebagai elemen konten wireframe atau bahkan pembantu untuk tujuan tata letak sangat sederhana.
• Integrasi Typekit – Dalam mockup high-fidelity, Anda dapat menggunakan salah satu font Typekit yang disinkronkan ke desktop.
• Interaktivitas dan animasi – Anda dapat menggunakan fitur interaktivitas dan animasi bawaan Adobe InDesign untuk membuat berbagai status elemen desain web atau aplikasi untuk pembuatan prototipe interaksi. Kebanyakan orang menggunakan fitur ini saat membuat majalah untuk solusi penerbitan digital dan ekspor EPUB tata letak tetap, tetapi fitur ini juga cocok untuk pembuatan prototipe.
• Opsi ekspor – InDesign dapat mengekspor gambar rangka dan prototipe yang Anda buat dalam berbagai format. PDF interaktif mungkin akan menjadi format pilihan Anda di sebagian besar kasus, tetapi Anda juga dapat menggunakan fitur Publikasikan Online untuk mengonversi dokumen Anda menjadi HTML interaktif, yang dapat dilihat di browser desktop dan seluler modern. Sayangnya, Anda tidak memiliki banyak kendali atas ekspor menggunakan Publish Online, dan file yang diekspor di-host di server Adobe. Anda dapat membagikan URL prototipe ke klien Anda atau menyematkannya ke situs Anda. Untuk kontrol lebih dan ekspor langsung ke HTML5, Anda dapat menggunakan ekstensi in5 dari Ajar Productions.

Adobe InDesign memiliki banyak kelebihan untuk digunakan sebagai wireframe dan alat prototyping, tetapi juga memiliki beberapa kelemahan:

• Kurangnya template dan elemen wireframe yang telah ditentukan – Karena InDesign tidak dimaksudkan untuk menjadi alat wireframing, Anda harus membuat dan menyiapkan template dan aset objek sendiri. (Saya akan menunjukkan cara menangani langkah ini nanti di artikel.) Kabar baiknya adalah sebagian besar pekerjaan ini hanya akan dilakukan sekali, dan setelah beberapa jam bekerja, Anda akan siap untuk memulai wireframe InDesign. Juga, ada banyak aset dan kit gambar rangka yang dapat Anda unduh dari internet, jadi tidak perlu menggambar semuanya sendiri.
• Fitur interaktivitas dan animasi terbatas – Meskipun Anda dapat dengan mudah menghubungkan halaman dan menambahkan beberapa interaktivitas dan animasi, prosesnya terkadang memakan waktu lama. Beberapa alat interaksi sederhana tidak terlalu intuitif. Jika Anda belum pernah menggunakan fitur interaktivitas InDesign, Anda harus mengatasi sedikit kurva pembelajaran sebelum Anda dapat menerapkannya secara efisien.
• Dokumen InDesign tidak dapat mengekspor secara langsung sebagai file PSD berlapis – Jika Anda melakukan desain visual di Adobe Photoshop dan ingin memisahkan elemen wireframe untuk membangun desain Anda, maka Anda harus mengekspor wireframes Anda ke PDF terlebih dahulu. Kemudian Anda perlu membuka PDF di Illustrator dan mengekspornya lagi sebagai PSD berlapis. Orang yang bekerja di Mac juga dapat menggunakan skrip gratis yang ditulis oleh Rob Day untuk menyimpan file InDesign sebagai PSD berlapis.

Persiapan Wireframe yang Baik Adalah Setengah dari Pekerjaan

Mulailah dengan menyempurnakan lingkungan kerja Anda. Jika Anda belum memiliki ruang kerja tersimpan di Illustrator dan InDesign untuk pekerjaan semacam ini, buatlah. Di Illustrator, mulailah dengan ruang kerja Web yang telah ditentukan sebelumnya dan sesuaikan dengan keinginan Anda: Tutup panel yang tidak sering Anda gunakan, pastikan untuk membuka yang akan Anda gunakan, lalu atur agar sesuai dengan gaya kerja Anda.

Setelah selesai, simpan ruang kerja dengan memilih Window > Workspace > New Workspace… Lakukan hal yang sama di InDesign menggunakan ruang kerja Digital Publishing sebagai starter.

Merakit Wireframe/Mockup/Prototipe Kit

Alur kerja wireframing yang efisien menggunakan Illustrator dan InDesign mengharuskan Anda menginvestasikan waktu untuk membuat kit aset antarmuka pengguna Anda terlebih dahulu. Sejak diperkenalkannya Adobe Creative Cloud, Perpustakaan CC adalah cara terbaik untuk menyimpan semua komponen kit UI Anda.

Anda dapat membuat satu atau lebih perpustakaan untuk tujuan wireframing dan prototyping. Misalnya, Anda dapat membuat satu perpustakaan untuk wireframing situs web, yang lain untuk aplikasi iOS, yang ketiga untuk aplikasi Android, dan seterusnya.

Untuk membuat Perpustakaan Adobe CC, buka panel Perpustakaan dan pilih Buat Perpustakaan Baru dari menu hamburger di panel. Aset yang Anda masukkan ke perpustakaan dapat dibuat dan digunakan di berbagai aplikasi desktop atau seluler Adobe di semua perangkat yang Anda masuki dengan ID Adobe Anda. Itu berarti Anda dapat memulai dengan proyek di iPad atau iPhone Anda, melanjutkan di komputer desktop Anda di kantor, dan membuat perubahan menit terakhir di laptop rumah Anda dengan aset yang sama tersedia di semua perangkat.

Jika Anda bekerja sebagai bagian dari tim yang lebih besar, aset pustaka dapat dibagikan di antara anggota tim. Perpustakaan dapat berisi warna, grafik, gaya lapisan (hanya Photoshop), dan gaya paragraf dan karakter. Anda menambahkan aset di perpustakaan dengan mengklik tombol yang sesuai di bagian bawah panel Perpustakaan CC dengan elemen masing-masing dipilih. Anda juga dapat menambahkan aset grafis dengan menyeretnya langsung dari artboard Anda ke panel Libraries.

Aset di perpustakaan diatur berdasarkan kategori. Tetap berpegang pada praktik yang baik dan ganti nama setiap aset dengan nama yang bermakna. Perpustakaan dapat dicari, dan menemukan aset dengan mengetikkan awal namanya akan menghemat banyak waktu nanti, terutama bila Anda memiliki banyak item berbeda di perpustakaan Anda. Untuk mengubah nama aset, klik dua kali padanya dan ketik yang baru.

Membuat Komponen Kit Wireframe

Meskipun Adobe InDesign memiliki beberapa alat menggambar dasar yang sangat mirip dengan Illustrator, Illustrator adalah pilihan yang jauh lebih baik untuk menggambar berbagai elemen di wireframe Anda. Sebagai aturan praktis, buat semua elemen kit yang memerlukan beberapa gambar yang lebih kompleks daripada bentuk geometris dasar di Illustrator. Buat elemen sederhana yang berisi teks yang perlu Anda ubah dalam tata letak, seperti tombol sederhana, di InDesign.

Sebagai permulaan, buat daftar semua elemen yang Anda perlukan dalam gambar rangka, seperti elemen navigasi, elemen halaman termasuk gambar, bingkai video, dan kotak teks, ikon, avatar, elemen formulir, dan semua elemen antarmuka lainnya. Setelah daftar Anda selesai, Anda dapat menuju ke Illustrator dan InDesign untuk membuat elemen tersebut.

Mulailah dengan membuat dokumen baru untuk komponen wireframe atau mockup kit. Periksa kembali apakah Anda memilih Web/Devices Profile di Illustrator atau Web/Digital Publishing Intent dari kotak dialog New Document. Ini memastikan bahwa piksel digunakan sebagai unit dan mode warna diatur ke RGB.

Buat aset wireframe kit sesederhana mungkin karena mereka perlu memberikan isyarat visual yang cepat untuk apa yang mereka wakili tanpa terlalu detail. Anda harus menggunakan palet warna yang sangat terbatas, lebih disukai beberapa warna abu-abu. Tonjolkan elemen yang lebih penting secara visual dengan mewarnainya dengan nuansa yang lebih gelap atau dengan memberinya kontras yang lebih tinggi.

Untuk mockup atau prototipe dengan fidelitas yang lebih tinggi, buat kit UI dengan elemen yang lebih detail yang menggunakan palet warna masing-masing proyek. Untuk akses mudah ke palet warna, tambahkan ke pustaka CC.

Aset Adobe Illustrator di Perpustakaan CC

Aset yang Anda tambahkan ke perpustakaan dari Illustrator ditautkan secara default (sejak Adobe CC 2015). Itu berarti ketika Anda memodifikasi aset perpustakaan di Illustrator, perubahan tercermin dalam semua contoh yang digunakan. Jika Anda ingin menambahkan aset yang tidak ditautkan ke dokumen, tekan tombol option/alt sambil menyeretnya dari panel.

Saat Anda menggunakan aset Illustrator tertaut di InDesign, mereka akan memiliki ikon awan kecil di sudut kiri atas saat dokumen dilihat dalam mode Normal. Semuanya juga terdaftar di panel Tautan. Jika Anda memodifikasi aset perpustakaan di Illustrator, perubahan dalam dokumen InDesign tidak akan dilakukan secara otomatis. Ikon awan akan diganti dengan ikon tanda seru tautan yang dimodifikasi, dan Anda harus memperbarui tautan ini.

Aset InDesign yang Anda tempatkan dalam dokumen InDesign tidak ditautkan. Ini berarti Anda dapat mengedit instance secara terpisah dari aslinya, dan ketika aset asli diubah, perubahan tersebut tidak tercermin pada aset yang telah ditempatkan ke dalam tata letak.

Pertimbangkan properti tersebut saat membuat gambar rangka: Tambahkan aset ke Pustaka dari Illustrator saat Anda menganggap mereka perlu dimodifikasi dan diperbarui secara global, atau tambahkan dari InDesign saat Anda tahu Anda ingin memodifikasinya satu per satu. Perhatikan bahwa Anda juga dapat membuat grafik di Illustrator, menyalin/menempelkannya ke InDesign, lalu memodifikasi jika diperlukan sebelum menambahkannya ke perpustakaan sebagai aset InDesign.

Jika Anda lupa aset grafis mana yang dibuat oleh aplikasi mana, lihat sisi kanan setiap item di panel Library saat menggunakan Show Items as list.

Fleksibilitas Adobe InDesign dengan Konten dan Salin

Untuk memastikan bahwa Anda dapat dengan mudah mengubah salinan dan tipografi di gambar rangka Anda, buat wadah teks di InDesign. InDesign memiliki fitur bagus untuk mengisi kotak teks dengan teks placeholder. Saat Anda menggambar kotak teks, klik kanan padanya dan pilih Fill With Placeholder Text .

Tambahkan kotak teks ke perpustakaan Adobe seperti elemen grafis lainnya dengan menyeretnya. Saat Anda menggunakan aset teks tersebut nanti sebagai bagian dari tata letak gambar rangka, Anda dapat memodifikasi kotak teks serta kontennya di gambar rangka.

Pertimbangkan juga untuk membuat elemen UI tombol di InDesign. Untuk membuat tombol, buat bingkai teks, ketik teks, lalu gunakan Object > Text Frame Options untuk menentukan spasi Inset. Sesuaikan pembenaran vertikal teks di dalam kotak dengan memilih opsi yang diinginkan dari menu tarik-turun Align.

Beralih ke tab Ukuran Otomatis dan pilih ukuran otomatis yang sesuai (yang mungkin hanya Lebar) dan titik referensi yang sesuai. Jika Anda tidak ingin InDesign memecah teks Anda menjadi lebih dari satu baris, centang opsi No Line Breaks.

Gunakan Sumber Daya yang Ada

Ada banyak kit UI wireframing dan prototyping Adobe Illustrator yang tersedia di internet yang dapat Anda beli atau bahkan unduh secara gratis jika Anda menginginkan solusi yang sudah jadi. Mungkin Anda sudah memiliki elemen yang bisa Anda gali dari proyek Anda yang sudah selesai. Buka dokumen tersebut, sesuaikan elemen yang dibuat sebelumnya seperlunya, dan masukkan ke pustaka masing-masing.

Jika Anda mendesain untuk platform tertentu—misalnya, aplikasi iOS atau Android—pastikan Anda membaca dengan cermat panduan antarmuka manusianya dan menggunakan aset yang sesuai. Mungkin nyaman untuk memiliki elemen UI yang khusus untuk berbagai platform dalam kit Anda.

Jangan terlalu fokus untuk mencoba memperhitungkan setiap aset atau status di masa mendatang di perpustakaan Anda sebelum Anda memulai dengan proses wireframing yang sebenarnya. Anda dapat menambahkan aset ke perpustakaan Anda nanti dan membangunnya saat Anda menggunakannya.

Membuat Template Wireframe InDesign

Ada satu lagi langkah persiapan penting yang tersisa: Buat template InDesign yang akan Anda gunakan untuk membuat gambar rangka. Mulailah dengan membuat dokumen baru dengan maksud Web atau Digital Publishing dan tentukan ukuran halaman yang sesuai untuk layar yang Anda rancang.

Karena disarankan agar Anda menggunakan semacam kisi untuk meletakkan elemen rangka gambar Anda, atur margin dan buat kisi kolom dengan mengatur jumlah kolom dan ruang talang yang diinginkan. Anda dapat mengubah pengaturan tersebut nanti dari Layout > Margins and Columns dengan masing-masing halaman master (atau halaman) dipilih di panel Halaman.

Jika Anda memerlukan panduan horizontal dan panduan vertikal pelengkap, buat secara manual atau buat kisi tambahan dengan menggunakan Layout > Create Guides. Saat membuat kisi, akan sangat membantu jika menggunakan salah satu alat kalkulator kisi online seperti Gridulator.

Anda juga dapat membuat template tambahan untuk tujuan presentasi dengan maket perangkat sebagai bingkai untuk gambar rangka Anda. Karena satu dokumen InDesign dapat ditautkan ke dokumen lain, Anda dapat membuat gambar rangka dalam satu dokumen InDesign dan kemudian menempatkannya ke dokumen lain untuk presentasi.

Meskipun mungkin tampak rumit pada awalnya, ini sebenarnya adalah alur kerja yang sangat sederhana dan efektif. Menyimpan gambar rangka yang sebenarnya dalam dokumen terpisah memudahkan untuk melanjutkan pembangunan dari gambar rangka yang disetujui ke desain visual yang dipoles.

Juga mudah untuk membuat template siap presentasi untuk menempatkan gambar rangka, menambahkan label dan komentar, dan dapat menunjukkan solusi terbaik Anda kepada klien. Saat Anda membuat modifikasi pada file wireframe, cukup perbarui seperti tautan lain di dokumen presentasi dan ta-daaa! Semua perubahan juga ada di presentasi Anda.

Di panel Lapisan, Anda dapat menyiapkan lapisan terpisah untuk berbagai jenis konten: elemen antarmuka pengguna, fitur interaktif, gerakan, label, dan catatan. Jika Anda membutuhkan lebih banyak lapisan untuk proyek tertentu, Anda dapat dengan mudah menambahkannya kapan saja selama proses wireframing.

Setelah selesai membuat, simpan template Anda sebagai file template InDesign.indt. Setelah semua template yang Anda butuhkan disimpan, Anda akhirnya siap untuk memulai wireframing secara efisien.

Membangun Wireframe

Hal pertama yang pertama—mulai dengan halaman master. Seret semua elemen global yang akan sama di semua layar proyek Anda dari perpustakaan. Jika Anda mendesain situs web, ini biasanya header dengan logo, navigasi, dan footer. Karena Anda dapat membuat lebih dari satu halaman master dan mereka dapat saling mewarisi, Anda dapat memanfaatkan halaman master bersarang.

Misalnya, bergantung pada proyeknya, Anda dapat membuat halaman master untuk satu elemen UI, seperti modal atau popup dialog, lalu membuat master baru berdasarkan master pertama, hanya mengubah elemen yang perlu berbeda.

Anda tidak dapat memilih, mengubah, atau menghapus elemen master pada halaman dokumen biasa kecuali Anda mengkliknya sambil menahan Command/Control + Shift untuk mengganti master. Setelah elemen Anda ditimpa, Anda dapat mengubah salah satu parameternya atau menghapusnya sepenuhnya dari tata letak.

Ingatlah bahwa meskipun Anda mengganti elemen, parameter yang belum Anda ubah akan tetap diwarisi dari master. Misalnya, jika Anda mengganti elemen dengan mengubah warnanya, ukurannya tidak akan berubah karena masih terhubung ke master. Selanjutnya, jika Anda mengubahnya di halaman master, itu juga akan dimodifikasi pada elemen yang sebelumnya Anda timpa.

Saat memasukkan halaman tambahan ke dalam dokumen wireframing Anda, ingatlah untuk mendasarkannya pada masternya masing-masing. Jika Anda perlu mengubah master untuk halaman yang sudah ada di tata letak, pilih di panel Halaman, klik kanan, dan pilih Terapkan Master ke Halaman. Gunakan aset perpustakaan dan atur menggunakan Smart Guides dan opsi Align untuk membuat layout wireframe UI akhir.

Jika Anda membuat desain untuk lebih dari satu ukuran layar, buat tata letak alternatif dari Layouts > Create Alternate Layout atau panel Pages. Anda dapat menggunakan aturan tata letak cair saat membuat tata letak alternatif untuk secara otomatis mengadopsi elemen halaman dari satu ukuran dan orientasi ke yang lain, atau Anda dapat mengontrolnya secara manual. Untuk menerapkan dan menguji Aturan Tata Letak Cair, gunakan alat Halaman atau buka panel Jendela > Interaktif > Tata Letak Cair.

Menambahkan Interaktivitas

Adobe InDesign memiliki banyak fitur interaktivitas yang dapat Anda manfaatkan saat membuat gambar rangka atau prototipe. Fitur mana yang akan Anda sertakan akan bergantung pada format akhir yang Anda perlukan untuk gambar rangka, prototipe, atau presentasi Anda.

Jika Anda mengekspor sebagai PDF, interaktivitas akan terbatas, tetapi Anda setidaknya dapat membuat tautan antar layar berfungsi menggunakan panel hyperlink untuk membuatnya. Pilih elemen yang ingin Anda jadikan tautan dan klik ikon Hyperlink Baru. Dari menu tarik-turun Tautan Ke, pilih Halaman dan masukkan nomor halaman yang diinginkan. Ulangi tindakan itu pada semua item yang ingin Anda perlakukan sebagai tautan antar layar.

Anda juga dapat menambahkan hyperlink ke objek yang berada di halaman master, yang dapat menjadi penghemat waktu nyata. Buat tautan di halaman master sekali dan tautan itu akan berfungsi di semua layar dokumen Anda.

Anda dapat membuat tombol dari grafik, teks, gambar, atau grup elemen apa pun. Untuk membuat tombol dari objek yang dipilih, gunakan panel Window > Interactive > Buttons and Forms dan klik ikon Convert to Button.

Tombol dapat memiliki status berbeda yang dibuat untuk tampilan normal, rollover, dan klik. Untuk menambahkan status rollover atau klik ke tombol, klik tombol tersebut di panel Buttons dan edit tampilan tombol untuk setiap status. Untuk menambahkan tindakan ke tombol, klik tanda plus dan pilih dari daftar. Perhatikan bahwa tindakan di bawah SWF/EPUB tidak akan berfungsi dalam PDF interaktif.

Untuk membuat elemen popup, pilih Show/Hide Buttons and Forms. Untuk menyembunyikan tombol hingga dipicu, centang opsi Tersembunyi Hingga Dipicu. Anda dapat menyertakan objek multi-status dalam PDF interaktif, tetapi hanya jika Anda mengekspornya sebagai SWF terlebih dahulu, lalu menempatkannya kembali ke tata letak InDesign untuk ekspor PDF. Alur kerja ini membosankan dan PDF tidak dapat dilihat dengan benar di semua pembaca PDF, jadi cobalah untuk menghindari melakukan ini kecuali benar-benar diperlukan.

Jika Anda ingin mengonversi dokumen Anda menjadi prototipe HTML menggunakan fitur InDesign CC 2015 Publish Online, Anda dapat menggunakan lebih banyak opsi interaktif seperti animasi, objek multi-status, dan beberapa tindakan tombol, termasuk semua yang ditujukan untuk ekspor SWF/EPUB.

Anda dapat menambahkan animasi sederhana menggunakan panel Animation dan memilih salah satu preset bawaan dari menu drop-down dan mengatur propertinya. Satu objek hanya dapat memiliki satu animasi yang diterapkan, tetapi jika Anda perlu menambahkan lebih banyak lagi, kelompokkan objek Anda dengan kotak kosong dan gunakan animasi baru pada objek yang baru dibuat itu.

Untuk elemen UI yang memerlukan tampilan status berbeda, buat objek multi-status. Buat objek terpisah untuk setiap status. Objek dapat berupa elemen tunggal (gambar, kotak teks, grafik) atau sekelompok elemen yang berbeda. Buka panel Window > Interactive > Object States, pilih semua objek yang Anda buat untuk objek multi-state, dan klik tombol New di bagian bawah panel.

Setelah objek multi-status dibuat, Anda harus membuat tombol untuk berpindah dari satu status objek ke status objek lainnya. Tindakan Go To Next State atau Go To Previous State mengungkapkan status objek tertentu dengan tindakan Go To State.

Jika Anda ingin memiliki bingkai yang dapat digulir di wireframe/prototipe Anda, cara termudah untuk membuatnya adalah dengan menggunakan ekstensi Universal Scrolling Frames dari Ajar Productions. Setelah Anda mengunduh dan menginstal ekstensi, Anda dapat menggunakannya sebagai panel InDesign. Untuk bingkai yang dapat digulir, Anda harus membuat konten serta satu bingkai untuk wadah.

Konten yang dapat digulir dapat berupa bingkai teks, gambar, atau beberapa elemen yang dikelompokkan bersama. Setelah Anda selesai membuat kotak konten dan wadah, pilih konten dan Edit > Potong. Kemudian pilih wadah dan tempel konten di dalamnya dengan menggunakan Edit > Tempel Ke. Pilih wadah dan menggunakan Universal Scrolling Frames, sesuaikan arah gulir yang diinginkan.

Dengan menggabungkan tombol, objek multi-status, animasi, dan bingkai yang dapat digulir, Anda dapat mencapai pengalaman interaktif yang kaya. Untuk menguji interaktivitas di InDesign, gunakan panel Pratinjau Interaktivitas EPUB. Anda dapat melihat pratinjau satu halaman atau seluruh dokumen. Perbesar panel pratinjau sesuai kebutuhan.

Jika Anda belum pernah menggunakan fitur interaktif Adobe InDesign, bersiaplah karena, pada awalnya, ada sedikit kurva pembelajaran. Tetapi dengan sedikit latihan dan beberapa percobaan dan kesalahan, Anda akan dengan cepat menguasainya.

Mengekspor Dokumen Selesai

Ketika Anda selesai membuat gambar rangka dan file presentasi, yang tersisa hanyalah menunjukkan ide-ide hebat Anda kepada klien dengan cara terbaik. Untuk tujuan itu, Anda harus mengekspor gambar rangka dalam format yang dapat dipratinjau oleh klien Anda. Meskipun file InDesign dapat diekspor dalam berbagai format, Anda mungkin akan menggunakan PDF Interaktif atau fitur Publikasikan Online jika menguji prototipe fidelitas rendah atau tinggi fungsional. Untuk menyimpan sebagai PDF interaktif, pilih Adobe PDF (Interactive) dari menu drop-down Format di kotak dialog Ekspor dan sesuaikan properti sesuai kebutuhan. Jangan lupa untuk mencentang Formulir dan Media jika ada elemen interaktif yang ingin Anda sertakan. Klien dapat melihat gambar rangka PDF di Adobe Reader gratis dan menulis semua komentar mereka dalam file yang sama.

Anda juga dapat menggunakan dokumen PDF yang diekspor dari InDesign untuk membuat prototipe InVision (atau alat lain yang mendukung PDF). Jika alat prototyping standar Anda, mungkin Marvel, tidak dapat mengimpor PDF, ekspor halaman wireframe InDesign Anda sebagai gambar JPEG atau PNG.

Untuk mengekspor prototipe HTML interaktif yang dapat dilihat di browser modern pada perangkat yang berbeda, buka File > Publikasikan Online, atau klik tombol Publikasikan Online dari Bilah Aplikasi. Setelah dokumen disiapkan untuk publikasi online dan diunggah, Anda dapat menyalin URL dokumen untuk dibagikan dengan pemangku kepentingan dan memulai proses peninjauan. Anda juga dapat menyematkan prototipe yang dipublikasikan di situs Anda.

Kelemahan dari fitur Publish Online adalah tidak memiliki kontrol tambahan atas ekspor, dan file selalu disimpan di server Adobe. Selain itu, ini masih merupakan fitur pratinjau dan Anda tidak dapat memastikan ke arah mana Adobe akan mengembangkannya, atau bahkan jika itu akan dihentikan.

Setelah wireframe/prototipe Anda diekspor, saatnya untuk memulai proses pengujian, peninjauan, dan iterasi.