mk kapita selekta | 13 Maret 2020

Speaker: Deska Setiawan Yusra

Summarized by: Dyah Retno Palupi

Title: Konsep Dasar UI/UX

Pengertian

UI/UX merupakan pekerjaan yang pertimbangannya diutamakan karena berkaitan dengan produk yang akan dibuat. Pengertian UX sendiri ialah, sebuah pengalaman seseorang dalam menggunakan atau berinteraksi dengan sebuah produk ataupun jasa. UX sendiri dibuat dengan mengedepankan metode logic, berfokus pada arsitektur, konten dan elemen dari sebuah informasi. Sedangkan UI, merupakan bagian visual dari sebuah produk aplikasi digital yang menyangkut bagaimana sebuah informasi dapat ditampilkan. UI berfokus pada bagian kreatif visual dan bagaimana cara menampilkan sebuah informasi yang ada. Jika digabungkan keduanya, UI/UX merupakan sebuah proses membuat desain visual dari sebuah produk yang dapat memberikan sebuah pengalaman pada penggunanya.

Cara Desain UI/UX

Harus diawali oleh UX. Secara garis besar sumbernya berasal dari research tentang user. Misalnya seorang client ingin dibuatkan rumah, kita tanya dulu mau rumah yang seperti apa, kebutuhannya apa saja. Selanjutnya dibikin wireframes yang kemudian diolah menjadi UI. Wireframes sendiri merupakan kerangka dasar dari sebuah produk digital yang menampilkan arsitektur dan elemen-elemen informasi berdasarkan konsep yang ada. Manfaat dari menggunakan wireframes yaitu semua tahap dari awall sampai akhir jelas. Ketika proses pembuatan wireframes kita tidak perlu memikirkan dari sisi UI, yang mana akan mengehemat waktu step-by-step. Dapat berfokus pada struktur fungsi dan tujuan awal.

Dasar Visual Desain UI/UX

- wireframes

- mockup 

Fundamental UI/UX

1. Layout: dimana kita menataletakkan komponen yang ada pada desain, mudah ditebak, teratur; dalam artian konten sesuai, enak dilihat, mudah dinavigasi, lalu konsisten; jangan sampai posisi button berbeda-beda, page 1 di atas, page 2 di bawah. 
2. Color: harus tau penempatan warna yang tepat. Warna juga merepresentasikan sebuah brand. Dari segi pewarnaan ini juga dapat mendekatkan dengan nilai psikologis, misal warna merah merupakan warning dan hijau merupakan success.
3. Icon: akses yang tidak menggunakan kata-kata. Bagaimana caranya membuat user secara tidak langsung sudah mengerti fungsi icon tersebut apa dengan hanya sekadar dari melihat gambarnya saja. Contohnya icon keranjang pada online shop.
4. Font/typography: dapat menentukan font mana yang harus lebih ditonjolkan. Contohnya font pada caption instagram lebih tipis, sedangkan font likesnya lebih tebal.

"Design is not just what it looks like and feels like. Design is how it works." -Steve Jobs

QNA

1. Untuk newbie, platform yang digunakan pakai apa? Pulpen dan kertas. Karena pakai tools apapun kalau gak tau basicnya gak akan berguna. Belajar peletakkan dulu. Semua ada prosesnya jadi gak bisa instan, perlu development, mindset dan skills.
2. Hubungan product manager dengan UI/UX? Product manager merupakan orang yang mencakup semuanya, dari sisi UI, engineer dan bisnis.
3. UI/UX termasuk ke dalam tim front-end, back-end atau QA? Bukan semuanya. Karena selalu dimulai dari UI/UX. Dari sisi UI/UX ketika sudah firm dilempar ke engineer baru ke QA. QA merupakan orang yang memastikan tes produknya sesuai dengan plan PM. Terlepas dari itu semua, UI/UX lebih sering berinteraksi dengan front-end untuk developnya.
4. Prioritaskan UI atau UX dulu? Sudah pasti UX. UI sebagus apapun kalau UXnya buruk gak akan terpakai. Tanamkan mindset: sering ngobrol sama orang untuk research; seperti apa yang disuka.