VOL .06 NO .01, PP . 23-28 P -ISSN : 2548-9534 | E -ISSN : 2548-9550

## Perancangan Tampilan UI/UX Pada Aplikasi Novel Komik (Nomik)
Muhammad Suhaili a Herly Nurrahmi b Tri Fajar Yurmama c Vikka Isma Liana Putri d
c Politeknik Negeri Media Kreatif, Jl. Srengseng Sawah Jagakarsa Jakarta Selatan

## I NFORMASI A RTIKEL

## ABSTRACT
Sejarah Artikel: Diterima Redaksi: 24 Juni 2022 Revisi Akhir: 15 Juli 2022
Diterbitkan Online : 15 Juli 2022
Salah  satu  masalah  buta  aksara  adalah  minimnya  literasi.  Kemudahan mendapatkan akses informasi literasi yang menarik pada anak dan remaja ataupun  masyarakat  secara  umum  dapat  membantu  minat  baca  mereka. Bahkan juga dapat meminimalisir buta aksara. Untuk itu diperlukan sebuah sistem yang berbasis website yang berisi koleksi novel komik agar mudah dijangkau masyarakat tersebut. Pada penulisan ini bertujuan sebagai solusi alternatif rancangan tampilan web agar lebih menarik dengan disertai alur penggunaan yang mudah. Sehingga dapat membantu minat baca pada media daring.  Dalam  perancangan  sistem  tersebut  penelitian  ini  memberikan alternatif  desain  tampilan  sistem  dengan  melakukan  empat  tahapan perancangan yaitu wireframe, storyboard, user flow . Pada hasil perancangan tersebut  yaitu  berupa mock  up aplikasi  Nomik  yang  dapat  berfungsi membantu dalam pengembangan implementasi sistem.
DOI: https://doi.org/10.46961/jommit.v6i1
K ATA K UNCI
UI/UX, GUI, Novel Komik

## K ORESPONDENSI
Herly Nurrahmi, Multimedia, Politeknik Negeri Media Kreatif JL.  Srengseng  Sawah  Jagakarsa  Jakarta Selatan Email: suhaili@polimedia.ac.id

## 1. PENDAHULUAN
Dalam  rangka  memberdayakan  dan  meningkatkan  minat  baca anak, Kemendikbud terus mendukung program masyarakat yang berkaitan dengan Gerakan Literasi Nasional (GLN). Berdasarkan sumber dari situs GLN kemendikbud tujuan utama dari Gerakan ini guna memberatas buta aksara masyarakat sejak dini. Sasaran  utama  masyarakat  yang  mengikuti  Gerakan  ini  yaitu mereka  yang  masih  mengenyam  pada  Pendidikan  usia  dini  dan Pendidikan  dasar.  Salah  satu  upaya  untuk  menarik  minat  baca anak pada usia tersebut yaitu melalui buku bergambar atau buku komik.  Karena,  jika  buku  hanya  berupa  tulisan  saja  walaupun isinya berupa cerita ringan, mereka masih kurang berminat untuk membacanya.
Oleh karena itu perlu dilakukan upaya menyediakan media baca buku komik yang mudah dijangkau anak. Salah satunya adalah melalui  aplikasi  berbasis  web  yang  menyediakan  konten  buku- buku  komik  anak.  Pada  penelitian  ini  membahas  perancangan tampilan  antar  muka  pengguna  aplikasi  web  Nomik  (Novel komik) atau yang disebut juga Graphic User Interface (GUI). Pada sistem pengembangan siklus software , langkah desain GUI merupakan tahapan setelah dilakukan identifikasi kebutuhan dan
analisis  perancangan  aplikasi.  Langkah  ini  akan  membantu memberikan  desain  alur  visual  aplikasi.  Sehingga  dapat memudahkan  pada  tahapan  selanjutnya  yaitu  implementasi aplikasi atau pengkodean.
Adapun  tahapan  penelitian  ini  terbagi  menjadi  3  tahapan  yaitu tahapan perancangan wireframe , penyusunan storyboard . User flow  diagram ,  dan  desain mockup .  Tahapan  diatas  bertujuan sebagai  langkah  antisipasif  ketika  terjadi  perubahan  atau perbaikan  pada  sistem  sebelum  masuk  ke  langkah  pengkodean. Sehingga  memungkinkan  efisiensi  waktu  dan  efektifitas pekerjaan.

## 2. TINJAUAN PUSTAKA
2.1. Wireframe Wireframe merupakan  struktur  dasar  website  atau  disebut  juga blueprint bagi para desainer UI/UX. Wireframe terdiri dari fungsi sliders, tabs, dan lainnya sebelum terjadi coloring (warna) pada desain yaitu  hanya berupa structural guidelines nya saja.

## 2.2. Storyboard
Storyboard merupakan gambaran besar yang terdiri dari beberapa kumpulan wireframe yang  disatukan.  Fungsi  utama Storyboard yaitu  memungkinkan  setiap  user  ataupun  orang  agar  dapat
merasakan  sebuah  gambaran  besar  dari  setiap  rancangan pengalaman wireframe atau User  Interface ketika  berinteraksi dengan sistem tersebut.

## 2.3. Userflow
User  flow merupakan  langkah  yang  dilakukan user saat menggunakan  produk  guna  menyelesaikan  suatu  tugas  ( task) . User  flows mengacu  pada  bagaimana  cara user berinteraksi dengan  sistem. User  flows menekankan  setiap  pengguna memungkin  menggunakan flow yang  berbeda  pada  setiap task . Seorang UI/UX designer bisa memiliki banyak skenario berbeda ketika menggunakan diagram ini.
2.4. Mockup Setelah proses wireframe dan userflow selesei, tahap selanjutnya yaitu  m ockup yang  merupakan  penyempurnaan wireframe dengan menampilkan aspek desain visual, berupa warna gambar dan  tipografi.  Beberapa  keunggulan  dari  m ockup yaitu  dapat mengorganisir detail dari proyek, identifikasi error , transfer ide ke  dalam  bahasa  yang  mudah  difahami  oleh stakeholders ,  Ide dapat tersampaikan kepada anggota tim, Implementasi rancangan aplikasi, sudut pandang user .

## 3. KONSEP PERANCANGAN

## 3.1. Wireframe
Pada tahap perancangan desain wireframe yaitu dengan membuat desain  wireframe  pada  setiap  halaman  yang  dibutuhkan.  Pada penelitian  ini  terdapat  10  desain  halaman  sesuai  kebutuhan sistem. Dibawah ini adalah hasil dari desain 10 halaman tersebut.
a) Design interface halaman beranda
c) Design interface awal
d) Design interface navigasi genre e) Design interface halaman novel
g) Design interface halaman komik
h) Design interface halaman baca komik
i) Design interface navigasi notifikasi
j) Design interface navigasi profil

## 3.2. Storyboard
Tahap  selanjutnya  menyusun  storyboard  untuk  melihat keseluruhan  halaman  dengan  mengurutkan  dari  kiri  atas  ke kanan.

## 3.3. Userflow
Tahap  selanjutnya  kemudian  membuat  userflow  yaitu dengan menetukan urutan secara hirarki sesuai dengan alur penggunaan pada sistem. Pada tahap ini faktor pengalaman kemudahan user dalam  menggunakan  sistem  sangat diutamakan.

## 4. HASIL DAN PEMBAHASAN

## 4.1. Mockup
Selanjutnya  hasil  dari  perancangan  wireframe  diatas  dilakukan penyempurnaan secara visual dengan memberikan efek coloring (warna)  pada  setiap  halaman  yang  terdapat  pada  sistem.  Pada langkah  ini  sudah  dilakukan  implementasi  tampilan  interaksi antar  muka  pengguna  yang  menarik.  Dibawah  ini  hasil  dari tampilan GUI dari keseluruhan halaman pada sistem.
a. Halaman beranda yaitu tampilan pertama kali muncul saat kita membuka nomik.
b. Halaman login, kita bisa login lewat email ataupun google dan facebook.
c. Halaman awal/utama setelah login yaitu halaman novel dan komik, kita dapapt memilih ingin membaca novel atau komik.
d. Navigasi genre kita dapat memilih genre yang kita inginkan.
e. Halaman novel setelah kita pilih novel yang ingin kita baca lalu klik tombol baca untuk membacanya.
f. Halaman baca novel, setelah kita klik baca sekarang kita bisa membaca novel yang telah kita pilih.
g. Halaman komik setelah kita pilih komik yang ingin kita baca lalu klik tombol baca untuk membacanya.
h. Halaman baca komik, setelah kita klik baca sekarang kita bisa membaca komik yang telah kita pilih.
i. Navigasi notifikasi, kita dapat melihat cerita yang telah update atau pemberitahuan lainnya.
j. Navigasi profil, kita bisa bisa melihat profil kita dan terdapat pilihan lainnya seperti mengubah bahasa atau kita bisa logout dan lainnya.

## 5. KESIMPULAN DAN SARAN
Dari  hasil  penelitian  ini,  yang  berupa mockup aplikasi  Nomik diharapkan sebagai langkah alternatif dengan melakukan desain UI/UX  atau  disebut  juga  GUI  yang  dapat  membantu  para pengembang sistem. Pada hasil mockup sebagai indikator apakah tampilan tersebut menjadi daya tarik dan mempunyai alur yang memudahkan user untuk menggunakan sistem.
Adapun  saran  dari  hasil  penelitian  ini  yaitu  agar  dilakukan analisis Software  Quality  Assurance (SQA)  untuk  mengetahui kesesuaian tampilan aplikasi dengan kebutuhan awal. Selain itu, juga untuk mengetahui kemudahan penggunaan aplikasi.

## DAFTAR PUSTAKA

## Web
[1] M.  Duncan.  “Engineering  Concepts  on  Ice.  Internet: www.iceengg.edu/staff.html, Oct. 25, 2000 [Nov. 29, 2003].
[2] Kemendikbud. “KILASAN GERAKAN LITERASI NASIONAL.” Internet :
https://gln.kemdikbud.go.id/glnsite/tentang-gln/ [Juni. 04, 2022].
[3] Cindy Paskalina. “Kenalan dengan Wireframe yuk!” Internet : https://skilvul.com/blogs/kenalan-dengan-wireframe-yuk [Juni. 04, 2022].
[4] Binus School of Information System. “Wireframe Dalam Desain Website” Internet : https://sis.binus.ac.id/2017/12/18/wireframe-dalam-desain- website/
[Juni. 04, 2022].
[5] Staff, W. “ Using Wireframes to Streamline Your Development Process” Internet : https://www.webdesignerdepot.com/2009/07/using- wireframes-to-streamline-your-development-process/ [Juni. 04, 2022].

## BIODATA PENULIS
Saat  ini  penulis  merupakan  pengajar  pada program  studi  Animasi  dan  Multimedia  di Politeknik  Negeri  Media  Kreatif.  Latar belakang  pendidikan  penulis  yaitu  Ilmu Komputer.

## LAMPIRAN
Lampiran  yang  perlu  disampaikan  sebagai  pendukung  artikel, dituliskan setelah Biodata penulis. Maksimal sebanyak 4 (empat) halaman,  diizinkan  untuk  bagian  lampiran.  Bila  menyertakan tabel,  gambar,  atau  persamaan  matematika,  juga  diberi  nomor berurutan.