Moqups: Tinjauan dan Ulasan

Bagaimana Anda tahu sebuah ide hebat atau buruk tanpa mengujinya?

Wireframing, mockup dan prototyping adalah bagian penting dari desain digital. Memvisualisasikan konsep Anda memungkinkan Anda mensimulasikan desain Anda, mencoba pengalaman pengguna yang berbeda dan menguji berbagai perjalanan dan alur pengguna sebelum membuat sesuatu menjadi nyata.

Di masa lalu, desainer harus mencetak desain mereka dan menyajikan PDF kepada klien. Saat ini, ada alat untuk membantu Anda menemukan dan memecahkan tantangan desain sebelum desain dipublikasikan; mengerjakan komponen estetika dan teknis dari sebuah desain; dan menguji pengalaman sebelum orang lain.

Anda juga akan memperlancar hubungan Anda dengan klien – jika mereka menganggap sesuatu (yang akan mereka lakukan), Anda dapat mengatasinya pada tahap awal alih-alih mendengar, “Oh, saya pikir …” nanti, ketika sudah terlambat .

Moqups adalah alat desain berbasis web yang dapat membantu Anda membangun gambar rangka, maket, dan prototipe semuanya dalam satu lingkungan. Anda dapat menavigasi antar proyek dan mengambil desain Anda dari fidelitas rendah (tahap awal dan sketsa kasar) hingga fidelitas tinggi (lebih teliti dan detail). Dalam posting ini saya mengambilnya untuk berputar dan menunjukkan kepada Anda seperti apa proses itu di setiap langkah, termasuk pemikiran terakhir saya di akhir posting.

Apa yang Dapat Anda Buat dengan Moqups?

Ada sejumlah desain yang dapat Anda buat dengan Moqups: diagram, diagram alur, peta situs, gambar rangka, maket, bagan, dan grafik. Mari kita bahas mereka.

Anda akan melihat bahwa saya tidak berbicara secara khusus tentang prototyping di sini. Ada alasan untuk itu, dan saya akan membahasnya nanti.

Diagram dan Flowchart

Hampir setiap proyek desain web dimulai dengan diagram, diagram alur, atau peta situs, dan anggota tim cenderung kembali ke sana untuk referensi di sepanjang jalan. Dengan Moqups, Anda dapat membuat semua jenis diagram:

• Diagram konsep
• Pohon keputusan
• Diagram alur dengan interaksi pengguna
• Bagan alur untuk alur kerja perangkat lunak
• Peta konsep
• Peta Situs
• Gunakan diagram kasus

Dengan stensil diagram alur, Anda bisa memulai semua jenis diagram. Anda juga dapat menggunakan Diagram Extender untuk mengembangkan aliran sesuai kebutuhan. Selain itu, Anda dapat mengubah tampilan diagram untuk menyesuaikannya.

Gambar rangka dan Mockup

Dengan wireframes , tim Anda dapat mengetahui hal-hal seperti hierarki informasi, kepadatan halaman, dan aliran pengguna di awal proyek. Bentuk sederhana dan teks placeholder menggantikan elemen desain yang lebih canggih yang akan Anda tambahkan di masa mendatang. Anda tidak perlu khawatir tentang branding atau desain; sebagai gantinya, Anda hanya perlu khawatir tentang struktur dan persyaratan utama situs web.

Dengan mockup , tim Anda bisa mendapatkan umpan balik di tahap pertama desain. Anda akan membangun sketsa gambar rangka untuk memvisualisasikan konten dan mendemonstrasikan bagaimana itu akan berfungsi dengan cara yang sangat mendasar. Desain dimasukkan ke dalam konteks agar terlihat lebih baik dan untuk memvisualisasikan hasil akhirnya. Alih-alih melihat desain di halaman, klien dapat melihat seperti apa desain itu di situs web atau aplikasi mereka.

Buat dalam Urutan Apa Pun yang Sesuai dengan Anda

Keindahan Moqups adalah Anda dapat memantul bolak-balik antara gambar rangka dan maket sesuai keinginan Anda – dan Anda tidak perlu membuatnya terlebih dahulu. Misalnya, Anda dapat memulai dengan cara tradisional, dengan wireframe dan kemudian mockup. Anda kemudian dapat kembali ke gambar rangka untuk membuat penyesuaian yang Anda sadari diperlukan saat menilai mockup. Atau, Anda dapat membuat mockup terlebih dahulu, lalu pindah ke tahap wireframing untuk mengetahui detailnya. Anda juga dapat melewati mockup sepenuhnya dan membuat prototipe fidelitas rendah dari gambar rangka.

Bagan dan Grafik

Jika Anda perlu menyajikan informasi secara visual kepada tim, klien, atau investor Anda, Moqups memungkinkan Anda membuat semua jenis bagan dan grafik:

• Grafik area
• Diagram batang
• Bagan kolom
• Bagan donat
• Bagan garis
• Diagram lingkaran

Fitur Moqups

Berikut adalah fitur utama Moqups, diikuti dengan daftar singkat manfaat tambahan.

Pustaka Bawaan dengan Grafik dan Font

• Pustaka bawaan mencakup ribuan set ikon. Ada juga stensil siap pakai yang telah dirancang untuk kasus penggunaan populer, ditambah kit stensil khusus untuk desain aplikasi seluler Android dan iOS.
• Sejajarkan, ubah ukuran, putar, atau gaya objek. Anda juga dapat mengedit, mengelompokkan, mengunci, dan mengganti nama elemen secara massal. Penyesuaian yang tepat dapat dilakukan dengan panduan, kisi, dan penggaris khusus.
• Google Font terintegrasi sehingga Anda dapat memilih dari ratusan font. Kontrol lanjutan memungkinkan Anda mengubah teks agar sesuai dengan desain Anda. (Ingin mempelajari Cara Memilih Font Terbaik untuk Logo? Kami memiliki artikel untuk itu.)

Atur Proyek Anda

• Seret dan lepas halaman Anda untuk menyusun ulang atau mengaturnya dalam folder.
• Panel Halaman memudahkan pencarian dan navigasi folder Anda.
• Dengan Halaman Master, Anda dapat menerapkan perubahan secara otomatis ke semua halaman terkait.

Integrasi dan Kolaborasi

• Moqups memiliki integrasi dengan alat seperti Dropbox, Google Drive, dan Slack.
• Tim Anda dapat berkolaborasi saat bekerja dari jarak jauh berkat cloud (dan berikut ini juga lebih banyak cara bagi tim Anda untuk mengobrol).
• Dapatkan umpan balik langsung pada desain itu sendiri dan lakukan pengeditan tanpa harus mengirim berbagai versi satu sama lain.

Lebih banyak fitur

• Editor drag-and-drop yang mudah digunakan (pemula mungkin mengalami kurva belajar, tetapi itu tidak utama)
• Unggah gambar Anda sendiri
• Penyelarasan snap-in saat menyusun elemen
• Skala tanpa kehilangan kualitas
• Ekspor pekerjaan Anda sebagai PDF atau PNG

Menggunakan Moqups

Saya hanya akan langsung masuk untuk memberi tahu Anda tentang pengalaman saya dengan Moqups. Ada banyak hal yang terjadi – tidak membingungkan, hanya ada banyak hal – jadi saya akan berbicara tentang fitur yang saya mainkan yang menurut saya keren atau berguna. Di akhir artikel, saya akan memberi Anda keseluruhan pemikiran dan perasaan saya tentang Moqups, termasuk kelemahan umum dan siapa yang terbaik untuknya.

Memulai dengan Moqups

Menyiapkan Moqups sangat mudah, dan saya sarankan Anda memulai dengan akun gratis (saya akan membahas tentang apa yang disertakan di bagian Harga nanti).

Membuat Desain

Saya sangat menyukai editor drag-and-drop. Di beberapa editor, Anda mengklik sebuah elemen dan elemen itu segera muncul di proyek, dan kemudian membuangnya bisa merepotkan. Moqups membuat saya merasa seperti saya memiliki sedikit lebih banyak kontrol atas apa yang saya tambahkan dan memungkinkan saya menjelajahi opsi tanpa khawatir saya akan secara tidak sengaja mengklik sesuatu dan menambahkannya tanpa menyadarinya. Juga, saat Anda menyeret elemen ke proyek Anda, Anda dapat melihat seperti apa tampilannya, dan kemudian mengembalikannya jika Anda memutuskan tidak menginginkannya.

Bekerja dengan Desain

Saat Anda mengarahkan kursor ke elemen yang berbeda dalam desain Anda, kerangka biru muncul untuk menunjukkan kepada Anda elemen halaman yang berbeda. Untuk bekerja dengan sebuah elemen, klik untuk memilihnya. Menu akan terbuka di sebelah kanan dengan opsi khusus.

Warna Proyek

Saya suka bagian "Warna Proyek" dari pemilih warna. Ini membuatnya mudah untuk mencocokkan warna hati di sudut kiri atas dengan warna teks.

Menyimpan Elemen sebagai Template

Fitur Moqups yang bermanfaat adalah Anda dapat menyimpan elemen sebagai templat, lalu dengan mudah menambahkannya ke halaman lain apa adanya. Desain asli akan dipertahankan – warna, ukuran, dll. Ini membantu menciptakan kontinuitas dalam desain Anda.

Fitur Kolaborasi

Jika Anda pengguna Google Drive, komentar akan terlihat dan berperilaku dengan cara yang biasa Anda gunakan. Menambahkan komentar sangat mudah, dan Anda dapat memindahkan komentar sebelum atau sesudah menulisnya sehingga penempatannya masuk akal.

Namun, jika Anda memiliki banyak kolaborator dan komentar, panel komentar kecil itu bisa cepat lepas kendali. Anda mungkin ingin membuat aturan untuk tim Anda bahwa komentar ditandai sebagai diselesaikan saat tidak lagi diperlukan.

Harga Moqups

Dengan paket gratis, Anda dapat membuat satu proyek yang mencakup hingga 200 objek. Ini adalah sesuatu yang perlu dipertimbangkan ketika memilih antara bekerja dengan dokumen kosong dan menggunakan template. Saya memilih template Landing Page Wireframe, yang segera menghabiskan 125 dari 200 objek. Saya bisa masuk dan menghapus beberapa objek, tentu saja, tetapi bagi sebagian orang mungkin lebih masuk akal untuk memulai dari awal.

Satu-satunya hal yang baik untuk paket gratis adalah menguji Moqups karena kemungkinan Anda tidak akan hanya memiliki satu proyek untuk dirancang. Harga mulai dari $ 13 per bulan, dibayar setiap tahun. Setiap paket memungkinkan Anda membuat proyek tanpa batas dan menggunakan objek tanpa batas, jadi pertimbangan utamanya adalah berapa banyak orang yang akan menggunakan Moqups.

Kecuali Anda satu tim desain, Anda pasti menginginkan paket Tim Kreatif. Semakin banyak orang yang Anda tambahkan, semakin sedikit biaya per pengguna. Misalnya, jika Anda memiliki 50 pengguna, biayanya adalah $3 per pengguna dengan total $149 per bulan (dibayar setiap tahun).

Beberapa orang mungkin merasa bahwa harga Moqups sangat mahal, sementara yang lain akan menganggapnya terlalu mahal. Itu tergantung pada seberapa banyak Anda akan menggunakannya dan nilai yang Anda dapatkan darinya.

PS Dengan paket gratis, tidak diperlukan kartu kredit – jika Anda ingin mengujinya dan kemudian memutuskan bahwa itu bukan untuk Anda, Anda tidak perlu ingat untuk membatalkan sebelum dikenakan biaya.

Titik Lemah Moqups

• Kelemahan terbesar dari Moqups adalah Anda tidak dapat menggunakannya secara offline. Di sisi lain, fakta bahwa itu berbasis browser sangat nyaman bagi sebagian orang.
• Jika Anda memiliki kebutuhan prototyping tingkat lanjut atau Anda pilih-pilih tentang fitur, ini mungkin bukan alat untuk Anda.
• Saya telah membaca ulasan yang mengatakan Moqups bisa menjadi lambat, membutuhkan waktu lama untuk memuat dan bahkan mati secara tidak terduga, tetapi saya tidak mengalami semua itu. Namun, ini adalah sesuatu yang harus diperhatikan saat Anda menambahkan konten yang kaya dan membuat halaman tambahan. Saya tidak memiliki foto atau video dalam desain saya, jadi itu mungkin membantu menjaga semuanya tetap cepat. Jika proyek Anda akan berisi banyak elemen kaya, manfaatkan paket gratis untuk mengujinya.

Untuk Siapa Moqups Terbaik?

Moqups sangat bagus untuk non-pengembang untuk membuat konsep selama tahap pertama perencanaan proyek. Misalnya, pemilik bisnis atau manajer proyek dapat menyampaikan ide mereka kepada tim pengembangan dan desain, yang kemudian akan menggunakan metode yang lebih canggih untuk membuat produk aktual atau rendering dengan ketelitian tinggi.

Moqups sangat berguna untuk maket dan wireframing, tetapi tidak sekuat dalam hal pembuatan prototipe. Moqups tidak memiliki fitur yang hampir sama dengan alat prototyping lainnya, dan elemen gaya juga tidak dapat dikustomisasi dalam banyak cara seperti alat kompetitif. Bahkan hampir tidak disebutkan di situs web mereka.

Pikiran Akhir

Secara keseluruhan, saya suka menggunakan Moqups – dan saya berharap saya mengetahuinya saat mendesain situs web saya karena jauh lebih realistis daripada desain pena dan kertas yang saya buat sketsanya. Ini bekerja seperti yang dikatakannya, dan bahkan dengan banyak opsi, tidak ada yang terlalu sulit untuk diketahui. Jika Anda pernah bekerja dengan semua jenis alat desain grafis – dan saya rasa Anda pernah melakukannya – yang satu ini tidak akan sulit untuk digunakan. Anda dapat menggunakannya untuk pertama kalinya dan menyelesaikan proyek pada akhir hari (atau akhir jam), dan kemudian Anda dapat kembali dan menjelajahi semua opsi yang Anda lewatkan untuk pertama kalinya.

Inti dari alat visualisasi adalah untuk mendapatkan produk akhir, bukan? Lihat etalase desain Divi kami dengan karya dari komunitas kami yang luar biasa.

Gambar unggulan melalui Visual Generation / shutterstock.com