Diperbarui 6/13/2018: Posting ini telah diperbarui untuk menyertakan lebih banyak alat rangka gambar gratis di pasar dan untuk mengecualikan alat bingkai gambar yang tidak lagi menawarkan versi gratis.
Beberapa orang suka kejutan. Mereka suka melompat ke hal-hal tanpa rencana dan melihat bagaimana kelanjutannya.
Meskipun itu mungkin merupakan pendekatan yang menyenangkan untuk memanfaatkan hari ini atau berkeliling dunia, saya dapat memberitahu Anda satu hal yang sama sekali tidak baik untuk: membuat situs web.
Bahkan situs web yang paling sederhana melibatkan banyak bagian yang bergerak. Tetapi jika situs Anda terlalu rumit untuk dinavigasi, pelanggan Anda akan segera pergi , yang berarti Anda akan kehilangan penjualan dan kesempatan untuk terlibat dengan pelanggan potensial.
Salah satu cara untuk membuat situs berpenampilan menarik yang akan disukai pengguna Anda adalah dengan meringkasnya sebelum menyentuh potongan kode apa pun di editor HTML favorit Anda .
alat bingkai gambar sumber bebas dan terbuka
Jika Anda bekerja dengan tim untuk mendesain sebuah situs, aplikasi, atau bahkan satu halaman web, sebuah wireframe juga dapat berfungsi sebagai cara untuk mengomunikasikan dengan tepat seperti apa tampilan situs Anda tanpa melalui kerumitan pengkodean prototipe.
Pada akhirnya, memulai dengan bingkai gambar dapat menghemat waktu kerja Anda di backend. Dan itu taruhan terbaik Anda jika Anda ingin memberikan pengunjung situs Anda dengan pengalaman pengguna sebaik mungkin.
Berita baiknya adalah Anda tidak perlu menjadi pengembang untuk membangun satu atau menjatuhkan banyak uang untuk membuat perangkat lunak mewah. Ada beberapa sistem wireframe gratis di luar sana, dan saya akan memandu Anda melalui beberapa opsi tanpa biaya di bawah ini.

7 alat wireframe sumber gratis dan terbuka

Alat wireframe open source gratis dan termasuk dalam posting ini semua menawarkan opsi "gratis selamanya", jadi tidak perlu mengeluarkan kartu kredit Anda untuk mereka, bahkan di masa depan.
Seperti kebanyakan sistem gratis, pertukaran adalah bahwa Anda mungkin akan mendapatkan versi terbatas dari sistem berbayar, jadi saya mencoba untuk menguraikan di mana Anda mungkin mengalami hambatan.
Sistem terdaftar sesuai dengan jumlah ulasan pengguna yang mereka miliki di Capterra pada saat publikasi, tertinggi ke terendah.

1. Lucidchart

(536 ulasan, 4,5 bintang di Capterra)
Lucidchart alat wireframe open source
Gambar rangka di Lucidchart ( Sumber )
Lucidchart adalah pembangun wireframe berfitur lengkap dan alat desain UI. Ini menawarkan kolaborasi mudah pada bingkai gambar, memungkinkan banyak orang untuk mengedit gambar rangka yang sama secara bersamaan. Ini juga memiliki add-on Chrome yang memudahkan untuk menambahkan diagram Lucidchart ke Google Docs atau Sheets, jika di situlah tim Anda terbiasa bekerja.
Apa yang dikatakan pengulas Capterra : Para pengulas menyukai kenyataan bahwa sistem ini berbasis cloud, terintegrasi dengan banyak produk lain yang biasa digunakan, dan menawarkan sejumlah templat untuk membantu Anda memulai desain Anda. Namun, mereka ingin sistem menjadi lebih intuitif, serta kemampuan untuk menyesuaikan ruang kerja mereka. Mereka juga mencatat bahwa sistem terkadang terasa kikuk dan lamban.
Batasan versi gratis:
  • Satu pengguna
  • Proyek terbatas pada 60 objek
Biaya untuk meningkatkan: Paket Lucidchart dengan harga terendah mulai dari sekitar $ 5 per bulan, untuk satu pengguna. Rencana tim mulai dari $ 20 per bulan.
Sudahkah Anda menggunakan Lucidchart? Berikan ulasan !

2. InVision

(123 ulasan, 4,5 bintang di Capterra)
InVision alat wireframe open source
Anda dapat membangun "Papan Inspirasi" di InVision untuk menyimpan ide desain di satu tempat ( Sumber )
Anda dapat menggunakan solusi berbasis cloud InVision untuk mendesain dan menggunakan wireframe aplikasi seluler dan situs desktop, serta membuat dokumentasi arsitektur dan memvisualisasikan aliran navigasi. Alat kolaborasi bawaannya memungkinkan Anda menerima umpan balik dari rekan setim Anda, dan prototipe interaktifnya memungkinkan penguji menavigasi aplikasi atau halaman web Anda secara realistis.
Apa yang dikatakan pengulas Capterra :Pengguna menyukai antarmuka IntVision yang ramping dan intuitif. Mereka juga menyukai kemampuan untuk membuat prototipe yang terlihat profesional, dengan kesetiaan tinggi — yang menurut laporan bagus untuk dipresentasikan kepada klien — dan kemudahan yang dapat digunakan pengguna untuk melihat dan melihat umpan balik. Pengguna memang mencatat, bagaimanapun, bahwa sistem dapat meningkatkan kemampuan animasinya. Mereka juga menyebutkan bahwa, kadang-kadang, prototipe terlihat berbeda di sistem lain daripada yang mereka lakukan di InVision.
Batasan versi gratis:
  • Satu prototipe
  • Satu pengguna
Biaya untuk meningkatkan: Paket InVision termurah harganya $ 15 per bulan dan memberikan ruang hingga tiga prototipe.
Sudahkah Anda menggunakan InVision? Berikan ulasan !

3. Moqups

(11 ulasan, 4,5 bintang di Capterra)
Moqup alat wireframe open source
Papan desain dan bentuk perpustakaan di Moqups ( Sumber )
Moqup adalah pilihan desain berbasis cloud lainnya yang dilengkapi dengan perpustakaan lengkap stensil dan set ikon. Ini menawarkan kemampuan untuk mengimpor gambar Anda sendiri agar sesuai dengan tampilan dan nuansa situs Anda. Editor drag-and-drop memungkinkan tim Anda untuk secara intuitif merancang gambar rangka situs, flowchart, dan storyboard.
Apa yang dikatakan pengulas Capterra :Pengguna menyukai fungsionalitas drag-and-drop yang mudah, antarmuka sistem yang bersih dan intuitif, dan kemudahan yang dapat digunakan untuk berbagi desain dengan pengembang dan klien. Mereka berharap, bagaimanapun, bahwa sistem menawarkan lebih banyak objek untuk dipilih dan ingin melihat opsi offline dari perusahaan di masa depan.
Batasan versi gratis:
  • Satu proyek
  • 300 batas objek
  • Penyimpanan 5 MB
Biaya untuk meningkatkan: Paket Moqup dengan harga terendah menghabiskan biaya $ 13 per bulan, untuk satu pengguna dan proyek tanpa batas.
Sudahkah Anda menggunakan Moqup? Berikan ulasan !

4. Wireframe.cc

(5 ulasan, 4 bintang di Capterra)
proyek wireframe di Wireframe.cc
Proyek wireframe di Wireframe.cc ( Sumber )
Wireframe.cc adalah pilihan tepat bagi orang yang menginginkan antarmuka pengguna yang sederhana dan tidak berantakan. Alih-alih bilah alat, Wireframe.cc menawarkan opsi yang muncul saat Anda membutuhkannya dan tetap tersembunyi saat Anda tidak membutuhkannya. Anda dapat berbagi gambar rangka langsung dengan seluruh tim Anda untuk pengeditan kolaboratif, dan siapa pun yang memiliki tautan dapat mengomentari gambar rangka gambar, meskipun membuka kunci fungsi ini memerlukan peningkatan.
Apa yang dikatakan pengulas Capterra :Pengguna cepat mengetahui bahwa UI minimalis bagus untuk membuat maket kesetiaan rendah, tetapi jika Anda mencari yang lebih dari itu, versi gratis Wireframe.cc mungkin bukan untuk Anda. Pengguna juga berharap ada lebih banyak tutorial online yang menunjukkan cara memulai sistem.
Batasan versi gratis:
  • Tidak ada akun pengguna
  • Semua gambar rangka Anda bersifat publik
  • Wireframes terbatas pada satu halaman
Biaya untuk meningkatkan: versi premium Wireframe.cc mulai dari $ 16 per bulan untuk satu pengguna dan proyek tanpa batas.
Sudahkah Anda menggunakan Wireframe.cc? Berikan ulasan !

5. MockFlow

(3 ulasan, 2,5 bintang di Capterra)
Alat wireframe open source MockFlow
Editor wireframe Mockflow ( Sumber )
MockFlow menawarkan seluruh perpustakaan desain templat untuk membantu Anda membuat cetak biru antarmuka situs web dan aplikasi, peta situs, dan banyak lagi. Anda juga dapat memilih dari templat, tata letak, dan komponen pihak ketiga. Koleksi gambar dan komponen termasuk formulir, elemen navigasi, bentuk, dan ikon, sehingga Anda dapat menampilkan berbagai elemen dalam maket dan gambar rangka Anda.
Apa yang dikatakan pengulas Capterra : Hanya satu pengulas meninggalkan penjelasan tentang ulasan mereka, tetapi mereka memiliki beberapa hal baik untuk dikatakan tentang sistem. Menurut ulasan ini, versi gratis MockFlow menawarkan banyak fungsi dan mudah digunakan. Namun, tampaknya ada beberapa bug dalam sistem yang belum diperbaiki.
Batasan versi gratis:
  • Satu proyek
  • Hingga dua pengulas
  • Akses perpustakaan terbatas dan integrasi dengan solusi pihak ketiga
Biaya untuk meningkatkan: Paket MockFlow dibayar mulai dari $ 14 per bulan, untuk satu pengguna dan proyek tanpa batas.
Sudahkah Anda menggunakan MockFlow? Berikan ulasan !

6. Fluid UI

(Tidak ada ulasan atau peringkat di Capterra)
Alat wireframe open source Fluid UI
Alat desain Fluid UI ( Sumber )
Solusi wireframing berbasis cloud dari Fluid UI menawarkan kepada desainer perpustakaan lebih dari 2.000 elemen. Anda dapat membuat prototipe interaktif dan membuat animasi halaman untuk mendapatkan ide yang lebih baik tentang bagaimana produk akhir Anda akan terlihat dan terasa. Anda juga dapat menggunakan aplikasi Android dan iOS Fluid UI untuk melihat pratinjau prototipe Anda pada antarmuka seluler.
Apa yang dikatakan pengulas Capterra :UI Fluida belum memiliki ulasan tentang Capterra.
Batasan versi gratis:
  • Satu proyek
  • Sepuluh halaman
  • Tidak ada kemampuan untuk mengunggah
  • Terbatas pada perpustakaan gambar rangka
  • Tidak ada kemampuan bagi anggota grup untuk meninggalkan komentar atau umpan balik
Biaya untuk meningkatkan: Upgrade ke paket Fluid UI termurah hanya $ 8,95 per bulan dan memberi Anda akses ke fitur desain yang lebih canggih, seperti transisi animasi. Untuk berkolaborasi dengan rekan kerja dan rekan setim, Anda harus meningkatkan ke rencana “Pro” Fluid UI, sekitar $ 19 per bulan.
Sudahkah Anda menggunakan Fluid UI? Berikan ulasan !

7. Pensil

(Tidak ada ulasan atau peringkat di Capterra)
Alat gambar wireframe open source dari Pencil Project
Diagram dalam Pensil ( Sumber )
Pencil adalah satu-satunya alat wireframe berbasis desktop dalam daftar ini, dan itu open source, yang berarti bahwa setiap fitur tersedia untuk semua pengguna secara gratis. Terakhir diperbarui pada Juni 2017.
Sistem ini memungkinkan Anda membuat gambar rangka multi halaman dengan tautan antar halaman. Dan — bonus untuk webmaster Anda — ketika Anda mengekspor bingkai gambar Anda ke halaman web HTML, Pencil menjaga tautannya, sehingga Anda dapat berbagi maket aplikasi atau situs web lengkap dengan halaman yang terhubung. Pensil juga menawarkan sejumlah templat, pustaka bentuk, dan kemampuan untuk mengimpor objek eksternal. Anda dapat memanfaatkan stensil Android dan iOS sistem untuk desain untuk seluler.
Apa yang dikatakan pengulas Capterra :Pensil belum memiliki ulasan tentang Capterra.
Batasan versi gratis:
  • Pensil adalah alat sumber terbuka, sehingga versi gratisnya berfitur lengkap.
Sudahkah Anda menggunakan Pensil? Berikan ulasan !

Alat apa yang Anda gunakan untuk penyadapan?

Tberikut adalah beberapa alat digital tanpa biaya yang memungkinkan Anda membuat gambar rangka dan mendapatkan umpan balik secara langsung. Jika tidak ada opsi wireframe ini yang terasa pas untuk Anda, Anda selalu dapat memeriksa salah satu dari 30+ opsi di direktori perangkat lunak wireframeCapterra .
Bagi Anda yang lebih suka alat kolaborasi digital untuk wireframing dan maket produk, mana yang menjadi favorit Anda? Apa yang Anda gunakan yang Anda sukai? Beri tahu saya di komentar di bawah.
Sumber daya bermanfaat lainnya:

  • Statistik tentang UX seluler dari tim produk Capterra untuk mengingatkan Anda bahwa desain desktop seharusnya tidak menjadi fokus terbesar Anda.
Mencari perangkat lunak Manajemen TI? Lihatlah daftar Capterra tentang solusi perangkat lunak Manajemen TI terbaik .