Step by Step Menyusun Kerangka Website Keren

Pemberian materi pertama oleh mas tri bener-bener keren. Aku yang selama ini gak terlalu paham tiap disalahkan, akhirya sedikit mengerti. (Inget baru sedikit). Kami belajar mengenai desain UI/UX dan bagaimana membentuk desain yang bagus. Berhubung aku pengen mendalami desain web jadi yang belajar UI/UX desain web deh. 

Dalam menyusun sebuah mockup website yang harus diperhatiin. Mockup menurutku sih  bentuk rancangan awal tanpa source sebuah website. Mockup digunakan supaya mempermudah pihak frond end untuk membentuk web. Langkah langkah membentuk mockup sendiri seperti di bawah ini.

1.       Informasi singkat tentang website yang akan di bangun.  

Kenapa harus mengetahui informasi? Bayangkan kita mau rekreasi ke bali, kemudian kita tidak mengetahui informasi sedikipun tentang pariwisata disana. Bisa bisa pantai terkenal “sanur” kita lewatkan begitu saja. Informasi sangat penting sebagai data awal dalam membangun website. Contohnya website tersebut akan di gunakan di bidang apa ? website competitor dari produk yang akan di pasarkan  (jika web tersebut tentang promosi produk)? Dan lain lain

2.       Idea.

Idea (^_^) ???  Pada bagian ini seorang desainer harus mengetaui informasi yang tentang website yang dibagun. Baru kemudian mencari thema yang cocok untuk style website apa? Entah itu flat design atau desain metro. Kita telah mengetahui bahan-bahan apa yang akan dimasukkan dalam website. Font yang cocok itu apa ? Warna yang cocok itu warna apa ? sama satu lagi ketika kita makek desain itu pihak front end bisa gak mengimplementasikan jangan asal aja.

Pada bagian idea ini semua benar benar difikirkan sebelum memasukki bagian Quick sketch.

3.       Quick sketch

Idea sudah ada, jadi lanjut ke quick sketch. Yaitu melakukan skretsa titip tipis. Biasa sih ada yang menggmenggunakan software. Tapi mas tri sendiri masih menggunakan cara manual. Alias kertas + pesnsil. Ini nih contonya

Gambar Quick sketch

4.       Mood board

Gimana ya penjelasannya. Kalau bagian mood board ini kita bikin desain sesuai ide yang sudah di dapat hanya saja data datanya masih main copas dari website lain. Gini dah, contohnya  kita kan pengen bangun website tentang fotography dengan gaya metro design. Nah kita bisa lihat contoh contoh gaya metro design dan kita susun sesuai dengan skect yang sudah kita buat awalnya.

Contoh mood board

Disini ada design soapy joe’s tinggal di implementasikan  pada taham sketch tadi.

5.       Style tiles

Pada bagian inilah  kita baru menyentuh namanya perangkat lunak editor citra. Atau software yang biasa kita sebut photoshop. Oke, disini sudah terbentuk 50% dari desain keseluruhan. Maksudnya bukan keseluruhan pekerjaan tapi hanya reng rengan (Bahasa lain dari kerangka) dari website yang akan di bangun. Kalau pihak pemesan setuju baru deh langkah terakhir bikin mockup nya.

Kenapa harus ada style tile kok gak langsung mockup aja kan lebih simple melewati satu proses panjang. Nah alasannya jika kita bikin mockup bisa sampe 8-16 jam. Iya kalau si pemesan setuju kalau enggak. Ya bikin lagi. Kalau kita make style tile kan Cuma butuh 3-4 jam dan pembaharuannya cuma tinggal dikit aja.

  

Gambar style tile

6.       Mockup design

Dari serangkaian panjang tadi ini tahap yang terakhir bikin mockupnya disini dari font udah masuk, warna udah masuk, foto udah ada. Walaupun data data yang di gunakan masih dummy tapi di usahakan semirip mungkin dengan web yang akan di bangun oleh pihak front end. Contoh mockup yang sudah jadi kayak di bawah ini.

Oke that enough.

Ada beberapa tambahan yang sangat penting ketika melalukan design apapun kita harus memperbanyak referensi. Bebera referensi yang bisa di buka seperti.

1-       Awwwards.com

2-      Dribbble.com

3-      Behance.net

4-      Uxpin.com

-j-  Bisakomputer.com (ini bahasa indonesia). 

Sekian. Mungkin ada beberapa kesalahan ketika menulis ini. Mohon koreksinya di kolom komentar.