Memulai Wireframing menggunakan Balsamiq

Wireframing idealnya dapat didefinisikan sebagai aktivitas untuk memvisualisasikan tata letak layar. Ada banyak alat wireframing yang ada di pasaran saat ini, tetapi yang paling mudah dan paling banyak digunakan adalah Balsamiq – topik kita hari ini. Tapi, sebelum itu, mari kita pahami dulu kenapa kita perlu wireframe?
Ketika berbicara tentang pengembangan perangkat lunak, sangat penting untuk mengetahui bagaimana produk akhir akan terlihat, bahkan sebelum pengembangan dimulai. Visualisasi awal produk ini berfungsi sebagai pedoman bagi semua pemangku kepentingan plus membantu menghindari ambiguitas yang mungkin muncul di masa depan.
Di masa lalu, paragraf teks digunakan untuk memperoleh persyaratan perangkat lunak.

Namun, potongan teks ini tidak cukup untuk membuat visualisasi berjalan – karena setiap orang yang membaca persyaratan akan memvisualisasikannya dengan cara tertentu yang mungkin berbeda dari yang lain. Ambiguitas ini menyebabkan banyak campur aduk dan menghasilkan waktu, uang, dan usaha yang terbuang percuma. Untuk membantu penyebabnya, wireframing datang ke dalam gambar. Karena kemudahan yang dibawanya ke proses pengembangan secara keseluruhan.

Dalam artikel ini, kami akan membantu Anda memahami pertanyaan seperti:

• • Apa itu Balsamiq?

• • Bagaimana cara memulainya?

• Bagaimana cara mengekspor gambar rangka / mockup akhir?

Apa itu Balsamiq?

Wireframing, pada dasarnya, dapat dilakukan di atas serbet menggunakan pena. Pada akhirnya, itu hanya sketsa. Namun, ketika harus berkolaborasi dan membagikannya dengan para profesional, lebih baik beralih ke salah satu dari banyak alat yang ada di pasar saat ini. Salah satu alat tersebut adalah Balsamiq – mudah digunakan dan menyediakan banyak fitur untuk membangun gambar rangka yang berguna.
Balsamiq adalah alat yang sangat baik dan memenuhi semua persyaratan wireframing dan kolaborasi. Ini memiliki serangkaian fitur unik yang memungkinkan Anda melakukan wireframing cepat, mendapatkan umpan balik waktu nyata, menggabungkan umpan balik tersebut, dan meningkatkan gambar rangka. Ini pada akhirnya membuat seluruh tim selaras dengan fungsionalitas aplikasi terkait tata letak.
Dengan Balsamiq, berkolaborasi dengan anggota tim yang berlokasi jauh juga sangat mudah karena dapat mengekspor gambar rangka dalam format PNG atau PDF yang memungkinkan fleksibilitas saat berbagi gambar rangka.
10 Alat Wireframing Paling Efektif

Memulai dengan Balsamiq

Balsamiq tersedia untuk Windows dan Mac OS dan dapat diunduh secara online . Setelah Anda mengunduh alat dan membukanya, Anda akan melihat layar seperti:

Seperti yang ditunjukkan pada tangkapan layar di atas, antarmuka pengguna untuk Balsamiq dibagi menjadi empat bagian berikut.

• • navigator

• • Perpustakaan UI

• • Inspektur

• Ruang/Area wireframe

Bagian yang disorot dengan warna merah adalah untuk beralih antara inspektur bagian dan informasi proyek. Fitur-fiturnya sudah termasuk dalam library UI, mari kita simak secara mendalam.

Perpustakaan UI

Pustaka UI dikategorikan berdasarkan elemen layar yang berbeda.
Mari kita berkenalan dengan berbagai kategori elemen layar yang tersedia di Balsamiq.

• • Semua Mengklik ini akan menampilkan semua elemen UI yang ditawarkan Balsamiq. Menggulir secara horizontal akan memungkinkan Anda untuk melihat atau menggunakannya.

• • Aset Bagian ini mencakup hal-hal yang dapat Anda unggah dan nanti untuk digunakan dalam gambar rangka Anda.

• • Besar Ini mencakup elemen layar yang cukup besar seperti placeholder, jendela browser, iPhone, dan iPad.

• • Tombol Bagian ini mencakup semua kontrol tombol yang Anda perlukan dalam gambar rangka, seperti – tombol tindakan, kotak centang, dll.

• • Umum Bagian ini terdiri dari bentuk yang digunakan untuk menunjukkan interaksi yang paling umum.

• • Wadah Ini mencakup opsi seperti Window, FieldSet, Browser, dll. Seperti namanya, itu termasuk Window, FieldSet, Browser, dll.

• • Formulir Kategori ini berisi semua kontrol yang terkait dengan formulir, seperti elemen input, tombol radio, tombol kirim, dan semacamnya.

• • Ikon Ini berisi kumpulan ikon yang dapat Anda gunakan untuk menunjukkan operasi tertentu. Misalnya, ikon floppy alih-alih tombol simpan, dll. Balsamiq menawarkan banyak koleksi ikon gratis yang dapat digunakan untuk berbagai tindakan.

• • iOS Ini berisi kontrol UI khusus untuk iOS.

• • Tata Letak Tata letak sangat penting ketika Anda perlu merepresentasikan halaman/fitur dasar. Kategori ini mencakup sebagian besar tata letak seperti tab Vertikal / Horizontal, akordeon, dll.

• • Markup - Ini digunakan untuk menambahkan komentar pada kontrol tertentu di wireframe. Ini juga berisi info yang digunakan untuk menunjukkan konektivitas di banyak skenario.

• • Media Semua kontrol UI terkait media tersedia di bagian ini yang membantu menampilkan gambar/video/suara di wireframe.

• • Simbol Ini adalah kumpulan komponen yang dapat digunakan kembali yang dapat mengurangi waktu untuk membuat komponen umum.

• Teks Seperti namanya, ini berisi semua kontrol UI yang terkait dengan teks. Fitur seperti blok teks, kotak kombo, bilah tautan, dll., Tersedia di bawah kategori ini.

Pengetahuan tentang komponen ini ditambah dengan fakta bahwa Balsamiq memungkinkan Anda untuk dengan mudah menarik dan melepas komponen akan membantu Anda membuat gambar rangka pilihan Anda dengan cepat, dan efektif.
Manakah dari Alat Manajemen Produk Ini yang Sudah Anda Gunakan?

Sekarang, misalkan untuk situs web Anda, Anda telah membuat kerangka gambar dari empat halaman ini – Beranda, Produk dan Layanan, Hubungi kami, dan Tentang kami. Sekarang, kita perlu melakukan tugas penting lain yang akan membuat gambar rangka kita terlihat sedikit lebih seperti situs web yang lengkap dan kurang seperti sketsa. Untuk itu, kita perlu menautkan halaman kita, karena mereka idealnya ditautkan di situs web. Menautkan juga membantu Anda bolak-balik di antara gambar rangka dengan mudah.

Menghubungkan Halaman

Langkah ini akan membantu gambar rangka Anda muncul secara berurutan – seperti di situs web mana pun. Untuk mencapai navigasi ini, klik bilah tautan di sudut kanan atas .
Pertama, mari kita mulai dengan menghubungkan Beranda ke halaman Produk dan Layanan:

• • Pergi ke Beranda

• Klik pada bilah tautan di sudut kanan atas

Lihat panel properti

Bagian yang disorot hijau menunjukkan berbagai gambar rangka yang telah Anda buat sampai sekarang. Mari kita mulai dengan menautkan halaman Beranda. Klik pada drop down untuk melihat daftar mockup yang tersedia. Ini akan menampilkan daftar seperti di bawah ini:

Dari daftar turun bawah yang ditampilkan, pilih Produk dan Layanan untuk membuat tautan dari Beranda ke Produk dan Layanan. Demikian pula, ulangi prosedur yang sama untuk halaman lainnya.
Seni Pengambilan Keputusan: Untuk Manajer, Pemimpin & Orang Produk

Mengekspor Wireframe

Gambar rangka yang baru saja Anda buat tidak ada gunanya jika Anda tidak dapat menyajikannya kepada klien/pengguna akhir Anda dalam format yang lebih umum, seperti PDF atau PNG. Untuk tujuan ini, Balsamiq memungkinkan Anda mengekspor maket dengan mudah dalam salah satu format ini.
Dalam contoh ini, kami mengekspor mockup kami dalam format PDF. Untuk ini, klik menu Proyek, lalu klik Ekspor ke PDF.
Anda akan mendapatkan layar seperti yang ditunjukkan di bawah ini:

Pilih kotak centang – “Tampilkan petunjuk penautan”.
Kemudian, klik Ekspor ke PDF . Ini akan menampilkan popup di mana Anda dapat menentukan lokal di mana Anda ingin PDF diekspor. Kemajuan akan ditampilkan di bilah kemajuan seperti di bawah ini.

Ketika ekspor selesai, akan ada kotak konfirmasi. Saat mengklik kotak, Anda akan dapat melihat PDF bersama dengan semua navigasi yang Anda siapkan.
Membangun Produk Minimum yang Layak – Berapa Banyak yang Terlalu Banyak?

Membungkus…
Tidak dapat disangkal pentingnya wireframing dalam dunia pengembangan aplikasi saat ini. Mereka menyediakan banyak fitur yang akhirnya mengurangi beban kerja Anda secara keseluruhan – sama sekali tidak ada kekurangan alat wireframing tetapi Balsamiq adalah salah satu dari sedikit alat yang memenuhi semua kebutuhan Anda!

Pelajari Kursus MBA Online dari Universitas top dunia. Dapatkan Master, PGP Eksekutif, atau Program Sertifikat Tingkat Lanjut untuk mempercepat karier Anda.