Axure adalah : Software untuk Mendesain UI/UX tanpa Ngoding

Last Updated on February 26, 2022 by

Anda ingin membuat desain UI/UX tetapi tidak begitu jago ngoding? Kabar gembira, Anda bisa memakai software Axure!

Desain prototipe UI/UX merupakan salah satu elemen penting dari sebuah software. Prototype dapat menjadi gambaran awal yang mendekati tampilan software sebelum project selesai dikerjakan oleh programmer. Dengan adanya prototype, klien bisa mendapatkan gambaran seperti apa hasil jadi dari project aplikasi atau website yang ia inginkan.

Banyak orang mengira bahwa membuat prototype adalah hal yang sulit. Dulu, tugas membuat prototype mungkin memang memerlukan skill coding. Akan tetapi dengan software Axure RP 9, Anda bisa mendesain semudah drag and drop icon saja!

Ingin tahu lebih banyak seputar Axure? Yuk langsung saja kita simak artikel berikut ini. Selamat membaca!

Inilah Axure RP, Software Desain Tanpa Ngoding Terbaik

Axure RP atau Axure adalah solusi terbaik untuk Anda sang desainer UI/UX pemula yang ingin bekerja secara cepat, praktis, dan tanpa ngoding. Axure adalah software pembuat dan editing prototype software interaktif termudah sebab bisa dijalankan dengan drag and drop saja.

Pun Axure adalah software yang banyak digunakan oleh desainer UI/UX di kalangan industri kreatif. Ini dikarenakan Axure bisa digunakan untuk membuat aneka mockup, flow diagrams, dokumentasi web dan app, serta wireframe interaktif untuk keperluan uji testing software sekaligus memperoleh feedback user.

Kecanggihan lainnya yang menjadikan Axure favorit di kalangan desainer adalah kemampuan untuk menambahkan fitur berdaya guna di dalam desan. Alhasil, Anda bisa membuat aneka tombol atau menu slide di dalam desain Axure dan sungguh-sungguh dapat menjalankannya seolah-olah sedang menggunakan aplikasi sungguhan. Canggih!

Axure adalah aplikasi yang bisa Anda jalankan pada PC berbasis Windows ataupun Mac, sementara hasilnya dapat di-export menjadi file HTML untuk dijalankan pada browser. Akan tetapi, Axure mempunyai spesifikasi yang berbeda-beda untuk PC Windows dan Mac.

Untuk Anda yang menjalankan Axure di Windows, spesifikasinya adalah:

• Kapasitas minimal RAM 2 GB, namun disarankan dengan kapasitas 4 GB.
• Berbasis Windows XP, 7, 8 atau 10.
• Punya disk space 5 GB.
• Ada Microsoft Office Word 2000 (minimal) untuk dokumentasi produksi prototype.
• Punya 1 GHz processor.
• Dilengkapi browser Chrome, IE/Edge atau Firefox untuk menguji file HTML desain.

Bagaimana dengan Mac? Untuk Mac, spesifikasi yang dibutuhkan adalah:

• Minimal RAM yang dibutuhkan adalah 2 GB, namun disarankan untuk menggunakan yang 4 GB.
• 5 GB disk space free.
• Dilengkapi browser Chrome, Firefox atau Safari untuk uji coba HTML.
• Basis Mac OS X 10.7+
• Processor Mac 64-bit Intel
• Microsoft office word 2004 untuk dokumentasi produksi prototype di Word.

Axure juga dapat digunakan untuk kerja kolaboratif dan terhubung ke aneka layanan lainnya di luar Axure, seperti Microsoft Team dan Slack. Anda pun tidak perlu cemas dengan keamanan data atau pencurian desain ketika dikirim ke klien, sebab Axure bisa memproteksi hasil desain Anda dengan password khusus.

Saat ini, Axure tersedia versi Axure RP 9 sebagai versi terbaru yang bisa digunakan pada gadget mana saja. Untuk mendapatkan Axure, Anda bisa langsung mendownloadnya di website resmi mereka: www.axure.com.

Apakah Axure berbayar? Ada 3 jenis software Axure yakni Pro, Team dan Enterprise. Axure Pro tersedia gratis untuk para siswa dan guru desain. Bahkan terdapat pula harga diskon khusus untuk institusi pendidikan yang ingin memakai Axure. Sedangkan kedua versi lainnya berbayar sebab ditujukan untuk kegunaan desain komersil oleh desainer UI/UX. Benar-benar software yang unik!

Axure adalah aplikasi yang sangat fleksibel. Dikembangkan oleh Axure Software Solutions, tujuan dari kehadiran Axure adalah memudahkan orang-orang yang tidak bisa coding (non-coders) dalam mendesain prototype interaktif. Untuk itu, Axure menyediakan aneka fitur canggih di dalamnya. Penasaran apa saja? Yuk lanjutkan membaca ke bagian selanjutnya!

Fitur-Fitur Axure Terlengkap untuk Desainer

Anda telah mengenal bahwa Axure adalah software desain terbaik untuk membuat aneka prototype interaktif semudah drag and drop. User atau klien yang mencoba prototype Anda akan sungguh-sungguh bisa mengklik tombol dalam desain untuk mendapatkan tampilan pergantian layar, menyembunyikan atau menampilkan icon dan screen, serta lain sebagainya.

Semua kecanggihan desain dalam Axure tentunya tidak akan terwujud tanpa fitur-fiturnya yang canggih. Lalu apa saja fitur-fitur tersebut?

Yuk dicatat! Fitur-fitur dan menu pada Axure adalah:

Canvas

Menu pertama pada Axure adalah canvas. Canvas terletak di tengah layar dan menjadi tempat Anda untuk mengedit widget pada Axure. Semua operasi desain berlangsung di sini. Anda juga bisa menarik penggaris (ruler) di Canvas untuk merapikan posisi widget.

Main Menu & Main Toolbar

Inilah pusat navigasi pada Axure. Di sini, Anda bisa menjalankan aneka operasi dasar editing seperti open file, editing, zoom atau mengatur view, dan publish desain.

Widget

Menu andalan pada Axure adalah widget! Axure mempunyai banyak sekali jenis widget yang menjadi elemen utama dalam membentuk desain prototype Anda. Tidak perlu repot menyusun aneka bentuk dari awal, cukup pilih widget yang diinginkan kemudian drag and drop saja ke canvas.

Jenis-jenis widget beserta kegunaannya pada Axure adalah:

• Heading 1 dan 2: untuk menambah judul/tulisan.
• Image: menambah gambar.
• Button shape: menambah bentuk tombol.
• Label: menambah tulisan.
• Rectangle: menambah bentuk persegi dan persegi panjang.
• Pages: mengatur halaman (menambah, menghapus, mengatur, dan lain-lain).
• Horizontal dan vertical line: menambahkan garis horizontal dan vertical.
• Text field dan text area: menambahkan field untuk tulisan 1 baris (field) dan lebih (area).
• Paragraph: menambah tulisan paragraf.
• Repeater: menambahkan repeater untuk mengulang item yang berbeda-beda.
• Placeholder: menambah kotak untuk wireframe.
• Droplist: menambah menu list.
• Checkbox dan listbox: memunculkan kotak untuk memilih opsi binary lebih dari 1 (check) dan memilih opsi 1 saja (list).
• Hotspot: menambah widget untuk menambah link.
• Inline frame: menambah file eksternal (HTML, map, video, dan lainnya).
• Table: menambah tabel.
• Dynamic panel: menambah dynamic panel berisi state / layer.
• Tree: untuk memunculkan widget atau halaman lain dari widget yang diklik sebelumnya dalam project.
• HTML dan radio button: menambahkan tombol yang tidak bisa dikustomisasi (HTML) dan memunculkan kotak untuk memilih 1 opsi jawaban (radio).

Widget Interactions & Notes

Fitur ini digunakan untuk menambahkan interaksi, notes dan nama pada sebuah widget dalam Axure. Sehingga, setiap widget dapat bekerja sebagaimana yang diinginkan.

Widget Manager

Digunakan untuk mengatur dynamic panel. Pengaturan yang dimaksud seperti mengganti nama, mengatur setting lanjutan, menambahkan dan menghapus state atau panel.

Masters

Masters adalah kumpulan dari widget dalam sebuah file. Di sini, Anda bisa menggunakan widget-widget tersebut berulang-ulang. Fitur ini pun dapat digunakan untuk menambah, mengatur, mengganti dan menghapus kumpulan widget desain.

Widget Properties & Styles

Terakhir adalah widget properties and style. Menu ini digunakan untuk menambahkan bentuk pada widget, mengedit ukuran, menambah dan mengedit tulisan pada widget, hingga menambahkan interaksi dan animasi.

Tutorial Elastic Simple Slider Web dengan Axure

Salah satu contoh prototype sederhana pada website yang bisa dibuat dengan Axure adalah elastic simple slide website. Elastic slider adalah tampilan header pada web yang bisa diganti oleh user dengan mengklik tombol. Semisal Anda memajang 3 header produk di web. Nantinya, user bisa melihat masing-masing produk ketika mengklik tombol di bawah gambar.

Cara mendesain elastic simple slide web dengan Axure adalah:

1. Buka Axure > Anda akan tiba di canvas
2. Di sebelah kiri layar, pilih widget ‘rectangle’ untuk mulai membuat background.
3. Drag and drop widget ke canvas > atur ukuran widget pada box “widget property and size” di sebelah kanan layar jika ingin.
4. Klik widget ‘header’ untuk menambahkan teks pada background > ketik teks yang ingin dimasukkan, seperti “Selamat Datang”. Anda juga bisa mengganti ukuran dan warna teks sesuka hati. Sampai di sini, Anda sudah mempunyai halaman home.
5. Setelah background dan teks diposisikan dengan benar sesuai keinginan, klik kanan pada layar > klik convert to dynamic panel > box dynamic panel > berikan nama baru pada kolom “insert name” semisal “slider web teks”.
6. Klik 2 kali pada dynamic panel (widget background dan header) yang baru dibuat > box dynamic panel state manager > klik icon “+” hijau untuk menambahkan 3 state baru. Sekarang Anda mempunyai 3 state atau layer editing.
7. Lihat pojok kanan bawah pada bagian widget manager > silahkan edit teks heading di masing-masing state: klik state 1 > tampilan header dan background kosong > edit teks sesuai keinginan, semisal “Tutorial Memakai Axure” > sesuaikan posisi, ukuran dan warna teks sesuai keinginan > save.
8. Ulangi tahap yang sama untuk state 2 dan 3. Anda bisa meng-input teks yang berbeda di state 2 dan 3. Jadinya, setiap layer state akan mempunyai tampilan teks yang berbeda-beda.
9. Lanjutkan dengan membuat 3 icon slide baru (menyesuaikan dengan jumlah state). Caranya, kembali ke home > drag and drop rectangle widget ke canvas > sesuaikan ukuran dan posisi widget. Anda bisa membuat icon widget pipih dan ramping selayaknya slider dan meletakkannya di bagian bawah tulisan home.
10. Select semua box slider > klik kanan pada kanvas > pilih ‘interaction styles’. Fitur ini akan memastikan ketiga slider mempunyai kegunaan atau fungsi ketika diklik.
11. Anda akan menemui sebuah box ‘interaction styles’ dengan banyak opsi editing lebih lanjut seperti fill color, shades, lines, shadows, hingga input text dan kustomisasi teks. Silahkan edit sesuai keinginan. Jika sudah selesai, klik ‘ok’.
12. Klik kembali ketiga box slider > klik kanan > klik selection group > input nama pada group, semisal “slider controller”.
13. Klik salah satu widget slide controller, kemudian cari panel interaction yang berada di pojok kanan atas > klik box “shape name”.
14. Beri nama untuk widget ‘slide controller’ yang dipilih. Ulangi tahap tersebut hingga ketiga shape widget slide controller mempunyai nama tersendiri. Pemberian nama ini penting untuk memudahkan kita mengenali slide mana yang bertugas untuk apa. Contoh pemberian nama: “nav1”, “nav2”, dan “nav3”.
15. Select widget “nav1”. Pada bagian pojok kanan atas, klik menu ‘OnClick’ > pilih menu ‘set panel state’ > beri tanda checklist pada ‘set SLIDER_TEXT state to State 1’.
16. Di bawahnya pada menu ‘animate in’, silahkan pilih jenis animasi yang ingin diberikan pada widget. Animate in adalah opsi animasi yang akan muncul saat widget masuk ke halaman. Selain itu ada pula menu ‘animate out’ yang akan menjadi animasi saat widget keluar dari halaman. Semisal, pada animate in Anda pilih ‘slide left’, sedangkan pada animate out Anda memilih ‘fade’.
17. Kembali ke bagian kiri box OnClick > klik set selected/checked > beri checklist pada box “nav1 shape” > klik ok.
18. Ulangi langkah-langkah tersebut untuk “nav2” dan “nav3”.
19. Sekarang Anda bisa mencoba prototipe yang baru dibuat di browser dengan mengekspornya terlebih dahulu menjadi file HTML. Kalau Anda mengklik tombol “nav1”, maka tulisan pertama “Tutorial Memakai Axure” akan muncul. Begitu juga ketika Anda mengklik tombol “nav2”, maka tulisan kedua akan muncul. Selesai! Anda sudah bisa membuat prototype simple slider web.

Demikianlah pembahasan artikel edisi kali ini tentang Axure RP 9 dan cara menggunakannya. Semoga artikel edisi kali ini mampu menambah wawasan Anda seputar mendesain dengan Axure RP 9, ya! Terima kasih sudah membaca artikel edisi kali ini sampai di sini. Jangan lupa temukan lebih banyak artikel menarik lainnya seputar dunia IT hanya dari Appkey.id. Sampai jumpa lagi!