Sebelum menginjak pembahasan media dan tools pada wireframe terlebih dahulu perlu membahasa siklus desain User Interface (UI). Desain user interface dalam rekayasa perangkat lunak adalah bagian dari tahap desain dari empat siklus secara umum dari rekayasa perangkat lunak. Di dalam proses pengembangan interface dari sebuah aplikais terdapat 4 tahapan yaitu :
- Interface analysis dan modelling. Pada tahapan ini seorang desainer memodelkan alur kerja dari sebuah user interface dalam sebauh model, bisa menggunakan workflow baik task flow atau user flow dari sebuah interface yang dibuat berdasarkan konsep use case yang dibuat sebelumnya
- Inteface design. Pada tahapan ini seorang desain UI bertugas membuat sebuah sketsa dari interface yang sudah dimodelkan melalui workflow yang telah dibuat dan membuat gambaran kasar dari inteface bisa melalui sketsa pensil, software, ataupun presentasi. Dan konsep desain ini lebih dikenal denagn nama wireframe atau blueprint dari sebuah aplikasi.
- Interface contruction. Pada tahapan ini desainer sudah mulai melakukan implemetansi UI yang sebelumnya masih dalam bentuk / konsep wireframe, kemudian menerapkannya dalam sebuah sorce code berupa tampilan dari fungsi-fungsi yang telah dibuat sebelumnya berdasarkan work flow , use case dan data flow.
- Inteface validation. Dalam tahapan ini dilakukan analisa terhadap keseluruhan interface yang sudah diimplementasikan apakah sudah sesuai dengan model yang sudah dibuat sebelumnya. Jika ada beberapa interface yang tidak sesuai dengan model yang telah dibuat maka bisa dilanjutkan kembali ke tahapan analisis dan modeling.
Siklus pengembangan user interface
Setelah dibahasa sedikit tentang siklus dari pengembangan UI, selanjutnya adalah bagaimana cara mengembangakan sebauh wireframe/blueprint dari UI. Dimana ada beberapa jenis dan tools dalam mengembangkan wireframe user interface.
Contoh blueprint/wireframe dari UI
Tools atau Media
Merupakan sebauh media yang bisa digunakan dalam mengembangakan sebuah user interface, dan ada beberapa tools yang bisa digunakan oleh desainer UI diantaranya.
Sketching
Merupakan sebuah model dalam mendesain sebuah interface dengan memanfaatkan media coretan tangan seperti kertas, pensil, pensil warna, bolpen warna atau bolpen. Dan hasil yang didapatkan berupa gambaran dari sebuah interface dalam bentuk coretan tangan.
Penggunaan media sketching
Paper Cut-out
Sebuah model yang menerapkan konsep ketas yang dipotong – potong dan kemudian memodelkannya dalam sebauh gambaran interface untuk menjelaskan jalannya sebauh software yang digambarkan dari gabungan potongan-potongan kertas yang dibuat. Sebagai contoh adalah paper cut-out tentang dropbox sebagai berikut :
Video dropbox paper cut-out
Stenciling / UXPin paper
Model pembuatan UI ini didasarkan pada komponen-komponen yang disediakan pada WEB-KIT atau MOBILE-KIT berdasarkan template yang tersedia dan kemudian menyusunnya menjadi sebuah interface dari sebuah aplikasi yang dibuat untuk selanjutnya digunakan untuk mendemokan tampilan dari aplikasi .
Stenciling atau UXPin Paper dalam pengembangan UI
Wireframe Software
Pembuatan UI ini memanfaatkan media software sebagai sarana mendemonstrasikan sebauh UI yang akan dibuat, banyak software yang bisa digunakan oleh para desainer untuk menerapkan interface yang mereka buat seperti phostshop, corel draw, gimp dll.
Software untuk pengembangan wireframe
Presentation Software
Selain software pengolahan gambar proses pembuatan wireframe juga bisa menggunakan media lain seperti software presentasi seperti microsoft power point untuk Windows, keynote untuk MAC, dan libra office untuk LINUX. Dan media tersebut bisa digunakan dalam membantuk blueprint seperti berikut :
Blueprint dari tampilan awal sebuah website dengan software presentasi
Graphic Design software
Media ini bisa digunakan untuk membuat interface atau demo sebuah UI dengan memanfaatkan sebuah software yang memang dirancang khusus untuk digunakan dalam pengembangan wireframe dari UI sebauh aplikasi. Dimana selain komponen-kompenen utama seperti input, button, text, dropdown dan lain-lian telah disediakan juga terdapat even-even yang telah disiapkan oleh aplikasi ini ketika sebuah fungsi dijalankan. Seperti jika tombol ditekan akan mengarah ke proses berikutnya ataupun jika salah input akan memunculkan sebuah even gagal. Adapun software yang bisa digunakan seperti proto.io dan axure untuk membuat konsep UI dalam bentuk wireframe.
