MODUL 01 - PENDAHULUAN

UI atau User Interface dan UX atau User eXperience adalah istilah yang baru muncul setelah aplikasi gencar dikembangkan dalam format Smartphone dengan basis Sistem Operasi Android maupun iOS. Proses perancangan aplikasi yang semakin hari semakin rumit memaksa kita untuk memisahkan bagian desain dengan bagian programming. Perkembangan peralatan yang harus menggunakan antarmuka juga semakin memperlebar jurang antara desain dengan programming tersebut.

Maka, muncullah istilah User Interface dan User eXperience yang kemudian menjadi satu kesatuan dengan istilah populer UI/UX Design. Meskipun sebenarnya kedua istilah tersebut menimbulkan makna yang ambigu, sehingga membuat banyak orang bertanya-tanya tentang apa yang membedakan antara UI (User Interface) dan UX (User eXperience). Berikut ini gambaran umum mengenai kedua istilah tersebut.

Apa yang dimaksud dengan User Interface?

User Interface adalah antar muka yang dirancang untuk digunakan oleh user agar user dapat memanfaatkan aplikasi. Jadi, UI atau User Interface lebih bersifat teknis yakni tentang bagaimana sebuah aplikasi ditampilkan ke dalam bentuk antarmuka yang dapat dilihat oleh user. Tidak perduli apakah penggunanya akan merasa nyaman dengan tampilan yang dibuat atau merasa tidak nyaman. Bukan itu yang menjadi tujuan User Interface. Yang penting pengguna aplikasi dapat menggunakan aplikasi melalui antarmuka yang disediakan oleh pengembang software.

Bagaimana User Interface ini secara sederhana dapat menjembatani aplikasi dengan penggunanya bisa kita lihat dari contoh mesin ATM. Ketika kita menggunakan mesin ATM, maka kita akan disuguhkan dengan User Interface sederhana, namun dengan antarmuka tersebut kita dapat berinteraksi dengan mesin ATM untuk mengambil uang, transfer ke rekening lain, melakukan pembayaran uang kuliah, membayar pesanan toko online, dan sebagainya. Pendeknya, User Interface adalah antarmuka pada aplikasi sebagai alat bantu bagi user agar dapat menggunakan aplikasi.

Apa yang dimaksud dengan User eXperience?

User eXperience secara harfiah dapat diterjemahkan sebagai “Pengalaman User”. Mungkin istilah ini sedikit rancu, namun yang ingin disampaikan dengan istilah ini adalah mengenai bagaimana user berinteraksi dengan aplikasi sehingga user berhasil mencapai tujuan yang ingin dilakukannya dengan perantaraan aplikasi tersebut. Adapun yang dilakukannya bisa berbeda-beda tergantung pada apa yang ingin dicapai oleh user tersebut.

Pada contoh mesin ATM tadi, user bisa saja melakukan sesuatu yang pilihannya telah disediakan oleh ATM. Contohnya: user menarik sejumlah uang, user melakukan transfer ke nomor rekening lain, user melakukan pembayaran tertentu, dan lain-lain. 

Pada prakteknya, tidak semua kegiatan tersebut dilakukan dengan menggunakan antarmuka pada ATM, namun semua kegiatan “dieksekusi” dengan menggunakan antarmuka ATM. Contohnya, membayar orderan toko online atau membayar uang kuliah menggunakan Virtual Account yang dibuat dengan menggunakan aplikasi di website.

Dengan demikian, istilah User Interface berbeda dengan User eXperience. User Interface adalah antarmuka yang disediakan oleh aplikasi, sedangkan User eXperience adalah langkah-langkah yang dilakukan oleh user untuk mencapai tujuannya dengan menggunakan aplikasi. 

MODUL 01 - MENGENAL UI / UX

UI atau User Interface dan UX atau User eXperience adalah istilah yang baru muncul setelah aplikasi gencar dikembangkan dalam format Smartphone dengan basis Sistem Operasi Android maupun iOS. Proses perancangan aplikasi yang semakin hari semakin rumit memaksa kita untuk memisahkan bagian desain dengan bagian programming. Perkembangan peralatan yang harus menggunakan antarmuka juga semakin memperlebar jurang antara desain dengan programming tersebut.

Maka, muncullah istilah User Interface dan User eXperience yang kemudian menjadi satu kesatuan dengan istilah populer UI/UX Design. Meskipun sebenarnya kedua istilah tersebut menimbulkan makna yang ambigu, sehingga membuat banyak orang bertanya-tanya tentang apa yang membedakan antara UI (User Interface) dan UX (User eXperience). Berikut ini gambaran umum mengenai kedua istilah tersebut.

Apa yang dimaksud dengan User Interface?

User Interface adalah antar muka yang dirancang untuk digunakan oleh user agar user dapat memanfaatkan aplikasi. Jadi, UI atau User Interface lebih bersifat teknis yakni tentang bagaimana sebuah aplikasi ditampilkan ke dalam bentuk antarmuka yang dapat dilihat oleh user. Tidak perduli apakah penggunanya akan merasa nyaman dengan tampilan yang dibuat atau merasa tidak nyaman. Bukan itu yang menjadi tujuan User Interface. Yang penting pengguna aplikasi dapat menggunakan aplikasi melalui antarmuka yang disediakan oleh pengembang software.

Bagaimana User Interface ini secara sederhana dapat menjembatani aplikasi dengan penggunanya bisa kita lihat dari contoh mesin ATM. Ketika kita menggunakan mesin ATM, maka kita akan disuguhkan dengan User Interface sederhana, namun dengan antarmuka tersebut kita dapat berinteraksi dengan mesin ATM untuk mengambil uang, transfer ke rekening lain, melakukan pembayaran uang kuliah, membayar pesanan toko online, dan sebagainya. Pendeknya, User Interface adalah antarmuka pada aplikasi sebagai alat bantu bagi user agar dapat menggunakan aplikasi.

Apa yang dimaksud dengan User eXperience?

User eXperience secara harfiah dapat diterjemahkan sebagai “Pengalaman User”. Mungkin istilah ini sedikit rancu, namun yang ingin disampaikan dengan istilah ini adalah mengenai bagaimana user berinteraksi dengan aplikasi sehingga user berhasil mencapai tujuan yang ingin dilakukannya dengan perantaraan aplikasi tersebut. Adapun yang dilakukannya bisa berbeda-beda tergantung pada apa yang ingin dicapai oleh user tersebut.

Pada contoh mesin ATM tadi, user bisa saja melakukan sesuatu yang pilihannya telah disediakan oleh ATM. Contohnya: user menarik sejumlah uang, user melakukan transfer ke nomor rekening lain, user melakukan pembayaran tertentu, dan lain-lain. 

Pada prakteknya, tidak semua kegiatan tersebut dilakukan dengan menggunakan antarmuka pada ATM, namun semua kegiatan “dieksekusi” dengan menggunakan antarmuka ATM. Contohnya, membayar orderan toko online atau membayar uang kuliah menggunakan Virtual Account yang dibuat dengan menggunakan aplikasi di website.

Dengan demikian, istilah User Interface berbeda dengan User eXperience. User Interface adalah antarmuka yang disediakan oleh aplikasi, sedangkan User eXperience adalah langkah-langkah yang dilakukan oleh user untuk mencapai tujuannya dengan menggunakan aplikasi. 

MODUL 02 - KONSEP DESAIN UI/UX

Setelah kita mengetahui istilah UI (User Interface) dan UX (User eXperience) serta perbedaan di antara keduanya, maka sekarang kita akan lanjutkan dengan pembahasan mengenai bagaimana cara membuat Desain UI/UX yang baik.

Sebelum masuk ke pokok permasalahan bagaimana cara mendesain UI/UX, akan lebih baik jika kita kembali mengulang tentang istilah UI dan UX tersebut.

User Interface adalah antarmuka atau tampilan visual dari sebuah produk yang dalam hal ini bisa berupa aplikasi, website, dan sebagainya, yang tujuannya untuk menjembatani atau menghubungkan aplikasi/sistem dengan pengguna/user. Dengan demikian, User Interface secara fisik adalah berupa tulisan, warna, bentuk, gambar, yang didesain sebaik mungkin agar tampilannya menjadi menarik.

User eXperience adalah proses atau fitur-fitur yang memudahkan pengguna dalam menggunakan aplikasi/sistem sehingga mengakibatkan munculnya persepsi, emosi dan respon yang baik terhadap aplikasi/sistem tersebut. Dengan demikian, aplikasi/sistem yang baik harus mudah diakses, cepat, memiliki navigasi menu yang mudah, dan konten yang jelas.

Apabila kita melihat dari sisi fisik, akan sulit untuk membedakan antara UI dan UX karena keduanya berada pada fisik yang sama. Akan tetapi, jika kita melihat dari sisi desain, proses perancangan, serta ruang lingkup desain, maka akan mudah untuk membedakan keduanya.

Seperti yang telah dibahas pada Modul sebelumnya, contoh yang paling mudah untuk membedakan UI dan UX dapat kita temukan pada desain interface mesin ATM. Sejak pertama kali diperkenalkan, hingga masa sekarang, desain interface mesin ATM tidak mengalami banyak perubahan berarti kecuali hanya fitur-fiturnya yang bertambah banyak seiring dengan semakin banyaknya jenis transaksi yang dapat dilayani melalui mesin ATM.

Salah satu hal yang menjadi alasan mengapa desain interface mesin ATM tidak dikembangkan adalah karena pengguna membutuhkan waktu pelayanan yang secepat mungkin. Dapat dibayangkan apabila interface ATM menggunakan gambar, foto, atau bahkan video, maka semuanya akan berakibat mesin ATM lambat bekerja karena membutuhkan waktu untuk mendownload media tersebut.

Bisa dibayangkan berapa panjang antrian yang diakibatkan oleh lambatnya mesin ATM tersebut sehingga akan banyak pengguna mesin ATM yang tidak merasa nyaman atau bahkan marah karena keterlambatan yang dialaminya.

MODUL 03 - Workflow Desain UI-UX

Pada bagian ini kita akan mengetahui cara kerja UI/UX dalam pembuatan produk seperti website atau aplikasi. Terdapat 9 tahap yang dilakukan untuk mendapatkan UI/UX yang baik.

1. Riset
2. Information Architecture
3. Wireframe
4. User Experience Flows
5. Prototype
6. Design System
7. User Interface
8. Pengembangan Produk
9. Design Usability Test

MODUL 04 - APLIKASI FIGMA

Figma adalah aplikasi desain berbasis cloud dan alat prototyping untuk proyek digital.

Figma dibuat untuk dapat membantu para penggunanya agar bisa berkolaborasi dalam proyek dan bekerja dalam bentuk tim sekaligus di mana saja. Meskipun alat ini sangat mirip dengan opsi prototyping lainnya seperti Sketch, Adobe XD dan lainnya, yang menjadi pembeda utamanya adalah kemampuan untuk bekerja dalam bentuk tim proyek.

Sampai saat ini meski mempunyai pesaing yang juga tidak kalah terkenalnya, Figma masih merupakan opsi paling cocok yang tersedia jika Anda bekerja dalam tim. Jadi tidak mengherankan jika Figma menjadi pilihan banyak orang. Mari mengenal apa itu Figma dan bagaimana alat ini mungkin bermanfaat untuk proyek dan alur kerja Anda.

Figma adalah editor grafis vektor dan alat prototyping dengan berbasis web serta fitur offline tambahan yang diaktifkan oleh aplikasi desktop untuk Mac OS dan Windows. Aplikasi pendamping Figma Mirror untuk Android dan iOS memungkinkan untuk melihat prototype Figma pada perangkat seluler. Rangkaian fitur Figma berfokus pada penggunaan dalam antarmuka pengguna dan desain pengalaman pengguna dengan penekanan pada kolaborasi waktu nyata (real- time).

Sederhananya, Figma adalah desain digital dan alat prototyping. Ini adalah aplikasi desain UI dan UX yang dapat Anda gunakan untuk membuat situs web, aplikasi, atau komponen antarmuka pengguna yang lebih kecil yang dapat diintegrasikan ke dalam proyek lain. Dengan alat berbasis vektor yang hidup di cloud, Figma memungkinkan para penggunanya untuk bekerja di mana saja dari browser. Cara ini termasuk alat zippy yang dibuat untuk desain, pembuatan prototipe, kolaborasi, dan sistem desain organisasi.

Alat atau tool yang sebanding dengan Figma adalah termasuk Sketch, Adobe XD, Invision, dan Framer. Juga seperti banyak tool lainnya, Figma didukung oleh komunitas desainer dan pengembang yang kuat yang berbagi plugin untuk meningkatkan fungsionalitas dan mempercepat alur kerja. Siapa pun dapat berkontribusi dan berbagi. Figma juga digunakan oleh beberapa merek besar termasuk Slack, Twitter, Zoom, Dropbox, dan Walgreens. Nama-nama itu saja menunjukkan bahwa alat ini cukup kuat untuk memberi daya pada hampir semua proyek.

MODUL 05 - Sistem Grid

Membuat desain interface pada masa sekarang bisa jadi sangat merepotkan. Bukan masalah cara membuatnya, melainkan karena terlalu banyak gawai (gadget) yang digunakan dengan standar dan ukuran layar yang berbeda-beda. Contohnya, ada layar desktop dengan ukuran yang berbeda-beda, ada layar tablet dengan ukuran yang berbeda-beda dan dengan 2 arah orientasi yang berbeda, ada smartphone dengan ukuran layar yang sangat beragam dengan 2 arah orientasi yang berbeda. 

Dengan banyaknya standar dan ukuran layar tersebut, pekerjaan desainer web tentu menjadi sebuah pekerjaan yang sangat sulit. Lalu bagaimana caranya agar kita bisa membuat desain yang bisa memenuhi semua gawai tersebut?

Solusinya, adalah dengan mengambil 3 jenis layar saja, yakni: desktop, tablet, dan smartphone. Dengan demikian, desainer dapat membuat 3 desain yang disesuaikan dengan 3 kebutuhan tersebut, bahkan tanpa harus memperhatikan ukuran layar pada ketiga jenis layar tersebut.

MODUL 07 - DESAIN LANDING PAGE

Figma telah mendapatkan reputasi sebagai alat yang intuitif dan mudah digunakan yang hanya memerlukan sedikit instruksi untuk membuat desain yang memukau. Alat ini telah menjadi alat yang paling populer bagi banyak desainer untuk memulai karier mereka.

Meskipun populer, banyak orang merasa takut untuk mulai mendesain dengan Figma atau merasa perlu pelatihan formal untuk menggunakannya secara efektif. 

Anda akan belajar membuat komponen yang berfungsi untuk menjaga konsistensi di seluruh proyek Anda. Anda juga akan dapat menambahkan Auto Layout untuk membuat tata letak responsif yang akan dapat menyesuaikan dengan perangkat atau layar apa pun, mengubah ukuran elemen dalam grup, menambahkan gambar secara masal, dan banyak lagi. Dengan berlatih menggunakan alat-alat dasar Figma dan mempelajari beberapa kiat dan trik yang berguna, Anda dapat dengan cepat membuat desain halaman karya sendiri.

MODUL 08 - Scrollable pada Figma 

Pada aplikasi Figma, desainer dapat melakukan pengaturan konfigurasi pengguliran pada frame untuk memastikan desain mereka dapat digulir dengan benar. Hal ini berlaku untuk frame pada layer paling tinggi di kanvas serta frame pada layer lapisan di bawahnya.

Untuk mengaktifkan pengguliran, frame harus berisi konten overflow yang melampaui batas frame. Jika konten dalam frame sesuai dengan batasnya, maka pengguliran reguler akan diterapkan karena tidak ada konten yang overflow.

Figma menyediakan tiga jenis overflow yang berbeda: pengguliran horizontal, pengguliran vertikal, dan gabungan keduanya. Opsi ini memungkinkan desainer untuk menentukan bagaimana konten overflow harus di-scroll ketika melampaui batas frame.

MODUL 09 - Membuat Carousel pada Figma

Carousel adalah konten visual yang menampilkan lebih dari satu gambar pada satu tempat. Biasanya, carousel terdiri dari 2-10 gambar dalam satu konten. Untuk melihat keseluruhan konten, kita dapat menggeser carousel tersebut. 

Carousel pada website atau aplikasi memiliki beberapa keuntungan, di antaranya: 

• Menarik perhatian: Carousel dapat menarik perhatian pengunjung karena tampilannya yang visual dan dinamis. 
• Menyampaikan banyak konten: Carousel memungkinkan desainer untuk menampilkan banyak konten dalam satu area tanpa membuat halaman terlihat terlalu padat. 
• Menyoroti informasi penting: Carousel dapat digunakan untuk menyoroti informasi penting bagi pengguna, seperti penawaran khusus atau detail kontak. 
• Mendorong konversi penjualan: Carousel dapat digunakan untuk mempromosikan penjualan atau produk baru. 
• Menampilkan portofolio: Carousel dapat digunakan untuk memamerkan hasil karya atau portofolio. 
• Menampilkan proses dan hasil pekerjaan: Carousel dapat digunakan untuk menunjukkan proses dan hasil pekerjaan, misalnya dengan foto "before-after" atau tutorial proyek.
• Menampilkan testimoni pelanggan: Carousel dapat digunakan untuk menampilkan testimoni pelanggan yang menunjukkan kredibilitas bisnis.

MODUL 10. - DESAIN APLIKASI DENGAN FIGMA 

MODUL 11 - Desain Menu Dengan Figma 

Jadwal Zoom: Hari Sabtu pkl. 13.00