Untuk dapat membuat sebuah web dengan tingkat kesalahan yang kecil, anda sebagai developer harus membuat perencanaan dan design yang matang. Jika anda langsung terjun bebas ke tahap pengembangan atau development tanpa membuat sebuah rancangan tentang bagaimana bentukan web anda, bagaimana user flow dari web tersebut, hingga bagaimana design interface yang nyaman bagi pengguna, itu sama saja dengan membuat kepala anda cepat botak, dan dahi anda semakin berkerut sebelum waktunya (Baca : PUSING!!!).
Untuk itu diperlukanlah sebuah mockup / wireframe. Tahap ini tidak terlalu sulit untuk dilewati, tetapi punya dampak yang besar sebagai pedoman bagaimana web anda akan dibuat, serta fungsi apa saja yang bisa dijalankan di dalamnya. Tahap ini secara konvensional bisa anda buat hanya dengan mencorat-coret dikertas saja, tetapi di saat sekarang ini ada cara yang lebih modern dan lebih praktis yaitu dengan memanfaat kan servis online via aplikasi web untuk pembuatan mockup / wireframing.
Apa itu Wireframes sebenarnya??
Esensi dari Wireframes adalah sebuah representasi visual, panduan, dan struktur basis dari elemen-elemen yang ada pada design interface sebuah website. Jadi ketika kita membuat sebuah web, requirementnya jelas, user flownya jelas, interfacenya jelas dan yang paling penting konsepnya jelas dan konsisten. Berdasarkan pengalaman saya banyak yang membuat website dengan tanpa menggunakan mockup dan wireframes hasilnya kurang memuaskan dan memakan ongkos pembuatan serta waktu yang cukup banyak.
Nah, untuk bisa membantu anda dalam membuat mockup dan wireframes (selain corat-coret dikertas ya…), anda dapat menggunakan aplikasi online yang ada di internet, keuntungannya anda bisa bekerja secara kolaboratif via internet tidak perduli dengan jarak antara anda dengan tim anda. Berikut saya berikan 5 aplikasi web untuk membantu membuat mockup dan wireframes. (Kita tidak harus pakai yang online wong dari corat-coret saja bisa hehe :D , jadi ini hanya tools pembantu anda, jika bisa dimaksimalkan lebih bagus ini)
Mockingbird
Mockingbird merupakan tool untuk membuat mockup dan wireframes yang cukup populer saat ini. Aplikasi ini memungkinkan anda membuat preview dan membuat link pada mockup anda, serta membagikan hasil kerja anda ke tim yang anda miliki. Cara penggunaannya pun cukup mudah dengan dukungan drag and drop, snap grid, page linking dan lain-lainnya yang dapat mendukung pembuatan mockup anda lebih rapih dan cepat selesai.
Pencil Project
Tool berikut ini berupa add-on pada web browser Firefox. Fitur yang ditawarkan ke penggunanya adalah pembuatan diagram dan juga user interface. Pencil Project add-on hadir dengan banyak variasi fitur seperti multiple page, text editing untuk mockup anda, dukungan rich text, penambahan custom background pada mockup anda, export HTML, dukungan PNG, format open office dan lain-lain.
Cacoo
Cacoo cocok digunakan untuk anda yang ingin membuat macam-macam diagram untuk keperluan development website anda, seperti network chart, wireframes, hingga sitemap. Anda juga dapat menggunakan fitur multiple user access yang artinya kerjaan anda bisa dishare ke beberapa orang (kolaboratif konsepnya).
MockFlow
MockFlow hadir dengan online library mereka yang ekstensif yang memungkinkan anda selalu mendapatkan update fitur-fitur terbaru dan juga template-template terbaru jadi bisa mempersingkat anda jika ingin membuat mockup / wireframes.
Lumzy
Lumzy memungkinkan anda membuat prototype aplikasi website berikut dengan action/event yang dapat dilakukan dari website yang akan anda buat. Tools andalannya adalah penambahan interaksi di mockup anda jadi lebih terlihat real. Lumzy juga menyuguhkan konsep kolaboratif.
Opini anda…
Bagaimana sih anda membuat mockups dan wireframes anda? Saya yakin permulaan paling sederhana pasti dari corat-coret di kertas untuk menuangkan ide anda. Tapi boleh juga nih di share tool apa saja yang biasa anda pakai?