Tutorial Awal Membuat Website

Pada tulisan ini saya akan bahas langkah awal membuat website. Sebelum sebuah aplikasi atau web dirilis, setidaknya akan melewati tiga tahap awal. Tahapan ini akan memberi waktu bagi anggota tim untuk melakukan pengujian tampilan, struktur dan fungsionalitas web.

Langkah Awal Membuat Website

Idealnya, langkah awal membuat website ini bertujuan untuk membenahi permasalahan yang muncul selagi permasalah tersebut masih kecil. Selain itu juga untuk memperbaiki desain untuk mengkomunikasikan pesan anda secara lebih jelas.

Akan tetapi tiap tahapan awal tersebut terkesan mirip dan kadang membingungkan satu sama lain. Pada tuisan ini akan kita bahas masing-masing tahapan awal tersebut. Tiga tahapan tersebut meliputi wireframes, mockups, dan prototype. Mari kita bahas satu persatu.

Mengenal Wireframe

Wireframe biasanya ditampilkan dalam bentuk kotak-kotak berwarna abu-abu dan merupakan blue print dasar dari tampilan web yang akan dibuat. Tujuan utamanya adalah untuk menunjukkan posisi dari tiap-tiap informasi yang akan muncul dihalaman web, tanpa memikirkan terlebih dahulu terkait estetika.

Wireframe yang bagus sebaiknya menerangkan tentang:

• bagaimana pengelompokan isi atau content
• bagaimana struktur informasinya
• dasar visual yang ditampilkan untuk interaksi dengan pengguna atau User Interaction (UI)

Contoh Wireframe (sumber:uxpin)

Tujuan dari wireframe adalah untuk memetakan secara konkrit bagi seluruh anggota tim terkait bagiamana website akan didesain. Tujuan utama wireframe adalah dokumentasi dan struktur desain, akan tetapi dapat juga ditunjukkan ke klien atau stakeholder untuk mendapatkan feedback karena perubahan yang muncul tidak akan susah untuk dilakukan.

Mengenal Mockups

Mockup memiliki ketelitian dengan range menengah hingga sangat detail dan juga menampilkan fungsionalitas web. Mockup memiliki detail visual seperti warna, typografi, dll. Dengan melihat mockup, anda dapat melihat gambaran bagaimana hasil akhir dari web yang akan dibuat. Sebuah mockup dapat dianggap sebagai draft desain visual.

Contoh Mockup (sumber: uxpin)

Wireframe meletakkan pondasi dasar sedangkan mockup memperkaya tampilan visual. Selain melengkapi wireframe dari sisi kebutuhan dokumentasi dan kemudahan mengorganisir tim, mockup memiliki kelebihan yakni lebih menarik secara visual bagi klien.

Secara tampilan, mockup lebih mendekati hasil akhir walaupun belum dilengkapi dengan fungsionalitas web. Bagian fungsionalitas ini akan ada pada tahap prototype.

Mengenal Protoype

Prototype merupakan bagian akhir dari ketiga fase awal dalam pembuatan website. Sebuah prototype sudah dilengkapi dengan fungsionalitas dan kualitas desain UI yang lebih baik. Selain melengkapi struktur informasi dan visualisasi dari dua tahap sebelumnya, prototype berisi interaksi dengan user yang memungkinkan pengguna untuk:

• mendapatkan pengalaman dengan content yang sebenarnya
• berinteraksi dengan UI layaknya produk jadi
• memprediksi dan menemukan solusi dari permasalahan sebelum dikembangkan lebih lanjut

Contoh Prototype (sumber: uxpin)

Secara umum dalam proses desain prototype, dibuat versi dasar dulu (low fidelity) yang kemudian dilanjutkan dengan prototype yang jauh lebih detail setelah terdapat beberapa perubahan. Sebuah prototype dengan kualitas high-fidelity seharusnya sudah sangat mendekati produk web yang akan dihasilkan.

Jangan Lupa kunjungi Situe ini ya kawan ["http://kangtanto.com"] 

Semoga Bermanfaat ....