FAKULTAS TEKNIK UNP JOBSHEET

Jurusan : Teknik Elektronika No : 01

Program Studi : Pend. Teknik Informatika Waktu : 2 SKS Praktikum
Mata Kuliah : Interaksi Manusia & Komputer Topik : Flowchart

1. Tujuan
A. Klarifikasi Proses: Flowchart membantu mengklarifikasi dan memahami proses
dengan menguraikan langkah-langkahnya secara terstruktur.
B. Komunikasi: Flowchart menjadi alat komunikasi yang efektif dalam tim atau antara
berbagai departemen karena representasi visual yang mudah dimengerti.
C. Analisis: Flowchart memungkinkan analisis mendalam terhadap proses,
memungkinkan identifikasi potensi perbaikan atau penyempurnaan.
D. Pemrograman: Dalam konteks pemrograman, flowchart membantu merencanakan
algoritma dan logika program sebelum kode ditulis.
E. Pelatihan: Flowchart dapat digunakan untuk melatih orang baru tentang alur kerja
atau proses yang ada.

2. Alat dan Bahan

A. Alat
- PC/Laptop
- Alat Tulis
B. Bahan
- Modul Pengantar Pembelajaran
- Microsoft Office

3. Teori Pengantar
A. Pengertian Flowchart:
Flowchart adalah representasi visual dari alur atau urutan langkah-langkah
dalam suatu proses atau sistem. Flowchart digunakan untuk menggambarkan secara
jelas bagaimana informasi atau data mengalir dari satu langkah ke langkah lainnya
dalam suatu proses. Flowchart dapat digunakan dalam berbagai bidang, seperti
pemrograman, manajemen proyek, analisis bisnis, dan banyak lagi.

B. Kegunaan Flowchart:
Flowchart dapat digunakan dalam berbagai konteks untuk membantu
memvisualisasikan dan memahami alur kerja, proses, atau algoritma.
Berikut adalah beberapa contoh kegunaan flowchart:
- Proses Bisnis
Flowchart digunakan dalam bisnis untuk menggambarkan alur kerja dari
suatu proses, seperti proses produksi, manajemen inventaris, atau penanganan
keluhan pelanggan.
Contoh: Flowchart untuk proses pengolahan pesanan, yang mencakup
penerimaan pesanan, verifikasi persediaan, pengemasan, pengiriman, dan
faktur.
- Algoritma Pemrograman
Dalam pengembangan perangkat lunak, flowchart membantu dalam
merancang dan memahami algoritma.
Contoh: Flowchart untuk menggambarkan algoritma pencarian biner atau
pengurutan data.

- Proses Manufaktur
Dalam industri manufaktur, flowchart digunakan untuk
mendokumentasikan langkah-langkah dalam proses produksi.
Contoh: Flowchart untuk memproduksi kendaraan, mencakup pemotongan
logam, pengecatan, perakitan, dan pengujian.

- Prosedur Operasi
Flowchart digunakan dalam rumah sakit atau institusi medis untuk
menggambarkan prosedur operasi, seperti alur perawatan pasien atau prosedur
keamanan.
Contoh: Flowchart untuk alur kerja pasien di unit gawat darurat, termasuk
penerimaan, evaluasi medis, dan pengiriman pasien.

- Manajemen Proyek
Dalam manajemen proyek, flowchart dapat digunakan untuk
menggambarkan jadwal proyek, termasuk tugas, ketergantungan, dan
milestone.
Contoh: Flowchart Gantt untuk menggambarkan jadwal proyek konstruksi,
yang mencakup tahap perencanaan, konstruksi, dan penyelesaian.

- Keputusan Bisnis
Flowchart digunakan dalam pengambilan keputusan bisnis, seperti analisis
keuntungan dan kerugian, atau evaluasi peluang investasi.
Contoh: Flowchart untuk membantu dalam memutuskan apakah suatu
perusahaan harus memperluas lini produknya berdasarkan risiko dan potensi
keuntungan.

- Pengembangan Produk
Flowchart dapat digunakan dalam pengembangan produk untuk
menggambarkan siklus pengembangan, termasuk perancangan, pengujian, dan
iterasi.
Contoh: Flowchart untuk pengembangan perangkat elektronik, mencakup
desain konsep, prototip, pengujian fungsional, dan produksi.

- Analisis Proses
Dalam analisis proses, flowchart membantu dalam mengidentifikasi dan
menghilangkan bottleneck atau masalah dalam alur kerja.
Contoh: Flowchart untuk proses pengiriman barang, yang membantu
mengidentifikasi titik-titik yang memerlukan perbaikan untuk mengurangi
waktu pengiriman.
 - Pelatihan Karyawan
Flowchart digunakan dalam pelatihan karyawan untuk membantu mereka
memahami prosedur dan alur kerja.
Contoh: Flowchart yang digunakan dalam pelatihan kasir untuk
menggambarkan langkah-langkah dalam menerima pembayaran dan mengelola
transaksi.

- Pengambilan Keputusan Pribadi

Individu dapat menggunakan flowchart untuk membantu dalam mengambil
keputusan pribadi, seperti memilih tempat liburan atau memutuskan jalur karier.
Contoh: Flowchart untuk membantu seseorang memutuskan apakah akan
membeli atau menyewa rumah berdasarkan faktor-faktor finansial pribadi.

C. Keuntungan Flowchart:
- Membantu mengkomunikasikan proses secara visual.
- Memudahkan identifikasi kesalahan atau perbaikan dalam alur kerja.
- Berguna dalam merencanakan program atau sistem.
- Meningkatkan pemahaman tentang alur kerja.

D. Batasan Flowchart:
- Tidak cocok untuk proses yang terlalu rumit.
- Tidak menggantikan deskripsi tertulis yang lebih mendalam.

E. Jenis Flowchart:
- Flowchart Proses
Menggambarkan urutan langkah dalam suatu proses.
- Flowchart Keputusan
Menunjukkan cabang keputusan berdasarkan kondisi tertentu.
- Flowchart Paralel
Menunjukkan alur langkah yang terjadi secara paralel.
- Flowchart Loop
Menunjukkan pengulangan langkah tertentu.
F. Simbol-simbol pada Flowchart Program
4. Langkah Praktikum
- Studi kasus 1
Seorang anak kos yang sedang mengerjakan tugas di tengah malam, ingin
menyeduh segelas kopi saset untuk membuatnya tetap terjaga sepanjang malam
(harapnya). Buatlah sebuah Algoritma untuk membantu ank kos tersebut membuat
kopi saset!
a. Setelah membaca soal di atas, maka algoritma untuk penyelesaian soal
tersebut adalah :
1. Ambil kopi saset
2. Ambil sendok dan gelas
3. Masukkan kopi ke dalam gelas
4. Jika air dispenser sudah panas
5. Tuangkan ke dalam gelas berisi kopi
6. Jika air belum panas
7. Nyalakan dispenser dan tunggu hingga panas, lalu tuangkan ke dalam
gelas
8. Langkah pertama selesai
9. Langkah selanjutnya
10. Aduk seduhan kopi sampai merata
11. Kopi siap disajikan
12. Selesai

b. Tentukan peran setiap langkah pada poin A :

1. Ambil kopi saset (Proses)
2. Ambil sendok dan gelas (Proses)
3. Masukkan kopi ke dalam gelas (Proses)
4. Jika air dispenser sudah panas (Keputusan)
5. Tuangkan ke dalam gelas berisi kopi (Proses)
6. Jika air belum panas (Keputusan)
7. Nyalakan dispenser dan tunggu hingga panas, lalu tuangkan ke dalam
gelas (Proses)
8. Langkah pertama selesai (Finish Output)
9. Langkah selanjutnya (Start Input)
10. Aduk seduhan kopi sampai merata (Proses)
11. Kopi siap disajikan (Proses)
12. Selesai (Stop Kegiatan)
 c. Pembuatan flowchart keseluruhannya adalah sebagai berikut :

- Studi Kasus 2
Setelah menyeduh kopi, anak kos tersebut merasa lapar dan ingin memasak
menu mie instan kesukaannya. Buatlah algoritma untuk membantu anak kos
tersebut memasak mie instan!
a. Setelah membaca soal di atas, maka algoritma untuk penyelesaian soal
tersebut adalah :
1) Siapkan air dan mie instant
2) Panaskan air dan buka pembungkus mie instant
3) Jika air sudah mendidih
4) Masukkan mie ke dalam air
5) Jika mie sudah matang
6) Pindahkan mie pada piring dan campurkan dengan bumbu
7) Mie Instan siap santap

b. Tentukan peran setiap langkah pada poin A :

1) Siapkan air dan mie instant (Persiapan)
2) Panaskan air dan buka pembungkus mie instant (Proses)
3) Jika air sudah mendidih (Keputusan)
4) Masukkan mie ke dalam air (Proses)
5) Jika mie sudah matang (Keputusan)
6) Pindahkan mie pada piring dan campurkan dengan bumbu (Proses)
7) Mie Instan siap santap (Data Output)
 c. Pembuatan flowchart keseluruhannya adalah sebagai berikut :

5. Tugas
1) Bagaimana langkah langkah (algoritma dan flowchart) perjalanan dari tempat
tinggal menuju tempat perkuliahan? Jelaskan!
2) Bagaimanakah algoritma dan flowchart penggunaan mesin cuci mulai dari baju
kotor sampai baju menjadi bersih dan kering?
3) Jelaskan algoritma dan flowchart memasak telur sesuai dengan cara kita masing-
masing (bisa direbus, dadar, ceplok, dll)!
4) Bagaimanakah tata cara (algoritma dan flowchart) peminjaman buku
diperpustakaan jika terdapat kondisi sebagai berikut:
a. Peminjam menyerahkan kartu anggota dan buku yang akan di pinjam kepada
petugas,
b. Peminjam dibatasi hanya boleh meminjam sejumlah dua buku,
c. Petugas akan melakukan pengecekan apakah peminjam masih memiliki
tanggungan peminjaman buku atau tidak,
d. Jika masih memiliki satu tanggungan buku maka hanya boleh meminjam satu
buku saja,
e. Jika tidak memiliki tanggungan maka boleh meminjam dua buku,
f. Jika masih memiliki tanggungan dua buku maka peminjam dilarang meminjam
buku lagi sampai pinjaman yang lama dikembalikan terlebih dahulu.
 FAKULTAS TEKNIK UNP JOBSHEET
Jurusan : Teknik Elektronika No : 02
Program Studi : Pend. Teknik Informatika Waktu : 2 SKS Praktikum
Mata Kuliah : Interaksi Manusia & Komputer Topik : Use Case Diagram

1. Tujuan
A. Mengenal tentang Use Case Diagram
B. Mahasiswa dapat membuat Use Case Diagram

2. Alat dan Bahan

A. Alat
- PC/Laptop
- Alat Tulis
B. Bahan
- Modul Pengantar Pembelajaran
- Microsoft Office

3. Teori Pengantar
3.1. Pengertian Use Case Diagram
Use case diagram adalah jenis diagram UML (Unified Modeling Language)
yang menggambarkan fungsi, ruang lingkup, dan interaksi pengguna dengan sistem
tersebut.
Diagram use case memvisualisasikan interaksi antara pengguna (aktor) dan
sistem (use case), serta tindakan apa saja yang dapat dilakukan aktor terhadap use
case secara rinci.
Contohnya dalam proses pengembangan website, aplikasi mobile, atau sistem
lainnya, use case diagram memiliki peranan penting. Sebab, diagram ini mampu
mengidentifikasi kebutuhan pengguna, memperjelas persyaratan sistem, dan
merancang fungsionalitas website.
Dengan adanya use case diagram, komunikasi antar tim web developer, project
manager, dan stakeholder lain dapat difasilitasi dengan baik. Sehingga, langkah-
langkah pengembangan berikutnya, seperti coding, testing, dan launching website
ke web hosting dapat berjalan lancar.
Jadi, penggunaan use case diagram bisa membantu merencanakan
fungsionalitas website, serta memastikan bahwa pengembangan website berjalan
sesuai dengan kebutuhan pengguna dan stakeholder yang terlibat.

3.2. Fungsi Use Case Diagram

Dalam pengembangan website, fungsi use case diagram adalah sebagai berikut:
- Merincikan Kebutuhan Pengguna – Use case diagram dapat menjelaskan
kebutuhan pengguna terhadap website dari sudut pandang calon pengguna itu
sendiri. Dengan begitu, web developer dapat mengembangkan website yang
relevan dan bernilai bagi mereka yang akan menggunakan website.
- Memodelkan Interaksi Pengguna – Use case diagram berfungsi untuk
memvisualkan alur interaksi pengguna yang intuitif dan logis. Hal tersebut
dapat meningkatkan user experience (UX) pengguna, mengingat user
experience adalah salah satu faktor penentu keberhasilan website..
 - Memperlihatkan Fungsionalitas Website – Fungsi use case diagram berikutnya
yaitu untuk menampilkan setiap fungsi website secara lebih mendetail.
Sehingga, developer dapat lebih mudah memprogram website.
- Memfasilitasi Komunikasi dengan Stakeholder – Use case diagram adalah alat
komunikasi yang efektif antar tim developer dan stakeholder lain. Dengan
diagram use case, semua pihak yang terlibat dapat memahami bagaimana
website berfungsi dan saling berkoordinasi dalam membangun website.
- Memvalidasi Pengujian Website – Fungsi use case diagram yang terakhir yaitu
memastikan bahwa semua fitur website telah diuji dan berjalan dengan baik.
Masing-masing use case dalam diagram ini dapat digunakan sebagai acuan
dalam menguji website secara sistematis.

3.3. Tujuan Penggunan Use Case Diagram

Digunakan sebagai alat bantu terbaik guna menstimulasi pengguna potensial
untuk mengatakan tentang sistem dari sudut pandangnya. Use Case mewakili
pandangan di luar sistem. Use case diagram dapat sangat membantu bila kita sedang
Menyusun requirement sebuah sistem, mengkomunikasikan rancangan dengan
klien, dan merancang test case untuk semua feature yang ada pada sistem.

3.4. Komponen Use Case Diagram

Secara umum, use case diagram terdiri dari komponen yang mencakup actor,
system, use case, dan relationship. Berikut penjelasan masing-masing komponen:
A. Actor
Komponen use case diagram yang pertama adalah actor, yaitu entitas atau
pengguna yang berinteraksi dengan sistem. Actor pada use case diagram
digambarkan sebagai manusia atau objek, tergantung sistem yang dibuat. Di
dunia nyata, actor dapat berupa pelanggan, administrator, dan pemilik
websistem.

B. System
Sesuai namanya, system merujuk pada aplikasi, website, atau jenis sistem
lain yang dikembangkan. System inilah yang akan menerima input dari actor
dan menyajikan output sebagai responsnya. Contoh system di antaranya sistem
pemesanan tiket online dan sistem manajemen inventaris.

C. Use Case
Use case adalah tindakan atau aktivitas yang dapat dilakukan oleh actor
terhadap sistem. Pada diagram use case, komponen ini biasanya digambarkan
dalam bentuk oval. Contoh use case di dunia nyata antara lain proses login,
register akun, dan checkout produk.
 D. Relationship
Terakhir, komponen use case diagram adalah relationship atau relasi, yaitu
hubungan antara actor dengan use case. Terdapat beberapa jenis relasi dalam
use case diagram, seperti:
1) Association – Association menunjukkan relasi actor dan use case tanpa
adanya interaksi yang spesifik. Contoh dalam konteks ecommerce, actor
“pelanggan” berasosiasi dengan use case “pencarian produk”. Dengan
begitu, pelanggan dapat mencari produk yang ada di ecommerce tersebut.
2) Generalization – Suatu actor atau use case merupakan spesialisasi atau
bentuk khusus dari actor atau use case lain. Contohnya, actor “admin”
adalah generalisasi dari “pengguna”, di mana admin memiliki lebih banyak
hak akses di dalam sistem.
3) Include – Sebuah use case merupakan bagian dari use case lainnya yang
tidak dapat berdiri sendiri. Misalnya, fitur “pilih seat” merupakan bagian
dari use case “pilih kereta” saat customer menggunakan aplikasi booking
tiket kereta.
4) Extend – Sebuah use case dapat di-extend ke satu atau beberapa use case
lain untuk menambah fungsionalitasnya. Sebagai contoh, ketika pelanggan
menggunakan fitur “refund” terdapat fitur lain yaitu “cek status refund” di
dalam website toko online.

3.5. Simbol Use Case Diagram

Di bawah ini kami sajikan simbol use case diagram lengkap beserta
keterangannya:
 Kenapa Use Case Diagram Penting?
- Membantu memahami kebutuhan fungsional dari sistem.
- Menunjukkan interaksi utama antara pengguna dan sistem.
- Mengidentifikasi kasus penggunaan (use case) yang perlu
diimplementasikan.

3.6. Contoh dari Use Case Diagram

1) Pembayaran menggunakan OVO

OVO adalah aplikasi pintar yang memberikan kemudahan dalam

bertransaksi (OVO Cash), serta berfungsi untuk mengumpulkan poin di
banyak tempat (OVO Points). Inilah contoh use case diagram studi kasus pada
OVO.Gambar di atas merupakan contoh use case diagram pada OVO, adapun
penjelasannya sebagai berikut ini:
- User: Orang yang dapat mengakses atau menggunakan aplikasi OVO,
mulai dari login ke aplikasi hingga melakukan aksi terhadap aplikasi
seperti top up saldo, transfer, dan payment.
- Register: Register merupakan langkah pertama yang dilakukan user ketika
ia tidak mempunyai akses pada aplikasi OVO. Mendaftarkan data diri ke
dalam aplikasi agar dikenali.
- Login: Setelah mendapatkan akun, user harus melakukan login agar dapat
mengakses berbagai fitur aplikasi OVO.
 - Top up: Suatu kegiatan yang dilakukan user untuk mengisi ulang saldo
OVO. Terdapat 2 pilihan alternatif untuk melakukan top up saldo, yaitu
melalui ATM dan internet banking.
- Transfer: Transfer berfungsi untuk mengirim atau membagikan saldo
dalam aplikasi OVO ke pengguna lain, baik sesama OVO atau ke rekening
tertentu.
- Payment: Ketika user memilih menu payment, maka user dapat melakukan
pembayaran lewat aplikasi.

2) Use Case Diagram Mesin ATM

- Aktor yang terlibat: Nasabah, Pihak Bank, dan Operator ATM.

- Use Case yang ada: session, transaksi, transfer, Tarik tunai, cek saldo,
system startup, dan system shutdown. Di bawah ini beberapa penjelasan
lengkap dari use case tersebut:

 System Startup: Sistem ini akan dihidupkan oleh operator ketika

mengarahkan switch ke posisi “ON”. Operator akan memasukkan sejumlah
uang yang tersedia pada brankas ATM sehingga mesin pun dapat terkoneksi
ke bank dan nasabah dapat melakukan berbagai transaksi pada mesin ATM.
 System Shutdown: Sistem akan dimatikan ketika operator sudah
memastikan bahwa tidak ada lagi nasabah yang menggunakan mesin dan
 biasanya ketika akan melakukan maintenance. Caranya dengan
mengarahkan switch ke posisi “OFF”.
 Session: Session akan dimulai ketika nasabah memasukan kartu ATM ke
mesin ATM sampai kartu ATM di cabut dari mesin ATM.
 Transaksi: Transaksi yang meliputi transfer, tarik tunai, dan cek saldo.
 Transfer: Transfer terbagi menjadi dua, yaitu transfer antar sesama bank atau
berbeda bank. Jika transfer berbeda bank, maka diperlukan memasukan
kode bank tujuan.
 Tarik Tunai: Tarik tunai merupakan proses menarik uang dari saldo,
biasanya tertera pada menu tampilan utama.
 Cek Saldo: Cek saldo berfungsi untuk mendapatkan suatu informasi pada
rekening seorang nasabah terkait saldo yang dimiliki.

4. Langkah-langkah Praktikum
4.1. Menganalisa kasus yang ada
Dari kasus yang ada dapat disimpulkan beberapa kebutuhan dasar/fungsi system :
1) Pelanggan melakukan registrasi yang mengisikan profil serta alamat
penagihan, yang kemudian akan mendapatkan kode member.
2) Pelanggan harus melakukan proses login terlebih dahulu untuk masuk dalam
halaman pemesanan, setelah masuk pelanggan memilih buku yang akan
dipesan. Setelah yakin dengan pesanannya, pelanggan akan melakukan proses
persetujuan pembelian yang berisi batas pembayaran(1x24 jam) serta info
pembayaran dan nomor order pemesanannya dan sistem akan mengurangi stok
barang yang dipesan dan status pemesanan menjadi „PESAN‟.
3) Sistem secara otomatis mengirimkan email kepada pelanggan yang berisi
daftar detail barang yang dipesan, harga yang harus dibayar info pembayaran
dan nomor rekening untuk pembayaran serta batas pembayaran.
4) Dalam batas pembayaran (1x24 jam) pelanggan harus transfer uang ke
rekening toko sesuai pesanan setiap nomor order dan mengirim SMS dengan
format “NO_ORDER NO_SLIP_TRANSFER”. Jika dalam batas pembayaran
belum transfer maka pesanan akan dibatalkan dan stok dikembalikan.
5) Setelah transfer dan konfimasi sampai maka toko akan mengirimkan barang
dan sistem secara otomatis mengirimkan email yang berisi data pengiriman
serta mengubah status pemesanan menjadi „KIRIM‟.
Dari hasil analisa diatas dapat disimpulkan bahwa kasus tersebut terdiri dari dua
actor, yaitu:
- Pelanggan
- Pemilik (Toko)
Dari hasil analisa diatas dapat disimpulkan bahwa kasus tersebut terdiri dari Use
Case, yaitu :
NO Requirement Actor Use Case
1 Pelanggan melakukan registrasi yang Pelanggan Registrasi
mengisikan profil serta alamat Member
 penagihan, yang kemudian akn
mendapatkan kode member
2 Pelanggan harus melakukan proses Pelanggan Pemesanan,
login terlebih dahulu untuk masuk Login
dalam halaman pemesanan, setelah
masuk pelanggan memilih buku yang
akan dipesan. Setelah yakin dengan
pesanannya, pelanggan akan
melakukan proses persetujuan
pembelian yang berisi batas
pembayaran (1x24 jam). Serta info
pembayaran dan nomor order
pemesanannya lalu system akan
mengurangi stok barang yang di pesan
dan status pesanan menjadi PESAN
3 Sistem secara otomatis mengirimkan Pelanggan Pemesanan,
email kepada pelanggan yang berisi Pengiriman
daftar detail barang yang di pesan, Informasi
harga yang harus dibayar, info
pembayaran dan nomor rekening
untuk pembayaran serta batas
pembayaran.
4 Dalam batas pembayrn (1x24 jam) Pelanggan, Pembayaran,
pelanggan harus transfer uang ke Toko Transfer
rekening toko sesuai pesanan setiap
nomor order dan mengirim sms
dengan format NO.ORDER_NO.SLIP
TRANSFER. Jika dalam batas
pembayaran belum di transfer maka
pesanan akan dibatalkan dan stok akan
dikembalikan.
5 Setelah transfer dan konfirmasi Toko, Pembayaran,
sampai, maka toko akan mengirimkan Pelanggan Pengiriman
barang dan system secara otomatis Barang
akan mengirimkan email yang berisi
data pengiriman serta mengubah status
pesanan menjadi KIRIM

Beberapa Skenario terkait Use Case diatas, yaitu :

1. Use Case : Registrasi Member
- Actor : Pelanggan
- Tujuan : Pelanggan Mendaftar Menjadi Member

Actor Sistem
1. Pelanggan Membuka Website 3. Sistem mengecek keaslian data
2. Pelanggan memasukkan data pelanggan
pribadi 4. System memberikan kode
member
2. Use Case : Pemesanan
- Actor : Pelanggan
- Tujuan : Pemesanan barang yang diinginkan
Actor Sistem
1. Pelanggan login dengan kode
member yang dimiliki
2. Sistem Memverifikasi proses
login pelanggan
3. Sistem memperbolehkan
pelanggan masuk halaman
pemesanan
4. Setelah login, pelanggan dapat
memilih barang yang ingin di
pesan
5. Sistem cek jumlah barang
pesanan
6. Sistem menghitung total harga
7. Pelanggan melakukan proses
pemesanan dengan menyetujui
persetujuan pembelian
8. Sistem memberikan nomor order
kepada pelanggan dan mengubah
status jadi PESAN
9. Sistem mengurangi stok barang
yang telah dipesan pelanggan
10. Sistem secara otomatis mengirim
email sebagai informasi
pemesanan kepada pelanggan.

3. Use Case : Pembayaran

- Actor : Pelanggan, Toko
- Tujuan : Pelanggan transfer uang untuk pemesanan
Actor Sistem
1. Pelanggan melakukan transfer ke 3. Sistem akan menerima
toko konfirmasi dan melakukan
2. Pelanggan mengirim sms bukti pengecekan transfer dengan
transfer dengan format toko
NO,ORDER_NO.SLIP 4. Sistem merubah status
TRANSFERAN pesanan menjadi KIRIM dan
toko melakukan pengiriman
 4.2. Membuat Use Case Diagram Utama
Setelah melakukan Analisa, Buatlah Use Case Diagram seperti dibawah ini pada
Ms. Word atau Double Folio.

5. Tugas
1) Buatlah Use Case Diagram seperti di bawah ini lalu buatlah tabel scenario dari
Use Case Diagram tersebut!
2) Buatlah use case diagram peminjaman buku di perpustakaan!
3) Buatlah diagram use case rental mobil!
4) Lakukan analisa terhadap system parkir seperti yang terdapat pada langkah
kerja/praktikum, lalu tentukan use case dari analisa system tersebut dan buatlah
scenario serta use case diagramnya!
 FAKULTAS TEKNIK UNP JOBSHEET
Jurusan : Teknik Elektronika No : 03
Program Studi : Pend. Teknik Informatika Waktu : 2 SKS Praktikum
Mata Kuliah : Interaksi Manusia & Komputer Topik : Draw.io dan Wireframe

1. Tujuan
Mengenalkan penggunaan platform Draw.io untuk membuat wireframe, serta
memberikan pemahaman tentang konsep dasar wireframe dalam desain antarmuka
pengguna.

2. Alat dan Bahan

A. Alat
- PC/Laptop
B. Bahan
- Modul Pengantar Pembelajaran
- Aplikasi Draw.io

3. Teori Pengantar
A. Draw.io
Draw.io adalah alat diagram dan desain grafis online yang digunakan untuk
membuat berbagai jenis diagram, termasuk wireframe. Draw.io merupakan
perangkat lunak diagram dan visualisasi yang sering digunakan untuk membuat
berbagai jenis diagram, seperti diagram alur, diagram organisasi, diagram aliran
kerja, diagram jaringan, dan banyak lagi. Ini adalah alat yang sangat berguna untuk
menggambarkan informasi kompleks dan konsep visual dalam format yang mudah
dimengerti.
Draw.io memiliki berbagai kegunaan yang luas dalam berbagai bidang,
termasuk bisnis, pendidikan, pengembangan perangkat lunak, dan banyak lagi.
Berikut adalah beberapa contoh kegunaan utama dari Draw.io:
1) Pemahaman Konsep: Draw.io memungkinkan Anda untuk membuat peta
konsep dan diagram visual yang membantu dalam pemahaman konsep yang
kompleks. Ini berguna dalam presentasi, pembelajaran, dan diskusi.
2) Pemodelan Proses Bisnis: Anda dapat menggunakan Draw.io untuk membuat
diagram alur kerja dan proses bisnis. Ini membantu dalam mengidentifikasi dan
memahami aliran kerja, peran, dan tugas dalam organisasi.
3) Pemodelan Basis Data: Untuk pengembangan perangkat lunak dan manajemen
basis data, Draw.io memungkinkan Anda untuk membuat diagram entity-
relationship (ERD) dan skema basis data untuk merencanakan struktur basis
data.
4) Desain Sistem: Draw.io dapat digunakan untuk membuat diagram desain sistem
dan arsitektur, yang membantu dalam perencanaan dan komunikasi tentang
bagaimana sistem akan dibangun.
5) Diagram UML: Untuk pengembangan perangkat lunak, Draw.io menyediakan
bentuk-bentuk UML yang memungkinkan Anda untuk membuat diagram kelas,
diagram sekuen, dan diagram aktivitas.
6) Diagram Jaringan: Untuk administrator jaringan dan profesional TI, Draw.io
dapat digunakan untuk membuat diagram jaringan yang mencakup topologi,
perangkat keras, dan koneksi.
7) Diagram Organisasi: Draw.io membantu dalam membuat diagram struktur
organisasi yang mencakup hierarki posisi dan tugas dalam sebuah perusahaan.
8) Diagram Alur Kerja: Anda dapat membuat diagram alur kerja untuk
menggambarkan aliran tugas dan prosedur yang diperlukan dalam berbagai
konteks, seperti manufaktur atau proses layanan.
9) Peta Konsep: Draw.io membantu dalam pembuatan peta konsep yang
menghubungkan ide-ide dan konsep untuk membantu dalam pemahaman dan
perencanaan proyek atau pemecahan masalah.
10) Manajemen Proyek: Untuk manajemen proyek, Anda dapat menggunakan
Draw.io untuk membuat diagram Gantt yang menunjukkan jadwal tugas dan
progres proyek.
11) Presentasi: Anda dapat menggunakan Draw.io untuk membuat elemen visual
yang kuat dalam presentasi Anda, seperti grafik, diagram, dan ilustrasi.
12) Pendidikan: Di dunia pendidikan, Draw.io digunakan untuk mengajarkan
konsep-konsep seperti matematika, ilmu pengetahuan, dan pemodelan data
dengan cara yang lebih mudah dimengerti melalui visualisasi.
13) Kolaborasi Tim: Draw.io memungkinkan kolaborasi real-time dengan anggota
tim, yang sangat berguna untuk kerja tim dan proyek yang melibatkan beberapa
orang.
14) Dokumentasi: Anda dapat menggunakan Draw.io untuk membuat dokumentasi
teknis, termasuk diagram arsitektur, skema, dan instruksi langkah demi langkah.
15) Desain Produk: Dalam desain produk, Draw.io dapat digunakan untuk membuat
sketsa awal dan diagram konseptual untuk membantu dalam proses
perancangan.
16) Analisis Data: Anda dapat membuat diagram visual untuk menggambarkan dan
menganalisis data, seperti grafik, diagram batang, atau diagram lingkaran.
17) Perencanaan Acara: Untuk perencanaan acara, Draw.io dapat digunakan untuk
membuat diagram penataan tempat duduk, peta acara, dan rencana tata letak.
18) Manajemen Pengetahuan: Draw.io digunakan untuk membuat diagram yang
memvisualisasikan pengetahuan organisasi atau informasi penting dalam
konteks perusahaan.
 Berikut adalah bentuk tampilan dari aplikasi draw.io versi web

B. Wireframe
Wireframe adalah representasi visual sederhana dari struktur dan elemen dalam
sebuah antarmuka pengguna (UI). Ini membantu merencanakan tata letak,
komponen, dan hierarki elemen sebelum proses desain yang lebih detail dimulai.
Wireframe merupakan salah satu elemen penting dalam desain grafis dan desain
pengalaman pengguna (user experience design/UX design). Ini adalah representasi
visual dari struktur dasar atau kerangka sebuah halaman web, aplikasi, atau produk
digital lainnya. Wireframe dirancang untuk menggambarkan tata letak elemen-
elemen utama, seperti teks, gambar, tombol, dan area fungsional lainnya tanpa
memperhatikan detail-desain visual yang lebih halus seperti warna, tipografi, atau
grafis.
Berikut beberapa poin penting tentang wireframe:
1) Tujuan Utama: Wireframe digunakan untuk merancang dan merencanakan
struktur dasar sebuah produk digital sebelum memasuki tahap desain yang lebih
rinci. Ini membantu tim desain dan pengembangan memahami bagaimana
halaman atau aplikasi akan terlihat dan berperilaku.
2) Simpel dan Abstrak: Wireframe sengaja sederhana dan abstrak. Tujuannya
adalah untuk fokus pada tata letak, hierarki informasi, dan alur penggunaan. Ini
membantu menghindari terlalu banyak detail yang dapat mengaburkan
pandangan tentang desain yang lebih tinggi.
3) Konten Utama: Wireframe memprioritaskan elemen-elemen konten utama. Ini
mencakup teks, gambar, dan elemen interaktif seperti tombol atau formulir.
Dalam halaman web, ini bisa mencakup header, menu navigasi, area konten,
dan footer.
4) Tidak Ada Warna atau Stilisasi: Wireframe biasanya dibuat dengan garis-garis
hitam putih atau abu-abu tanpa warna atau elemen visual lainnya. Ini membantu
fokus pada struktur daripada estetika.
5) Dua Jenis Wireframe Utama: Terdapat dua jenis wireframe utama:
- Wireframe Rendah (Low-Fidelity): Ini adalah wireframe yang sangat
sederhana, biasanya digambar dengan tangan atau menggunakan perangkat
lunak desain sederhana. Mereka cocok untuk tahap awal perencanaan dan
ide-ide kasar.
- Wireframe Tinggi (High-Fidelity): Wireframe tinggi lebih mendetail dan
bisa dibuat dengan perangkat lunak desain seperti Adobe XD atau Sketch.
Mereka mencakup elemen-elemen lebih rinci dan sering kali termasuk
anotasi yang menjelaskan perilaku elemen-elemen interaktif.
6) Kolaborasi: Wireframe membantu dalam kolaborasi antara anggota tim desain,
pengembangan, dan manajemen produk. Ini memungkinkan semua orang
memiliki pemahaman yang seragam tentang apa yang akan dibangun.
7) Iterasi: Wireframe dapat digunakan sebagai titik awal untuk menguji konsep,
mengumpulkan masukan, dan melakukan iterasi desain sebelum berinvestasi
dalam pengembangan penuh produk digital.
8) Penting untuk Desain Responsif: Dalam desain responsif, wireframe juga
digunakan untuk merencanakan bagaimana tampilan akan berubah pada
berbagai ukuran layar, seperti perangkat mobile dan tablet.

Dalam pengembangan produk digital, wireframe adalah langkah penting dalam

proses desain dan membantu memastikan bahwa desain akhir akan memenuhi
kebutuhan pengguna dan tujuan bisnis.

Berikut adalah contoh tampilan wireframe

 Komponen Utama Wireframe
Inilah komponen utama yang diperlukan dalam membuat sebuah wireframe website:
1) Layout Utama
Komponen utama wireframe adalah layout utama website atau aplikasi.
Komponen ini biasanya berupa kotak-kotak yang telah diatur sesuai dengan tata
letak halaman website. Dalam komponen ini, terdapat beberapa bagian, seperti
header, menu navigasi, body, hingga letak sidebar
2) Interface
Interface adalah elemen wireframe yang terkait dengan media interaksi antara
tampilan website dengan pengunjung. Komponen ini digunakan sebagai
penunjang informasi pada pengunjung yang biasanya berupa button, link, judul,
font size, logo, dan lain-lain.
3) Navigasi
Komponen lain wireframe website adalah navigasi. Komponen ini berguna
untuk memudahkan pengunjung menjelajahi website Anda. Desain yang
digunakan bisa berupa menu, tanda panah, atau ikon lain sesuai keinginan.
Dengan komponen navigasi yang jelas, nantinya website akan mampu
memberikan user experience yang baik kepada pengunjungnya.
4) Informasi
Sesuai namanya, komponen informasi merupakan konten utama yang ingin
disampaikan pada audiens. Desain informasi yang tepat bisa membuat
pengunjung lebih betah nantinya. Elemen wireframe ini bisa berupa input,
thumbnail, link, paragraf, dan lain-lain. Oleh karena itu, penting untuk
menempatkan komponen ini di bagian yang paling mudah dilihat pengunjung.
5) Komponen Tambahan
Komponen tambahan bisa dimasukkan dalam wireframe sesuai jenis dan
kebutuhan website. Sebagai contoh, jika Anda merancang website untuk toko
online, komponen tambahan yang bisa Anda gunakan meliputi fitur cek resi,
form konfirmasi pemesanan, hingga layanan chat dengan pembeli secara
langsung.

4. Langkah-langkah Praktikum
1) Akses Web draw.io di peramban yang anda inginkan
2) Pilih Create New Diagram
3) Selanjutnya ubah filename menjadi praktikum_nama anda > pilih blank diagram >
Create

4) Setelah diagram terbuka, kita perlu menambahkan Bentuk Mockup yang disediakan
oleh draw.io. Anda dapat melakukannya melalui menu + More Shapes. Di pojok
kiri bawah.
5) Cari Mockups dan centang lalu apply

6) Setelah menerapkannya, anda dapat melihat kategori mockups pada jendela sebelah
kiri halaman diagram anda

7) Klik Mockup Containers lalu pilih Browser Window

 8) Selanjutnya silahkan berkreasi dengan kategori lainnya sendiri, Have Fun 

5. Tugas
1) Buatlah Website Wireframe Mockup sebagus mungkin menggunakan draw.io
2) Buatlah Android Wireframe tentang biodata diri dengan menyertakan beberapa
kategori yang tersedia pada draw.io
3) Buatlah beberapa halaman mockup website/android (halaman utama, halaman
tentang, dll) di dalam satu tampilan diagram draw.io dengan judul dan tema bebas
(Marketplace, Simpan Pinjam, DLL)
 FAKULTAS TEKNIK UNP JOBSHEET
Jurusan : Teknik Elektronika No : 03
Program Studi : Pend. Teknik Informatika Waktu : 2 SKS Praktikum
Mata Kuliah : Interaksi Manusia & Komputer Topik : Figma

A. Tujuan:
Mengenalkan penggunaan platform Figma untuk desain antarmuka pengguna (UI) dan
memberikan pemahaman tentang konsep dasar desain UI.
B. Alat dan bahan
- Personal Computer (PC)
- Paket data
- Aplikasi Figma
- Modul

C. Teori singkat
Figma
Figma adalah platform desain kolaboratif berbasis web yang digunakan untuk membuat
antarmuka pengguna (UI) interaktif.
Apa itu Desain Antarmuka Pengguna (UI)
Desain UI melibatkan merancang tampilan visual dari aplikasi atau situs web untuk
memastikan pengalaman pengguna yang baik.
Fitur Figma
Setelah tahu apa itu figma, kemudian figma juga memiliki berbagai fitur yang mereka
tawarkan. Berikut ini fitur-fitur yang dilansir dari situs resmi Figma, diantaranya adalah.
1. Modern pen tool: Fitur pertama adalah modern pen tool, fitur ini untuk membantu kamu
dalam menggambar ke berbagai arah dan bentuk menggunakan vector networks.
Sehingga kamu tidak perlu lagi menghubungkan ke titik awal.
2. Instant arc designs: Selanjutnya adalah fitur instant arc yang membantu kamu dalam
membuat bentuk busur, lingkaran, dan yang lain dengan mudah tanpa perlu takut
hasilnya tidak lurus.
3. OpenType: OpenType merupakan serangkaian fitur lanjutan font pada figma. Pada fitur
ini kamu dapat mengkustomisasi font yang canggih sehingga dapat lebih
mengekspresikan merek atau brand kamu.
4. Less manual resizing: Fitur yang memudahkan desainer dalam menyesuaikan ukuran
teks dalam sebuah button secara otomatis.
5. Stretch to fill: Setting komponen layout secara otomatis, baik ke kanan, kiri, atas, atau
bawah secara responsif dan mudah.
6. Design speaks development: Fitur untuk mengatur padding, direction, dan spacing yang
langsung diterjemahkan dalam kode script.
7. Plugin: Figma menyediakan fitur plugin yang dapat digunakan untuk menunjang
kebutuhan desain kamu yang berupa icons, chart, diagrams, dan masih banyak lagi
 8. Widget: Widget merupakan objek khusus yang dapat ditambahkan pengguna ke
halaman editor atau FigJam. Tidak seperti plugin yang hanya dapat dilihat oleh
individu, widget adalah objek yang dapat dilihat oleh semua orang dalam sebuah file.
9. Easy development: Figma mendukung pengembangan yang mudah, apabila kamu
berhasil membuat desain untuk web atau aplikasi, maka di kemudian hari dapat
dilanjutkan dengan mudah oleh desainer lain.
10. Private extensions: Perusahaan atau organisasi dapat membuat dan mendistribusikan
private plugin dan widget pada perusahaan mereka sesuai kebutuhan.
11. Unlimited viewers: Fitur yang memungkinkan kamu untuk mengundang rekan tim
sebanyak mungkin untuk melihat dan berkomentar secara gratis.
12. Inspect design files: Setiap viewer dapat mengambil cuplikan kode atau script yang
dihasilkan untuk CSS, iOS, dan android.
Fungsi Figma
Dengan berbagai fitur yang sudah kita bahas di atas tentunya semakin memudahkan para
desainer. Lalu apa saja yang bisa kamu lakukan pada aplikasi figma ini? Di bawah ini beberapa
fungsi figma adalah sebagai berikut.
1. Wireframe aplikasi
Sebelum mendesain aplikasi, UI/UX Designer akan membuat gambaran kasar dari desain
terlebih dulu yang disebut dengan wireframe. Pada wireframe terdapat kerangka desain yang
akan dibuat dan dibuat menjadi lebih visual.
Figma sebagai salah satu aplikasi desain juga dapat membantu kamu dalam membuat
wireframe aplikasi sebelum masuk pada pembuatan UI-nya.
2. UI aplikasi dan website
Fungsi utama dari figma adalah untuk membuat desain aplikasi baik website maupun
mobile. Untuk mendukung hal tersebut figma juga menyediakan berbagai pilihan frame mulai
dari frame untuk phone yang meliputi iPhone dan android, frame untuk desktop, dan tablet.
Dengan berbagai pilihan tersebut akan memudahkan kamu ketika mendesain dan
diimplementasikan ke kode oleh programmer.
3. Prototype
Ketika desain sudah dibuat, seringkali desainer akan membuat bagaimana alur kerja
aplikasi tersebut, dari satu halaman ke halaman lain. Pada proses pembuatan antar muka
pengguna, bagian ini disebut prototype atau prototyping.
Meski begitu, prototype sendiri dibagi menjadi beberapa jenis yaitu kertas atau berupa
gambaran awal dan klik tayang. Dalam hal ini yang dibuat oleh para desainer pada figma yaitu
prototype klik tayang, yaitu interaksi atau klik antar halaman untuk menunjukkan bagaimana
alur desainnya.
4. Mockup desain
Berikutnya, fungsi figma adalah untuk membuat mockup. Mockup merupakan desain yang
akan diterapkan pada sebuah produk, mockup lebih mirip maket yang memberikan gambaran
detail terhadap produk yang akan dihasilkan. Beberapa contohnya seperti mockup logo,
kemasan, dan masih banyak lagi.

5. Desain sosial media

Selain menyediakan berbagai frame untuk membuat antarmuka aplikasi, figma juga
menyediakan frame untuk pembuatan desain sosial media seperti twitter post, instagram post,
dan masih banyak lagi yang bisa kamu temukan. Dengan adanya frame tersebut, kamu para
graphic designer tidak perlu lagi membuat custom ukuran karena sudah tersedia pada figma.
Keunggulan Figma
Selain figma, ada banyak aplikasi desain lain yang bisa digunakan. Namun, terdapat
beberapa keunggulan figma yang tidak dimiliki oleh mereka. Keunggulan figma adalah sebagai
berikut.
1. Berkolaborasi secara real time
Seperti yang kita tahu, figma menyediakan fitur kolaborasi bersama tim dengan cara
mengajak atau mengundang editor. Dengan fitur ini kamu dapat menyelesaikan proyek lebih
cepat, mudah, dan transparan. Selain itu, kamu juga dapat melihat berbagai pengeditan yang
dilakukan pada masing-masing tim karena semua terekam pada fitur history.
2. Berbasis cloud sehingga tidak perlu instal
Keunggulan figma berikutnya adalah berbasis cloud storage, sehingga kamu tidak perlu
melakukan instalasi pada PC. Selain itu, file dan berbagai project desain juga akan tersimpan
pada server figma, bukan pada komputer lokal kamu.
Hal tersebut juga membuat kamu lebih mudah dalam sharing file. Cukup salin link di mana
desain kamu dibuat, dan rekan kamu sudah bisa langsung mengaksesnya asalkan tersambung
ke internet.
3. Menyediakan banyak plugin tambahan
Meskipun figma sudah dilengkapi dengan berbagai fitur canggih, namun pasti masih
ada beberapa fitur yang tidak tersedia. Tapi, itu tidak akan menjadi masalah para desainer
karena figma menyediakan plugin untuk menunjang fitur tambahan yang dibutuhkan. Dengan
adanya plugin tersebut maka pembuatan desain dan produktivitas menjadi lebih powerful.
D. Langkah-langkah Praktikum:

1. Untuk menggunakan tool ini, Kamu cukup membuka Figma.com

2. Kemudian melakukan registrasi akun

3. Dan kamu siap untuk menggunakannya. Kemudian kita langsung membuat model
aplikasi.
4. Mari kita membuat UI untuk mobile app seperti design dibawah ini

5. Kemudian, Kita mulai dengan membuat Frame terlebih dahulu. Klik icon frame di
pojok kiri atas
6. Lalu pilih iPhone 8 (375 x 667) untuk frame nya (sesuai kebutuhan).
7. Lalu tampilannya seperti gambar dibawah.

8. Setelah itu, masukkan tulisan dengan memencet icon Teks di sebelah kiri atas.
Lalu klik di sembarang tempat pada frame nya.

9. Kita buat tulisan “Discover” sebagai title. Untuk informasi nama font, ukuran, dan
warna nya sudah ada di sebelah kanan ya.
10. Setelah itu tempatkan tulisan “based on your streaming activity” sebagai
description. Untuk informasi nama font, ukuran, dan warna nya sudah ada di
sebelah kanan ya.

11. Setelah itu kita buat kotak dengan menekan icon kotak diatas

12. Kemudian tempatkan di frame.

13. Setelah itu kita ubah sudut kotak menjadi melengkung, dengan mengubah border-
radius nya menjadi 8

14. Sehingga tampilan nya menjadi seperti ini

15. Setelah itu kita masukan gambar. Situs favorit saya adalah Unsplash.com.
- Memasukkan gambar cukup mudah:
- Hanya dengan meng-klik kanan pada gambar
- Lalu pilih copy image
- Setelah itu paste pada frame dengan menekan command+V (pada Mac)
atau ctrl + V (pada windows)
16. Agar gambar bisa masuk ke dalam kotak, kita masking kotakan nya dengan cara:
- mengklik kanan kotakan nya
- Lalu pilih “Use as Mask”

17. Sehingga tampilan nya menjadi seperti ini

18. Setelah itu posisikan gambar agar terlihat bagus

19. Setelah itu kita tempatkan teks “Health is the best Investment” sebagai judul di
card tersebut. Untuk informasi nama font, ukuran, dan warna nya sudah ada di
sebelah kanan.
20. Setelah itu kita masukan lingkaran dengan menekan icon pada pojok kiri atas
seperti berikut

21. Lalu tempatkan di atas card. Ingat, saat menggambar lingkaran nya, selalu tekan
tombol Shift agar lingkaran nya bulat sempurna. Untuk informasi lebar dan tinggi
lingkaran, warna lingkaran dan lain nya ada di sebelah kanan
22. Setelah itu kita masukan segitiga, dengan menekan tombol seperti berikut.

23. Lalu tempatkan di atas lingkaran.

 24. Agar segitiga bisa menjadi tombol play, lakukan langkah berikut:
- Perkecil segitiga nya
- Beri warna putih dengan mengubah Fill nya
- Putar segitiga 150 derajat ke arah kanan
- Ubah sudut segitiga agar tumpul dengan mengganti corner radius nya.

Semua settingan bisa kamu lihat di sebelah kanan.

25. Setelah itu kita buat lingkaran untuk tempat avatar

26. Setelah itu cari gambar untuk avatar, lalu paste

27. Gunakan teknik “Use as mask” untuk memasukkan gambar avatar ke dalam
lingkaran
28. Mari kita ke bagian layer dulu. Berikut adalah layer layer yang kita punya. Mari
rapikan terlebih dahulu.

29. Untuk avatar, jadikan satu folder, agar layer diatas nya tidak ikut masuk ke dalam
lingkaran. Select Lingkaran dan Foto nya seperti dibawah ini
30. Klik kanan — lalu pilih Group Selection

31. Sehingga akan tampak seperti dibawah ini

32. Mari kita lanjutkan mendesain nya. Kini tambahkan teks “by Samantha atau nama
sendiri” di samping avatar. Untuk informasi nama font, ukuran, dan warna nya
sudah ada di sebelah kanan.

33. Setelah itu tambahkan garis, sebagai pemisah Judul Card dengan Avatar. Cara nya
klik menu seperti dibawah ini
34. Setelah itu gambar garis di frame. Pencet shift agar garis nya lurus. Tebal garis
bisa 0.5 agar tampak tipis (sesuai selera).

35. Sejauh ini, berikut yang kita punya.

36. Setelah itu, kita rapikan dulu layer nya agar nyaman. Berikut adalah pengaturan
layer saya
37. Mari kita lanjut mendesain. Kita tambahkan teks “Popular” di bawah card. Untuk
informasi nama font, ukuran, dan warna nya sudah ada di sebelah kanan
38. Setelah itu kita tambahkan kotakan di bawah nya. Spesifikasi nya bisa dilihat di
kanan.

39. Setelah itu tambahkan teks “How music can boost my mood” di samping card.
Untuk informasi nama font, ukuran, dan warna nya sudah ada di sebelah kanan.
40. Setelah itu tambahkan teks “Angela Smith” di bawah nya. Untuk informasi nama
font, ukuran, dan warna nya sudah ada di sebelah kanan.

41. Setelah itu cari foto yang clean dan colorful, untuk mengisi kotaknya
42. Ulangi langkah diatas untuk membuat konten dibawahnya.

43. Lalu tambahkan garis sebagai pemisah. Spesifikasi garis nya ada di sebelah kanan.
44. Sejauh ini kita telah memiliki design seperti berikut

45. Mari kita lanjutkan untuk mendesign menu di sebelah kanan atas. Pertama gambar
garis (Line). Untuk spesifikasi nya ada di sebelah kanan.
46. Setelah itu gambar 1 garis lagi. Untuk spesifikasi nya ada di sebelah kanan.

47. Setelah itu, gambar 1 garis lagi. Untuk spesifikasi nya ada di sebelah kanan
48. Setelah itu, gambar lingkaran merah untuk tanda notifikasi. Spesifikasi nya ada di
sebelah kanan.

49. Ulangi langkah-langkah diatas hingga menjadi design seperti dibawah ini
E. Tugas
1. Pada tugas sebelumnya, “Website Wireframe Mockup sebagus mungkin
menggunakan draw.io” sekarang buatkan dalam bentuk figma dengan sebagus
mungkin.
2. Pada tugas sebelumnya, “Android Wireframe tentang biodata diri dengan
menyertakan beberapa kategori yang tersedia pada draw.io” sekarang buatkan
dalam bentuk figma dengan sebagus mungkin.
3. Pada tugas sebelumnya “beberapa halaman mockup website/android (halaman
utama, halaman tentang, dll) di dalam satu tampilan diagram draw.io dengan
judul dan tema bebas (Marketplace, Simpan Pinjam, DLL)” sekarang buatkan
dalam bentuk figma dengan sebagus mungkin.
 FAKULTAS TEKNIK UNP JOBSHEET
Jurusan : Teknik Elektronika No : 05
Program Studi : Pend. Teknik Informatika Waktu : 2 SKS Praktikum
Mata Kuliah : Interaksi Manusia & Komputer Topik : Adobe xd

A. Tujuan:
Mengenalkan penggunaan platform abode XD untuk desain antarmuka pengguna (UI) dan
memberikan pemahaman tentang konsep dasar desain UI.
B. Alat dan bahan
- Personal Computer (PC)
- Paket data
- Aplikasi Abode XD
- Modul

C. Teori singkat
a. Adobe XD adalah alat desain dan prototyping yang lengkap untuk merancang
antarmuka pengguna yang menarik dan interaktif. Berikut adalah beberapa fitur utama
yang ada di Adobe XD:

1. Artboards (Papan Gambar):

Anda membuat area kerja terpisah untuk setiap tampilan, ukuran layar, atau halaman dalam
proyek.
2. Elemen UI dan Alat Desain:
Menyediakan berbagai elemen dasar seperti tombol, teks, gambar, ikon, kotak input, dan
lain-lain. Alat untuk menggambar bentuk kustom dan mengatur tata letak.
3. Gaya dan Simbol:
Membuat gaya atau komponen kustom yang dapat digunakan ulang di seluruh proyek.
Simbol memungkinkan Anda mengubah satu elemen dan menerapkan perubahan tersebut
secara otomatis ke semua instansi elemen yang serupa.
4. Grid dan Layar Ketemu:
Grid untuk membantu Anda mengatur elemen dengan presisi. Layar Ketemu memastikan
elemen selalu "terkunci" pada grid yang diatur.
5. Prototyping dan Interaksi:
Fitur prototyping memungkinkan Anda membuat tautan antara artboard dan
menambahkan transisi seperti slide, fade, atau overlay. Definisikan interaksi seperti tindakan
klik atau hover untuk membuat tampilan penggunaan yang lebih nyata.
6. Fitur Voice Commands dan Auto-Animate:
 Voice Commands memungkinkan Anda membuat tautan antara artboard dengan
menggunakan perintah suara. Auto-Animate menghasilkan animasi otomatis berdasarkan
perubahan antara artboard.
b. Penjajakan Penggunaan:
Menggunakan fitur komentar dan tanda di atas elemen untuk berkolaborasi dengan tim
dan memberikan umpan balik langsung pada desain.
1. Prototyping dengan Perangkat Nyata:
Pilih perangkat nyata (misalnya iPhone atau Android) untuk melihat dan menguji prototipe
Anda seperti di perangkat tersebut.
2. Tata Letak Responsif:
Membuat tata letak yang responsif dengan menentukan posisi dan tampilan elemen di
berbagai ukuran layar.
3. Ekspor dan Berbagi:
Ekspor desain ke berbagai format, seperti PNG, SVG, atau PDF. Membagikan tautan untuk
prototipe interaktif yang dapat dilihat oleh pemangku kepentingan.
4. Integrasi Adobe Creative Cloud:
Mudah berbagi aset dan proyek dengan alat kreatif Adobe lainnya seperti Photoshop atau
Illustrator.
5. Plugin:
Memperluas fungsionalitas Adobe XD dengan plugin yang tersedia dari komunitas
pengembang.
6. Animasi dan Transisi Lanjutan:
Fitur canggih untuk membuat animasi kompleks dan transisi interaktif yang menghadirkan
pengalaman yang kaya.
7. Auto Responsive Design:
Membuat tampilan desain responsif dengan fitur adaptasi otomatis ke berbagai ukuran
layar.
8. Stakeholder Review:
Memungkinkan pemangku kepentingan untuk memberikan umpan balik langsung di
prototipe Anda.
9. Pantauan Interaksi (Interactions Dashboard):
Melacak bagaimana pengguna berinteraksi dengan prototipe Anda dan memahami pola
penggunaan.

D. Langkah pratikum
 1. Membuat Proyek Prototipe

Setelah Adobe XD dibuka, layar awal akan muncul dan memungkinkan Anda memilih jenis
proyek Pilih iPhone 6 (375 × 667px). emudian klik ikon iPhone untuk membuat proyek. Dari
iOS Apple, Anda bisa mengakses elemen UI iPhone yang bisa digunakan pada prototipe Anda.
Setelah artboard dibuat, klik dua kali nama artboard, dan ubah ke "Home”(itu tergantung
kebutuhan).

2. Membuat latar belakang Prototipe.

Klik artboard untuk menampilkan karakteristiknya di Properties panel pada, sisi kanan
aplikasi, dan klik warna Fill warna untuk membuka pilihan otak dialog Colors. Atur warna
menjadi abu-abu gelap dan tutup kotak dialog.

Tetapkan latar belakang artboard ke abu-abu gelap.

3. Pengaturan Layar Header
 Selanjutnya masuk ke File > Import. Di situs web fail, mengarahkan ke gambar header dan
klik Import. Gunakan kontrol di sekitar gambar untuk mengubah ukurannya agar sesuai dengan
tajuk layar. Anda juga bisa mengklik dua kali gambar untuk memotong gambar.
Pilih Text Tools dari panel Tools, klik pada area header dan ketik "Nature". Klik dua kali
teks dan dari panel Properties kanan, pilih "Helvetica", atur bentuk tulisan menjadi "bold", dan
ukuran ke "32". Klik dua kali warna Fill lalu atur ke "abu-abu gelap".

4. Membangun Latar Belakang Area Konten

Pilih sarana Rectangle dari panel Tools di sisi kanan, lalu buat persegi panjang di bawah
header. Dari kanan panel Properties, atur warna Fill menjadi abu-abu tua, dan hapus centang
pada opsi Border untuk menghilangkan goresan.

5. Tambahkan Konten

Impor konten thumbnail konten dan tambahkan teks seperti yang ditunjukkan pada langkah
3. Atur thumbnail agar sesuai dengan latar belakang area konten dan di sisi kanan tambahkan
teks seperti yang ditunjukkan pada gambar 5 di bawah ini. Untuk memotong thumbnail pada
area tertentu, Anda dapat mengklik dua kali gambar tersebut dan menggunakan keempat sudut
untuk memotongnya.
 6. Membuat Kisi Konten

Salah satu sarana yang paling berguna di Adobe XD adalah Anda dapat membuat kisi dari
konten yang ada tanpa menggandakannya secara manual. Tekan Shift pada keyboard Anda dan
pilih thumbnail, content background, dan text. Kemudian, klik tombol Repeat Grid di
panel Properties. Ini menerjemahkan konten yang dibuat ke dalam kisi.
Tarik ikon hijau bagian bawah untuk membuat kisi konten vertikal. Kemudian, Anda dapat
mengklik dua kali konten berulang untuk memodifikasinya. Terakhir, pilih konten dan
pilih Ungroup Grid untuk memutus keterkaitan di antara keduanya.

7. Membuat Halaman Baru (Artboard)

Untuk membuat halaman dengan layout baru, tekan pada Artboard tool dari panel Tools
yang terletak di sebelah kiri. Kemudian, pilih template iPhone 6 dari kanan untuk membuat
halaman baru.
 8. Membuat lebih banyak halaman.
Ulangi langkah di atas untuk membuat lebih banyak halaman dan tambahkan konten ke
halaman seperti petunjuk di atas. Layout tampilan terakhir harus seperti gambar di bawah ini.

Setelah desain layout selesai, kita akan beralih ke tampilan Prototype untuk
membangun keterkaitan antara halaman yang dibuat.

9. Mengatur Beranda Proyek

Sebelum mengatur hubungan antar halaman, kita perlu menetapkan beranda untuk proyek
tersebut. Beranda bisa berupa halaman yang dibuat. Dalam contoh ini, kami akan menetapkan
layout pertama yang kami buat sebagai beranda dengan mengklik ikon Home yang muncul
pada bagian kiri atas artboard.
 10. Membangun Keterkaitan Antara Halaman
Untuk menghubungkan antar halaman, pilih beranda, klik panah buram ke sisi kanan.
Menu Target akan muncul; pilih halaman berikutnya, dan atur jenis animasi transisi (misalnya
"Dissolve"). Ulangi langkah ini untuk menghubungkan antara halaman lain.

11. Menciptakan Interaksi

Dalam prototipe ini, konten blok pertama yang terdapat di beranda harus beralih menjadi
konten pertama artboard, dan konten blok kedua harus terhubung ke artboard kedua ... dll. Jadi,
pilih konten blok pertama, dan klik kanan tanda panah biru untuk menetapkan target sama
dengan apa yang kita lakukan di langkah 10. Ulangi langkah dengan konten blok kedua.

Setelah membuat prototipe, ada dua metode utama pratinjau. Pertama adalah
menggunakan fitur Preview yang terdapat dalam Adobe XD itu sendiri, dan yang lainnya
adalah melalui hipertaut web yang bisa dikirim ke anggota tim.

12. Lakukan Pratinjau Prototip

Klik ikon Preview di sebelah kanan atas aplikasi. Ini akan menampilkan layar pratinjau
yang memungkinkan kita melihat dan mengarahkan halaman yang berbeda. Sebagai tambahan
yang bagus, ia memiliki ikon Record yang memungkinkan kita untuk merekam arus antar
halaman dan menyimpannya ke format Quicktime (MOV).
 13. Berbagi Prototipe

Sekarang kita hanya perlu membagikan dokumen kita dengan anggota tim lain atau
pemangku kepentingan yang belum tentu menggunakan XD. Klik pada ikon Share di bagian
kanan atas aplikasi; menu akan muncul, memberikan URL yang bisa disalin dan dibagi antar
anggota tim:

Cara Ekspor File ADOBE XD ke HTML Menggunakan PLUGIN

Sekarang kita keluar dari jalan itu, cukup ikuti langkah-langkah sederhana ini untuk
mengunduh plugin yang diperlukan dan kemudian ekspor File Adobe XD ke HTML:

1: Klik tombol menu hamburger di sudut kiri atas program.

2: Gulir ke bawah dan ketuk opsi Add-on. Ini akan membuka panel Plugin baru di sebelah
kanan menu utama.

3: Pilih opsi Temukan Plugin dari panel Plugin.

4: Di halaman berikutnya, cari HTML lalu klik tombol Instal di sebelah plugin Ekspor Web.

Setelah Anda menginstal plugin yang diperlukan, buka proyek yang ingin Anda ekspor
ke HTML dan kemudian lanjutkan dengan langkah selanjutnya. Pada artikel ini, saya akan
menggunakan artboard Adobe XD gratis yang saya temukan online.

5: Pilih artboard yang ingin Anda ekspor dengan mengkliknya.

6: Sekarang klik tombol menu, buka panel Plugin dan kemudian pilih opsi Ekspor Artboard
dari pengaturan plugin Ekspor Web baru.

Dari jendela yang sama, Anda juga dapat memilih untuk mengekspor beberapa artboard
atau artboard terakhir yang Anda edit.

7: Di menu pop-up Ekspor Artboard, tambahkan nama file, lalu pilih folder tempat Anda ingin
menyimpan file dengan mengklik ikon folder kecil di sebelah opsi Ekspor Folder.
8: Sekarang, jika Anda ingin menambahkan skrip eksternal, lembar gaya, atau font alternatif
ke file sumber, Anda dapat menambahkannya di jendela yang sama.

9: Kemudian, Anda dapat memilih dimensi file HTML keluaran dengan mengetikkan
nilainya di ruang kosong di sebelah opsi ukuran.
10: Untuk memastikan bahwa skala proyek dengan benar, Anda juga dapat memilih beberapa
pengaturan penskalaan dari jendela yang sama dengan mencentang kotak di samping setiap
opsi.
11: Selain itu, Anda dapat memilih pengaturan tambahan seperti navigasi keyboard,
penyegaran otomatis, dll. dengan mencentang kotak di sebelah opsi.

12: Setelah Anda selesai dengan semua pengaturan, cukup klik tombol "Ekspor" biru dan Anda
selesai. Artboard akan muncul sebagai file HTML di folder tujuan yang Anda tentukan
sebelumnya.
 Dari jendela yang sama, Anda juga dapat menyalin CSS dan markup artboard jika
Anda juga ingin membagikan informasi ini dengan pengembang Anda.

E. Tugas
1. Pada tugas sebelumnya, “Website Wireframe Mockup sebagus mungkin
menggunakan draw.io sekarang buatkan dalam bentuk figma” dan pada
tugas ini buatkan dalam bentuk abode XD dengan fiturnya sebagus
mungkin!.
2. Pada tugas sebelumnya, “Android Wireframe tentang biodata diri dengan
menyertakan beberapa kategori yang tersedia pada draw.io sekarang
buatkan dalam bentuk figma” pada tugas ini buat dalam bentuk Abode XD
dengan fiturnya sebagus mungkin!.
3. Pada tugas sebelumnya “beberapa halaman mockup website/android
(halaman utama, halaman tentang, dll) di dalam satu tampilan diagram
draw.io dengan judul dan tema bebas (Marketplace, Simpan Pinjam, DLL)
sekarang buatkan dalam bentuk figma” pada tugas ini buatkan dalam bentuk
Abode XD dengan fiturnya sebagus mungkin!.