UI designer, kini menjadi kata yang sering kita dengar didunia kerja saat ini. Tentunya kita sering mendengar istilah UI yang biasa berpasangan dengan UX, yaitu UI/UX Designer.
Biasanya apabila sebuah team dalam skala besar, dua posisi ini UI/UX akan dipisahkan. Tetapi apabila team masih dalam skala kecil UI/UX akan dijadikan menjadi satu, tetapi itu kembali ke team untuk posisi tersebut. Namun disini saya ingin lebih memfokuskan untuk membahas UI designer.
Sebelum adanya posisi UI Designer, banyak orang lebih sering mengenal istilah Graphic Designer ataupun Web Designer. Graphic Designer merupakan bidang pekerjaan design yang menghasilkan output berupa cetak, antara lain kartu nama, banner, flyer dan lainnya.
Sedangkan Web Designer merupakan pekerjaan dibidang pengembangan website, seseorang yang mendesign, mentransformasikan ide kedalam bentuk website. Baik dari segi layout, sampai tampilan antar muka.
Seiring kebutuhan dan perkembangan dari sisi teknologi saat ini, bidang kerja Web Designer “dipecah” menjadi lebih spesifik. Sebelumnya seorang Web Designer membuat design dalam tampilan mockup dan menterjemahkan dalam bentuk kode menjadi sebuah tampilan sebuah website (slicing).
Saat ini seorang designer yang membuat design, dalam bentuk sketsa, wireframe atau design tampilan website/app pada smartphone/tablet disebut sebagai UI Designer. Sedangkan untuk yang melakukan slicing dalam format html kini lebih populer disebut sebagai seorang Front End Developer.
Namun tidak hanya melakukan slicing ke dalam bentuk html saja. Seorang Front End Developer juga memastikan fungsi berjalan dengan menggunakan javascript maupun css modern.
Kembali ke UI Designer, seorang UI Designer kini lebih memfokuskan dirinya dalam pekerjaan seputar design tampilan layout dimulai dari sketsa coretan pada kertas, wireframe dan design tampilan sebenarnya.
Flow Kerja UI Designer
Pada tahap awal, designer bisa mendapatkan informasi mengenai kebutuhan untuk dibuatkan sebuah website/app dari klien. Dimulai menuliskan kebutuhan yang diinginkan oleh klien, dibuat dalam bentuk list kebutuhan tersebut atau langsung dimuat dalam bentuk sketsa/coretan.
Tahapan berikutnya mulai diterjemahkan informasi dari klien kedalam bentuk wireframe, wireframe ini berupa gambaran layout yang akan dijadikan sebuah website/app. Untuk tools yang digunakan, seorang UI Designer bisa menggunakan Axure, Balsamiq atau tools lain yang khusus untuk membuat wireframe. Pentingnya seorang UI Designer membuat wireframe, apabila terjadi perubahan maka effort yang dihasilkan tidak terlalu besar dibandingkan jika sudah dalam bentuk mockup design. Biasanya pada tahapan wireframe ini yang harus dimaksimalkan untuk mendapatkan approval bentuk layout yang diinginkan.
Jika tahapan wireframe sudah mendapatkan approval, masuk ke langkah selanjutnya yaitu pembuatan mockup design yang sesungguhnya. mockup design yang dibuat berdasarkan wirefame akan memudahkan seorang UI Designer menerjemahkan bentuk layout menjadi mockup design yang sudah diberi warna, gambar, font yang dipilih, ornamen sehingga design menjadi sebuah mockup yang nantinya akan dibuat kedalam bentuk tampilan website/app. Biasanya apabila mockup tersebut sudah sesuai dengan wireframe yang telah disetujui, perubahan/revisi dari klien diharapkan tidak banyak alias minor.
Sedangkan untuk tools yang digunakan, dalam tahapan membuat mockup dapat menggunakan tools yang sudah umum digunakan, yaitu Adobe Photoshop. Photoshop dianggap paling sesuai untuk membuat design tampilan website. Karena untuk ukuran dimensi, resolusi, format gambar yang dihasilkan dapat disesuaikan dengan kebutuhan membuat sebuah website/app. Illustrator juga digunakan apabila memerlukan gambar dalam bentuk vektor. Sedangkan apabila ingin lebih menggunakan tools yang lebih spesifik untuk membuat layout design website/app, designer dapat menggunakan tools Sketch.
Protoyping
Tahapan terakhir, ada baiknya tahapan prototyping dibuatkan, agar klien bisa mendapatkan “feel” yang diinginkan, seperti interaksi pada website tersebut. Untuk prototyping, dapat menggunakan Marvel, Invision, fitur mirror pada tools sketch. Pada tools prototyping online (Marvel, Invision), UI Designer dapat berinteraksi dengan klien. Klien dapat memberi coretan/tulisan sebagai catatan pada prototyping yang sudah dibuat.
Bila tahapan tersebut sudah terlewati dan mendapatkan approval, mockup design selanjutnya akan diserahkan kepada Front End Developer untuk dilakukan slicing. Sekedar catatan, seorang UI Designer ada baiknya juga memahami coding Front End minimal html/css. Sehingga memahami batasan – batasan yang dapat diterjemahkan ke dalam bentuk website/app, selain itu agar design yang telah dibuat dapat diimplementasikan sehingga tidak sia – sia.
