Mockup artinya model atau replika mesin atau struktur, yang digunakan untuk tujuan instruksional atau eksperimental. Show Balsamiq mockup adalah program aplikasi yang digunakan dalam pembuatan tampilan user interface sebuah aplikasi. Software ini sudah menyediakan tools yang dapat memudahkan dalam membuat desain prototyping aplikasi yang akan kita buat. Software ini berfokus pada konten yang ingin digambar dan fungsionalitas yang dibutuhkan oleh pengguna. Alih-alih menggambar sketsa (wireframe) atau prototype rancangan desain website di atas kertas balsamiq mockups membantu seorang web desainer membuat tampilan web dalam bentuk gambar di komputer. Tujuannya selain agar membuat tampilan (desain) website menarik juga dapat menyesuaikan dengan kebutuhan customer (pelanggan). Dengan alat pembuat mockup maka seorang web desainer dapat menganalisa tata letak, desain dan fungsi. Contoh komponen user interface pada Balsamiq Mockups. (sumber: https://balsamiq.com/products/mockups/)  Kelebihan Balsamiq Mockups dibanding software pembuat mockup lainnya adalah aplikasi ini berbasis cloud, disertai aplikasi desktop yang memungkinkan kita dengan cepat dan mudah membuat rancangan website. Dengan konten yang terbuat seperti dari gambaran tangan, akan membuat kita fokus pada pemecahan masalah user interface yang lebih besar, daripada pada perincian website. Di websitenya sendiri ada dua pilihan untuk para pengguna, ada versi trial for dekstop dan ada juga yang bisa kita download untuk versi dekstop. Namun ada juga yang disediakan dalam versi berbayar. Aplikasi ini bisa digunakan untuk sistem operasi Windows, Mac OS, dan Linux. Aplikasi ini sedianya akan saya kenalkan kepada murid-murid dalam pembelajaran pemrograman web sebagai lanjutan dari materi semester gasal. referensi:
Axure RP maupun Figma merupakan 2 contoh prototyping tools yang dapat digunakan untuk membantu pembuatan prototyping, termasuk design user interface. Axure RP dibuat oleh Axure Software Solutions dan dapat digunakan pada desktop Windows dan Mac, yang sudah dirilis sejak tahun 2003. Sedangkan usia dari Figma sendiri masih terbilang masih muda, yaitu baru berusia kurang lebih 4 tahun sejak perilisan dan memiliki popularitas yang tinggi di berbagai kalangan designer karena kemudahan penggunaannya pada berbagai sistem operasi dan dapat digunakan di browser. Untuk mengetahui lebih lanjut mengenai kedua prototyping tools ini, maka berikut akan disajikan mengenai perbedaan dari Axure RP dan Figma: Pengembangan ide konsep adalah proyek kompetitif yang dilakukan oleh non-desainer (contohnya: pemilik atau manajer produk) dan pengembang bagian front-end. Dalam rangka mengembangkan konsep yang dimiliki untuk mencapai tujuan, maka dibutuhkan alat yang dapat menyalurkan ide dan mudah digunakan oleh tim. Axure memiliki fasilitas cloud yang memungkinkan pekerjaan tim dilakukan namun tidak bisa dilakukan secara real-time. Sedangkan Figma memfasilitasi pengerjaan tim yang dilakukan secara real-time dan setiap kursor yang aktif memiliki label nama setiap peserta yang aktif. Figma memudahkan proses berbagi file proyek dimana penerima hanya perlu menekan link Figma yang dikirimkan oleh pembuat proyek. Figma dapat diakses melalui software dan website, sedangkan Axure hanya bisa diakses lewat software.
Desain interaktif memungkinkan pengguna untuk beralih dari halaman ke halaman dan menggunakan fitur-fitur yang ada secara nyaman dan mudah. Figma memiliki keunggulan dimana prototype yang dihasilkan interaktif karena banyaknya fitur pada Figma yang mendukung, salah satu contohnya adalah dengan beragam pilihan plugins yang dapat digunakan oleh pengguna. Sedangkan prototype yang dihasilkan dari Axure cenderung kurang interaktif karena cenderung lebih rumit, namun menyediakan model interaksi yang kuat untuk prototype.
Axure dan Figma menjadi salah satu contoh sistem yang dimanfaatkan untuk desain. Dimana terdapat kosakata umum tentang arsitektur, bahan, alat, dan panduan yang memungkinkan tim bekerja sama dan membuat keputusan yang lebih tepat. Figma memiliki pustaka kerangka desain pada situs web yang berfungsi sebagai pedoman kebenaran produk, tidak seperti Axure yang hanya dapat menghasilkan halaman HTML.
Desain low-fidelity biasanya dibuat sebagai gambar rangka untuk ditinjau oleh desainer atau pihak lainnya. Axure akan lebih memudahkan pembuatan desain low-fidelity dibandingkan dengan Figma. Hal ini dikarenakan Axure memiliki komponen yang telah dikemas sebelumnya untuk wireframing, sehingga penggunanya hanya tinggal memilih dan menggunakan komponen yang diinginkan. Sedangkan Figma perlu untuk menggambar komponen wireframe atau mengunduh file yang berisi wireframe.
Figma lebih unggul dalam bidang desain high-fidelity dikarenakan menyediakan fitur yang memungkinkan pembuatan objek custom. Sedangkan Axure membuatnya menjadi agak suit untuk mengakses perintah.
Setelah desainer UI selesai membuat desain tampilan, mereka kemudian akan menyerahkan file kepada developer. Figma memiliki tab “Template” untuk objek yang dipilih dan di panel property akan menghasilkan nilai CSS, iOS atau Android (di mana pengembang dapat menggunakan fungsi dalam mode prototype). Axure memiliki keunggulan dimana mampu untuk menghasilkan HTML, spesifikasi Word, dan laporan berformat CSV yang dapat diimpor dalam spreadsheet. Sehingga, meskipun hasil dari Axure tidak berfokus pada Pustaka desain, namun hasil materinya dapat berguna bagi developer. Kesimpulannya adalah baik Axure dan Figma memiliki keunggulan masing-masing yang bisa disesuaikan dengan tujuan pengguna. Figma unggul pada sifat kolaboratif dan ketersediaan lintas platform. Kekurangan Figma adalah karena ketersediaan aplikasi online maka mungkin dilarang oleh perusahaan karena alasan keamanan. Sedangkan Axure unggul dalam pembuatan desain low-fidelity, fitur pembuatan prototype interaktif yang kuat, dan pembuatan dokumen. Referensi: This Paper A short summary of this paper 31 Full PDFs related to this paper
Visual memang bisa menjelaskan lebih dari kata-kata. Faktor inilah yang membuat banyak orang menonjolkan sisi visual lebih dalam terutama untuk desain website. Penting sekali untuk memiliki presentasi visual dari karya yang kita buat. Saat kita merancang website, kita sudah terlintas seperti apa desain visual untuk website yang akan dikembangkan. Untuk merealiasi gambaran itu, seorang web design akan membuat sebuah sketsa yang disebut dengan wireframe atau wireframing. Wireframe adalah kerangka desain tata letak situs website yang sering disebut sebagai blueprint atau atau outline yang mewakili tata letak dasar setiap halaman yang terstruktur. Ada beberapa desainer memilih melewati fase proses ini. Tetapi proses ini juga bermanfaat untuk membuat unsur-unsur konseptual demi merencanakan pengembangan website yang dibuat. Wireframing pun sebenarnya sederhana dan bisa dilakukan di kertas kok. Setelah membayangkan sketsa design yang ingin dibuat, kini yang harus dilakukan adalah membuat mockup website. Tetapi apa sih itu mockup website? Simak penjelasannya beserta rekomendasi aplikasi untuk membuat mockup website di bawah ini. Apa itu mockup?Mockup adalah hasil akhir design dari wireframe yang menyampaikan aspek desain visual yang meliputi gambar, warna dan tipografi. Mockup bisa dibilang adalah preview gambaran nyata sebelum disimulasikan dengan berinteraksi dengan user yang selanjutnya dilakukan di fase prototype. Dengan adanya mockup, kamu bisa melihat visualisasi website yang akan dirancang secara nyata. Ini akan memudahkan kamu atau tim untuk memberi masukan terhadap website yang dibuat apabila masih ada yang kurang atau belum sesuai fungsinya dan permintaan lainnya.Tak heran bila mockup menjadi bagian penting dalam pembuatan website. Fungsi dari mockup itu sendiri antara lain
Fase mockup memang lebih detail ketimbang fase wireframe yang masih berupa outline sketsa design. Tetapi mockup ini bersifat statis dimana kamu masih bisa mengubah elemen lainnya sebelum dibuat interaktif di fase prototype lainnya. Ini penting dilakukan agar bisa melakukan revisi sebelum ke fase selanjutnya. Untuk melakukan mockup website, ada beberapa aplikasi yang bisa menunjang pekerjaanmu. Aplikasi ini bisa membantumu untuk merancang desain website yang akan kamu bangun. Selain sebagai mockup website, aplikasi di bawah ini juga bisa digunakan sebagai wireframe dan prototype sekaligus. Apa saja rekomendasi aplikasi mockup website? Simak berikut ini. 13 Aplikasi untuk membuat Mockup Website1. BalsamiqPertama ada Balsamiq yang menjadi aplikasi mockup UI website paling populer yang paling banyak digunakan. Balsamiq Mockups atau Balsamiq Studio memang dikenal sebagai aplikasi untuk membuat wireframe hingga prototype sekaligus. Balsamiq juga digunakan sebagai alat wireframing untuk merancang aplikasi website, software, dekstop, website dan user interface yang handal. Aplikasi ini bebasis cloud yang terintegrasi dengan Google Drive, Confluence, dan Jira. Hal ini memudahkan untuk membuat rancangan design secara cepat dan mudah. Fokus dari Balsamiq yakni pada struktur dan konten memungkinkan kamu mendapatkan ide-ide dasar yang digambarkan sebelum mempersempit spesifik. Balsamiq juga membuka bagian sumber kode dan alat mereka untuk memodifikasi sesuai kebutuhan pengguna. Balsamiq pun memiliki banyak elemen yang dikelompokan ke dalam katagori yang mudah dicari dan dimengerti yang mudah didrag ke permukaan gambar. Secara keseluruhan, Balsamiq adalah aplikasi mockup website yang komprehensif yang bisa dijalankan di Windows, Mac OS dan Linux. Balsamiq memiliki free trial selama 30 hari dan selanjutnya berbayar mulai dari $ 9 per bulan. 2. MoqupsMoqups yang merupakan salah satu aplikasi berbasi web terbaik dan sangat cepat digunakan. Moqup dibuat dalam HTML5 dan Javascript standar sehingga tidak memerlukan plugin apa pun untuk digunakan. Moqups memungkinkan kamu membuat gambar wireframe, mockup dan prototype sekaligus. Pengguna Moqups memiliki pengalaman orientasi yang baik karena tidak meminta pengguna untuk membuat akun sejak awal. Setelah mengklik tombol CTA di beranda, kamu akan melihat editor Moqups. Moqups memiliki banyak template yang tersedia. Selain itu, aplikasi ini juga menghadirkan perpustakaan bawaan dengan ratusan ikon yang dirancang sebelumnya. Ikon yang tersedia bisa kamu tarik ke desain yang kamu buat dengan fitur drag-and-drop. Baca Juga 11 Aplikasi Bermanfaat Saat Work From Home Aplikasi ini free digunakan tetapi kekurangannya ada beberapa fitur yang limited. Versi berbayar lebih banyak fungsi yang tersedia yang bisa kamu kreasikan untuk membuat design website. 3. MockplusMockplus adalah tool wireframing dan mockup yang kuat yang menyediakan kapasitas bagi desainer untuk membuat situs website dan mobile apps. Mockplus sebenarnya mudah digunakan dan cocok pemula. Dengan 3.000+ ikon dan 200 komponen, Mockplus dinilai lengkap. Penggunanya tak perlu menguasai pengetahuan pengkodean atau pemrograman lainnya. Mockplus cukup mudah digunakan karena editornya sangat intuitif yang didasarkan pada drag-and-drop interface. Hanya dengan drag komponen ini ke kanvas untuk membuat mockup ide aplikasi dalam beberapa menit. Fitur menarik dari Mockplus adalah setiap proyek punya kode QR sendiri yang dapat dipindai dari perangkat seluler. Hasilnya, desain pun bisa dibuka di perangkat lainnya. Mockplus bisa digunakan di Windows dan Mac OS juga di perangkat Android dan iOS. Tersedia versi gratis yang bisa digunakan untuk satu pengguna saja. Sementara versi berbayar bisa digunakan lebih dari satu pengguna yang diperuntukan untuk tim. 4. FigmaJika kamu mencari aplikasi mockup website UI yang sekaligus untuk membuat prototype, Figma bisa menjadi solusi untukmu. Figma memudahkan web desainer yang ingin membuat mockup website secara online. Aplikasi ini cocok untuk web designer yang baru pertama kali melakukan mockup. Figma dapat membuat prototype dan merancang tanpa perlu mengekspor. Dan kamu bisa berbagi dengan rekan tim lainnya hanya dengan mengirimkan tautan. Figma tersedia gratis yang diperuntukkan untuk 2 user dan untuk 3 project saja. Untuk versi berbayar yang profesional dikenakan $ 12 per bulan dengan fitur unlimited. 5. Fluid UIFlud UI adalah aplikasi berbasis website yang memungkinkan pembuatan mockup di browser secara online. Mockup yang dibuat menggunakan widget (drag and drop) dan menu kontekstual yang muncul di layar saat mengklik suatu elemen. Koleksi widget yang tersedia pun banyak yang berisi objek paling umum yang digunakan dalam desain website dan mobile. Fluid UI ini populer karena menawarkan perpustakaan yang terdiri dari lebih dari 2000 elemen website. Ini memungkinkan kamu untuk membuat animasi halaman dan prototype interaktif yang memberi tahu kamu bagaimana tampilan halaman website yang sebenarnya. Versi free bisa digunakan oleh satu pengguna dengan maksimal 10 pages. Sementara versi premium dikenakan biaya $ 15 per bulan dan kamu bisa mencoba berbagai fitur tanpa batas. 6. HotGlooSelanjutnya ada HotGloo yang merupakan alat wireframing hingga prototype berbasis HTML. Penggunanya bisa menyimpan project secara offline atau mengekspornya sebagai HTML yang bisa digunakan untuk presentasi kepada stakeholder. HotGloo kompatibel digunakan di semua perangkat dan semua sistem operasi. Dengan lebih dari 26.000 proyek telah dibuat, HotGloo cukup terkenal sebagai aplikasi mockup yang sudah ada sejak beberapa tahun ini. Dengan aplikasi ini, kamu nggak hanya dapat membuat rancangan sebuah website tetapi sekaligus mengujinya dan bisa melihat apa ada kesalahan di dalamnya yang bisa langsung diperbaiki. HotGloo memberi pengguna lebih dari 2.000 elemen dan ikon UI dengan drag and drop interface. Selain itu, HotGloo menyediakan opsi untuk kolaborasi tim tempat dengan membagikan tautan untuk membuat project yang dibuat bisa dilihat oleh anggota tim Aplikasi ini menawarkan uji coba gratis 7 hari. Setelah free trial habis akan dikenakan $ 13 per bulan yang bisa digunakan oleh tim sebanyak 4 pengguna secara bersamaan. 7. MockFlowMockflow adalah alat wireframing intuitif, mudah digunakan yang menyediakan kapasitas bagi desainer untuk membuat mockup website yang dibuat melalui CMS Drupal dan WordPress. Tersedia ribuan komponen dan tata letak pre-built untuk menggambar semua jenis UI. Selain itu, Mockflow bisa digunakan untuk menghasilkan GUI perangkat lunak dan wireframe aplikasi mockup dalam beberapa menit saja. Tersedia juga mockup library yang luas yang dapat digunakan untuk membuat blueprint wireframe. MockFlow terdapat fitur cloud sehingga kita bisa membagi, memberi izin pengguna lain untuk melakukan edit secara real time yang memudahkan pengerjaan project. Tersedia versi free dan premium dengan harga $ 14. 8. Marvel AppMarvel App ini aplikasi mockup unggulan lainnya yang berbasis online yang dimana kamu tak perlu menginstall apapun. Semua desain bisa dilakukan di browser. Meskipun terlihat sederhana tetapi Marvel menyediakan banyak stock photo dan icon di library. Marvel juga memiliki spesifikasi desain untuk setiap proyek. Dengan satu klik, kamu dapat langsung mengunduh aset dan menghasilkan kode CSS untuk desain yang dibuat. Fitur ini sangat membantu selama handoff desain dimana kode-kode tersebut bisa digunakan untuk coding lebih lanjut oleh developer. Baca Juga 11 Aplikasi Bermanfaat Saat Work From Home 9. Proto.ioLanjut, ada Proto.io adalah alat mockup Web UI kaya fitur yang bisa digunakan tanpa coding. Sudah lebih dari 500.000 orang di seluruh dunia memakai aplikasi ini untuk keperluan mockup dan prototype, Jika kamu ingin menampilkan semua fitur UX yang ingin ditambahkan di website rancangan kamu termasuk animasi, Proto.io adalah pilihan yang tepat untukmu. Proto.io menyediakan wireframe yang gratis yang bisa memberi kamu kebebasan untuk membuat prototype yang dinamis. Kamu bisa mengubah font, warna dan tata letak dengan mudah melalui aplikasi ini. Selain untuk website, aplikasi ini juga dirancang khusus untuk aplikasi mobile. Proto.io sudah bisa digunakan pada perangkat Android, iPad, dan iPhone. Hasil mockup pun bisa kamu lihat di perangkat kamu. Proto.io ini punya free trial selama 15 hari dan paket dasar dimulai dari $ 29 per bulan untuk satu pengguna. 10. JustinmindDi nomor 10 ada aplikasi Justinmind yang memungkinkan kamu mengerjakan wireframe, mockup dan prototype sekaligus yang interaktif dan fungsional. Justinmind menawarkan setiap aspek UI yang dibutuhkan untuk website kamu seperti dropdowns, toogle animations, menambahkan shadows dan efek lain di elemen website yang hendak kamu buat. Aplikasi bisa kita kreasikan design, ukuran dan layout lainnya dengan elemen UI lainnya yang tersedia lebih dari 4000 elemen dan berbagai animasi juga transisi yang ada di Justinmind. Kamu bisa juga membuat web interaction dan mobile gesture ke dalam project kamu. Justinmind ini sudah terintegrasi dengan Sketch, Adobe Suite dan Atlassian JIRA lho. Aplikasi tersedia versi free trial selama 30 hari dan bila ingin ke versi premium diharuskan membayar $ 19 per bulan. 11. Wireframe.ccMeskipun terlihat sederhana dan minimalis dengan blank page seperti gambar di bawah ini tetapi Wireframe.cc ini juga menjadi pilihan yang bagus untuk membuat mockup website lho. Wireframe.cc ini memang simple dan jauh dari kata complex. Aplikasi ini dilengkapi dengan fitur click and draw, pallete warna yang tak terbatas, fitur elemen-elemen UI dan wireframe untuk segala ukuran seperti ukuran mobile, desktop, tablet dan lainnya. Sketsa ini tersedia dalam satu halaman secara gratis yang bisa kamu realisasikan gambarnya secara statis dan cepat. Tetapi kamu bisa mengupgradenya dengan versi premium mulai dari $ 16 per bulan untuk satu pengguna. 12. FlintoJika kamu sehari-hari menggunakan sistem operasi Mac, Flinto adalah pilihan tepat untuk membuat mockup website karena Flinto merupakan mockup web UI berbasis Mac yang populer. Kamu bisa membuat mockup dan prototype dinamis dengan transisi animasi, customized scrolling, efek suara, gesture, 3D rotation dan fitur lainnya. Pengguna Flinto bisa mengekspor prototype sebagai video yang direkam atau GIF untuk dipresentasikan kepada tim atau stakeholder. Flinto diklaim mudah dipelajari. Terlepas dari free trial, Flinto dikenakan versi premium mulai dari $ 99 per tahun untuk satu pengguna dengan pembaruan gratis. 13. Adobe XDTerakhir yang tak ketinggalan adalah Adobe XD yang menjadi salah satu alat mockup dan prototype andalan yang digunakan oleh banyak developer dan designer. Aplikasi ini tersedia untuk Mac maupun Windows serta Android dan iOS. Dengan Adobe XD, kamu bisa membuat wireframe yang statis dan bisa berkolaborasi dengan tim. Kamu juga bisa menambahkan opsi untuk menciptakan flowchart, sitemap dan storyboard. Untuk media penyimpanan, semua data pengguna Adobe XD akan tersimpan di folder Creative Cloud Files di desktop. Folder ini secara otomatis tersedia di Cloud sehingga kamu tak perlu khawatir data akan hilang. Adobe XD ini memudahkan pengguna untuk menggunakan kembali aset grafis yang dibuat dalam Adobe Photoshop. Desain awal bisa kamu buat di Adobe Photoshop lalu diimpor desainnya ke Adobe XD. Alat ini memungkinkan untuk melihat mockup dalam berbagai ukuran layar seperti ponsel, tablet, desktop. Hal ini berguna untuk menguji bagaimana website rancangan kamu bisa terlihat pada perangkat media yang berbeda. Untuk fitur premium, kamu perlu membayar $19.99 per bulan. PenutupBerikut adalah rekomendasi 12 aplikasi untuk membuat mockup website. Masih banyak aplikasi lainnya yang bisa kamu coba seperti MockFlow, Protopie, Cacoo, Pidoco, Miro, Sketch, Axure, UXPin, Mockingbird, Wirefy, Mockplus iDoc, Lucidchart dan lain-lain. Kamu bisa menggunakan satu atau beberapa mockup website yang telah diulas di atas. Dan disesuaikan juga dengan kebutuhan yang kamu perlukan ya. Semoga artikel ini bisa menjadi referensi Exabytes Friends untuk mencari aplikasi mockup website yang tepat ya. Apakah artikel ini membantu? YaTidak |
Aplikasi pembuat gambar kerja user interface yang hanya ada pada sistem operasi Mac adalah
Pos Terkait
Copyright © 2024 apakahyang Inc.
