Media Pengembangan Web & App | by APPKEY

DesainDesign UIMau Mendesain UI/UX Tanpa Ngoding? Yuk Pakai “Axure”!

Mau Mendesain UI/UX Tanpa Ngoding? Yuk Pakai “Axure”!

-

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

design-ui

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.

Artikel Terkait  4 Cara Membuat Visibilitas Status dalam User Interface untuk Aplikasi

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!

Artikel Terkait  Library JavaScript UI Terbaik yang Harus Anda Coba

Fitur-Fitur Axure Terlengkap untuk Desainer

mockflow-ui

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.

Artikel Terkait  Cara Bikin Design Web Keren Meski Kamu Seorang Newbie

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

ui-ux

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.

Artikel Terkait  10 Web Perusahaan Dengan Desain Modern dan Terbaik

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!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Pengertian Internet & Dampak Positif dan Negatif Internet

Internet mungkin bukan sesuatu yang asing lagi, sebab semua kalangan pasti tahu apa itu internet. Hanya saja jika ditanya...

10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Domain Google? Apa Bedanya Dengan Domain Biasa?

Saat memutuskan untuk membuat website menjadi salah satu bentuk media digital marketing Anda dalam bersaing di zaman digital ini,...

7 Aplikasi Membuat Aplikasi Android Secara Offline

Aplikasi membuat aplikasi android saat ini banyak dicari penekun IT untuk membuat aplikasi Android secara offline tanpa harus menggunakan...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya