Berlatih Menjadi UX Designer
Metodologi yang Saya Pakai dalam Merancang UI/UX
Proses Perancangan UI/UX :
- Riset.
- Analisis riset yang menghasilkan strategi.
- Proses desain, saya bagi menjadi: a) Wireframe, b) Mock-up, c) Prototype.
- Menguji desain, hasil pengujian dianalisis untuk dijadikan peningkatan desain berikutnya.
Kali ini saya fokus membahas poin ke-3, yaitu bagaimana cara saya dalam merancang desain tampilan, meliputi (Wireframe, Mockup, Prototype) dan software yang digunakan untuk membuatnya. Berikut pengertian dari ketiga langkah tersebut :
- Wireframe : adalah tahap sketsa (low-fidelity) contohnya seperti gambar diatas, merupakan tahap konseptualisasi desain. Gunakan kertas dan pensil terlebih dahulu, kemudian berpindah ke software Balsamiq agar lebih rapih untuk dipresentasikan ke klien, atau kalau sudah terbiasa langsung gunakan Balsamiq. Pada level ini kita menggunakan software untuk mendesain tata letak dan interaksi antar komponen.
- Mockup : adalah tahap menjadikan wireframe menjadi bentuk yang lebih sempurna, tahap dimana sudah terdapat warna, gambar, teks, dan elemen-elemen lain. Atau istilah lainnya adalah penerapan visual desain kedalam wireframe dengan menerapkan prinsip-prinsip desain. Software yang akan digunakan adalah Figma. Pada level ini kita menggunakan software untuk mendesain tampilan berdasarkan strategi desain.
- Prototype : adalah tahap selanjutnya setelah kita merancang mockup. Pada tahap prototype, desain sudah bisa dilakukan uji coba/ sudah bisa di-klik. Tujuan penting lainnya yaitu untuk memuat informasi yang mempermudah klien/ pengembang perangkat lunak untuk memahami alur aplikasi/website. Software yang digunakan adalah Overflow. Pada level ini kita menggunakan software untuk menjelaskan suatu alur kerja/ work flow.
Kadang desainer berhenti pada tahap mockup dan desain langsung dikirim kepada pengembang/ klien. Namun semakin jelas kita mempresentasikan hasil desain kita, maka tingkat kesalahan tentunya akan semakin rendah. Kalau saya pribadi, saya akan mengenakan tarif tambahan jika klien meminta desain pada tahap prototype, apalagi dengan animasi yang komples, tentunya waktu dan biaya juga bertambah.
Oke, jadi terdapat TIGA tahap dengan TIGA software. Ketiga tampilan software seperti ini :
1. Tahap Wireframing = Menggunakan Balsamiq
2. Tahap Mockup = Menggunakan Figma
3. Tahap Prototype = Menggunakan Overflow
Nah setelah ini…mari kita coba praktik dengan menggunakan ke-tiga software tersebut untuk merancang ulang tampilan sebuah website atau aplikasi. Kali ini saya merancang ulang website Amazon Web Service (AWS). Alasannya adalah karena saya ingin membuat kesan AWS menjadi lebih bergaya Futuristic-High Tech, State-of-the Art.
Sebelumnya mari kita bahas apasih AWS itu?
AWS adalah sekumpulan layanan-layanan berbasis cloud computing yang disediakan oleh Amazon. Layanan ini saling terintegrasi dan mudah dikustomisasi, layanan AWS disebut sebagai Infrastructure as a Service (IaaS).
Arsitektur informasi pada website AWS terbilang cukup rumit. Fitur yang terdapat pada website juga sangat kompleks, maka saya malas untuk melakukan analisis, toh bukan kapasitas saya. Kita hanya akan mengganti tema tampilan tanpa mengubah susunan layout dari website yang akan kita redesign. Namun secara sederhana terdapat header, isi, dan footer. Pada bagian body, dibagi menjadi tujuh section. Pada bagian akhir saat kita berlatih menggunakan Overflow, kita akan mengambil alur saat pengguna login, tujuannya karena kita akan praktik dengan Overflow maka membutuhkan sebuah flow kerja dari user.
Jika anda ingin belajar lebih jauh tentang UX design dan segala kerumitannya lebih lanjut anda bisa mengunjungi website Interaction Design Foundation atau Nielsen Norman Group (situs yang biasa saya kunjungi). Atau rekomendasi dari buku? Saya merekomendasikan anda untuk membaca A Project Guide to UX Design, by Russ Unger and Carolyn Chandler.
Do-It !
Nah kita telah sampai di inti dari pembahasan, yaitu mulai praktik. Tujuan kali ini yaitu menghasilkan tampilan dengan tema baru serta membiasakan diri dengan menggunakan software-software yang telah kita ketahui bersama. Anda bisa melakukan screen capture website yang lain untuk latihan.
1. Membuat Wireframe Website AWS dengan menggunakan Balsamiq
Proses pembuatan wireframe ini bertujuan untuk mengetahui tata letak komponen-komponen, bentuk komponen, fungsi komponen, karakteristik komponen, konten-konten yang harus disediakan, dan interaksi antar komponen sekaligus antar halaman. Kali ini saya tidak membuat versi lengkap per-halaman web karena banyak sekali. Saya hanya mengambil halaman utama saja. Perancangan wireframe ini kita dapat dari hasil riset dari segi bisnis juga dari segi pengguna. Ini tugas utama dari seorang UX Desgner. Pada tahap ini biasanya fokus pada fitur yang penting dimana tugas-tugas pengguna yang lazim biasanya adalah mendaftar sebagai pengguna baru, autentifikasi, mencari produk/tugas tertentu, dan tugas-tugas lain sesuai dengan tujuan pembuatan sistem yang berbentuk web/aplikasi.
Nah berikut ini adalah hasil latihan saya menggunakan software Balsamiq untuk membuat wireframe tampilan utama pada website AWS (tampilan website asli ada di atas) :
Mudah-mudahan rekan-rekan juga sudah praktik…Jika belum, saya sarankan untuk praktik terlebih dahulu menggunakan Balsamiq. Silahkan cari di Google untuk mendownload software Balsamiq beserta software lainnya.
Untuk latihan, anda bisa mengakses Balsamiq selama 14 hari secara gratis. Ingat, tujuan kita disini untuk berlatih menggunakan fitur-fitur yang ada pada Balsamiq. Sedikit informasi, Balsamiq menyediakan komponen-komponen UI yang siap untuk digunakan, mempemudah kita dalam membuat interaksi antar komponen di suatu halaman.
Oke…sekarang mari kita lanjutkan menggunakan software yang kedua… Figma!
2. Membuat Mockup Website AWS dengan menggunakan Figma
Kita asumsikan anda sekarang sudah mempunyai wireframe beratus-ratus halaman dan klien sudah menyetujui desain wireframe tersebut. Sekarang bagaimana ?
Saya jelaskan lebih dahulu ROLE atau PERAN yang biasanya dibutuhkan dalam suatu proyek UX. Apa saja ?
- Information Architect
- Interaction Designer
- User Researcher
- Brand Strategist
- Business Analyst
- Content Strategist
- Copywriter
- Visual Designer
- Front-End Developer
- Dll
Ternyata dalam suatu proyek UX cukup banyak peran yang dibutuhkan, namun peran-peran tersebut dapat di-overlap menyesuaikan dengan kondisi yang ada. Telah saya ungkapkan bahwa proses perancangan desain UI/UX pada tahap pertama adalah melakukan riset. Peran yang dibutuhkan tentu User Researcher yang bertugas mengumpulkan informasi tentang pengguna, mungkin dibantu dengan Brand Strategist dan Business Analyst. Dan jika sumber daya terbatas, Brand Strategist atau Business Analyst-lah yang melakukan riset pengguna, begitu pula pada tahap-tahap selanjutnya . Intinya adalah ada orang yang berperan melakukan tugas tersebut.
Oke jadi kita sudah setuju bahwa ada proses yang harus ditempuh sebelum masuk ketahap pembuatan desain mockup. Dan siapakah yang melakukan perkejaan untuk tahap desain ? ialah Visual Desainer. Visual desainer berperan pada apa yang terlihat dan apa yang dapat dirasakan dari suatu desain. Yang mana hal ini mempengaruhi pengalaman emosional pengguna dengan brand.
Sekarang mari memposisikan diri sebagai Visual Desianer dan kita akan praktik menggunakan Figma. sudah siap ?
Eits….hampir lupa… pada bagian awal telah saya sampaikan bahwa saya ingin menjadikan tampilan website AWS memiliki look and feel yang Futuristic-High Tech, State-of-the Art. Anda-pun pasti punya maksud kenapa anda merancang-ulang desain yang anda ambil bukan? Nah… proses yang saya lakukan saya bagi menjadi 1) Mencari Inspirasi/riset, 2) Membuat Moodboard, 3) Membuat Mockup. Nah langsung saja kita masuk pada bagian pertama :
- Mencari Inspirasi/ riset
Inspirasi bisa datang dari mana saja… lewat pengamatan, buku, internet, musik, film dll. Desainer dituntut untuk peka dan selalu mengamati tren serta perubahan zaman dalam rangka menemukan gaya pribadi yang unik namun sesuai dengan kepribadian sang desainer. Inspirasi yang saya ambil untuk memunculkan kesan Futuristic-High Tech, State-of-the Art saya ambil dari film-film bertema masa depan seperti Ready Player One (2018) dan TRON (2010), serta dari musik seperti Daft Punk (retro-elektro) dan Pendulum (electro-hardcore).
Dari inspirasi-inspirasi tersebut, saya sari-kan gaya desain yang akan saya terapkan pada desain-desain saya sebagai berikut :
- Menggunakan warna-warna gelap
- Menggunakan gradient
- Menggunakan grid
- Menggunakan kontras yang tinggi
- Menggunakan huruf sans-serif
- Menggunakan cahaya berpendar
Dalam mendesain, juga terdapat istilah constraint atau hambatan. Contohnya adalah brand guide-lines yang dimiliki suatu perusahaan, biasanya mengatur warna dan jenis huruf yang digunakan, maka kita harus mengikuti aturan tersebut. Kita juga perlu mengetahui branding yang coba dibentuk oleh perusahaan. Kesan apa yang ingin dibentuk sebagai pembeda dengan kompetitor.
Nah telah kita dapatkan penjelasan tentang bagaimana mendapatkan inspirasi dari sumber-sumber disekitar kita. Kita juga telah memahami ternyata terdapat hambatan yang ada pada proses desain. Hal ini harus kita jadikan pegangan dalam mendesain. Oke kita masuk ke tahap selanjutnya yaitu membuat moodboard.
2. Membuat Moodboard
Saya akan jelaskan apa itu moodboard, mengapa moodboard itu penting, baru kemudian membuat moodboard dengan menggunakan Figma.
Apa itu moodboard ? Moodboard adalah kumpulan gambar, tulisan, atau contoh objek dalam suatu komposisi.
Apa kegunaan moodboard ? Moodboard digunakan untuk mengkomunikasikan ide, kesan dan citra yang tampil agar dipahami oleh klien dan seluruh tim.
Mengapa moodboard itu penting ? Menyelaraskan seluruh tim dengan ide, kesan dan citra yang ingin dibentuk. Moodboard mempertimbangkan profil pengguna. Jika profil sudah ditetapkan maka akan memberikan kejelasan pada suatu proses desain. Juga dapat menyelaraskan kebutuhan dan keinginan klien.
Sebenarnya pada bagian mencari inspirasi, kita sudah melakukan pencarian untuk membuat moodboard, namun moodboard perlu kita desain secara rapi karena untuk kita presentasikan. Bagaimana membuat moodboard dengan menggunakan Figma ? Caranya mudah, kumpulkan gambar-gambar yang ada di internet dalam satu kanvas dengan profil yang sudah ditetapkan. Oke mari kita buka Google dan Figma !
Moodboard dapat dibuat lebih detail sesuai dengan kebutuhan, versi detail-nya tidak saya sampaikan disini karena perlu eksploarsi dan pengalaman nyata untuk memprofil pengguna.
Moodboard ini digunakan sebagai panduan kita dalam merancang desain sesuai dengan persona yang telah ditetapkan. Disini terdapat nilai-nilai yang dimiliki oleh target seperti kemapanan, kecepatan, kekokohan, dan kecanggihan. Setelah persona selesai dibuat dan klien sudah setuju dengan gambaran grand design yang akan kita buat, sekarang waktu-nya kita memvisualkan wireframe menjadi mockup.
3. Membuat Mockup
Nah perlu saya sampaikan proses perancangan desain kali ini saya juga agak sedikit bingung tentang mana yang lebih dulu untuk dikerjakan. Apakah membuat design system dulu baru dibuat mockup atau sebaliknya.
Kemungkinan sih ya…harusnya kita membuat design systemnya dulu. Jika kita langsung membuat mockup, kita akan mengalami pemborosan waktu dan tenaga. Contohnya, mendesain komponen yang sama secara berulang-ulang. Dan jika pengertian design system kita perluas lagi, maka design system memiliki pengertian sebagai suatu dokumentasi yang mengatur tentang kaidah desain dan filosofi yang diterapkan dalam suatu organisasi dalam menjalankan aktivitasnya. Sehingga hampir mirip dengan istilah brand bluprint dalam dunia branding. Perusahaan-perusahaan besar dibidang teknologi telah membuat design system, contohnya Material Design System milik Google, atau Apple Human Interface Guidelines milik Apple. Design system dalam perancangannya membutuhkan sumber daya yang besar dan penelitian yang mendalam.
Karena kasus kita kali ini adalah berlatih menggunakan software, maka tidak masalah jika kita langsung membuat mockup. Namun ketika dalam proyek nyata, idealnya untuk mengikuti setiap prosedur yang dibuat. Saya merekomendasikan kepada pembaca untuk memahami lebih lanjut tentang topik ini karena menurut saya penting. Silahkan mengunjungi halaman ini https://designerup.co/blog/10-best-design-systems-and-how-to-learn-and-steal-from-them/.
Nah, sekarang saya telah selesai mendesain tampilan website AWS di Figma. Hasilnya adalah sebagai berikut :
Analisis komparasi desain antara desain sebelum dan sesudah dapat dilakukan dengan menggunakan tabel SWOT mengenai visual desain (prinsip desain). Topik ini sudah saya bahas di artikel saya mengenai cara meningkatkan kualitas visual desain, yang bisa anda baca disini.
Nah…. untuk tahap selanjutnya yaitu tahap prototyping dengan menggunakan software Overflow saya potong dan saya buat postingan baru karena postingan ini sudah terlalu panjang dan pembahasannya lumayan banyak juga. Oke… terimakasih karena sudah membaca tulisan ini sampai akhir…mudah-mudahan dapat memberi manfaat walau sedikit.
