1

Dasar Desain Antarmuka Pengguna dan

Membuat Purwarupa dengan Figma

KODE MODUL
20200927-1-2.0
Modul Praktikum Desain Antarmuka Pengguna
PENYUSUN Program Studi Pendidikan Teknologi Informasi
Retno Indah Rokhmawati, S.Pd., M.Pd. Jurusan Sistem Informasi
Hanifah Muslim Az-Zahra S.Sn., M.Ds Fakultas Ilmu Komputer
Kharis Alfian Universitas Brawijaya
Nabila Leksana Putri © 2020
 Tujuan dan Pedoman
Pelaksanaan praktikum ini bertujuan agar mahasiswa mampu:

• Memahami Teori Dasar Desain Antarmuka Pengguna

• Memahami Jalur Pembelajaran Desain Antarmuka Pengguna
• Memanfaatkan Perangkat Lunak Figma untuk Membuat Purwarupa

Pedoman pelaksanaan praktikum:

1. Awali setiap kegiatan dengan berdoa, agar mendapatkan ilmu yang bermanfaat serta
keberkahan dan kemudahan.
2. Pahami tujuan, pedoman, materi dan latihan dengan baik dan benar.
3. Kerjakan latihan dan studi kasus dengan jujur, sabar, ikhlas dan tekun.
4. Jangan menyalin kode secara langsung yang terdapat pada modul.
5. Bertanyalah kepada asisten atau dosen apabila terdapat hal yang kurang jelas.
6. Modul ini bukanlah satu – satunya sumber informasi dan pengetahuan.

Referensi
• Pressman, Roger S. Software engineering: a practitioner's approach. Palgrave
macmillan, 2005.

2
“The purpose of teaching is to inspire the desire for
learning in them and make them able to think,
understand, and question”

3
 Dasar Teori
Desain Antarmuka Pengguna

A. Mengenal Antarmuka Pengguna

Antarmuka Pengguna atau disebut dengan User Interface (UI) dapat diartikan menurut
definisi ISO 9241-210 sebagai segala komponen pada sistem interaktif (perangkat lunak
atau perangkat keras) yang menyediakan informasi dan kontrol dari pengguna untuk
mengerjakan sesuatu secara spesifik yang ada pada sistem interaktif tersebut, atau dengan
kata lain Antarmuka Pengguna merupakan penghubung antara pengguna dengan produk
untuk mengoperasikan fungsi dan fitur yang ada. Dalam mata kuliah dan praktikum ini,
Desain Antarmuka Pengguna atau User Interface Design merupakan proses rekayasa atau
pembuatan tampilan antarmuka untuk komputer, peralatan mesin, perangkat bergerak,
aplikasi perangkat lunak dan situs web yang bertujuan untuk memaksimalkan interaksi dan
pengalaman pengguna (user experience).
Secara konseptual, antarmuka pengguna merupakan bagian dari komputer dan
perangkat lunaknya yang dapat dilihat, didengar, disentuh atau dapat dilakukan interaksi
secara langsung maupun melalui proses tertentu, oleh karena itu antarmuka pengguna
menjadi komponen yang penting agar proses interaksi yang terjadi dapat berjalan dengan
sesuai. Antarmuka pengguna yang baik adalah antarmuka yang tidak disadari dan
memungkinkan pengguna untuk fokus pada informasi dan fungsi yang ada tanpa perlu
mengetahui mekanisme untuk menampilkan informasi dan melakukan fungsi tersebut.

4
B. Sejarah Antarmuka Pengguna
Sejarah antarmuka pada konteks antarmuka grafis pada komputer didasari oleh
kebutuhan manusia berinteraksi dengan komputer yang lebih mudah, sejarah awal
antarmuka grafis atau Graphic User Interface (GUI) dimulai pada 1970 oleh Xerox dengan
memperkenalkan tetikus, pointing dan selecting sebagai perangkat utama dalam
berinteraksi dengan komputer, dilanjutkan dengan 1983 oleh Apple dan Perusahaan
Teknologi lainnya dengan memperkaya konsep antarmuka dengan drag and drop dan
komponen lain. Hingga pada perkembangan terakhir saat ini semakin banyak variasi dan
pembaruan yang semakin cepat.

C. Prinsip Desain Antarmuka Pengguna

Untuk dapat membuat antarmuka pengguna yang baik, terdapat 17 prinsip desain
antarmuka pengguna berdasarkan General Principles of UI Design (Deborah J. Mayhew)
yang harus dipahami oleh perancang sistem agar mendapatkan hasil tampilan yang
maksimal:
1. User Compability
Penyesuaian tampilan antarmuka dengan karakteristik target pengguna.
2. Product Compability
Tampilan antarmuka harus sesuai dengan produk, sehingga dapat digunakan baik
oleh orang awam maupun ahli.
3. Task Compability
Fungsional dari tugas yang ada harus sesuai dengan tampilan.
4. Work Flow Compability
Dapat menjembatani berbagai macam tugas
5. Consistency
Konsisten dalam penerapan istilah dan komponen dalam tampilan antarmuka.
6. Familiarity
Penggunaan komponen yang umum untuk memudahkan pengguna dalam
menggunakan antarmuka.
7. Simplicity
Menyederhanakan tugas yang ada.
8. Direct Manipulation
Mempersingkat pengerjaan tugas.
9. Control
Memberikan kontrol sesuai dengan pengguna.
10. What You See Is What You Get
Desain tampilan antarmuka sesuai dengan konteks dan tugas yang dijalankan.
11. Flexibility
Fleksibel atau tidak terpaku dalam satu hal.
12. Responsiveness
Tampilan antarmuka menyediakan respon pada setiap interaksi yang dilakukan.
13. Invisible Technology

5
 Tampilan antarmuka membuat pengguna fokus pada pekerjaan dan tugasnya
14. Robustness
Tampilan antarmuka handal dan dapat mengakomodasi kesalahan pengguna.
15. Protection
Tampilan antarmuka dapat mencegah pengguna melakukan kesalahan
16. Ease of Learning
Mudah dipelajari oleh pengguna awam dan pengguna ahli.
17. Ease of Use
Mudah digunakan oleh pengguna dalam menyelesaikan tugasnya,
Sedangkan menurut Shneiderman, memberikan delapan aturan emas dalam
merancang sebuah antarmuka, yaitu:
1. Upayakan konsistensi
Konsistensi pada tampilan antarmuka, istilah dalam memberikan petunjuk, fungsi
dan menu yang ada.
2. Memungkinkan pengguna sering menggunakan pintasan
Semakin sering pengguna menggunakan sebuah sistem, maka akan ada keinginan
pengguna mengurangi jumlah langkah untuk meningkatkan laju interaksi, sehingga
singkatan dan fasilitas makro akan semakin dibutuhkan oleh pengguna ahli.
3. Menawarkan umpan balik informatif
Membuat tampilan antarmuka yang dapat memberikan umpan balik untuk setiap
tindakan pengguna.
4. Desain dialog untuk menghasilkan penutupan
Memberikan informasi tahapan pada tugas yang dikerjakan.
5. Memberikan penanganan kesalahan
Menyediakan informasi penanganan kesalahan.
6. Memungkinkan pembatalan aksi yang mudah
Menyediakan unit revisibilitas untuk memberikan informasi terhadap tindakan
yang dibatalkan.
7. Mendukung fokus kontrol internal
Memberikan akses kontrol yang sesuai dengan tugas pengguna.
8. Kurangi beban memori jangka pendek
Menyediakan tampilan yang mudah dilakukan semisal dengan ikon yang familier
dan dengan penyederhanaan tugas.

Pada umumnya, kesalahan dan masalah dalam pengembangan antarmuka

pengguna yang dijabarkan oleh Wilbert Galitz adalah lawan balik dari prinsip
dan guidelines diatas sehingga desain tampilan yang dibuat kurang maksimal.

6
D. Komponen Antarmuka Pengguna
Komponen utama antarmuka pengguna terdiri dari dua hal yaitu masukan (input) dan
keluaran (output) dikarenakan komponen ini berhubungan langsung pengguna dalam
menggunakan sebuah sistem.

E. Model Desain Antarmuka Pengguna

Dalam merancang sebuah antarmuka pengguna, terdapat empat model sebagai
landasan dan gambaran pengguna untuk berinteraksi terhadap antarmuka yang dibuat,
empat model tersebut adalah:
1. Model Pengguna
Menempatkan dan menggali kebutuhan pengguna dalam desain antarmuka, secara
luas pengguna dapat diklasifikasikan menjadi pengguna awam (novice user) dan
pengguna ahli (expert user) yang didasarkan pada pengetahuan dan pengalaman
pengguna. Kebanyakan desain antarmuka pengguna yang dibuat saat ini dirancang
untuk pengguna awam dan disesuaikan untuk pengguna ahli.
2. Model Desain
Merancang sebuah antarmuka berdasarkan perspektif perangkat lunak seperti
arsitektur dan representasi prosedural sistem.
3. Model Mental
Pembuatan antarmuka berfokus pada gambaran sistem yang ada pada benak para
pengguna akhir yang bergantung pada profil yang didapatkan pada analisis
pengguna.
4. Model Implementasi
Menggabungkan manifestasi yang tampak dari luar sistem berbasis komputer
digabung dengan informasi pendukung lainnya yang mendiskripsikan sintak dan
semantik antarmuka pengguna
Ketika keseluruhan model ini sesuai dalam perancangan desain antarmuka yang dibuat,
para pengguna secara umum akan merasa nyaman dengan antarmuka dan sistem yang ada
dan dapat menggunakannya secara efektif.

Antarmuka pengguna yang baik dan sesuai akan memberikan dampak yang
bagus, sedangkan desain yang buruk akan membuat pengguna bingung dan
bahkan menyebabkan frustrasi.

7
F. Analisis dan Perancangan Antarmuka Pengguna
Secara mudah dalam merancang sebuah antarmuka salah satunya bisa dilakukan
dengan menggunakan metode analisis, desain, implementasi dan validasi yang dapat
dilakukan secara iteratif dan digambarkan dalam model spiral berikut:

Gambar 1 Tahapan Perancangan Antarmuka

(Sumber: http://csis.pace.edu/)

Analisa dan Perancangan sesuai dengan tahapan tersebut terdiri dari 4 aktivitas yaitu:
1. User, Task, and Environment Analysis
Berisikan analisis para pengguna akhir yang akan berinteraksi dengan sistem, tugas
yang harus dikerjakan, konten dan lingkungan sistem yang akan diterapkan.
2. Interface Design
Proses pendefinisian objek antarmuka dan aksi serta tampilan visual yang dapat
memungkinkan pengguna melakukan semua tugas yang sudah didefinisikan
sebelumnya.
3. Implementation
Pembuatan antarmuka berupa purwarupa atau tampilan yang sudah bisa
digunakan dan dapat dilakukan evaluasi.
4. Interface Validation
Proses validasi dengan fokus kemampuan antarmuka pengguna untuk
mengimplementasikan setiap tugas secara benar, tingkat kemudahan pengguna
serta penerimaan pengguna pada antarmuka yang telah dibuat

8
 UI Designer Learning Path

dan Front-End Developer Roadmap

A. UI Designer Learning Path

UI Designer merupakan sebutan bagi ahli yang berfokus pada perancangan visualisasi
dan antarmuka pengguna dan visualisasi, berikut adalah jalur belajar jika Anda tertarik
menjadi UI Designer berdasarkan referensi dari roadmap.sh:

9
 Berikut adalah beberapa sumber daya yang bisa dijadikan referensi dalam kegiatan
belajar untuk menjadi seorang UI Designer:

• https://hackr.io/roadmaps/ui-designer-roadmap
• https://github.com/togiberlin/ui-ux-designer-roadmap
• https://www.interaction-design.org/
• https://medium.com/@dwinawan
• https://careerfoundry.com/en/blog/ui-design/how-to-become-a-ui-designer/

B. Front-End Developer Roadmap

Front-End Developer merupakan sebutan bagi ahli yang berperan untuk
mengembangkan tampilan antarmuka pada sebuah perangkat lunak, berikut adalah jalur
yang harus dipelajari untuk menjadi seorang front-end developer menurut roadmap.sh:

1 2

Berikut adalah sumber daya yang bisa digunakan untuk mempelajari jalur front-end
developer:

• https://roadmap.sh/frontend/resources

Pembaruan pada bidang UI sangat cepat, disarankan untuk terus mengikuti

tren yang ada dan memperbarui pengetahuan sejalan dengan kebutuhan.

10
 Membuat Purwarupa
Antarmuka dengan Figma

A. Pengenalan Figma
Figma adalah editor grafis vektor dan prototyping tool berbasis cloud. Rangkaian fitur Figma
berfokus pada desain antarmuka pengguna (UI) dan desain pengalaman pengguna (UX) dengan
penekanan pada real-time collaboration. Sederhananya, Figma merupakan aplikasi desain UI dan
UX berbasis cloud yang dapat digunakan untuk membuat situs web, aplikasi, atau komponen
antarmuka pengguna.

Figma memiliki fitur offline tambahan yang dapat diaktifkan oleh aplikasi Figma versi desktop
yang bisa di install di MAC OS dan Windows. Aplikasi pendamping Figma yang bernama Figma
Mirror memungkinkan para pengguna Android dan iOS untuk melihat prototype Figma pada
perangkat seluler.

Dengan aplikasi berbasis grafis vektor yang hidup di cloud, Figma memungkinkan para
penggunanya untuk bekerja dimana saja melalui browser atau aplikasi desktop. Figma juga bisa
menghemat waktu ketika sedang melakukan verifikasi desain, karena fitur kolaborasi pada Figma
memungkinkan para penggunanya untuk memberikan komentar, saran, bahkan mengubah
rancangan desain yang ada dalam waktu yang bersamaan.

Terdapat banyak alat atau tool yang sebanding dengan Figma, beberapa diantaranya adalah
Sketch, Adobe XD, InVision Studio, Framer Desktop, dan masih banyak tool lainnya. Figma
didukung oleh komunitas desainer dan pengembang karena dinilai memiliki berbagai macam
plugin untuk meningkatkan fungsionalitas dan mempercepat alur kerja. Figma juga digunakan
oleh beberapa merek besar seperti Slack, Twitter, Zoom, Dropbox, dan Walgreens.

11
B. Perbandingan Prototyping Tools
Logo Nama Platform Offline Collaboratio Free Prototyping Comments
Aplikasi n
Sketch Mac ✔ Collaboratio ✖ ✔ ✔
n masih
dalam versi
BETA
Adobe XD Mac ✔ ✔ ✔ ✔ ✔
Window
s
Figma Web ✔ ✔ ✔ ✔
Mac
Window
s
Framer Mac ✔ ✖ ✖ ✔ ✖
Desktop

InVision Mac ✔ ✖ ✔ ✔ ✔
Studio Window
s

C. Mengakses dan Membuat Akun Figma

Figma dapat diakses melalui web www.figma.com. Akan tetapi dalam praktikum ini
disarankan untuk menggunakan Figma versi Desktop.

D. Memasang Aplikasi Figma

Cara Instal Figma versi Desktop

a. Pastikan PC/Laptop terhubung koneksi Internet

b. Buka halaman web https://www.figma.com/downloads/
c. Download dengan mengklik pilihan Desktop Apps yang sesuai dengan sistem
operasi perangkat
d. Tunggu hingga FigmaSetup selesai di download
e. Jalankan FigmaSetup

E. Memasang Aplikasi Figma

a. Buka Aplikasi Figma
b. Apabila sudah memiliki akun UB yang terhubung dengan Figma maka pilih Log in
with Google, namun apabila belum memiliki akun maka pilih Create One
c. Pilih Sign up with Google dan masuk menggunakan Akun UB
d. Pada kolom “What kind of work do you do?” pilih design
e. Klik Open the Desktop App

12
F. Fitur
Figma merupakan satu-satunya platform yang menyediakan berbagai fitur desain yang sangat
modern sehingga menciptakan alur kerja yang lebih efisien.

1. Modern Pen Tool : berfungsi untuk menggambar ke segala arah dengan Vector
Networks.
2. Arc Designs : mendesain jam atau membuat diagram lingkaran menjadi mudah
dengan adanya Arc tool.
3. OpenType : fitur font lanjutan untuk mengekspresikan brand.

Figma memungkinkan para penggunanya bekerja sama secara berkelompok untuk membuat
sebuah desain prototipe.

1. Memudahkan para anggota kelompok untuk mendapatkan pembaruan terkini terkait

project kelompok
2. Dapat melihat kontributor dan project kelompok dengan mudah di halaman
kelompok.
3. Menjelajahi file terbaru yang telah dikerjakan oleh setiap kontributor di profil mereka.
4. Membuat desain secara bersama (real-time) dengan rekan kelompok.
5. Terdapat riwayat untuk melihat siapa saja yang terakhir mengubah desain prototipe.
6. Dapat dengan mudah mengontrol siapa saja yang dapat melihat, menambahkan
komentar, dan mengedit project.

Tidak perlu memerlukan prototyping tools tambahan, karena di Figma para pengguna bisa
merancang serta membuat prototipe desain sekaligus.

1. Mudah untuk menghubungkan semua elemen UI dan menambahkan interaksi serta

animasi.
2. Dapat membuat sebuah interaksi berupa klik, hover, menekan tombol, dan masih
banyak lagi.
3. Fitur Smart Animate secara otomatis akan menganimasikan objek serupa dan
membuat transisi secara detail.
4. Dapat membuat beberapa layer untuk konten interaktif.
5. Gunakan GIF untuk merepresentasikan interaksi desain, elemen video, serta animasi.
6. Embedded Comment memungkinkan para pengguna untuk menyematkan komentar
pada prototipe.
7. Bagikan link prototipe untuk melihat prototipe projek di platform mana saja selama
terhubung dengan internet.

13
G. Tutorial Dasar Penggunaan dan Pengenalan Figma

1. Menu
Menu pada Figma dapat kita temukan di pojok kiri atas. Dengan menu para pengguna
bisa dengan mudah mencari perintah secara spesifik.
2. Tools
Tools di Figma terdiri dari move, frame, rectangle , pen tool, text tool, hand tool, dan
add/show comment.
3. Options
Ketika para pengguna sedang menggunakan tool maka option akan memunculkan extra
option yang berkaitan dengan tool yang sedang digunakan. Ketika sedang tidak
menggunakan tool maka option hanya akan menampilkan nama file saja. Ketika object
sedang dipilih maka option akan menampilkan pilihan yang kontekstual.
4. Layers
Layers adalah tempat dimana semua elemen yang ada di file terorganisir berdasarkan
frame dan group.
5. Canvas
Canvas adalah lembar kerja, dimana para pengguna membuat desain dan mereview
hasil kerja.
6. Inspector
Inspector menampilkan informasi dan setting tentang objek yang sedang dipilih.
inspector inspector di Figma terbagi menjadi 3 tabs terpisah yaitu design, prototype,
dan inspect.

14
H. Membuat Projek di Figma
1. Buat file baru dengan mengklik icon new file di pojok kanan atas

2. Mulai dengan membuat frame terlebih dahulu dengan mengklik icon frame di bagian
tools

15
3. Pilih tampilan desain interface yang diinginkan

4. Tambahkan tulisan dengan mengklik icon text

16
5. Buat asset berupa persegi panjang dengan mengklik icon rectangle

17
6. Ubah sudut persegi panjang menjadi melengkung dengan mengubah border-
radiusnya

18
I. Plugin
Plugin adalah ekstensi tambahan dengan fungsi tertentu yang memungkinkan aplikasi
atau program menjalankan fitur tambahan di aplikasi atau program tersebut. Plugin pada
figma bersifat open source, dimana figma bekerjasama dengan developer untuk
mewujudkan plugin yang dapat digunakan para pengguna figma.
1. Unsplash
Dalam proses pembuatannya Desain UI/UX tidak bisa lepas dari gambar. Untuk
mendukung tingkat estetika sebuah desain maka sangat dibutuhkan gambar yang
mendukung desain yang sedang dibuat. Pada umumnya gambar dapat ditemukan
pada website penyedia gambar seperti unsplash.com, pexels.com, dan lain-lain.
Namun, proses tersebut membutuhkan waktu yang cukup lama karena terdapat
proses untuk men-download atau copy-paste gambar dari situs penyedia gambar.
Figma membuat jalan pintas dengan cara menambahkan plugin unsplash. Para
pengguna Figma hanya cukup mencari dengan memasukkan keyword untuk
menampilkan gambar yang kita inginkan atau bisa juga mencari gambar secara
random.
2. Iconify
Icon dalam plugin ini sangat banyak dan beragam. di iconify kita tidak perlu lagi untuk
menginstal icon-icon lain seperti material icon atau featured icon, karena icon
tersebut sudah ada dalam iconify. penggunaan iconify juga sangat mudah karena
hanya dengan memasukan keyword, semua icon yang berhubungan akan muncul dan
kita hanya klik saja.
3. Content reel
Content real adalah plugin yang berisi data-data seperti: nama orang, nomor telepon,
alamat rumah, email, url, username, dan lain sebagainya. plugin ini berfungsi untuk
memudahkan desainer dalam menambahkan konten untuk tabel atau data apapun
yang dibutuhkan
4. Brandfetch
Plugin ini membantu user figma untuk mencari logo dari brand suatu perusahaan
dengan cara figma mengambil asset logo dari website perusahaan tersebut. Hal ini
juga sangat membantu user, karena tidak perlu mencari lagi logo tersebut pada google
atau platform lain-nya.
5. Lorem ipsum
Hampir semua desainer akan menggunakan kata dummy “ lorem ipsum ” sebelum
menemukan kata yang akan digunakan, saya secara pribadi biasanya akan copy paste
dari website penyedia lorem ipsum untuk mendapatkan paragraf.
figma sekarang mengeluarkan plugin Lorem Ipsum, dimana user figma bisa mengatur
jenis kata dummy yang diinginkan, ada kata, kalimat dan paragraf.
6. Charts
Seringkali kita kesusahan dalam membuat desain Chart, termasuk dalam menentukan
tipe dan isi dari chart tersebut. Plugin Chart pada figma mencoba membantu user

19
 figma dalam hal tersebut, baik menentukan tipe atau konten. Ada beberapa tipe chart
pada plugin Chart, yaitu : Line, Scatter, Area, Bar, Pie/Doughnut.
7. Mapsicle
Mapsicle sangat memudahkan kita dalam mendesain maps karena kita bisa mengatur
skalanya sekaligus! dengan fitur ini, kita tidak perlu lagi screenshot dari Google Maps
atau waze yang biasa kita gunakan. Penggunaan mapscile juga sangat mudah karena
tinggal memasukan keyword yang ingin kita cari tempatnya, kemudian import ke
figma

J. Sumber Daya Grafis dan Illustrator

• Illustrations | unDraw
• IRA Design - Illustrations @ Creative Tim
• Illustration Gallery by ManyPixels | Open-Source Editable Illustrations
• Free Illustrations - Delesign
• Free Vector Illustrations to Class Up Your Design | Icons8 Illustrations

20
 Latihan dan Percobaan

1. Buatlah satu artikel di medium.com dengan minimum 500 kata yang menjelaskan terkait
pentingnya salah satu prinsip desain antarmuka pengguna berdasarkan General
Principles of UI Design dan contoh aplikasi yang menerapkan prinsip tersebut!

2. Buatlah satu desain antarmuka halaman website Landing Page untuk profil pribadi dalam
tampilan desktop dan mobile apps, lalu unggah ke dribbble.com!

21