JBPM: Jurnal Bidang Penelitian Multimedia Vol. 1, No. 1 Oktober 2022, pp.

35–42

PERANCANGAN APLIKASI PORTAL UI/UX PADA SISWA

SEKOLAH MENENGAH KEJURUAN (SMK)
Ayu Pita Sari1, Siti Aisyah2, Azhar Fauzi3 Nur Afifah Gustini4, Muhammad Randa Syuhada5
1,3,4,5
Desain Grafis (Kampus Medan), 2Teknik Grafika (Kampus Medan)
Politeknik Negeri Media Kereatif, Indonesia
Jl. Guru Sinumba No.6, Helvetia Tim., Kec. Medan Helvetia, Kota Medan, Sumatera Utara 20124
ayupitasari53@gmail.com 1, sitiaisyah@polimedia.ac.id2 , azharfauzi016@gmail.com3,
nurafifahgustini@gmail.com4, randasyuhada9@gmail.com5.

Abstract: To facilitate online attendance activities at the Vocational School, use the Attendance Application that
we developed to provide satisfaction to our teachers and students, both in features and appearance, and in
attendance activities and other school-related activities available. Therefore, by using the design thinking method,
we design an application design in the form of a mobile application where users are involved in the attendance
activity process. The result of the design that we want to do is simplify the implementation of attendance activities
so that it can be used as an alternative tool for designing modern attendance applications at SMK .

Keywords: Figma, Perancangan Aplikasi Absensi,UI/UX

Abstrak: Untuk mempermudah kegiatan absensi online di Sekolah SMK , gunakan Aplikasi Absensi yang kami
kembangkan untuk memberikan kepuasan kepada guru dan siswa kami, baik dalam fitur dan penampilannya, dan
dalam kegiatan absensi dan kegiatan terkait sekolah lainnya tersedia. kegiatan yang berhubungan dengan sekolah,
melakukan kegiatan absensi, dan melakukan iuran dan kegiatan lain yang berhubungan dengan sekolah, Oleh
karena itu, dengan menggunakan metode design thinking, kami merancang desain aplikasi dalam bentuk aplikasi
mobile dimana pengguna dilibatkan dalam proses kegiatan absensi. Hasil dari perancangan yang ingin kami
lakukan adalah menyederhanakan pelaksanaan kegiatan absensi sehingga dapat digunakan sebagai alternatif alat
bantu perancangan aplikasi absensi modern di SMK .

Kata kunci: Figma, Perancangan Aplikasi Absensi,UI/UX

1. Pendahuluan
Ketika melakukan kegiatan absensi manual ini, para siswa juga harus melakukan kegiatan absensi dengan
menu setiap hari dan dibantu oleh guru yang memasuki kelasnya. Kegiatan yang dilakukan secara manual ini lebih
banyak menyita waktu untuk belajar dari siswa dan guru. pertama-tama harus menyelidikinya secara manual
Siswa. Di ranah digital saat ini, semua sekolah perlu dan tidak lagi harus melakukan acara tatap muka secara
online[1]. Khusus dalam dunia pendidikan, sistem informasi berbasis website sangat dibutuhkan untuk mendukung
pembelajaran dan penilaian siswa, dan peneliti telah mengembangkan sistem informasi menggunakan aplikasi
absensi online[2].
Di era modernisasi ini, orang sangat bergantung pada teknologi. Hal ini menjadikan teknologi sebagai
kebutuhan dasar bagi semua orang. Terutama bagi guru dan siswa, Dari orang tua hingga muda, dari spesialis
hingga masyarakat umum, teknologi digunakan dalam berbagai aspek kehidupan kita. Teknologi saat ini telah
berkembang pesat. Berbeda dengan dulu, teknologi telah sangat berdampak pada aspek kehidupan manusia,
berperan sebagai teknologi dalam kehidupan masyarakat luas, khususnya dalam pendidikan. Dalam pendidikan
sendiri, teknologi kini memegang peranan unik dalam proses belajar mengajar [3].
Siapa pun yang mempelajari desain aplikasi web atau seluler harus tahu apa itu UI (Antarmuka Pengguna)
dan UX (Pengalaman Pengguna). Banyak orang yang beranggapan bahwa UI dan UX benar-benar satu karena
memiliki tugas yang sama, meskipun berbeda satu sama lain [3]. Saat mendesain tampilan situs web dan seluler,
komunikasi antara semua tim diperlukan untuk menghindari desain ulang. Ini sering terjadi ketika tidak ada
komunikasi visual antara tim desain dan tim pengembangan mengenai desain aplikasi [4]. Untuk meminimalkan
semua kemungkinan, terutama masalah yang disebutkan di atas, mulailah dengan membuat cetak biru untuk
aplikasi yang Anda kembangkan. Gunakan alat yang tersedia secara luas di web, baik gratis maupun berbayar.
Salah satunya adalah Figma, sebuah aplikasi berbasis web. Figma menghemat waktu Anda meninjau desain dengan
memungkinkan Anda bekerja secara bersamaan.
Misalnya, Anda dapat berkomentar, memberikan saran, atau bahkan mengubah desain yang ada. Figma
adalah aplikasi desain berbasis cloud dan alat prototipe untuk proyek digital [5]. Figma dibuat untuk

35
 Sari et al / JBPM Vol. 1 No. 1, Oktober 2022 pp. 35–42

memungkinkan pengguna berkolaborasi [6] dalam proyek dan bekerja dalam tim, di mana saja pada saat yang
bersamaan. Figma adalah aplikasi desain berbasis cloud dan alat prototipe untuk proyek digital. Figma dibuat untuk
membantu orang berkolaborasi dalam proyek dan bekerja dalam tim di mana saja pada saat yang bersamaan. Dalam
makalahnya, penulis Nurdin membuat aplikasi berbasis website-nya desainnya menggunakan Figma untuk
menggambar antarmuka pengguna. Diharapkan desain sistem ini akan membantu menciptakan sistem yang efektif
dan efisien.
Penelitian menggunakan aplikasi FIGMA saat merancang aplikasi Wakaf Indonesia berbasis blockchain.
Software yang saya gunakan saat mengembangkan aplikasi di bidang desain adalah Adobe Photoshop dan Figma.
Gunakan Adobe Photoshop untuk membuat ikon yang Anda inginkan. Figma adalah salah satu aplikasi yang
digunakan seorang desainer UI atau UX untuk membuat antarmuka [7] untuk situs web dan aplikasi selulernya.
Tidak seperti Adobe Photoshop, aplikasi Figma memungkinkan banyak desainer untuk dengan mudah
berkolaborasi pada dokumen yang sama, membuat anotasi, membuat saran, dan memodifikasi draf desain yang
ada. Selain itu, Figma bersifat real-time dengan semua perubahan disimpan secara otomatis [3].

2. Metode Penelitian
Dalam proses metode penelitian ini merupakan tahap awal proses editing mulai dari membuka website
editing figma di google.com dan proses menentukan dokumen yang akan di buat, import gambar, import logo,
insert text, hingga peletakan tombol yang akan di gunakan dalam tampilan awal aplikasi ini [8] dan berdasarkan
metode desain WEB figma untuk produksi desain UI/UX, kami akan membuat desain yang diinginkan dalam
menggunakan metode kualitatif sebagai panduan untuk produksi desain. Tema ini dibuat berdasarkan beberapa
metedologi UI/UX seperti Tema Aplikasi Absensi UI untuk mempermudah dalam membuat tema yang membantu
guru dan siswa melakukan kegiatan absensi di sekolah (Fatchurrachman et al., 2020). Proses pengambilan
kehadiran siswa/i merupakan kegiatan yang sangat penting dilakukan dalam kegiatan pembelajaran. Namun di
sekolah SMK Istiqlal Deli Tua, proses verifikasi ini masih dilakukan secara manual dan sangat tidak efisien karena
membutuhkan waktu yang sangat lama meskipun dengan jumlah yang sangat banyak Siswa. Proses partisipasi
Manual, tentu saja, butuh waktu untuk mengajar. Siswa ketika melakukan kegiatan absensi, terutama ketika ada
pertemuan guru. Anda bisa absen dengan sekretaris kelas atau guru kelas karena guru tidak datang[10].

3. Hasil Dan Pembahasan

a. Implementasi Menu Logo
Tampilan ini berisikan logo resmi sekolah SMK

Gambar 1. Menampilkan Menu Logo Sekolah

Di Sekolah SMK tujuannya Supaya Siswa tau logo sekolahnya sendiri, makna Logo Sendiri yaitu lambang Mesjid
itu adalah gambar mesjid istiqlal di jakarta karena sesuai nama sekolah tersebut lalu warna biru adalah warna
identik warna pendidikan, gambar buku bertulis 1992 maksudnya adalah awal mulai berdirinya sekolah tersebut,
tulisan Yayasan Perguruan adalah nama sekolah tersebut.

b. Implementasi Pendaftaran Dan Masuk

Tampilan menu masuk jika sudah memiliki akun login absensi Yayasan Perguruan SMA
1) Menu Masuk: Ada tampilan masukan email siswa yang sudah daftar dan aktif dan menu masukan password
absensi Siswa SMK.

36
 Sari et al / JBPM Vol. 1 No. 1, Oktober 2022 pp. 35–42

2) Menu Daftar: Menampilkan menu masukan nama siswa, menu masukan kelas siswa, menu masukan nama
kejuruan siswa, menu masukan nama email siswa, menu masukan sandi siswa lalu kelik daftar, jika belum
memiliki akun absensi siswa SMK.

Gambar 2. Pendaftaran Dan Masuk

Gambar 2 terdapat tombol Menu Masuk dan Menu daftar, Menu Masuk Jika Siswa/i sudah memiliki akun login
jika belum diharapkan siswa memilih tombol daftar supaya terlebih dahulu daftar akun login.

Gambar 3. Menu Masuk

Pada Gambar 3 diharapkan Siswa Sudah terlebih dahulu daftar dan memiliki akun absensi siswa SMK. Siswa
Diharapkan Mengisi kolom masukan email siswa yang aktif sudah terdaftar di akun login absensi dan Mengisi
kolom masukan password email yg aktif Jika sudah di isi semua kolom yang kosong diharapkan siswa mengklik
tombol Masuk
.

Gambar 4. Menu Daftar

37
 Sari et al / JBPM Vol. 1 No. 1, Oktober 2022 pp. 35–42

Pada Gambar 4, untuk Siswa yang belum memiliki akun absensi Diharapkan daftar terlebih dahulu akun absensi
siswa SMK terlebih dahulu dengan cara mengisi kolom kotak yang sudah tersedia seperti: Masukan Nama siswa
SMK yg terdaftar di sekolah SMK , kolom kotak Masukan Kelas siswa, kolom ketiga masukan nama jurusan
siswa, kolom kotak ke 4 Masukan email siswa yg aktif dan kolom kotak ke 5 masukan password email siswa yg
aktif Jika semua kolom kotak yg kosong sudah terisi silahkan siswa mengklik tombol daftar sekarang .

c. Implementasi Beranda
Gambar 5 meampilkan utama beranda ada absensi siswa, menu jadwal sekolah, menu bahan tugas, menu nilai
siswa smk, menu kegiatan siswa, menu pembayaran spp
1) Tampilan menu profil SMK. Di menu tampilan profil SMK menampilan visi dan misi dan menampilkan
alamat sekolah SMK
2) Tampilan menu progaram keahlian. Di menu tampilan menu progaram keahlian menampilan menu kejuran
multimedia, teknik jaringan, akuntansi keuangan dan lembang, teknik komputer dan jaringan, otomatis tata
kelola perkantoran.

Gambar 5. Menu Utama Aplikasi

3) Absensi Siswa SMK, Di Menu Utama ini terdiri beberapa fitur menu yaitu ada fitur menu beranda, menu
profil smk, menu program keahlian kejuruan SMK. Dibagian Menu beranda tersendiri juga memiliki beberapa
menu seperti menu absensi siswa smk, menu jadwal sekolah, menu bahan tugas, menu nilai siswa, menu
kegiatan siswa, menu bagian pembayaran spp secara online.

Gambar 6. Menu Profil SMK

Gambar 6 ini menampilkan profil SMK seperti visi dan misi, alamat sekolah SMK, menampilkan program
keahlian, menampilkan angka tenaga kerja aktif di SMK, menampilkan angka peserta didik siswa SMK,
menampilkan angka prestasi siswa SMK.

38
 Sari et al / JBPM Vol. 1 No. 1, Oktober 2022 pp. 35–42

Gambar 7. Menu Program Keahlian

Gambar 7 menunjukan program keahlian di sekolah SMK . Ada 5 program keahlian di sekolah SMK yaitu jurusan
Otomatisasi Tata Kelola Perkantoran ( OTKP ) , Jurusan Multimedia ( MM ), Jurusan Teknik Kendaraan Ringan
( TKR ), Jurusan Akuntasi keuangan dan Lembaga ( AKL ) dan Jurusan Teknik Komputer dan jaringan ( TKJ ) .

d. Implementasi Jadwal Sekolah

Di menu tampilan jadwal sekolah menampilkan jadwal mata pelajran di mana daftar mata pelajaran dalam
seminggu
1) Bahan Tugas: Di menu bahan tugas menampilkan daftar bahan tugas/pr siswa
2) Tampilan nilai siswa: Menu tampilan siswa menampilkan daftar nilai siswa secara rata-rata persemester
apabila grafik turun maka nilai turun, apa bila grafik naik maka nilai naik.
3) Kegiatan siswa: Dimenu tampilan siswa menampilkan kegiatan yang di ikutin seperti organisasi
4) Pembayaran SPP: Di menu pembayaran spp menampilkan tagihan spp yang sudah di bayar atau belum di
bayar.

Gambar 8. Menu jadwal pelajaran

5) Gambar 8 ini menunjukkan jadwal pelajaran siswa SMK berdasarkan hari.

Gambar 9 :Menu Bahan Tugas

39
 Sari et al / JBPM Vol. 1 No. 1, Oktober 2022 pp. 35–42

6) Gambar 9 menu ini menunjukkan bahan tugas siswa SMK berdasarkan hari.

Gambar 10. Menu Nilai siswa

7) Gambar 10 ini menunjukkan grafik nilai siswa SMK , hitungan penilaian berdasarkan nilai rata-rata per-
semester.

Gambar 11. Menu Kegiatan Siswa

8) Gambar 11 ini menunjukkan kegiatan siswa SMK , contohnya seperti ekstrakurikuler.

Gambar 12. Menu Pembayaran SPP

9) Gambar 12 ini menunjukkan pembayaran SPP siswa SMK sudah lunas atau belum melakukan pembayaran
SPP.

4. Kesimpulan
Setelah menyelesaikan setiap tahapan yang ada pada DesignThinking, didapat hasil akhir berupa prototype
desain baru aplikasi absensi siswa/siswi. semoga bisa mendapat perubahan-perubahan dasar seperti melkukan

40
 Sari et al / JBPM Vol. 1 No. 1, Oktober 2022 pp. 35–42

kegiatan absensi, menu jadwal sekolah, menu bahan tugas, Tampilan nilai siswa, menu kegiatan organisasi, menu
pembayaran spp, tampilan program keahlian, tampilan jadwal sekolah, bahan tugas, dan kegiatan siswa.
Perancangan dan analisis User Interface (Antarmuka) dan User Experience (Pengalaman Pengguna) dapat
menggunakan metode Design Thinking dapat memahami kebutuhan pengguna dan mampu menyelesaikan
permasalahan pengguna dalam melakukan kegiatan absensi. Metode Design Thinking mampu menghasilkan
desain prototype aplikasi absensi siswa yang sesuai dengan kebutuhan pengguna, Penerapan metode Design
Thinking dimulai dari, Prototype dan Testing. Pemikiran desain memudahkan desainer dan pengembang untuk
merancang aplikasi secara online. Aplikasi yang baik dinilai tidak hanya oleh estetika, tetapi juga dengan
kegunaannya. Si Metode desain berpikir membantu kami memahami perilaku pengguna target kami. Aplikasi yang
dirancang sesuai dengan kebutuhan aktivitas sehari-hari pengguna, sehingga lebih cepat diterima oleh pengguna .

5. Referensi
[1] M. D. Wijayanti, H. M. Az-zahra, and W. S. Wardhono, “Perancangan Tampilan Antarmuka Pengguna
Aplikasi Web Praktik Kerja Industri ( Prakerin ) menggunakan Metode Design Thinking . ( Studi Kasus :
SMKN 2 Singosari ),” vol. 6, no. 3, pp. 1007–1017, 2022.
[2] H. Aminudin and I. G. L. P. E. Prismana, “Pengembangan Sistem Informasi Penilaian Portofolio Siswa
(Sipps) Berbasis Website untuk Mengetahui Tingkat Kompetensi Siswa di Smk Negeri 1 Driyorejo
Gresik,” J. IT-EDU, vol. 05, no. 02, pp. 584–591, 2021.
[3] Rully Pramudita, Rita Wahyuni Arifin, Ari Nurul Alfian, Nadya Safitri, and Shilka Dina Anwariya,
“Penggunaan Aplikasi Figma Dalam Membangun Ui/Ux Yang Interaktif Pada Program Studi Teknik
Informatika Stmik Tasikmalaya,” J. Buana Pengabdi., vol. 3, no. 1, pp. 149–154, 2021.
[4] L. Anggraini S and K. Nathalia, Desain Komunikasi Visual: Panduan untuk Pemula. Bandung: Nuansa
Cendekia, 2014.
[5] Y. Efendi, T. Tashid, H. Yenni, U. Rio, and R. Muzawi, “Redesign Web Sekolah Metode User Centered
Design,” Build. Informatics, Technol. Sci., vol. 3, no. 3, pp. 317–324, Dec. 2021.
[6] I. R. Lie, M. A. Naufal, M. Paniza, and A. B. Kurniawan, “Perancangan Aplikasi Raporku Sekolah Dasar
Berbasis Android,” in MDP Student Conference, 2022, vol. 1, no. 1, pp. 554–560.
[7] M. Wahyudi, K. Hati, F. B. Larasati, J. Ismail, and S. Solikhun, Fullstack Android Developer Aplikasi
Penjualan Tiket Bioskop, 1st ed. Medan: Yayasan Kita Menulis, 2021.
[8] M. A. Muhyidin, M. A. Sulhan, and A. Sevtiana, “Perancangan UI/UX Aplikasi My CIC Layanan
Informasi Akademik Mahasiswa Menggunakan Aplikasi Figma,” J. Digit, vol. 10, no. 2, pp. 208–219,
Dec. 2020.
[9] A. Fatchurrachman, M. Fajri, and S. Dwi, “Perancangan UI / UX pada Aplikasi SIOM Informasi untuk
Orang Tua / Wali Mahasiswa,” MDP Student Converence, vol. 1, no. Vol 1 No 1 (2022): The 1st MDP
Student Conference 2022, pp. 538–544, 2022.
[10] S. I. Adam, O. Lengkong, and S. Pungus, “Pengembangan Aplikasi Mobile Presensi Mahasiswa Berbasis
QR-Code Di Universitas Klabat,” Cogito Smart J., vol. 7, no. 2, pp. 349–359, 2021.

41