## DESAIN UI/UX WEBSITE KOMINFO KAB TEGAL
Steven Valentino A H Siagian Program Studi S1 Sistem Informaasi, Fakultas Informatika Institut Teknologi Telkom Purwokerto, Jalan D.I. Panjaitan No. 128, Kecamatan Purwokerto Selatan,
Purwokerto, Kabupaten Banyumas, Provinsi Jawa Tengah, Indonesia
stevsgn@gmail.com

## ABSTRAK
Mendesain  ulang  website  kominfo  Kabupaten  Tegal  dimana  website  tersebut  termasuk  website  instansi pemerintah untuk menyebarkan informasi atau berita yang ada di Kota Tegal. Tujuannya membuat desain ulang website karena tampilan website lama sudah tidak manarik lagi. Seiring perkembangan waktu tampilan website akan berubah menjadi lebih baik sehingga diharapkan banyak user yang ingin mengakses website kominfo untuk mencari berita seputar Kota Tegal ataupun event – event yang diadakan oleh pemerintah. Bukan hanya berita saja website  kominfo  juga  membagikan  seputar  kegiatan  apa  saja  yang  telah  dilaksakan.  Salah  satu  cara  membuat desain ulang website yaitu dengan menggunakan figma. Dimana cara penggunaannya yang mudah dan tools yang sangat lengkap dan gratis. Dengan penyimpanan menggunakan cloud memungkinkan desainer untuk mengerjakan projek  secara  bersamaan  dengan  satu  akun.  Berdasarkan  hasil  pengujian  terhadap  fungsionalitas  pada  sistem menggunakan bl a ckbox  testing memiliki  hasil  sistem  dapat  berjalan  sesuai  harapan,  yang  dapat  membantu perusahaan dalam pengenalan perusahaan kepada masyarakat luas.
Kata kunci: website, figma, DISKOMINFO Kab Tegal, Blackbox

## 1. PENDAHULUAN
Pada  saat  ini  perkembangan  teknologi  sangat luas,  sebagai  user  kita  diharuskan  berlomba  dalam ilmu  pengetahuan  di  bidang  teknologi  informasi. Dimana faktor pe l ndukung te l knologi informasi saat ini me l mungkinkan  masyarakat  dapat  ke l mudah l an  dalam me l ncari  informasi  yang  dih l asilkan  ole l h l te l knologi. Te l knologi dimanfaatkan se l bagaian be l sar untuk sarana promosi dan informasi kh l ususnya pada we l bsite l yang dapat  me l me l be l rikan  dan  me l nyampaikan  informasi. De l ngan  adanya  we l bsite l informasi  akan  le l bih l e l fisie l n dan  te l rkini.  We l bsite l dapat  diakse l s  ole l h l masyarkat h l anya  de l ngan  me l nggunakan  ponse l l  se l lule l r  dan kone l ksi inte l rne l t, se l bagai contoh l nya we l bsite l kominfo Kabupate l n  Tge l al  dimana  we l bsite l te l rse l but digunakan untuk me l mbe l rikan informasi dan be l rita se l putar Kota Te l gal [1].
We l bsite l me l rupakan  me l dia  komunikasi  yang be l risi informasi be l rupa te l ks, gambar, suara dan vide l o yang  dapat  diakse l s  se l cara  te l rbuka  ole l h l masyarakat de l ngan  me l nggunakan  inte l rne l t,  maka  dari  itu pe l ngukuran we l bsite l pe l rlu dilakukan unutk me l nge l tah l ui kualitas dari we l bsite l te l rse l but. Pe l rforma dalam we l bsite l me l nj l adi salah l satu faktor ke l nyamanan pe l ngguna untuk me l ngunj l ungi  se l buah l we l bsite l ,  se l makin  komple l ks fungsi  se l buah l we l bsite l akan  me l mbuat  se l makin  be l sar pe l rforma yang didapat [2].
Pada  pe l mbuatan  we l bsite l . Use l r  Inte l rface l (UI) adalah l prose l s pe l nting yang h l arus dipe l rh l atikan dalam pe l nge l mbangan  we l bsite l kominfo.  Untuk  me l ncapai tuj l uan  dari  sisi  UI,  me l nggunakan  pe l nde l katan Use l r Ce l nte l re l d  De l sign (UCD).  UCD  se l ndiri  me l mpunyai istilah l yang luas me l nggambarkan prose l s de l sain di e l nd- use l r yang me l mpe l ngaruh l i bagai mana de l sain te l rbe l ntuk. Tanggapan umum dan karakte l r manusia tidak me l nj l adi
fokus  dalam  me l tode l UCD,  te l tapi  te l rfokus  pada  sifat dan  pe l rilaku  kh l usus  dari  targe l t  pe l ngguna.  Nantinya h l asil  dari  ke l rj l a  praktik  ini  me l ngh l asilkan  rancangan visual use l r inte l rface l (UI) yang mudah l dipah l ami ole l h l use l r [3]. 2. TINJ L AUAN PUSTAKA 2.1. We l bsite l Situs website adalah halaman yang menampilkan konten, seperti foto, video, dan hal lainnya, yang hanya dapat diakses secara online. Landing page adalah halaman awal yang muncul saat  kita  membuka  alamat  internet  sebuah website.  Dokume l n  te l rdiri  dari  be l be l rapa  h l alaman. Se l tiap  h l alamannya  me l mbe l rikan  informasi  dan inte l raksi yang be l rbe l da – be l da. [10] Dari  sumbe l r  yang  diatas  dapat  disimpulkan bah l wa  we l bsite l me l rupakan  kumpulan  h l alaman  yang be l risi informasi dalam be l ntuk data digital be l rupa te l ks, gambar, audio, vide l o, dan animasi yang dapat diakse l s me l lalui  browse l r  de l ngan  me l nggunakan  j l aringan nte l rne l t [4].
2.2. Figma Figma  me l rupakan  alat  de l sain  be l rbasis cloud yang  gratis.  Dapat  diope l rasikan  pada  browse l r  atau aplikasi  de l sktop  pada  windows  dan  mac  os  yangt fungsinya h l ampir sama de l ngan Adobe l XD, me l miliki pe l mbe l da  pada  figma  dimana  figma  me l miliki  fitur ke l rj l a  tim  kare l na  ada  pada  we l b.  Figma  me l mbe l rikan se l mua  alat  ke l pada  pe l nggunanya  yang  dibutuh l kan untuktah l ap de l sain proye l k. Se l cara singkat figma dapat diartikan aplikasi de l sain UI/UX be l rbasis browse l r [5].
2.3. De l sain De l sain be l rfungsi untuk me l rancang se l suatu yang fungsional,  se l h l ingga  dapat  me l me l cah l kan  suatu masalah l te l rte l ntu  agar  dapat  me l miliki  nilai  le l bih l dan be l rmanfaat [6]. Dari de l sain nantinya dapat me l nciptakan be l ntuk asli pada be l nda atau obj l e l k nyata me l lalui  be l rbagai  bidang  pe l ngalaman,  ke l ah l lian  dan pe l nge l tah l uan  yang  me l ngandug  unsur  ke l indah l an  dan dapat dilih l at [7].
2.4. Use l r Inte l rface l (UI) Use l r  Inte l rface l adalah l cara  program  dan pe l nggunaan untuk be l rinte l raksi. Dalam UI me l mpunyai fungsi  untuk  me l ngh l ubungkan  informasi  antara pe l ngguna dan siste l m ope l rasi. J L e l nis Use l r Inte l rface l ada dua yaitu:
1. Graph l ical Use l r Inte l rface l (GUI) Me l rupakan  j l e l nis  antarmuka  yang  digunakan untuk be l rinte l raksi me l lalui siste l m ope l rasi me l lalui gambar,  garis  dan  me l nggunakan  pe l rangkat pe l tunj l uk se l pe l rti mouse l . 2. Command Line l Inte l rface l (CLI)
De l ngan program ini, pe l ngguna dapat me l mbe l rikah l pe l rintah l dalam  be l ntuk  te l ks  dan me l mbe l rikan  intruksi  pada  kompute l r  untuk ke l giatan te l rte l ntu [6].
2.5. Prototype l Prose l s pe l mbuatan mode l l me l nggunakan software l dimana  pe l ngguna  dapat  me l miliki  gambaran  dasar te l natng  program  dan  me l lakukan  pe l nguj l ian  awal. Prototyping me l be l rikan  pe l nge l mbang  untuk  saling be l rinte l raksi  se l lama  prose l s  pe l mbuatan  se l h l ingga me l mpe l rmudah l pe l nge l mbang  untuk  me l mode l lkan pe l rangkat yang akan dibuat. Prototype l dapat me l nj l adi alat  bantu  komunikasi  de l ngan  pih l ak  yang  te l rlibat dalam pe l nge l mbangan se l buah l produk [8].
2.6 BlackBox Blackbox Te l sting me l rupakan se l buah l me l tode l pe l nguj l ian se l buah l software l tanpa h l arus me l mpe l rh l atikan de l tail  software l se l h l ingga  pe l nguj l ian  dilakukan  dari fungsi  sisi  luar  program . Tuj l uan Blackbox Te l sting untuk  me l nunj l ukkan  fungsi  pe l rangkatlunak  te l ntang cara be l rope l rasinya,  apakah l pe l masukan data  ke l luaran te l lah l be l rj l alan se l bagaimana yang te l lah l dih l arapkan dan apakah l informasi yang disimpan se l rta e l kste l rnal se l lalu dij l aga ke l mutakh l irannya. [9]
3. PE L RANCANGAN DAN PE L MBAH L ASAN 3.1. Pe l ke l rj l aan/Ke l giatan Pe l nulis  ditugaskan  se l suai  prodi  yang  diambil yaitu Informatika. Se l lama me l laksanakan PKL pe l nulis me l nge l rj l akan tugas yang dibe l rikan se l cara individu dan pe l nulis  dapat  me l nge l rj l akan  tugas  se l cara WFO ( Work from  Office l ).  Pe l ke l rj l aan  yang  dilakukan  se l lama  ke l rj l a praktik  yaitu  de l sain  ulang  we l bsite l Kominfo Kabupate l n Te l gal. De l ngan me l ngurangi atau me l nambah l fitur  yang  ada  pada  we l bsite l se l h l ingga
pe l ngguna  me l ndapat  ke l nyamanan  ke l tika  me l ngakse l s we l bsite l Kominfo.
3.2. Analisis dan Ke l butuh l an Siste l m
Me l rupakan alat dan bah l an yang digunakan dalam pe l nge l rj l aan  tugas  yang  dilakukan  se l lama  pe l laksaan PKL.  Be l rkut  alat  dan bah l an  yang digunakan  se l bagai be l rikut: a.   Alat 1. Pe l rangkat ke l ras ( H L ardware l ) yaitu: a. Me l re l k : Le l novo Ide l aPad 5
b. Proce l ssor  : 11th l Ge l n Inte l l(R) Core l (TM) i5-
1135G7 @ 2.40GH L z 2.42 GH L z c. Me l mory  : 8GB 2. 2.  Pe l rangkat Lunak ( Software l ) yaitu:
a. Siste l m ope l rasi windows 10 b. Browse l r ch l rome l b.   Bah l an Bah l an  yang  digunakan  dalam  me l mbuat  ulang we l bsite l yaitu:
We l bsite l kominfo (h l ttps://kominfo.te l galkab.go.id/ ) Langkah l awal  yang  dilakukan  yaitu  analisis we l bsite l kominfo. Dimana pe l nulis me l mpe l rh l atikan dari se l gi tampilan, font, tombol dan tata le l tak se l tiap konte l n yang ada dalam we l bsite l guna me l mbe l rikan ke l nyamanan  ke l pada  se l tiap  use l r  yang  me l ngunj l ungi h l alaman we l bsite l .
4. H L ASIL DAN PE L MBAH L ASAN
4.1. Analisis Langkah l awal  yang  dilakukan  yaitu  analisis we l bsite l kominfo. Dimana pe l nulis me l mpe l rh l atikan dari se l gi tampilan, font, tombol dan tata le l tak se l tiap konte l n yang ada dalam we l bsite l guna me l mbe l rikan ke l nyamanan  ke l pada  se l tiap  use l r  yang  me l ngunj l ungi h l alaman we l bsite l .
4.2. Saran dan masukan Tah l ap  ini  pe l nulis  me l mbe l rikan  saran  dan masukan ke l pada be l be l rapa use l r. Dimana use l r me l mbe l ri saran  tampilan  antarmuka  we l bsite l yang  kurang me l narik dan me l mbingungkan. Maka use l r me l mbe l rikan saran dan masukan se l bagai be l rikut:
1. Pada h l alaman be l randa te l rdapat nomor te l lfon dan e l mail se l h l arusnya pe l ne l mpatan nomor te l lfon dan e l mail  ada  di  foote l r  pada  we l bsite l .  Yang  dimana fungsi  dari  foote l r  itu  se l ndiri  se l bagai  informasi ke l pada pe l ngunj l ung te l ntang kontak dan h l alaman pe l nge l lola we l bsite l . Biasanya pada foote l r te l rdapat be l be l rapa  informasi  se l pe l rti  te l ntang  instansi,  visi misi, kata kunci dan me l dia sosial.
2. Me l nu  te l lfon,  e l mail,  dan  konte l n  foto  te l rkini, portofolio gale l ry dan ch l anne l l youtube l , link j l uga se l baiknya  h l anya  ada  dime l nu  be l randa.  Kare l na be l randa dari se l buah l situs we l b dirancang se l bagai titik fokus pusat.
3. Dibagian  bawah l pada  me l nu  be l randa  te l rdapat kontak kami. Saran saya me l nu te l rse l but dile l takan pada foote l r we l bsite l .
4. Pada browse l r de l sktop sudah l di tampilkan me l nu se l pe l rti  be l randa,  profil,  program,  re l gulasi, layanan,  publikasi,  flip-book,  dan  lain-lain. H L arusnya  tidak  pe l rlu  me l nambah l kan  slide l bar, slide l bar  digunakan  ke l tika  use l r  me l ngakse l s we l bsite l me l nggunakan smartph l one l kare l na re l solusi  yang  ke l cil  se l h l ingga  me l nu  h l arus dimasukan pada me l nu slide l bar. 5. Se l lanj l utnya  pada  re l gulasi  –  J L DH L I  Nasional h l alaman  we l b  me l ngalami  e l ror  502  bad  ge l tway dimana  se l rve l r  awal  me l ngirimkan  re l spons  tidak valid  ke l se l rve l r  lainnya  yang  be l rtugas  se l bagai gate l way atau proxy.
6. Saran  saya  untuk  we l bsite l instansi  se l pe l rti  we l b kominfo  tidak  pe l rlu  me l nggunakan  baground be l rgambar. 7. Pada  me l nu  pe l raturan  dae l rah l kab.  Te l gal  dan layanan pe l ngadaan  se l cara  e l le l ktronik be l lum ada isi dari me l nu te l rse l but. 8. Pada  Page l flip-book  tidak  te l rdapat  tombil ke l mbali ke l me l nu utama we l bsite l .
4.3. Pe l ralatan yang digunakan Me l nde l sain  ulang  we l bsite l kominfo  pe l nulis me l nggunkana  figma  yang  dapat  diakse l s  me l lalui browse l r,  figma  me l nye l diakan  tools  yang  cukup le l ngkap  dan  gratis  untuk  me l mbuat  de l sain  we l bsite l . Untuk  re l fe l re l nsi  tampilan  we l bsite l pe l nulis  me l lih l at we l bsite l kominfo yang ada di kota-kota lain.
Gambar 1. Program figma
4.4. H L asil Re l de l sain Tampilan  be l randa  pada  we l bsite l dime l nu  be l rita te l rbaru  dan  pe l ngumuman  dirubah l (Gambar  2)  se l tiap konte l nnya dibuat pe l rblok agar le l bih l rapi dan me l narik.
Me l nu  te l lfon  dan  e l mail  be l rada  pada  h l e l ade l r we l bsite l dapat dilih l at pada gambar 3 j l ika me l nu te l lfon dan  e l mail  ada  di  foote l r  akan  me l ngganggu  tampilan utama we l bsite l dan layanan pe l ngaduan sudah l te l rse l dia pada h l e l ade l r we l bsite l . Gambar 3. Me l nu te l lfon dan e l mail
Bagian  flip-book  se l te l lah l ditambah l kan  tombol ke l mbali  ke l be l randa  kominfo.  Dapat  dilih l at  pada gambar 4 se l bagai be l rikut. Gambar 4. Flip-book Me l nu  be l rita  ditambah l kan  fitur  pe l ncarian pe l rdasarkan tah l un dan kata kunci se l h l ingga use l r dapat se l cara  ce l pat  me l ncari  be l rita  yang  diinginkan.  Dapat dilih l at pada gambar 5 se l bagai be l rikut. Gambar 5. Me l nu pe l ncarian
4.5. Pe l nguj l ian BlackBox Pada Tabe l l dibawah l me l rupakan h l asil pe l nguj l ian de l ngan me l nggunakan blackbox te l sting adalah l se l bagai be l rikut:
Tabel 1. Pengujian Blackbox
No Delskripsi Pelngelrjlaan HLasil yang dihlarapkan HLasil pelngujlian Kelsimpulan 1 Klik melnu pelncarian
Dapat melncari selsuatu yang telrkait delngan welbsitel Selsuai HLarapan Valid
2 Klik tombol kelmbali kel belranda kominfo Dapat Langsung kelmbali kel belranda Selsuai HLarapan Valid
3 pelncarian pelrdasarkan tahlun dan masukkan kata kunci Dapat melncari belrita yang di inginkan selsuai kata kunci Selsuai HLarapan Valid 4 Melmulai melmbuka welbsitel Melnampilkan tampilan hlomel welbsitel Selsuai HLarapan Valid 5 Klik selbuahl belrita Melnampilkan Belrita yang dipilihl Selsuai HLarapan Valid
5. KE L SIMPULAN DAN SARAN
Ke l simpulan  yang  didapat  ole l h l pe l nulis  dari re l de l sain  we l bsite l kominfo  Kabupate l n  Te l gal  se l bagai be l rikut:  Use l r  ke l bingungan  saat  me l ngakse l s  we l bsite l kominfo  kare l na  konte l n  yang  tidak  rapi  dapat  dilih l at pada we l bsite l bah l wa konte l n be l rita tidak ada pe l mbatas de l ngan  konte l n  lain  se l h l ingga  te l rlih l at  se l pe l rti  me l nyatu de l ngan  konte l n  lain.  Dari  te l ks,  warna,  dan  tata  le l tak pe l rlu  dipe l rh l atikan  guna  me l mpe l rindah l tampilan  pada we l bsite l .  Adapun  saran  dari  pe l nulis  untuk  dibe l rikan ke l pada  instansi  se l te l lah l me l lakukan  ke l rj l a  praktik  di Dinas Komunikasi dan Informatika Kabupate l n Te l gal yaitu dih l arapkan ke l de l pannya dapat le l bih l me l mbingbing  para  pe l se l rta  PKL  de l ngan  le l bih l baik. Yang  tuj l uannya  agar  tugas  yang  dibe l rikan  akan dike l rj l akan le l bih l maksimal se l rta e l fe l ktif dan e l fisie l n.
DAFTAR PUSTAKA
[1]  Ismai,  “Pe l rancangan  We l bsite l Se l bagai  Me l dia Promosi  Dan  Informasi,” J L .  Inform.  Pe l lita Nusant. , vol. 3, no. 1, pp. 82–86, 2018.
[2]  A.  Suprapto e l t  al. ,  “Studi  E L mpiris  E L valuasi Pe l rforma  We l bsite l IAIN  Salatiga  Me l nggunakan Automate l d Software l Te l sting,” J L . Sains Komput. Inform.  (J L -SAKTI ,  vol.  5,  no.  1,  pp.  209–218, 2021.
[3]  R.  B.  Solich l uddin  and  E L .  G.  Wah l yuni, “Pe l rancangan Use l r Inte l rface l dan Use l r E L xpe l rie l nce l de l ngan  Me l tode l Use l r  Ce l nte l re l d
De l sign  pada  Situs  We l b  Kalografi,” Automata , vol. 2, no. 2, 2021.
[4]  B. A. B. Ii and L. Te l ori, “Ii - 1,” pp. 1–19, 2020.
[5]  B. Kurniawan and M. Romzi, “Pe l rancangan Uiux Aplikasi Manaj l e l me l n Pe l ne l litian Dan Pe l ngabdian Ke l pada  Masyarakat  Me l nggunakan  Aplikasi Figma,” J L .  Sist.  Inf.  Mah l akarya ,  vol.  05,  no.  1, pp. 1–7, 2022.
[6]  N. A. Ningsih l and M. R. Abidin, “Pe l rancangan De l sign  Use l r  Inte l rface l We l bsite l Pada  Pe l t  Sh l op Azria Di Kabupate l n Lamongan,” J L . Barik , vol. 2, no.  3,  pp.  202–216,  2021,  [Online l ].  Available l : h l ttps://e l j l ournal.une l sa.ac.id/inde l x.ph l p/J L DKV/
[7]  S. S. Suye l di and Y. Idrus, “H L ambatan-H L ambatan Be l laj l ar  Yang  Me l mpe l ngaruh l i  H L asil  Be l laj l ar Mah l asiswa  Dalam  Pe l mbe l laj l aran  Mata  Kuliah l Dasar  De l sain  J L urusan Ikk Fpp Unp,” Gorga   J L . Se l ni  Rupa ,  vol.  8,  no.  1,  p.  120,  2019,  doi: 10.24114/gr.v8i1.12878.
[8]  R.  Puspita,  “Pe l nge l mbangan  Prototipe l Aplikasi Community Aggre l gator Be l ske l m de l ngan Pe l nde l katan  UCD  Me l nggunakan  Balsamiq Mockup dan Figma,” Univ. Islam Ne l ge l ri Syarif H L idayatullah l , p. 189, 2020, [Online l ]. Available l : h l ttps://re l pository.uinj l kt.ac.id/dspace l /h l andle l /123 456789/50587 [9]    E L lfina Novalia, Apriade l Voutama “Black Box Te l sting de l ngan Te l knik E L quivale l nce l Partitions Pada Aplikasi AndroidM-Magazine l Mading Se l kolah l ” Vol. 11, No. 11, pp. 23-35, 2022.
[10] I.  K.  Sudaryana,  H.  Sanjaya,  and  R.  Tjong, “Analisis  Website  Wiki  Versaillus  Dengan Menggunakan  Metode  Pieces,”  vol.  2,  no.  2, pp. 38–46, 2019.