LAPORAN

PRAKTEK KERJA LAPANGAN

PEMBUATAN USER INTERFACE WEBSITE DIREKTORAT JENDERAL

APLIKASI INFORMATIKA KEMENTERIAN KOMINFO RI

ANJAR ANGGITA RAMADANTI

4617040001

PROGRAM STUDI TEKNIK MULTIMEDIA DAN DIGITAL JURUSAN

TEKNIK INFORMATIKA DAN KOMPUTER DEPOK
2020
 HALAMAN PENGESAHAN
LAPORAN PRAKTIK KERJA LAPANGAN

i
 KATA PENGANTAR

Praktik Kerja Lapangan merupakan mata kuliah wajib pada kurikulum yang harus
ditempuh dalam rangka memenuhi salah satu syarat untuk mencapai gelar Diploma
Empat Politeknik Negeri Jakarta. Penulis memanjatkan banyak puji dan syukur
kepada Tuhan Yang Maha Esa yang telah memberikan rahmat dan karunia-Nya
serta memberikan kesempatan penulis untuk hidup hingga saat ini. Penyusunan
laporan praktik Kerja Lapangan ini tentunya didukung dan tak lepas dari bantuan
banyak pihak. Oleh karena itu, penulis mengucapkan terima kasih kepada:

a. Malisa Huzaifa S.Kom., M.T selaku dosen pembimbing yang telah banyak
menyediakan waktu, tenaga, dan pikiran untuk mengarahkan penulis dalam
penyusunan laporan Praktik Kerja Lapangan.
b. Pihak Direktorat Jendral Aplikasi Informatika yang telah memberikan izin dan
kebijakan kepada penulis untuk melaksanakan Praktik Kerja Lapangan.
c. Bapak Maykada Harjono Kurniawan, S.Kom, M.Kom, selaku pembimbing
industri yang telah banyak mengarahkan penulis selama melaksanakan Praktik
Kerja Lapangan.
d. dr. Nina Halimah Sakdiah, SpKJ selaku psikiater yang telah memberikan banyak
jasa dan dukungan dalam proses penyembuhan penyakit yang diderita penulis.
e. Orang tua dan keluarga penulis yang telah memberikan bantuan dan dukungan
material dan moral.
f. Sahabat dan rekan Praktik Kerja Lapangan yang telah banyak membantu penulis
dalam menyelesaikan laporan Praktik Kerja Lapangan ini.

Akhir kata, penulis berharap Tuhan Yang Maha Esa dapat membalas segala
kebaikan semua pihak yang telah membantu penulis. Semoga laporan Praktik Kerja
Lapangan ini dapat membawa manfaat bagi pengembangan ilmu.

Depok, 03 November 2020

Anjar Anggita Ramadanti

ii
 DAFTAR ISI

HALAMAN PENGESAHAN ............................................................................... i

LAPORAN PRAKTIK KERJA LAPANGAN ...................................................... i
KATA PENGANTAR .......................................................................................... ii
DAFTAR ISI ....................................................................................................... iii
DAFTAR GAMBAR .............................................................................................v
DAFTAR TABEL ............................................................................................... vi
DAFTAR LAMPIRAN ...................................................................................... vii
BAB I
PENDAHULUAN .................................................................................................1
1.1 Latar Belakang Kegiatan ..............................................................................1
1.2 Ruang Lingkup Kegiatan .............................................................................1
1.3 Waktu dan Tempat Pelaksanaan ..................................................................2
1.4 Tujuan dan Kegunaan ..................................................................................2
BAB II .....................................................................................................................
TINJAUAN PUSTAKA ........................................................................................3
2.1 User Interface...............................................................................................3
2.2 Guideline ......................................................................................................3
2.3 Wireframe .....................................................................................................3
2.4 Website .........................................................................................................3
2.5 Adobe Illustrator ..........................................................................................4
2.6 Wordpress ....................................................................................................4
2.7 Prinsip Desain ..............................................................................................4
2.8 Metode Design Thinking..............................................................................5
4. Prototype ............................................................................................6
5. Test .....................................................................................................6
BAB III
HASIL PELAKSANAAN PKL ............................................................................8
3.1 Unit Kerja PKL ............................................................................................8
3.2 Unit Praktik Kerja Lapangan .....................................................................8
3.3 Pembahasan Hasil PKL ..............................................................................11
3.3.1 Emphatize.........................................................................................12

iii
 3.3.2 Define ...............................................................................................13
3.3.3 Ideate ................................................................................................14
3.3.4 Prototype ..........................................................................................20
3.3.5 Test ...................................................................................................25
3.4 Identifikasi Kendala yang Dihadapi ...........................................................27
3.4.1 Kendala Pelaksanaan Tugas .............................................................28
3.4.2 Cara Mengatasi Kendala ..................................................................28
BAB IV
PENUTUP ...........................................................................................................29
4.1 Kesimpulan ..........................................................................................29
4.2 Saran.....................................................................................................29
DAFTAR PUSTAKA ..........................................................................................30

iv
 DAFTAR GAMBAR

Gambar 3. 1 Struktur Organisasi DITJEN APTIKA ...............................................8

Gambar 3. 2 Mock up dari halaman sejarah ..........................................................21
Gambar 3. 3 Mock up dari halaman tugas dan fungsi............................................21
Gambar 3. 4 Mock up dari halaman struktur organisasi ........................................22
Gambar 3. 5 Mock up dari halaman daftar nama pejabat ......................................23
Gambar 3. 6 Mock up dari halaman video .............................................................23
Gambar 3. 7 Mock up dari halaman program ........................................................24
Gambar 3. 8 Mock up dari halaman propram setelah di klik .................................25

v
 DAFTAR TABEL

Tabel 3. 1 Hasil observasi benchmark website pemerintahan lain ........................13

Tabel 3. 2 Wireframe website DITJEN APTIKA ..................................................15
Tabel 3. 3 Material Collecting dari desain user interface ......................................19
Tabel 3. 4 Alpha Testing 1 .....................................................................................25
Tabel 3. 5 Alpha Testing 2 .....................................................................................26

vi
 DAFTAR LAMPIRAN

Lampiran 1 Surat Keterangan PKL ......................................................................L-1

Lampiran 2 Log Book Perusahaan ....................................................................... L-2
Lampiran 3 User Requirement ............................................................................. L-3
Lampiran 4 Dokumentasi PKL ............................................................................ L-4

vii
 BAB I
PENDAHULUAN

1.1 Latar Belakang Kegiatan

Website merupakan komponen penting dalam berkembangnya
teknologi informasi dewasa ini. Manusia telah banyak memanfaatkan
website sebagai sumber pencarian informasi. Dalam pemerintahan sendiri
website sudah banyak dikembangkan dan diperhatikan. Hal ini tentunya
bertujuan untuk lebih menarik minat masyarakat terutama kaum
millennials yang tentunya sangat akrab dengan teknologi.
Website pemerintahan Indonesia sendiri dalam beberapa tahun
terakhir sudah banyak mengalami kemajuan pesat, baik dari segi desain
dan juga pengalaman pengguna. Hal ini merupakan suatu upaya bagus dari
pemerintah agar Indonesia tetap mengikuti perkembangan teknologi dan
tidak tertinggal jauh.
Direktorat Jendral Aplikasi Informatika adalah bagian dari
kementrian komunikasi dan informatika Republik Indonesia yang
memiliki tugas menyelenggarakan perumusan dan pelaksanaan kebijakan
di bidang penatakelolaan aplikasi informatika. Struktur Direktorat
Jenderal Aplikasi Informatika terdiri dari Sekretariat Direktorat Jenderal
Aplikasi Informatika, Direktorat Tata Kelola Aplikasi Informatika,
Direktorat Layanan Aplikasi Informatika Pemerintahan, Direktorat
Pemberdayaan Informatika, Direktorat Ekonomi Digital, dan Direktorat
Pengendalian Aplikasi Informatika.
Dalam hal ini, Direktorat Jenderal Aplikasi Informatika merasa
desain website yang mereka miliki sudah terlalu kuno dan monoton, oleh
karena itu diperlukan User Interface desain yang lebih fresh dan tentunya
menarik agar pengunjung website lebih banyak.

1.2 Ruang Lingkup Kegiatan

Ruang lingkup dari pelaksanaan Praktik Kerja Lapangan ini dilakukan
secara daring dan dilakukan secara tim. Adapun ruang lingkup dalam
laporan kegiatan Praktik Kerja Lapangan sebagai User Interface Designer
1
 2

di Direktorat Jenderal Aplikasi Informatika ini sebagai berikut :

1. Membuat kebutuhan desain untuk pengembangan User Interface
Website baik itu button, web banner, header, dan kebutuhan assets
lainnya.
2. Membuat desain kasar atau wireframe sebagai acuan dalam pembuatan
User Interface Website.
3. Membuat prototype secara online agar koordinasi pengerjaan
dengan tim lebih cepat.

1.3 Waktu dan Tempat Pelaksanaan

Waktu, tempat, dan informasi terkait pelaksanaan kegiatan Praktik Kerja
Lapangan secara keseluruhan adalah sebagai berikut:
a. Waktu pelaksanaan : 3 Agustus s.d 3 Desember 2020
b. Nama Perusahaan : Direktorat Jenderal Aplikasi Informatika
c. Alamat Perusahaan : Dilakukan secara work from home

1.4 Tujuan dan Kegunaan

Tujuan pembuatan website ini adalah untuk menyampaikan
informasi terkini maupun berita yang sedang hangat kepada user serta lebih
mengenalkan Direktorat Jenderal Aplikasi Informatika itu sendiri ke
publik.
Adapun kegunaan dari pembuatan project ini adalah untuk
memenuhi kebutuhan user dan mempercantik tampilan website sehingga
tujuan untuk menaikkan pengunjung bisa tercapai. Rancangan User
Interface ini nantinya akan digunakan dan diimplementasikan pada website
resmi Direktorat Jenderal Aplikasi Informatika.

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 BAB II
TINJAUAN PUSTAKA

2.1 User Interface

Perancangan antarmuka pengguna merupakan proses yang
kompleks, hal ini di dasari karena antarmuka pengguna merupakan bagian
dari sistem yang akan dikendalikan oleh pengguna dan merupakan tahap
persiapan untuk rancang bangun implementasi. (Kania, n.d.) Maka dari itu
desain antarmuka atau user interface harus sesuai tujuan dan bisa
memudahkan pengguna dalam menggunakan produk yang dihasilkan.

2.2 Guideline
Guideline merupakan hal yang sangat penting untuk memulai
perancangan suatu desain agar hasil yang didapatkan tidak melenceng
dengan tujuan awal. Guideline berfungsi untuk menciptakan Bahasa visual
untuk para pengguna yang memadukan prinsip desain yang baik dengan
teknologi dan ilmu pengetahuan. (Anggitama, 2018)

2.3 Wireframe
Wireframe adalah kerangka atau coretan kasar untuk penataan item-
item pada halaman website sebelum proses desain sesungguhnya dimulai.
Contoh item-item yang bisa ditata diantaranya banner, header, footer, link,
form input, dll. Biasanya proses ini ditugaskan kepada UI Designer. Untuk
merancang wireframe sang UI Designer bisa menggunakan coretan tangan
di kertas ataupun menggunakan tools desain khusus wireframing. Secara
visual wireframe hanya berupa garis dan kotak yang mengatur tata letak
elemen-elemen pada website. (Budhiluhoer, 2018)

2.4 Website
Website adalah sebuah kumpulan halaman pada suatu domain di
internet yang dibuat dengan tujuan tertentu dan saling berhubungan serta

3
 4

dapat diakses secara luas melalui halaman depan (home page) menggunakan
sebuah browser menggunakan URL website. (Waryanto, 2018)

2.5 Adobe Illustrator

Adobe Illustrator (atau biasa disingkat ‘AI’), adalah
sebuah software yang bergerak di bidang pengolah gambar yang
berhubungan dengan vektor. Berbeda dengan gambar biasa, vektor adalah
jenis gambar yang kalau kita perbesar (zoom) hasilnya tidak akan pecah.
Untuk mengetesnya, Anda bisa coba pakai aplikasi editing tertentu,
lalu zoom minimal 10X. (Azqiya, 2019)

2.6 Wordpress
Wordpress adalah platform pembuatan website yang diciptakan oleh
Matt Mullenweg dan Mike Little pada tahun 2003. Sejarah WordPress
berawal dari ditutupnya software blogging bernama b2/cafeblog, Matt dan
Mike sebagai pengguna b2/cafeblog, menginisiasi pembuatan software
serupa. Di tahun 2004, kedua progammer itu berhasil merilis WordPress 1.0
dengan fungsi-fungsi dasar seperti yang dimiliki b2/cafeblog yang
dimodifikasi. Sejak saat itulah perjalanan WordPress dimulai hingga saat ini
menjadi CMS paling populer di seluruh dunia. (Mubarok, 2018)

2.7 Prinsip Desain

Sebuah desain harus memiliki unsur serta prinsip komunikasi visual
dalam perancangannya seperti kesatuan (unity), keseimbangan (balance),
proporsi (proportion), irama (rhythm), dan dominasi (domination) (Yulius,
2016). Adapun fungsi dan tujuan penerapan prinsip desain komunikasi
visual pada media promosi kesehatan antara lain :
1. Kesatuan (Unity)
Kesatuan merupakan salah satu prinsip dasar tata rupa yang sangat
penting. Tidak adanya kesatuan dalam sebuah media promosi kesehatan
akan membuat media tersebut terlihat cerai-berai, yang mengakibatkan
media tersebut tidak nyaman dipandang. Prinsip ini sesungguhnya

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 5

adalah prinsip hubungan. Jika salah satu atau beberapa unsur rupa
mempunyai hubungan (warna, raut, arah, dll), maka kesatuan telah
tercapai.

2. Keseimbangan (Balance)
Dalam bidang senirupa dan desain keseimbangan ini tidak dapat
diukur tapi dapat dirasakan, yaitu suatu keadaan dimana semua bagian
dalam sebuah karya tidak ada yang saling membebani satu dengan yang
lain.

3. Proporsi (Proportion)
Proporsi termasuk prinsip dasar tata rupa untuk memperoleh
keserasian. Untuk memperoleh keserasian dalam sebuah media promosi
kesehatan diperlukan pembanding yang tepat. Pada dasarnya proporsi
adalah perbandingan matematis dalam sebuah bidang.

4. Irama (Rhythm)
Irama adalah pengulangan gerak yang teratur dan terus menerus.
Dalam bentuk-bentuk alam bisa kita ambil contoh pengulangan gerak
pada ombak laut, barisan semut, gerak dedaunan, dan lain-lain. Prinsip
irama sesungguhnya adalah hubungan pengulangan dari bentuk-bentuk
unsur rupa.

5. Dominasi (Domination)
Dominasi merupakan salah satu prinsip dasar tatarupa yang harus
ada dalam karya seni dan desain. Dominasi berasal dari kata Dominance
yang berarti keunggulan. Sifat unggul dan istimewa ini akan
menjadikan suatu unsur sebagai penarik dan pusat perhatian.

2.8 Metode Design Thinking

Dalam pembuatan sebuah produk atau aplikasi dengan metode Design
Thinking, maka dilakukan beberapa tahapan berikut secara berulang
sebanyak yang dibutuhkan untuk menghasilkan produk yang sesuai :

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 6

1. Empathize
Pada tahap ini dilakukan pendekatan terhadap customer. Hal ini
dapat dilakukan dengan bertemu langsung, melakukan wawancara, dan
dapat bertindak seolah menjadi mereka. Hal ini dilakukan agar
permasalahan customer yang ingin diselesaikan dapat berlajan dengan
lancar.

2. Define
Informasi yang telah dikumpulkan pada tahap Emphathize,
dianalisis dan disintensis untuk menemukan masalah inti yang akan
diidentifikasi. Tahap ini akan membantu menyelesaikan
masalah customer karena telah dilakukannya penetapan masalah.

3. Ideate
Tahap ini merupakan tahap untuk menghasilkan ide. Semua ide akan
ditampung demi penyelesaian masalah yang telah ditetapkan pada
tahap Define. Penting untuk mendapatkan ide sebanyak mungkin di
awal fase ide.
Langkah akhir pada tahap ini yaitu menyelidiki dan menguji ide-ide
tadi untuk menemukan cara terbaik untuk memecahkan masalah atau
menyediakan elemen yang diperlukan untuk menghindari masalah-
masalah yang nantinya terjadi.

4. Prototype
Perlu dihasilkannya suatu produk nyata. Produk tersebut dapat diuji
dalam tim sendiri, atau ke beberapa orang lain. Ketika ada masukan
maka dilakukan perbaikan pada prototype, sehingga nantinya akan
menghasilkan prototype yang benar-benar bagus.

5. Test
Pada tahap ini, dilakukan pengujian dan evaluasi terhadap produk
kepada masyarakat. Dari pengalaman pengguna dalam menggunakan
produk uji coba, maka akan didapatkan masukkan untuk membuat

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 7

produk yang lebih baik dan melakukan perbaikan pada produk yang ada.
(Anisa, 2020)

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 BAB III
HASIL PELAKSANAAN PKL

3.1 Unit Kerja PKL

Praktek Kerja Lapangan dilaksanakan di Direktorat Jenderal
Aplikasi Informatika Kementrian Komunikasi dan Informatika RI. Tugas
yang dilaksanakan pada PKL ini adalah pembuatan User Interface Website
Ditjen Aptika. Desain User Interface yang baru ini nantinya akan
menggantikan desain website Ditjen Aptika yang sebelumnya. Ditjen
Aptika dibentuk sesuai dengan amanat Peraturan Kementrian Kominfo
Nomor 6 Tahun 2018 tentang Organisasi dan Tata Kerja Kementrian
Komunikasi dan Informatika. Tugas Ditjen Aptika adalah
menyelenggarakan perumusan dan pelaksanaan kebijakan di bidang
penatakelolaan aplikasi informatika. Struktur baru Direktorat Jenderal
Aplikasi Informatika terdiri atas beberapa bagian sebagai mana terlihat pada
gambar 3.1.

Gambar 3. 1 Struktur Organisasi DITJEN APTIKA

3.2 Unit Praktik Kerja Lapangan

Minggu awal dimulainya praktik kerja lapangan ini dibuka dengan
zoom meeting dan perkenalan dari masing-masing mahasiswa PKL serta
perkenalam dari pihak Ditjen Aptika. Pada hari yang sama penulis juga
diberikan arahan dan paparan mengenai tugas yang akan dijalankan. Penulis
diarahkan untuk membuat redesign sekaligus user interface dari website
8
 9

Ditjen Aptika.
Minggu pertama bekerja, penulis melakukan observasi mencari
website referensi, mencari tema wordpress sesuai kebutuhan, membuat list
menu dan jumlah page berdasarkan website sebelumnya, dan membuat
beberapa desain yang dibutuhkan untuk web. Desain yang dibuat pada
pekan ini diantaranya widget layanan kami, struktur organisasi, visualisasi
halaman sejarah, dan filosofi logo KOMINFO pada halaman sejarah.
Minggu kedua, penulis melakukan revisi desain web sesuai arahan
dengan mencari tema wordpress lain yang lebih responsif dan dinamis,
membuat desain kasar masing-masing halaman, Membuat redesign header
dari header yang sudah ada, Menentukan komponen dan melakukan
layouting pada halaman beranda, dan membuat desain halaman sejarah di
wordpress.
Minggu ketiga, penulis melakukan revisi desain header sesuai saran,
membuat desain halaman program, memasukkan tiga contoh postingan pada
halaman regulasi dan infrastruktur TIK. Minggu keempat, penulis
memasukkan tiga contoh postingan pada halaman aplikasi layanan publik,
pengembangan SDM, Kerjasama, dan komunitas TIK.
Minggu kelima, penulis melakukan revisi desain struktur organisasi
sesuai arahan, melakukan redesign pada halaman berita dengan
menambahkan slideshow sebagai variasi, dan juga menambahkan sidebar
berita pada halaman berita. Minggu keenam, penulis menambahkan sidebar
twitter pada bagian samping halaman sejarah dan halaman tugas dan fungsi.
Penulis juga menambahkan sidebar pada halaman struktur organisasi, dan
daftar nama pejabat. Selain itu penulis juga melakukan redesign halaman
program dengan menambahkan carousel dan list program di bagian bawah.
Minggu ketujuh, penulis melakukan redesign header agar design
tidak terlalu kosong dan hampa sesuai revisi, oleh karena itu penulis
mengajukan 6 pilihan desain dan dilakukan pemilihan oleh para pejabat
pada saat zoom meeting berlangsung. Minggu kedelapan, penulis membuat
template desain pada post program agar sesuai dan rapi serta adanya inovasi
sehingga web tidak monoton.

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 10

Minggu kesembilan, penulis melakukan redesign pada header

sesuai revisi dengan mengganti warna dan menambahkan item nelayan.
Penulis juga mengganti overlay background pada bagian layanan kami
dengan foto kegiatan di Ditjen Aptika.
Minggu kesepuluh, penulis melakukan redesign pada header sesuai
revisi dengan menambahkan logo literasi digital. Setelah itu, penulis
mengganti header pada laman beranda, sejarah, tugas dan fungsi, dan daftar
nama pejabat. Selain itu penulis juga mulai mengatur tampilan hp sekaligus
mengganti header pada halaman berita, artikel, program, layanan, aptika
event, dan galeri. Sisanya pada minggu ini penulis mengganti header pada
menu publikasi, data aptika, dan kontak.
Minggu kesebelas, penulis melakukan perbaikan pada pengaturan
layout halaman artikel dan program, serta memastikan kembali dan
melakukan perbaikan layout pada menu informasi.
Minggu keduabelas, penulis meningkatkan tingkat keresonsifan
pada halaman berita, pengumuman, layanan, agenda, dan galeri (foto dan
infografis). Pada minggu ini penulis juga mengatur layouting,
menambahkan dan memasukkan video, lalu merapikan pengaturan layout
hp, tablet, dan pc pada halaman video. Selain itu penulis juga kembali
meningkatkan tingkat keresponsifan halaman artikel dan program.
Minggu ketigabelas, penulis kembali meningkatkan tingkat
keresponsifan halaman program dikarenakan masih ada sedikit error dan
kurang sempurna. Selain itu, penulis berusaha untuk meningkatkan tingkat
keresponsifan pada page berita, pengumuman, layanan, agenda, galeri (foto
dan infografis). Tak hanya di page berita, penulis juga melakukan
pengaturan untuk layouting pada page video, serta menambah dan
memasukkan video pada page tersebut. Setelah itu, penulis melakukan
pengaturan layout hp, tablet, pc, dan merapikan layout tersebut pada page
video, sehingga layout pada page video terlihat lebih rapi daripada
sebelumnya.
Pada minggu ke-empatbelas, penulis melakukan peningkatan
tingkat keresponsifan pada halaman kontak dan pada menu publikasi. Di

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 11

minggu tersebut, penulis juga melakukan peningkatan tingkat keresponsifan

pada page artikel dan page program. Penulis juga kembali mengecek tingkat
keresponsifan pada page-page yang terdapat dalam website, sehingga
penulis dapat mengetahui page mana yang harus ditingkatkan tingkat
keresponsifannya.
Setelah minggu ke empat belas penulis melakukan pengecekan
terhadap tingkat keresponsifitas page, penulis menemukan fakta bahwa
pada page kontak tingkat keresponsifannya kurang, sehingga pada minggu
ke lima belas penulis berusaha untuk meningkatkan tingkat keresponsifan
page tersebut. Selain itu, penulis juga meningkatkan tingkat keresponsifan
pada tab publikasi di minggu ke lima belas.
Berbeda dengan minggu ke lima belas, pada minggu ke enam belas,
penulis kemudian melakukan pencarian plugin galeri auto-update. Selain
itu, penulis juga memasukkan beberapa contoh penerapan plugin galeri.
Setelah itu, penulis kembali melakukan pengecekan terhadap tingkat
keresponsifan pada page-page dalam website, hal ini terus penulis lakukan
agar website dapat berjalan dengan baik dan tertata dengan rapi secara
layout.
Pada minggu ke tujuh belas, penulis merasa bahwa plugin galeri
belum terlalu sesuai, sehingga pada minggu ini penulis kembali mencari
plugin galeri yang lebih sesuai untuk diterapkan. Setelah penulis merasa
sesuai terhadap plugin galeri tersebut, penulis kemudian mencoba untuk
menerapkan plugin galeri tersebut pada website. namun beberapa hari
kemudian penulis baru menyadari bahwa plugin galeri yang telah diterapkan
pada minggu ini tidak sesuai dikarenakan tidak bisa auto update, sehingga
penulis memutuskan untuk melakukan pencopotan pemasangan plugin
galeri tersebut. Di minggu terakhir ini pula penulis berusaha untuk
melakukan penyempurnaan tingkat keresponsifan pada halaman sejarah dan
halaman-halaman lainnya agar tingkat keresponsifannya dapat meningkat
dari sebelumnya.
3.3 Pembahasan Hasil PKL
Pembahasan dari hasil PKL adalah membahas user interface yang

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 12

dibuat nantinya akan diimplementasikan pada web Aptika yang telah ada.
Penulis membagi proses pembuatan User Interface ini dengan
tahapan/metode design thinking yang meliputi: Emphatize, Define, Ideate,
Prototype, Test.

3.3.1 Emphatize
Proses empati adalah proses yang berfokus pada pemahaman kebutuhan
user. Hal ini penting dilakukan karena semua proses akan menemui titik
terang dan lebih jelas arahnya apabila designer memahami kebutuhan user.
Keberhasilan pada proses ini juga dapat menentukan kecepatan selesainya
proses pembuatan desain. Oleh karenanya, pada tahap ini penulis mencari
jawaban atas beberapa pertanyaan untuk mempermudah pembuatan web.
Beberapa pertanyaan itu diantaranya:
a. Bagaimana gambaran desain yang diinginkan oleh Ditjen Aptika?
b. Warna apa yang mendominasi web Ditjen Aptika?
c. Info apa saja yang ingin ditampilkan pada web Ditjen Aptika?
d. Apa yang ingin ditonjolkan dan menjadi point utama web Ditjen
Aptika?
e. Fitur apa saja yang harus di desain untuk memudahkan user?
Jawaban dari pertanyaan-pertanyaan tersebut diantaranya, gambaran
desain yang diinginkan Ditjen Aptika adalah desain yang rapi, lengkap, dan
tidak terlalu memakan banyak ruang kosong. Warna yang mendominasi
web Ditjen Aptika adalah warna utama biru dengan warna pendukung hitam
dan putih. Pada pembuatan web ini info yang ingin ditampilkan pada web
Ditjen Aptika diantaranya, beranda, profil, informasi, publikasi, data aptika,
dan kontak. Hal yang ingin ditonjolkan dan menjadi poin utama dari web
Ditjen Aptika ini adalah berita. Fitur tambahan yang didesain untuk
memudahkan user diantaranya, setiap judul dapat diklik dan mengarah
langsung menuju halaman yang dituju, informasi perkembangan kasus
covid dengan menambahkan widget covid pada beranda, dan juga pdf yang
bisa di download langsung.

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 13

3.3.2 Define
Pada tahap ini, dilakukan identifikasi dan pemecahan masalah
berdasarkan informasi yang diperoleh dari tahap emphatize. Penulis juga
melakukan benchmarking dengan website pemerintahan lain agar
mengetahui trend website pemerintahan. Hal ini dilakukan dalam rangka
mencari referensi desain yang cocok untuk diterapkan pada web Ditjen
Aptika. Hasil dari benchmark pada beberapa website memiliki kekurangan
dan kelebihan masing-masing yang terdapat pada table 3.1

Tabel 3. 1 Hasil observasi benchmark website pemerintahan lain

Fitur yang Sample 1 Sample 2 Sample 3

diamati (maritim) (kemenparekraf) (kominfo)
Penyampaian Website ini Penyampaian Website ini
informasi pada menggunakan informasi tugas menyampaikan
halaman tugas widget dan fungsi pada info tugas dan
dan fungsi. accordion yang website ini fungsi dalam
dapat membuka hanya berbentuk bentuk artikel
dan menutup artikel. dengan menu di
dengan samping kiri.
otomatis.
Sosial media Pada website Sosial media Tidak terdapat
widget ini social media widget pada widget sosial
widget terdapat website ini media pada
5 item dan ditunjukkan website ini
berada di sama seperti
bagian samping website
kiri. maritime namun
dengan 8 item di
dalamnya.
Navbar menu Navbar menu Website ini Kominfo
pada web ini memiliki navbar memiliki navbar
memiliki style menu yang menu yang

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 14

yang sederhana menyatu dengan cenderung kaku

dan cenderung background dan memiliki
flat. tanpa overlay shape.
layer.

Dari hasil observasi pada tahap ini dapat menjadi acuan untuk
mengembangkan ide sesuai konsep. Poin-poin yang akan diterapkan
diantaranya berupa :
a. Desain modern namun kepadatan dan kelengkapan informasi masih
tetap diperhatikan.
b. Poin yang ingin ditonjolkan diterapkan di beranda agar fokus user lebih
terarah.
c. Kontak ditulis dengan jelas dan tidak ambigu.

3.3.3 Ideate
Berdasarkan permasalahan yang ada, pada tahapan ini didapatkan
sebuah ide dan konsep yang akan dikembangkan lebih lanjut. Proses yang
dilakukan pada tahap ini adalah pembuatan wireframe dan setelah itu masuk
ke proses material collecting berdasarkan wireframe yang telah dibuat.

3.3.3.1 Wireframe
Wireframe adalah gambaran atau rancangan blueprint dari desain website
yang sedang dikembangkan. Proses wireframe penting dilakukan karena
proses ini memberi gambaran terhadap User Interface desainer sehingga
tahap pengerjaan jelas dan lebih cepat. Pembuatan wireframe secara garis
besar adalah menempatkan elemen-elemen penting dari halaman website
dan menyusunnya sehingga terlihat jelas dimana letak header, body, footer,
dll. Pada tahapan ini belum ada inputan gambar. Gambar wireframe yang
sudah dibuat akan dijabarkan pada tabel 3.2, wireframe keseluruhan dapat
dilihat dalam lampiran.

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 15

Tabel 3. 2 Wireframe website DITJEN APTIKA

No. Gambar Keterangan

1 Sketsa wireframe
disamping merupakan
sketsa dari halaman
sejarah. Di halaman ini
terdapat visualisasi
sejarah dan filosofi
logo. Selain itu juga
terdapat struktur baru
ditjen aptika.

2 Wireframe disamping
menunjukkan halaman
tugas dan fungsi. Pada
halaman ini terdapat
widget accordion yang
bisa otomatis membuka
dan menutup apabila
salah satu menu di klik.

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 16

3 Sketsa halaman struktur

organisasi dapat dilihat
dari wireframe
disamping. Masih sama
dengan halaman tugas
dan fungsi, pada
halaman ini juga
terdapat widget
accordion yang bisa
otomatis membuka dan
menutup.

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 17

4 Wireframe disamping
menunjukkan halaman
daftar nama pejabat
APTIKA yang terdiri
atas foto dan nama
pejabat. Selain itu
dibawahnya juga
terdapat accordion.

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 18

5 Pada halaman program

terdapat carousel/slide
show yang
menampilkan daftar
program.

6 Wireframe disamping
adalah gambar yang
menunjukkan halaman
program ketika di klik.

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 19

7 Gambar disamping
menunjukkan
wireframe desain
halaman video. Pada
halaman ini terdapat
beberapa cuplikan
video yang apabila di
klik maka akan
mengarah langsung ke
youtube DITJEN
APTIKA.

3.3.3.2 Material Collecting

Pada tahap pengumpulan materi, hal yang dilakukan adalah mencari
gambar dan icon yang dibutuhkan sebagai komponen pembuatan user
interface website. Materi yang telah dikumpulkan dan akan digunakan dapat
dilihat pada tabel 3.3.
Tabel 3. 3 Material Collecting dari desain user interface

No Material Format Sumber

1. .png Freepik.com

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 20

2. .png Kominfo.go.id

3. .jpeg Aptika
Kominfo

3.3.4 Prototype
Pada tahap prototype, gambar, dan assets mulai dimasukkan dan
ditempatkan sesuai wireframe yang telah dibuat. Semua langkah tersebut
dilakukan dengan wordpress. Wordpress dipilih karena sesuai dengan
arahan pihak Ditjen Aptika dan juga dinilai paling sesuai untuk membuat
prototype web.

3.3.4.1 Mock Up
Mock up merupakan tampilan yang menyerupai nyata dari sebuah
konsep desain. Mock up dibuat sesuai dengan wireframe yang sudah ada
pada tahap ideate sehingga memuat semua permintaan client.

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 21

Gambar 3. 2 Mock up dari halaman sejarah

Pada gambar 3.2 adalah mock up dari halaman sejarah yang

ditampilkan dalam bentuk visualisasi gambar dan bukan hanya teks seperti
permintaan DITJEN APTIKA.

Gambar 3. 3 Mock up dari halaman tugas dan fungsi

Pada gambar 3.3 adalah gambar mock up dari halaman tugas dan
fungsi. Pada halaman ini terdapat fitur buka tutup dimana jika menu tugas
di klik maka akan muncul penjabaran tugas, dan apabila menu fungsi di klik
maka akan muncul penjabar fungsi dan menu tugas pun akan tertutup

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 22

dengan otomatis.

Gambar 3. 4 Mock up dari halaman struktur organisasi

Gambar 3.4 Menunjukkan mock up dari halaman struktur organisasi

halaman ini memiliki fitur yang sama dengan halaman tugas dan fungsi
yaitu widget yang otomatis menutup apabila salah satu poin dibuka. Pada
halaman ini juga terdapat widget berita terkini dan social media twitter
dibagian samping kanan.

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 23

Gambar 3. 5 Mock up dari halaman daftar nama pejabat

Mock up pada halaman daftar nama pejabat terlihat pada gambar 3.5.
Pada halaman ini terdapat beberapa widget berbentuk card yang
menampilkan foto dan nama pejabat dari DITJEN APTIKA.

Gambar 3. 6 Mock up dari halaman video

Gambar diatas merupakan mock up dari halaman video. Pada

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 24

halaman ini terdapat fitur video terbaru dan fitur yang menampilkan playlist
video di bagian samping kanan halaman.

Gambar 3. 7 Mock up dari halaman program

Mock up pada halaman program ditunjukkan pada gambar diatas,

pada halaman ini terdapat fitur carousel yang dapat menampilkan list
program secara keseluruhan. Selain itu juga terdapat wodget berita terkini
dan social media twitter di samping kanan halaman.

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 25

Gambar 3. 8 Mock up dari halaman propram setelah di klik

Pada halaman ini info program APTIKA disajikan dengan desain

yang menarik dan rapi.
3.3.5 Test
Tahap test berguna untuk penulis dalam memastikan kembali bahwa
desain sudah sesuai dengan kehendak client dan berfungsi optimal sehingga
dapat diimplementasikan kepada website Ditjen Aptika yang telah ada.
Tahap testing dilakukan dengan menggunakan Teknik Alpha Testing oleh
pihak DITJEN APTIKA KOMINFO. Tabel berikut menampilkan poin-poin
yang telah dipenuhi dan yang belum dipenuhi dalam pembuatan desain user
interface website DITJEN APTIKA KOMINFO
Tabel 3. 4 Alpha Testing 1

Telah
No Deskripsi Belum Memenuhi
Memenuhi

Keserasian warna yang digunakan

1. √
pada desain user interface

Kesesuaian pemilihan jenis font yang

2. √
digunakan pada desain user interface

Kemapuan readibilitas pada teks

3. √
dalam website

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 26

Keseimbangan penggunaan white

4. space background pada desain user √
interface
Keserasian ikon atau simbol dengan
5. √
desain user interface
√
Kemampuan responsif pada tiap
(Page sejarah dan
6. halaman desain user interface
beranda kurang
responsif)
Konsistensi pada desain user
7. √
interface

Tampilan berita sebagai highlight

8. utama pada desain halaman beranda √

Pemahaman singkat dan jelas pada

9. desain konten √

Keserasian menu navigasi pada

10. desain user interface √

Menurut tabel 3.4 Masih terdapat beberapa kurangan pada Alpha Testing 1.
Oleh karena itu dilakukan kembali penyempurnaan dan perbaikan oleh tim
desain. Berikut tabel menampilkan poin penting yang telah diperbaiki
menurut tabel 3.4

Tabel 3. 5 Alpha Testing 2

No Deskripsi Telah Belum Memenuhi

Memenuhi

Keserasian warna yang digunakan

1. √
pada desain user interface

Kesesuaian pemilihan jenis font yang

2. √
digunakan pada desain user interface

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 27

Kemapuan readibilitas pada teks

3. √
dalam website

Keseimbangan penggunaan white

4. space background pada desain user √
interface
Keserasian ikon atau simbol dengan
5. √
desain user interface

Kemampuan responsif pada tiap

6. √
halaman desain user interface

Konsistensi pada desain user

7. √
interface

Tampilan berita sebagai highlight

8. utama pada desain halaman beranda √

Pemahaman singkat dan jelas pada

9. desain konten √

Keserasian menu navigasi pada

10. desain user interface √

Menurut tabel 3.5 website sudah selesai dibuat dan telah memenuhi poin-
poin yang diminta dengan baik.

3.4 Identifikasi Kendala yang Dihadapi

Selama proses pelaksanaan praktik kerja lapangan, terdapat
beberapa kendala yang dihadapi, sehingga penulis bisa mendapatkan
pelajran dari kendala tersebut diantaranya, pentingnya komunikasi tim,
pentingnya memahami client, dan juga pentingnya disiplin waktu. Selain itu
penulis juga mendapatkan pengalaman berharga berupa dapat bekerja
secara professional dengan pihak Ditjen Aptika yang tak henti-hentinya
berinovasi demi memajukan Indonesia.

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 28

3.4.1 Kendala Pelaksanaan Tugas

Berikut ini kendala yang dihadapi saat melakukan PKL di Ditjen Aptika :
1. Keinginan client yang dapat sewaktu-waktu memberi revisi yang
menyebabkan termakannya banyak waktu hanya untuk membuat satu
desain.
2. Pemberian tugas tambahan yang mendadak.

3.4.2 Cara Mengatasi Kendala

Berikut cara penulis mengatasi kendala saat melaksanakan PKL :
1. Penulis lebih mendengarkan dan memahami keinginan Ditjen Aptika
dan mengesampingkan ego untuk berkreasi sesuai dengan kemauan.
2. Mengkomunikasikan kekurangan waktu kepada pembimbing industri
agar diberi kelonggaran waktu lebih lama.

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 BAB IV
PENUTUP

4.1 Kesimpulan
Berdasarkan dari hasil Praktik Kerja Lapangan (PKL) yang dilaksanakan di
DITJEN APTIKA, dapat disimpulkan bahwa:
a. Pembuatan user interface website DITJEN APTIKA sudah memenuhi kriteria
dan permintaan pihak DITJEN APTIKA.
b. Desain User Interface beberapa halaman yang sudah dibuat nantinya akan
diimplementasikan pada website DITJEN APTIKA.
c. Terselesaikannya kegiatan Praktik Kerja Lapangan (PKL) pembuatan desain
user interface di DITJEN APTIKA.

4.2 Saran
Berdasarkan hasil Praktik Kerja Lapangan (PKL), desain user interface yang dibuat
masih belum sempurna. Oleh karena itu, penulis memiliki beberapa saran,
diantaranya:
a. Diperlukan adanya komunikasi yang lebih baik antara pihak DITJEN APTIKA
dan penulis, agar tidak terjadi revisi yang berlarut-larut.
b. Sebaiknya diadakan rapat setiap bulan dengan para pejabat DITJEN APTIKA
sehingga sejak awal pembuatan user interface dapat memenuhi keinginan para
pejabat.
c. Penulis sebaiknya lebih memperdalam ilmu mengenai tools yang dipakai.

29
 30

DAFTAR PUSTAKA

Anggitama, D. T.-Z. (2018). Evaluasi Dan Perancangan User Interface Untuk

Meningkatkan User Experience Menggunakan Metode Human centered
Design Dan Heuristic Evaluation Pada Aplikasi EzyPay. Jurnal
Pengembangan Teknologi Informasi dan Ilmu Komputer, 6152-6159.

Anisa, T. (2020, April 27). Pengertian dan Langkah-langkah Dalam Design

Thinking. Diambil kembali dari Logique Blog:
[https://www.logique.co.id/blog/2020/04/27/apa-itu-design-thinking/ ,
diakses pada 21 November 2020]

Azqiya, Z. (2019, March 13). √ 3+ Pengertian Adobe Illustrator dan Bedanya

dengan Photoshop. Diambil kembali dari leskompi:
[https://www.leskompi.com/pengertian-adobe-ilustrator/ , diakses 21
November 2020]

Budhiluhoer, M. (2018, July 5). Konsep Wireframe Pada Website. Diambil kembali
dari codepolitan: [codepolitan.com/konsep-wireframe-pada-website-
5b3db818441cf , diakses pada 21 November 2020]

Kania, S. M. (n.d.). Implikasi Performa Profile Pengguna Terhadap Perancangan

Antarmuka Perangkat Lunak. Majalah Ilmiah UNIKOM Vol.7, No.1, 51-60.

Mubarok, I. (2018, October 26). Apa Itu WordPress? Pengertian WordPress dan
Manfaatnya. Diambil kembali dari Niaga Hoster:
[https://www.niagahoster.co.id/blog/apa-itu-wordpress/ , diakses pada 21
November 2020]

Waryanto. (2018, January 22). Pengertian Website Lengkap dengan Jenis dan
Manfaatnya. Diambil kembali dari Niaga Hoster:
[https://www.niagahoster.co.id/blog/pengertian-website/ , diakses pada 21
November 2020]

Yulius, Y. (2016). Peranan Desain Komunikasi Visual Sebagai Pendukung Media

Promosi Kesehatan. Jurnal Seni Desain dan Budaya Volume 1 No.2, 42-47.

Jurusan Teknik Informatika dan Komputer – Politeknik Negeri Jakarta

 Lampiran 1 Surat Keterangan PKL.

L-1
 Lampiran 2.Log Book Perusahaan

L-2
 Lampiran 2.Log Book Perusahaan,.

L-2
 Lampiran 2.Log Book Perusahaan

L-2
 Lampiran 2.Log Book Perusahaan

L-2
 Lampiran 2.Log Book Perusahaan

L-2
 Lampiran 2.Log Book Perusahaan

L-2
 Lampiran 2.Log Book Perusahaan

L-2
 Lampiran 3 User Requirement

L-3
 Lampiran 3 User Requirement

L-3
 Lampiran 4 Dokumentasi PKL

Dokumentasi rapat work from home bersama Ditjen APTIKA

L-4