DESAIN PENGALAMAN

PENGGUNA

2023
Desain Pengalaman Pengguna

Kata Pengantar

Alhamdulillahirobbil’alamin, Puji Syukur kami panjatkan kepada Alloh

SWT, karena atas hidayah, inayah, rahmat serta barokahnya modul praktikum
Wawasan Teknologi dapat terselesaikan. Modul ini dibuat sebagai panduan
praktikum untuk mahasiswa yang mengambil mata kuliah Wawasan Teknologi
program studi Teknik Informatika Sekolah Tinggi Teknologi Bontang.
Kami ucapkan terima kasih kepada semua pihak yang telah membantu
dalam proses penyelesaian modul praktikum ini. Kami yakin modul ini masih jauh
dari sempurna. Oleh karena itu, kritik dan saran yang membangun sangat kami
harapkan demi kesempurnaan modul ini. Semoga modul ini bisa bermanfaat dalam
proses pembelajaran di Sekolah Tinggi Teknologi Bontang.

Bontang, 24 Oktober 2023

2 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

TATA TERTIB LABORATORIUM TEKNIK INFORMATIKA

3 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

SEKOLAH TINGGI TEKNOLOGI BONTANG

PROGRAM STUDI TEKNIK INFORMATIKA
Praktikum : Desain Pengalaman Pengguna
Modul I : Wireframe
Tgl Update : 2023 Revisi 00

A. TUJUAN
Setelah mengikuti praktikum ini, mahasiswa diharapkan dapat:
1. Setelah mengikuti praktikum ini mahasiswa mampu, mengerti dalam
mengoperasikan fitur-fitur serta kegunaan pada aplikasi figma.
2. Mahasiswa mampu membuat wireframe menggunakan figma.

B. ALOKASI WAKTU
Waktu pelaksanaan praktikum : 3 x 50 menit.

C. ALAT YANG DIBUTUHKAN

Figma: The Collaborative Interface Design Tool

D. DASAR TEORI
1. Figma
Figma adalah sebuah aplikasi web kolaboratif untuk user interface, dengan
fitur-fitur luring tambahan yang tersedia pada aplikasi desktop untuk
Windows dan macOS. Figma merupakan alat desain kolaboratif terkemuka
untuk membangun produk yang bermanfaat dan bermakna. Rancang,
membuat prototipe, pengembangan, dan pengumpulan umpan balik dalam
satu kesatuan web aplikasi.

Gambar 1.1 Tampilan Home Website Figma

4 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

2. Design Thinking
Design thinking adalah salah satu metode atau pendekatan dalam mendesign
sebuah produk. Serangkaian proses kognitif, strategis, dan praktis dalam
desain suatu produk. Digunakan untuk memecahkan masalah dan
menciptakan solusi inovatif dengan memahami pengguna dan
kebutuhannya. Design thinking adalah kunci dalam desain suatu produk.
Design thinking memiliki 5 fase, yaitu: Emphatize, Define, Ideate, Prototype
dan Test.
3. Wireframe
Wireframe merupakan langkah awal dalam mendesign sebuah produk.
Terdapat di dalam fase ideate pada metode design thinking. Wireframe itu
sendiri merupakan sebuah kerangka untuk menata suatu item di laman
website atau aplikasi. Wireframes typically have an intentional low-
fidelity look.
Wireframe (terkadang disebut wire, mockup, atau mocks). Wireframe juga
merupakan skema, blueprint, berguna untuk membantu programmer serta
desainer berpikir dan berkomunikasi tentang struktur perangkat lunak atau
situs web yang akan dibangun. Menetapkan struktur antarmuka yang baik
merupakan bagian terpenting dalam merancang perangkat lunak.
Terdapat 4 langkah dalam penyusunan wireframe, yaitu:
1) Identiffikasi aspect ratio jendela browser atau perangkat.
2) Identifikasi navigasi
3) Identiffikasi dan gambar elemen terbesar dalam desain.
4) Menambahkan rincian atau detail (detail kotak centang dan tombol,
header, dialog, dan progress bar)

5 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

Di bawah ini adalah contoh-contoh bentuk dari wireframe.

Gambar 1.2 Contoh Paper Wireframing

Gambar 1.3 Contoh Wireframing Dengan Tool

6 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

E. LANGKAH-LANGKAH PRAKTIKUM
Pada modul praktikum pertama ini, akan dijabarkan langkah-langkah membuat
wireframe di figma, contoh studi kasus, kita akan membuat wireframe dari contoh
tampilan instagram pada desktop.
1. Buka browser, buka alamat website figma www.figma.com. Lihat pada gambar
1.1 dan pada gambar 1.2 merupakan tampilan awal/beranda pada figma.

Gambar 1.1 Alamat Website Figma

Gambar 1.2 Tampilan Beranda Figma

7 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

2. Kemudian log in menggunakan akun google atau email. Lihat pada gambar 1.3
di bawah ini:

Gambar 1.3 Tampilan Laman Log in Figma

3. Setelah berhasil login, tampilan berandanya akan seperti gambar di bawah ini:

Gambar 1.4 Tampilan Home Figma Setelah Login

8 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

4. Setelah itu, buka tab baru kemudian akses laman web instagram, kemudian
login akun instagram kalian, klik ke tab search cari akun instagram, browse feed
dan screen capture foto seperti yang tertera di bawah ini:

Gambar 1.5 Foto Hasil Screen Capture Feed Instagram

5. Setelah itu Kembali ke figma, kemudian pada pojok kanan atas klik “Design
File → dan klik pada tulisan yang dilingkari seperti gambar di bawah ini.

Gambar 1.6 Membuat Project Baru

9 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

6. Setelah itu akan muncul tampilan seperti ini (gambar 1.7), kemudian drag foto
hasil screen capture dari feed instagram ke dalam project baru figma (gambar
1.8). Perhatikan garis lingkar merah, ubahlah nama untuk project dengan
“wireframe …..”

Gambar 1.7 Laman Project Baru

Gambar 1.8 Tampilan Foto IG di dalam Figma

10 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

7. Klik fitur Frame seperti gambar di bawah (gambar 1.9) dan akan muncul bar di
sisi kanan, pilih Desktop → Macbook Air (gambar 1.10)

Gambar 1.9 Membuat Frame Baru

Gambar 1.10 Right Side Bar Frame

11 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

8. Setelah Langkah diatas berhasil maka tampilannya akan seperti gambar 1.12 ini.
Ukuran foto hasil screen capture disesuaikan dengan frame macbook air yang
telah dipilih tadi, di sisi sebelah kiri ada dua elemen (ig screenshot dan
wireframe). Lingkaran merah pada gambar merupakan penamaan untuk frame
dapat diganti namanya dari macbook air menjadi wireframe (bebas terserah mau
memberi nama apa saja).

Gambar 1.12 Tampilan Kedua Elemen Foto IG dan Frame Dengan Design Desktop
Macbook Air
9. Langkah selanjutnya mulailah mengisi frame dengan ikon-ikon sesuai contoh
foto dari instagram. Perlu di garis bawahi bahwa konsep pembuatan wireframe
ini tidak berwarna hanya hitam putih. Pertama bagian foto kucing akan kita
representasikan dengan bentuk rectangle, klik pada bagian atas ikon berbentuk
Kemudian pilih “rectangle”, sesuaikan ukurannya dengan foto dari instagram.
Dapat dilihat pada gambar 1.13 dan 1.14.

Gambar 1.13 Rectangle Shape

12 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

Gambar 1.14

10. Selanjutnya mari isi di sisi kosong sebelah foto, mulai dari bagian atas (bebas
sebenarnya mau dimulai dari bagian mana). Ada bagian foto profile pengguna
dengan representasi berbentuk bulat, jadi kita pilih shape ellipse klik bar
kemudian pilih shape “ellipse”. Pada profile pengguna terdapat dua akun yaitu
Instagram dan chupiedoesntgiveameow, berarti tambahkan shape ellipse
sebanyak 2 buah. Dapat di copy paste dari yang sudah tersedia. Ketika meng-
copy hasil paste dapat ditarik dengan cara hold mouse kemudian geser ke
samping, dapat dilihat hasilnya pada gambar 1.16. Ulangi dan lakukan hal yang
sama dengan ikon-ikon yang berbentuk bulat menggunakan ellipse.

Gambar 1.15 Ellipse Shape

13 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

Gambar 1.16 Ellipse Shape Merepresentasikan Ikon Profile Pengguna IG

11. Setelah itu represntasi bagian garis tipis pada foto IG dapat menggunakan “Line”.
Lihat pada gambar 1.17. Tarik garis dari ujung batas yang bersebelahan dengan
rectangle sampai ujung kanan frame, dpaat dilihat pada gambar 1.18. Ulangi dan
lakukan hal yang sama dengan ikon-ikon yang berbentuk garis lurus
menggunakan line shape.

Gambar 1.17 Line Shape

Gambar 1.18

14 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

12. Selanjutnya ikon-ikon yang dilingkar merah dapat direpresentasikan

menggunakan rectangle. Ukuran sesuaikan saja dengan foto asli. Hasilnya dapat
dilihat pada gambar 1.20.

Gambar 1.19

Gambar 1.20

15 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

13. Kemudian mari beralih ke bagian tulisan. Klik pada bar diatas pilih “T”.
kemudian atur teks sesuai dengan foto IG. Pada username tulisan bold maka kita
juga membuat teksnya menjadi bold, kemudian teks yang lain menggunakan font
medium dengan ukuran 20. Dapat dilihat pada gambar 1.21. hasilnya dapat dilihat
pada gambar 1.22.

Gambar 1.21 Bar Pengaturan Teks

Gambar 1.22 Hasil Penulisan Teks

16 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

14. Setelah selesai Langkah-langkah di atas, mari kita bentuk ikon-ikon rectangle
sesuai dengan bantuk ikon foto IG, seperti bentuk hati, komentar, save dan titik
tiga bagian atas. Klik bar diatas kemudian pilih gambar berbentuk pena dan pilih
“Pen”. PS: bentuk yang kita buat jika tidak sempurna tidak apa-apa setidaknya
rectangle berubah menjadi bentuk yang sesuai dengan foto asli.

Gambar 1.23
15. Mari kita mulai dengan membuat bentuk ikon save. Pilih posisi rectangle
yang merepresentasikan ikon save kemudian klik spot di dalamnya untuk
mulai menggambar, lalu klik pada spot lain yang ingin anda bentuk
sudutnya. Hasilnya dapat dilihat pada gambar di bawah ini (gambar 1.24).
agar sesuai dengan foto asli pada bagian rectangle yang masih terlihat, dapat
disembunyikan dengan cara klik rectangle kemudian pada sisi sebelah kanan
akan muncul bar pilih bagian layer kemudian klik pada bagian yang
berbentuk mata, dapat dilihat pada gambar 1.25

Gambar 1.24 Hasil Gambar Ikon Save

Gambar 1.25 Bar Layer

17 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

16. Selanjutnya mari kita menggambar ikon hati, bagian ini sedikit sulit karena
bentuk hati yang berbentuk kurva. Caranya sama dengan langkah pada
nomor 15 kemudian ketika ingin membentuk garis kurva tahan mouse, lalu
tarik ke arah kurva yang diinginkan lalu klik lagi hingga membentuk titik
akhir. Hasilnya seperti pada gambar di bawah ini.

Gambar 1.26

17. Kemudian kita merubah bentuk rectangle titik tiga pada bagian pojok atas
menjadi kecil dan setiap ujungnya menjadi tumpul. Klik rectangle kemudian
muncul side bar sebelah kanan dapat dilihat pada gambar 1.27, pilih “corner
radius” isikan dengan nilai 5 (pemilihan angka bisa apa saja sesuai tingkat
ketumpulan yang diinginkan). Hasilnya akan seperti pada gambar 1.28,
ukuran titik tiga disesuaikan dengan foto aslinya.

Gambar 1.27

18 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

Gambar 1.28 Ikon Titik Tiga Bagian Pojok Atas

18. Selanjutnya beralih ke bagian side bar sebelah kiri kemudian klik elemen
“wireframe IG” dan akan muncul side bar sebelah kanan, klik pada bagian
“corner radius” dan isi dengan angka 20, hal ini dilakukan untuk
menyamakan bentuk tampilan dari frame foto IG yang mana di setiap
sudutnya tumpul. Hasilnya dapat dilihat pada gambar 1.29.

Gambar 1.29 Tampilan Wireframe IG

19. Untuk melihat hasil akhir dari pembuatan wireframing ini dapat kita lihat
dengan cara klik pada pojok kanan atas, klik gambar yang berbentuk
segitiga.

Gambar 1.30

19 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang
Desain Pengalaman Pengguna

20. Berikut tampilan hasil akhir dari wireframing IG.

Gambar 1.31 Hasil Akhir Tampilan Wireframe Dengan Frame

Macbook Air

F. TUGAS

Tugas Praktikum:

1. Buatlah wireframe dengan frame phone → iphone 13 mini, dengan contoh dari
tampilan instagram dan tiktok.

20 Modul Praktikum Desain Pengalaman Pengguna

Program Studi Teknik Informatika Sekolah Tinggi Teknologi Bontang