E-ISSN: 2548-1398 Published by: Ridwan Institute
Syntax Literate: Jurnal Ilmiah Indonesia p–ISSN: 2541-0849 e-ISSN: 2548-1398 Vol. 7, No. 9, September 2022

## PERANCANGAN  UI  SISTEM  INFORMASI  AKADEMIK  SEKOLAH  SMA BINA JAYA PALEMBANG MENGGUNAKAN FIGMA

## Rangga Saputra, Dedy Syamsuar
Universitas Bina Darma Palembang, Indonesia Email: rangga071098@gmail.com, dedy_syamsuar@yahoo.com

## Abstrak:
Penelitian  ini  bertujuan  untuk  merancang  website  sistem  informasi  akademik  di SMA Bina Jaya Palembang dengan menggunakan Figma sebagai alat perancangan. Perkembangan  teknologi  informasi  telah    mengharuskan  beberapa  lembaga pendidikan untuk menyesuaikan dengan zaman sekarang, aktifitas yang sebelumnya dilakukan  secara  manual  harus  dilakukan  otomatisasi  untuk  memudahkan prosesnya.  Perancangan  sistem  informasi  akademik  ini  dilakukan  dengan menyediakan  rancangan  untuk  menjadi  gambaran  sistem  yang  akan  dibuat  dan referensi  bagi  peneliti  selanjutnya  yang  akan  membuat  website  sistem  informasi akademik  tersebut.  Hasil  dari  penelitian  ini  berupa  website  sistem  informasi akademik sekolah berasal dari rancangan yang telah dibuat di Figma. Maka dari itu penelitian ini diharapkan dapat membantu SMA Bina Jaya Palembang dalam proses pengembangan  teknologi  nya  dengan  cara  perancangan  website  sistem  informasi akademik tersebut.
Kata Kunci: sistem informasi, perancangan UI, figma

## Abstract
This  study  aims  to  design  an  academic  information  system  at  SMA  Bina  Jaya Palembang  by  using  Figma  as  a  design  tool.  The  development  of  information technology has  required several educational institutions to adapt to today's times, activities carried out manually must be done automatically to facilitate the process. The design of this academic information system is done by providing a design to be a description of the system that will be made and a reference for researchers who will then create the academic information system site. The results of this study are in the form of a school academic information system website derived from a design that  has  been  made  at  Figma.  Therefore,  this  research  is  expected  to  help  SMA Bina Jaya Palembang in the process of developing its technology by designing an academic information system.

## Keywords: information systems, UI design, figma

## Pendahuluan
SMA Bina Jaya Palembang adalah salah satu sekolah swasta yang terletak di Kota Palembang.  Sekolah  tersebut  telah  menerapkan  beberapa  teknologi  informasi
didalamnya  seperti website sekolah  yang  terdapat  fitur  seperti  pendaftaran  siswa  baru, pengumuman kelulusan siswa baru dan artikel mengenai berita terbaru di sekolah.
Namun website tersebut di rasa masih dapat dilakukan banyak perbaikan dari segi tampilan  hingga  fungsi-fungsi  didalamnya  agar  dapat  menambah  efektifitas  dan efisiensi pada proses didalamnya.
Didalam website tersebut  teridentifikasi  beberapa  masalah  seperti,  pada tampilan bagi  pengguna  yang  dinilai  tidak  terlalu  menarik  dan  memanjakan  mata  pengguna, disini  peneliti  beranggapan  bahwa  dapat dilakukan  perbaikan  dari  segi  pemilihan font, penempatan konten dan fitur, serta pemilihan warna keseluruhan.
Maka  dari  itu  peneliti  berinisiatif  untuk  membuat  rancangan UI  website sistem informasi  akademik  SMA  Bina  Jaya  Palembang  untuk  menjadi  saran  untuk  perbaikan website dan  referensi  bagi  peneliti  lain  kedepannya  yang  berencana  untuk mengembangkan website lebih lanjut.
Hasil  akhir  yang  dibuat  nantinya  berupa  rancangan UI  website sistem  informasi akademik  yang  akan  dikonversi  menjadi website akademik  yang  dibuat  berdasarkan hasil  analisa  peneliti  dan  masukan  dari  pihak  sekolah  itu  sendiri  untuk  kemudian  jadi pengembangan teknologi di sekolah.

## Metode Penelitian
Penelitian  ini  dilaksanakan  selama  4  bulan  dengan  SMA  Bina  Jaya  Palembang yang  berlokasi  di  Lorong  Ngabehi  No.733,  Kemas  Rindo,  Kec.  Kertapati,  Kota Palembang,  Sumatera  Selatan  30258. Penelitian  Terapan  adalah  penelitian  yang mempunyai  alasan  praktis,  keinginan  untuk  mengetahui,  bertujuan  agar  dapat melakukan  sesuatu  yang  jauh  lebih  baik,  lebih  efektif  dan  efisien.  Penelitian  terapan atau  applied  research  dilakukan  berkenaan  dengan  kenyataan-kenyataan  praktis penerapan  dan  pengembangan  ilmu  pengetahuan  yang  dihasilkan  oleh  penelitian dasar dalam kehidupan nyata.
Seperti pembuatan rancangan user interface sistem informasi akademik ini, dalam pembuatannya  diharapkan  dapat  memecahkan  masalah  sehari-hari  di  sekolah  dalam bidang teknologi yang menyangkut efektifitas dan efisiensi.

## Hasil dan Pembahasan
Analisa Kebutuhan Pengguna dan Sistem Analisa  kebutuhan  digunakan  untuk  mengidentifikasi  akan  kebutuhan  pengguna terhadap  sistem  yang  hendak  dirancang.  kebutuhan  tersebut  terdiri  dari  kebutuhan fungsional dan kebutuhan non-fungsional. Adapun beberapa kebutuhan yang diperlukan untuk pengembangan sistem sebagai berikut:
a. Kebutuhan Fungsional
Kebutuhan  fungsional  merupakan  kebutuhan  yang  berkaitan  dengan  layanan yang  diperlukan  di  dalam  sistem  yang  akan  dikembangkan.  Adapun  kebutuhan fungsional yang dibutuhkan pada sistem ini sebagai berikut :
1. Sistem mampu memfasilitasi administrasi dan akademik sekolah.
2. Sistem mampu menampilkan form pendaftaran siswa.
3. Sistem mampu menampilkan hasil tes siswa.
4. Sistem mampu menampilkan jadwal mengajar guru.
b. Kebutuhan Non-Fungsional
Kebutuhan non-fungsional merupakan kebutuhan yang dapat dilakukan sistem, bisa  berupa  kehandalan  sistem,  perilaku  sistem,  maupun  standarisasi  sistem. Adapun kebutuhan non-fungsional sistem sebagai berikut:
1. Sistem mampu menampilkan nilai ujian yang diisi guru kepada calon siswa.
2. Sistem  mampu  memberikan  informasi  mengenai  Jadwal  kepada  siswa  maupun guru.
c. Perancangan Sistem
1. Menentukan Pengguna Sistem
Peneliti  telah  menganalisis  pengguna  yang  terlibat  didalam  sistem  dengan cara  mempelajari  proses  yang  dilakukan  sebelumnya  dan  akan  dijadikan  aktor untuk dimasukkan kedalam pemodelan dan fungsi dari sistem yang akan dibuat.
1. Calon Siswa: Calon Siswa dapat melakukan proses seperti:
• Mengisi form pendaftaran siswa baru.
• Melihat hasil tes.
2. Siswa:
• Melihat jadwal pelajaran.
• Melihat kalender akademik.
• Melihat mading.
3. Guru:
• Mengisi hasil tes calon siswa.
• Melihat Jadwal mengajar.
d. Menentukan Fungsi dan Diagram Use case
Dalam menentukan use case, kebutuhan fungsional dari sistem yang hendak dibangun  teridentifikasi.  Use  case  merupakan  fungsi-fungsi  layanan  yang  telah didefinisikan  untuk  digunakan  pada  sistem  yang  akan  dibangun.  Adapun  use  case yang akan digunakan di sistem ini sebagai berikut:

## Gambar 1 Use Case Diagram
Deskripsi Use Case Diagram:
1. Mengisi  Form:  Calon  Siswa  mengisi  form  pendaftaran  untuk  mendaftar  jadi siswa baru di sekolah.
2. Daftar: Proses yang mengakomodir pendaftaran siswa baru.
3. Nilai  Tes:  Guru  mengisi  hasil  tes  calon  siswa  untuk  selanjutnya  dilihat  oleh calon siswa.
4. Username  dan  Password:  Setelah  calon  siswa  dinyatakan  lulus  dan  menjadi siswa  baru  maka  akan  mendapatkan  username  dan  password  untuk  login kedalam sistem.
e. Activity Diagram
Setelah use  case didefinisikan,  maka  proses  selanjutnya  adalah  membuat activity  diagram. Activity  Diagram adalah diagram untuk  menggambarkan  aliran kontrol di dalam suatu sistem yang merujuk pada aktor yang terlibat di dalam use case . Adapun penjelasan terkait diagram aktifitas pada setiap use case yang hendak dibangun di sistem ini sebagai berikut:
1. Activity Diagram Pendaftaran

## Gambar 2 Activity Diagram Calon Siswa
Activity  diagram  diatas  menjelaskan  proses  calon  siswa  melakukan  proses pendaftaran  untuk  menjadi  siswa  baru.  Diawali  dengan  calon  siswa  membuka website  sekolah,  lalu  membuka  tab  pendaftaran  dan  sistem  akan  menampilkan form  pendaftaran  yang  selanjutnya  akan  diisi  oleh  calon  siswa  sebagai  data mereka untuk mengikuti tes selanjutnya. Jika formular telah selesai diisi dengan data yang benar maka calon siswa akan mendapatkan nomor dan Jadwal tes.
2. Activity Diagram Hasil Tes

## Gambar 3 Activity Diagram Hasil Tes
Activity  Diagram  diatas  menjelaskan  proses  calon  siswa  melihat pengumuman hasil tes mereka. Diawali dengan calon siswa mengakses  website sekolah  lalu  membuka  tab  pengumuman  kelulusan,  calon  siswa  memasukkan nomor tes mereka untuk selanjutnya di cek hasilnya. Jika calon siswa dinyatakan lulus maka akan mendapatkan username dan password untuk mengakses website sebagai siswa.
3. Activity Diagram Input Nilai Tes
Activity  Diagram  diatas  menjelaskan  proses  guru  menginput  nilai  hasil tes calon siswa, diawali dengan guru mengakses website lalu membuka tab nilai untuk  selanjutnya  menginput  nilai  calon  siswa  sesuai  dengan  hasil  tes  mereka, dengan ketentuan jika nilainya dibawah 60 maka dinyatakan tidak lulus.
4. Activity Diagram View Jadwal

## Gambar 5 Activity Diagram View Jadwal
Activity Diagram diatas menjelaskan proses siswa melihat Jadwal pelajaran. Diawali dengan siswa mengakses website lalu Jadwal akan langsung terlihat di Halaman depan siswa.
5. Activity Diagram Admin

## Gambar 6
Activity Diagram Admin
Activity  Diagram  diatas  menjelaskan  proses  admin  mengolah  data  guru  di Halaman  Admin.  Diawali  dengan  admin  login  kedalam  website  lalu  website akan otomatis menampilkan Halaman admin lalu admin langsung membuka tab olah data untuk mengedit data guru.
6. Activity Diagram Olah Data Mading

## Gambar 7 Activity Diagram Olah Data Mading
Activity Diagram diatas menjelaskan proses admin mengolah data mading, diawali  dengan  admin  login  kedalam  website  lalu  membuka  tab  “olah  data mading” kemudian admin langsung dapat mengedit data untuk mading.
7. Class Diagram
Hasil  data  sistem  ini  terdiri  atas  kumpulan  file (table) yang  saling berhubungan  dalam  sebuah  basis  data  disebuah  sistem  komputer  yang memungkinkan  untuk  mengakses  dan  memanifulasi  file-file (table-table) tersebut.  Class  Diagram  merupakan  diagram  untuk  menampilkan  hubungan antar setiap table tersebut.
Gambar 8
Class Diagram

## 1) Rancangan Halaman Home

## Gambar 9 Rancangan Halaman Home
Rancangan  diatas  berisi  Halaman  home  yang  diakses  seluruh  aktor untuk masuk kedalam website sebelum melakukan proses login.
2) Rancangan Halaman Beranda Siswa
Gambar 10 Rancangan Halaman Beranda Siswa

## 8. Rancangan Halaman Pendaftaran

## Gambar 11 Rancangan Halaman Pendaftaran
Rancangan Halaman Pendaftaran berisi form pendaftaran yang akan diisi calon siswa yang ingin mendaftarkan diri menjadi siswa baru di sekolah.
9. Rancangan Halaman Pengumuman

## Gambar 12 Rancangan Halaman Pengumuman
Rancangan  Halaman  Pengumuman  berfungsi  untuk  calon  siswa  melihat pengumuman  hasil  tes  mereka.  Disini  disediakan  kolom  untuk  calon  siswa memasukkan nomor tes mereka untuk di cek hasilnya.
10. Rancangan Halaman Kalender Akademik

## Gambar 13 Rancangan Halaman Kalender Akademik
Rancangan  Halaman  Kalender  Akademik  berisi  informasi  mengenai kalender akademik sekolah yang telah disusun oleh struktur di sekolah

## Kesimpulan
Berdasarkan  penelitian  yang  telah  dilaksanakan  maka  peneliti  dapat berkesimpulan bahwa:
1. Untuk  memfasilitas  proses  akademik  disekolah  maka  dapat  digunakan  Website Sistem Informasi Akademik sekolah.
2. Website  Sistem  Informasi  Akademik  sekolah  dapat  mengakomodir  proses  seperti pendaftaran online, pengecekan pengumuman kelulusan dan Jadwal sekolah.
3. Website  Sistem  Informasi  Akademik  juga  dapat  mengefisiensi  proses  yang sebelumnya dilakukan secara manual.

## BIBLIOGRAFI
Hakim,  A.  R.,  Harefa,  K.,  &  Widodo,  B.  J.  S.-J.  T.  I.  d.  K.  (2019).  Pengembangan Sistem  Informasi  Akademik  Berbasis  Android  Menggunakan  Flutter  Di Politeknik. 14(3), 27-32.
Pusparini,  E.  S.,  Najoan,  M.  E.,  &  Najoan,  X.  B.  J.  J.  T.  E.  d.  K.  (2017).  Sistem InformasiAkademik  Berbasis  Mobile Web  menggunakan  Pendekatan  Metodologi RAD (Studi Kasus: Universitas Sam ratulangi). 6(4), 182-193.
Sarbini,  R.  N.,  Yuliana,  D.  E.,  &  WK,  D.  A.  J.  J.  D.  (2018).  Rancang  Bangun  Sistem Informasi Akademik Berbasis Android. 15.
Christian,  L.,  Ellen,  E.,  Ratih,  R.,  &  Yulia,  Y.  (2015).  Perancangan  Sistem  Informasi Akuntansi  Penjualan  dan  Piutang  dengan  Metode  Object  Oriented  Analysis  And Design  dan  Unified  Modelling  Language  pada  Perusahaan  Distributor.  Paper presented at the Seminar Nasional Informatika (SEMNASIF).
Maryati, K., & Suryawati, J. (2001). Sosiologi: Jilid 3: ESIS.
Hidayat,  Dudi;  Rianto,  Yan;  Hutabarat,  Lambue;  Halomoan,  UB;  Fatony,  Achmad; Surya,  Tri;  Pariyaman,  Pariyo;  Prasetyas,  Vetty  Rina  dan  Agusalim.  2003  Studi Adopsi  TIK  oleh  IKM  dalam  Proyek  TATP:  Faktor-Faktor  yang  Berpengaruh terhadap Keberhasilan Adopsi TIK oleh IKM.
Chen,  Shih-Chih.  2011.  Understanding  The  Effects  of  Technology  Readiness, Satisfaction and Electronic Wordof-Mouth on Loyalty in 3C Products. Australian Journal of Business and Management Research, Volume 1, Nomor 3.
Nana dan Ahmad. 2001. Teknologi Pengajaran. Bandung: Sinar Baru Algensindo.
Firman,  F.  and  S.  J.  I.  J.  o.  E.  S.  Rahayu  (2020).  "Pembelajaran  Online  di  Tengah Pandemi Covid-19."  2(2): 81-89.
Syakti, F. J. J. B. K. (2019). "METODE PENGEMBANGAN PERANGKAT LUNAK BERBASIS MOBILE: A REVIEW."  1(2): 82-89.
Tarigan,  R.  J.  Analisis  Perbandingan  Brand  Equity  Sistem  Operasi  Android  dengan Sistem Operasi iOS pada Smartphone (Studi Kasus pada Anggota Forum Kaskus Bagian  Handphone  &  Tablet  Subforum  Android  dan  iOS)  (Bachelor's  thesis, Jakarta: Fakultas Ekonomi dan Bisnis UIN Syarif Hidayatullah Jakarta).
Nugraha,  A.  K.,  Satoto,  K.  I.,  &  Kridalukmana,  R.  (2014).  Perancangan  Permainan Gelembung  Huruf  (Tokoh  Wayang)  Berbasis  Sistem  Operasi  IOS  Menggunakan Gamesalad (Doctoral dissertation, Diponegoro University).
Copyright holder:
Rangga Saputra (2022)
First publication right: Syntax Literate: Jurnal Ilmiah Indonesia
This article is licensed under: