## DESAIN USER INTERFACE INFORMASI PRODI DESAIN KOMUNIKASI VISUAL MELALUI MEDIA DIGITAL WEBSITE

## Dedit Priyono, Ahmad Ramdhani, Robby Hardian
Program Studi Desain Komunikasi Visual Politeknik Harapan Bersama Tegal
Abstrak .  Sebagai  Program  Studi  baru,  DKV  Politeknik  Harapan  Bersama  Tegal  belum  mempunyai  media informasi  yang  dapat  menampilkan  informasi  kegiatan  akademik.  Perkembangan  teknologi  berdampak kepada  peningkatan  kualitas  desain website dalam  memenuhi  kebutuhan  pengguna  dalam  mengakses website melalui berbagai perangkat dan komputer desktop. Kemudahan ini berakibat kepada proses desain yang memberikan pengalaman yang mengesankan bagi pengunjung yang membuka website tersebut. website dikatakan  baik  apabila  mampu  menciptakan  berbagai  pengalaman  dalam  lingkungan  internal  maupun eksternal  bagi  pengguna  dan  memiliki  peranan  penting  dalam  perancangan  desain website .  Hal  ini dikarenakan  rancangan  design  sangat  erat  kaitannya  dengan User  Interface dan User  Experience sehingga dapat dijadikan tolak ukur website dalam mencapai tujuannya. Perancangan informasi prodi berbasis website mencoba  menerapkan  tampilan  antarmuka website yang  lebih  menarik  dan  sesuai  dengan  kebutuhan pengguna.  Penelitian  ini  merupakan  penelitian mix  method dengan  pendekatan User-Centered  Design . Sampling menggunakan purposive sampling dengan mengambil beberapa perwakilan mahasiswa setiap kelas. Pengambilan data dilakukan dua kali, pengambilan data pertama menggunakan Focus Grup Discussion (FGD). Masukan dari FGD tersebut dijadikan pertimbangan untuk dijadikan konten, pengambilan data kedua sebagai uji  coba prototype  website .  Dari  tiga  aspek  yang  diujikan  secara  keseluruhan  masing-masing  aspek  masuk dalam  kategori  “Baik”  dengan  nilai  prosentase 75,94%,  untuk  aspek  Konten  dan  organisasi,  77,21%  untuk aspek navigasi dan tautan, 77,71% untuk aspek visual.
Kata kunci : Prodi DKV, User Interface , Media Digital, Website
Abstract. As a new Study Program, DKV Polytechnic Harapan Bersama Tegal doesn’t have any information media that can announce academic information. Technological developments have an impact on improving quality  of  website design  for  user’s  needs  in  accessing websites  through  various  devices  and  desktop computers. This simplicity results in a design process that provides a memorable experience for visitors who open the website. A well-approved website offers users experience in both internal and external environments and has an important role in website design. This is because the design that is designed is closely related to the User Interface and User Experience so that it can be used to measure the  website in achieving success. Design of web-based study program information tries to put on a web interface that is more attractive and suits the user's needs. This research is a mixed methods research using User-Centered Design. Sampling uses purposive sampling by taking several student representatives for each class. Data retrieval is done twice, first data collection using Focus Group Discussion (FGD). FGD result is to create captured content, retrieve data to test  prototype  websites.  Of  the  three  aspects  tested,  each  aspect  falls  into  the  "Good"  category  with  a percentage value of 75.94%, for the Content  and organization aspects, 77.21% for the navigation and link aspects, 77.71% for the visual aspects.
Keywords : Prodi DKV, User Interface, Digital Media, Website
Correspondence author: Dedit Priyono, belozoglu.dt@gmail.com, Tegal, Indonesia
This work is licensed under a CC-BY-NC

## Pendahuluan
Program  Studi  Diploma  III  Desain  Komunikasi  Visual  (DKV)  merupakan  salah  satu program  studi  baru  di  Politeknik  Harapan  Bersama  Tegal  yang  disahkan  pada  tanggal  31 Desember  2018.  Berdasarkan  izin  penyelenggaraan  dari  Kemristek  Dikti  Wilayah  Kopertis  VI dengan  Nomor  SK  Pendirian  1298/KPT/1/2018  tentang  rekomendasi  penambahan  program studi D III Desain Komunikasi Visual (DKV) di Politeknik Harapan Bersama. Prodi DKV berupaya membangun  manajemen  prodi  yang  diharapkan  akan  meningkatkan  mutu  pendidikan  dan memberikan pelayanan akademik dengan maksimal terhadap mahasiswa/mahasiswi Program Studi Desain Komunikasi Visual (DKV) Politeknik Harapan Bersama.
Sejak  mulai  kegiatan  akademik  dan  perkuliahan  mahasiswa  baru  tahun  pelajaran 2019/2020, beberapa mahasiswa merasakan kebingungan dan kesulitan dalam mendapatkan informasi-informasi  akademik  Prodi  DKV, mahasiswa  mendapatkan  informasi  akademik  prodi dkv hanya dari layanan chat grup dari salah satu media sosial. Tidak hanya itu admin Prodi dkv juga  mengalami  kerepotan  membalas  pertanyaan  beberapa  mahasiswa  menanyakan  ulang informasi akademik yang sudah disebar lewat grup chatting medsos, admin prodi menjelaskan alasan menanyakan ke admin karena kiriman informasi yang disebar lewat grup chatting sudah tenggalam dengan karena komentar-komentar dari mahasiswa lainnya sehingga susah dicari.
Teknologi  yang  semakin  berkembang  saat  ini  juga  memudahkan  masyarakat  untuk memperoleh  informasi  secara  instan.  Mereka  dapat  dengan  mudah  mengakses  berbagai informasi melalui website . Menurut Yuhefizar (159) website didefinisikan sebagai suatu metode untuk  menampilkan  sebuah  informasi  di  Internet.  Informasi  yang  dimaksud  mencakup  teks, gambar, suara, maupun video yang interaktif dan berkaitan dengan dokumen lainnya sehingga dapat saling terhubung dan diakses melalui browser.
Perkembangan teknologi sekarang ini berdampak kepada peningkatan kualitas desain website dalam  memenuhi  kebutuhan  pengguna  dalam  mengakses website melalui  berbagai perangkat  dan komputer desktop  ( Landa dalam Kuswanto ). Kemudahan ini berakibat kepada proses  desain  yang  memberikan  pengalaman  yang  mengesankan  bagi  pengunjung  yang membuka website tersebut. Website disebut  menarik  apabila  memiliki  elemen  yang  saling berkaitan antara satu sama lain ( Beaird ). Selain itu Miller menyatakan bahwa website dikatakan baik  apabila  mampu  menciptakan  berbagai  pengalaman  dalam  lingkungan  internal  maupun eksternal bagi pengguna dan memiliki peranan penting dalam perancangan desain website . Hal ini  dikarenakan  rancangan  desain  sangat  erat  kaitannya  dengan User  Interface dan User Experience sehingga dapat dijadikan tolak ukur website dalam mencapai tujuannya User Interface (UI) merupakan bagian dari pembelajaran Human Computer Interaction (HCI) dalam  mempelajari  rancangan  dan  mendesain  bagaimana  manusia  dan  perangkat komputer mampu bekerjasama sehingga kebutuhan dapat terpenuhi secara efesien dan efektif ( Galitz ). UI dapat dilakukan melalui sentuhan, penglihatan, pendengaran, komunikasi dua arah, dan memahami secara langsung. Menurut Galitz UI memiliki dua komponen utama, yaitu Input dan Output .  Yang  termasuk  di  dalam Input antara  lain keyboard,  mouse , touch  screen ,  dan instruksi melalui suara; sedangkan yang termasuk di dalam output adalah hasil yang didapatkan komputer  berdasarkan  perintah  yang  diberikan  oleh  pengguna.  Adanya  hubungan  antara keduanya merupakan komponen utama dalam menjalankan sistem dengan baik dalam hal ini UI. Oleh karena itu UI merupakan perantara bagi pengoperasian perangkat keras (hardware ), perangkat  lunak (software), dan  manusia (brainware). Hal  ini  sesuai  dengan Galitz yang menyatakan  bahwa  UI  merupakan  komponen  dari  sistem  yang  dapat  dilihat,  didengar,  dan disentuh tanpa adanya kesulitan dalam pengoperasian sistem.
Sedangkan User  Experience  (UX) merupakan  berbagai  aspek  dalam  menggunakan produk  intraktif  dalam  memahami  cara  kerja  dan  tujuan  dari  menggunakan  produk  tersebut yang  sesuai  dengan  kebutuhan  pengguna.  Seperti  yang  dijelaskan  menurut  Alben  dalam Rahmasari  and  Yanuarsari bahwa User  experience adalah  semua  aspek  tentang  bagaimana seorang pengguna menggunakan produk interaktif, seberapa mudah mereka memahami cara kerjanya,  bagaimana  perasaan  mereka  ketika  menggunakannya,  dan  bagaimana  pencapaian tujuan  mereka  dalam  menggunakan  produk  ini.  ada  beberapa  tahap  yang  perlu  diperlukan menurut Soverini Sembilan tahap pengerjaan UX ( UX Project List ) tersebut adalah seperti pada tabel di bawah ini:
Tabel 1. User Experience Project List Soverini (2018)
No Tahap Proses No Tahap Proses 1 Research Competitive Analysis 6 Give Feedback Waiting Times Data Analysis Errors User Feedback Completed Actions 2 Plan User Stories 7 Finalise Finalise Layout User Flows Use  of  images  and icons Red Routes Font & Colours Hierarchy 3 Explore Brainstorm & Sketch 8 Delight Micro Copy Wireframe Micro Interactions Prototype Transsitions 4 Communicate IA (Information Architecture) 9 Analyse KPI Setup Leanguage AB Test Plan Accessbility Test 5 Create
UI Elements Gestures
Responsiveness Test
Dari 9 tahapan yang disebutkan, seringkali para desainer mengabaikan tahapan Delight , tahapan delight menurut Soverini dalam Fakhruddin et al. adalah menyiapkan emotional desain dan interaksi-interaksi kecil seperti Micro Copy, Micro Interactions dan Transtion yang bertujuan untuk mendorong  keterlibatan  pengguna  dan  menciptakan  pengalaman  yang  baik  oleh pengguna . Hal tersebut sejalan dengan yang dijelaskan oleh Saffer Microinteractions: Designing with Details bahwa  para desainer menggunakan design thinking hanya untuk fokus terhadap perancangan  elemen-elemen  visual  yang  dibutuhkan  pada  desainnya,  sehingga  salah  satu bagian yang terpenting dari desain itu benar-benar tidak ada, bagian detail itu adalah delight (menyenangkan). Saffer juga menjelaskan tahapan ini adalah yang seharusnya dapat dikerjakan oleh  para  desainer  dengan  baik,  salah  satu  cara  untuk  menciptakan  pengalaman  yang menyenangkan  ke  pengguna.  Senada  dengan Batchu bahwa  interaksi-interaksi  kecil  seperti micro  interactions  dapat menambah  detail  pada website dan  membuat website tersebut berbeda dengan yang lain.
Menanggapi  permasalahan  tersebut,  diperlukan  sebuah  inovasi  yang  dapat membungkus  informasi  Program  Studi  DKV  Politeknik  Harapan  Bersama  Tegal  menggunakan tampilan antarmuka website yang lebih menarik dan sesuai dengan kebutuhan pengguna.

## Metode
Penelitian  ini  merupakan  penelitian  terapan  dengan  menggunakan mix  method (kualitatif dan kuantitatif) dengan pendekatan User-Centered Design . Pendekatan User-Centered Design menurut Saffer Designing for Interaction: Creating Smart Applications and Clever Devices (Voices That Matter) adalah pendekatan yang lebih menekankan terhadap kebutuhan pengguna dan tujuan yang ingin dicapai dengan menggunakan produk tersebut, dalam hal ini pengguna memberikan  panduan  utama  terhadap  rancangan  desain  dan  desainer  yang  bertugas  untuk menterjemahkan kebutuhan dan tujuan pengguna tersebut. Rangkaian penelitian ini mencakup dua tahap, yaitu tahapan penelitian dan perancangan.
Tahapan  Penelitian  mencakup  proses  pengumpulan  data  hingga  analisis  data. Pengumpulan  data  dalam  penelitian  ini  dilakukan  dengan  observasi,  studi  literatur,  dan  FGD ( Focus  Grup  Discussion ).  Responden  yang  akan  diambil  untuk  mendapatkan  data  terkait informasi  yang  dibutuhkan  adalah  mahasiswa  baru  Program  Studi  DKV  Politeknik  Harapan Bersama  Tegal,  pengambilan  responden  menggunakan  teknik purposive  sampling dengan mengambil beberapa perwakilan mahasiswa pada masing-masing kelas.
Tahap  perancangan  adalah  dengan  menggunakan  metode Design  Thingking ,  metode Design Thinking menurut Razi et al. adalah metode yang dikenal sebagai suatu proses berfikir komperehensif  yang  berkonsentrasi  untuk  menciptakan  solusi  yang  diawali  dengan  proses empati  terhadap  suatu  kebutuhan  tertentu  yang  berpusat  pada  manusia  ( human  centered ) menuju  suatu  inovasi  berkelanjutan  berdasarkan  kebutuhan  penggunanya. Design  Thingking mempunyai lima tahapan seperti yang dijelaskan oleh Plattner , lima tahapan tersebut adalah Emphatize, Define, Ideate, Prototype, Test .
Gambar 1 Diagram Tahapan Metode Desain Thingking

## Hasil dan Pembahasan
Hasil dan Pembahasan berdasarkan dari tahapan-tahapan Design Thingking .

## Empathize
Pada tahapan ini adalah untuk mendapatkan informasi dasar dari permasalahan yang sedang  dikaji.  Langkah-langkah  pada  tahapan  ini  adalah  mengumpulkan  informasi-informasi
yang sedang dikaji serta  dianalisis dengan tujuan agar mendapatkan persepsi, dan posibilitas yang akan dijadikan rujukan ke tahapan define .
Pada  tahapan  ini  untuk  mendapatkan  informasi  dasar  dari  permasalahan  mahasiswa dalam  mendapatakan  informasi-informasi  akademik  adalah  dengan  mengadakan Focus  Grup Discussion (FGD)  bersama  beberapa  perwakilan  mahasiswa  dari  masing-masing  kelas.  FGD dilakukan pada salah satu ruang pembelajaran Program Studi D-III Desain Komunikasi Visual di kampus  dua  Politeknik  Harapan  Bersama.  Pada  pelaksanaannya  moderator  langsung menanyakan kepada grup terkait dengan permasalahan dalam penyebaran informasi akademik prodi, serta menanyakan informasi-informasi apa saja yang mereka ingin dapatkan dari prodi.
Moderator  menampung  semua  masukan  dari  peserta  FGD  yang  akan  dijadikan pertimbangan-pertimbangan terkati dengan konten yang akan dimunculkan di media informasi yang akan dibuat. Hasil dari FGD yang dapat disimpulkan adalah sebagai berikut : 1). Mereka sepakat  agar  ada  media  untuk  dapat  melihat/mengunduh  jadwal  perkuliahan  dan  agenda- agenda akademik lainnya, seperti informasi libur, UTS, UAS, seminar, berita terkait kegiatan dari kampus ataupun prodi. 2). Mereka sepakat agar ada media untuk dapat mengetahui informasi- informasi seputar kelimuan DKV, baik artikel ilmiah maupun perkembangan seputar keilmuan DKV.  3).  Mereka  sepakat  agar  ada  media  untuk menampilkan  karya-karya mereka  dari  tugas perkuliahan atau sejenisnya. 4). Mereka sepakat agar ada media untuk live streaming , barangkali ada dosen yang akan mengadakan perkuliahan jarak jauh karena berhalangan hadir di tempat. 5).  Mereka  sepakat  agar  ada  media  untuk  menginformasikan  kegiatan-kegiatan  mahasiswa, seperti  himaprodi  dan  sejenisnya.  Selain  dari  Hasil  dari  FGD  bersama  perwakilan  mahasiswa pada  masing-masing  kelas,  juga  mendapatkan  beberapa  masukan  dari  pihak  prodi  terkait dengan  informasi-informasi  prodi  yang  akan  ditampilkan  sebagai  profil  Program  Studi  DKV Politeknik Harapan Bersama Tegal.

## Define
Langkah-langkah pada tahap ini adalah mencoba menerapkan konsep umum dari media website terhadap  hasil empathize .  Dalam  hal  ini  adalah  membuat kelompok  menu  atau  sub- menu perintah yang akan menampilkan informasi-informasi sejenis dari FGD serta masukan dari prodi  dan  menghasilkan  skema  kerangka  alur  dari  media website Prodi  DKV  Poltek  Harapan Bersama Tegal.
Gambar 2 Skema Kerangka Alur dari media website Prodi DKV Politeknik Harapan Bersama Tegal

## Ideate
Pada tahap ini yang berdasarkan rencana aksi dan peluang ini berfokus pada kuantitas ide dan berpotensi untuk menambahkan ide yang dihasilkan sebelumnya. Pada tahap ini  juga proses perwujudan  suatu ide berdasarkan ( Yunus dalam Fakhruddin et al. ). Yunus menjelaskan bahwa  dalam  perancangan  interface website terdapat  beberapa  objek  desain  yang  menjadi komponen dan elemen dasar yang dapat menunjang tujuan utama website tersebut, komponen dan elemen yang dijelaskan adalah sebagai berikut :

## Tata Letak dan Penempatan
Layout atau tata letak digunakan dalam sebuah rancangan website dengan tujuan untuk dapat  membuat  elemen  visual  yang  digunakan  menjadi  lebih  komunikatif  sehingga  dapat mempermudah  audiens  untuk menerima  informasi yang  disajikan  di  dalamnya  ( Yunus  dalam Fakhruddin  et  al. ).  Penempatan  dan  tata  letak  yang  baik  dapat  mempermudah  menjelaskan hubungan  antara  elemen  visual  yang  digunakan  pada  sebuah interface .  Konsep layout yang digunakan dalam perancangan website profil DKV adalah menerapkan konsep magazine style . Llayout  magazine  style menurut Ford adalah  konsep layout website yang  digunakan  untuk menampilkan berbagai macam informasi atau berita, layout magazine style memberikan efek penceritaan ( storytelling ) yang kompleks. Dengan menggunakan konsep layout magazine style pada website prodi  DKV  diharapkan  dapat  memberikan  banyak  informasi  akademik  prodi maupun informasi kampus.

## Gambar 3 Layout Magazine Style

## Bentuk dan Ukuran
Penyesuaian  elemen  visual  yang  terdapat  pada  suatu interface terhadap  ukuran perangkat pengguna dapat membantu untuk mennunjukan elemen-elemen visual berdasarkan bobot  fungsinya secara signifikan. Fakhruddin  et  al. menjelaskan  bahwa  penyesuaian  bentuk maupun ukuran akan dapat membantu untuk memperjelas hirarki visual yang terdapat dalam interface sebuah platform secara signifikan.
Konsep bentuk dan ukuran dalam perancangan ini menggunakan konsep responsivness ( Soverini ),  menurutnya responsiveness adalah  kemampuan website /aplikasi  untuk  diakses melalui berbagai macam bentuk media (PC, smartphone , TV, dsb.).

## Warna
Dalam perancangan sebuah interface maupun website secara keseluruhan, warna dapat berguna untuk dapat menjangkau berbagai tujuan yang beragam ( Fakhruddin et al. ). Hal senada dijelaskan oleh Yunus bahwa secara tidak langsung penyajian warna dalam sebuah rancangan user  interface dapat  sangat  berpengaruh  untuk  dapat  membentuk user  experience. Warna utama yang digunakan adalah Hijau Tosca ( Green Tosca ), Toska adalah warna yang tenang dan ramah, Sementara hijau toska merupakan perpaduan warna antara biru yang kehijau-hijauan dengan  warna  hijau  lebih  dominan.  Menurut Cerrato secara  psikologis  hijau  toska melambangkan  kejernihan  pemikiran  dan  komunikasi.  Hijau  Toska  mewakili  ketenangan, keseimbangan  emosi,  harmoni,  idealisme,  kreatifitas,  inspirasi,  ekspresi  diri,  semangat, kemandirian dan pemikiran positif. Warna hijau tosca juga cocok untuk pria dan wanita segala usia. Warna Hijau tosca juga sudah disahkan oleh yayasan Politeknik Harapan Bersama sebagai warna  bendera  dan  identitas  seragam  Program  Studi  Desain  Komunikasi  Visual  Politeknik Harapan Bersama Tegal. Untuk meminimalisasi terjadinya degradasi warna pada tiap monitor yang memiliki resolusi berbeda, maka penggunaan kode Hexadecimal dan kode RGB digunakan sebagai patokan.
Gambar 4 Pallete warna Hijau Tosca

## Kontras
Perancangan interface mempertimbangkan value dan  mengevaluasi  kontras  dengan cara  memangkas value kontras  pada  elemen-elemen  tertentu  akan  menjadi  hal  yang  sangat penting  bagi  efisiensi  dan  optimalisasi  pengoperasian  sebuah platform ( Fakhruddin  et  al. ). Konsep kontras pada perancangan ini mencoba mengidentifikasi elemen-elemen pada interface agar pengguna dapat membedakan antara elemen yang penting dan kurang penting, sebagai contoh text  button hijau  tosca  pada background  button putih  akan  berubah  warna  ketika pointer/mouse mengenai button.

## Tekstur
Pengertian tekstur dalam pembahasan perancangan sebuah interface adalah sebuah upaya untuk mengkomunikasikan cara pengoperasian yang tepat sebuah user interface dengan
tujuan agar lebih mempermudah pengguna memahami fungsi elemen-elemen interface yang disediakan secara intuitif pada sebuah platform ( Fadeyev dalam Fakhruddin et al. ).
Dari  pengertian  ini  kemudian  mencoba  untuk  menerapkan  penyampaian  visual  pada suatu elemen interface dengan perantara layar elektronik yang digunakan oleh masing-masing pengguna sehingga dapat memicu sebuah interaksi yang diinginkan melalui bantuan perangkat yang dapat memberikan proses input perintah seperti mouse, touchpad maupun touchscreen dan  menambahkan  konsep microinteraction pada  beberapa  elemen website .  Seperti  yang dijelaskan  oleh  Soverini  ( dalam  Fakhruddin  et  al. ) MicroInteractions dan Transtion yang bertujuan  untuk mendorong  keterlibatan  pengguna  dan  menciptakan  pengalaman  yang  baik oleh pengguna .

## Tipografi
Tipografi  termasuk  salah  satu  elemen  penting  pada  perancangan  sebuah interface maupun platform .  Prinsip  tipografi  yang  dapat  membantu  seorang  perancang  dalam mengoptimalkan rancangannya adalah Legibility dan Readability  ( Yunus dalam Fakhruddin et al. ) .  Yunus  menjelaskan  bahwa Legibility adalah  tingkat  kemudahan  mata  manusia  dalam mengenali  suatu  karakter/huruf  tanpa  harus  bersusah  payah  terlebih  dahulu  untuk menyadarinya,  sedangkan Readability adalah  tingkat  kualitas  keterbacaan  dan  kenyamanan serangkaian  huruf  yang  digunakan  sebagai  medium  penyampaian  informasi  dalam  sebuah rancangan.  Penggunaan  tipografi  pada  perancangan website informasi  program  studi  Desain Komunikasi  Visual  Politeknik  Harapan  Bersama  Tegal  menerapkan  prinsip Legibility dan Readability dengan  menggunakan  font  Roboto.  Christian  Robertson  seorang  desainer font roboto menjelaskan bahwa roboto memiliki kerangka mekanis dan sebagian besar bentuknya geometris. Hal ini menjelaskan bahwa font roboto mampu memberikan legibility dan readability yang sesuai pada sebuah website . Font roboto dikembangkan oleh google dan digunakan pada beberapa  layanan  google  seperti  Google+,  Google  Play,  Youtube,  Google  Maps  dan  google penelusuran pada seluler.

## Gambar 5 Typeface Roboto

## Prototype
Pada  tahap  ini  adalah  sebuah  rancangan  awal  suatu interface yang  akan  dibuat, prototype bertujuan untuk mendeteksi kesalahan atau kekurangan sebuah interface sejak dini dan memperoleh berbagai kemungkinan baru. Dari proses yang dilalui dalam tahapan empathize sebelumnya, didapatkan hasil kesimpulan mengenai berbagai informasi yang dibutuhkan oleh calon pengguna. informasi-informasi yang dibutuhkan akan dikelompokan berdasarkan ketegori
yang sudah ditentukan. Perancangan prototype website menggunakan Adobe Experience Design (XD) versi 24.3.
Gambar 6 Tampilan Desain prototype website informasi prodi di Adobe XD
Layout halaman website disesuaikan  dengan  tujuan  dari  perancangan  yaitu  untuk memberikan  informasi  akademik  dan  informasi  lainnya  yang  sudah  didapatkan  dari  FGD bersama beberapa mahasiswa perwakilan masing-masing kelas. Format desktop dipilih sebagai tampilan  utama website untuk  dapat  memaksimalkan  proses  penyampaian  informasi  dan menggunakan orientasi horizontal, seperti bentuk website pada umumnya.
1. Halaman Pembuka
Sebelum masuk ke dalam halaman utama website pengguna akan diarahkan terlebih dahulu kepada halaman pembuka yang berfungsi sebagai intro . Pada halaman pembuka ini terdapat  animasi  yang  berdurasi  10  detik  yang  kemudian  akan  mengarahkan  pengguna menuju kepada halaman utama website (Halaman index).

## Gambar 7 Loading Page

## 2. Halaman Index (Utama)
Pada  halaman  index  (utama)  berisi  tentang headline berita  atau  agenda  akademik baik dari prodi maupun dari kampus. Beberapa interaksi pada halaman index adalah navigasi yang digunakan untuk melajutkan ke konten selanjutnya pada halaman index , navigasi ini bertujuan  agar  pengunjung  dapat  melihat-lihat headline yang  ada  pada  halaman index . Interaksi pada navigasi ini adalah animasi smoothscroll serta parallax , animasi smoothscroll bertujuan  agar  pengunjung  langsung  diarahkan  dengan  pelan  ke  konten  selanjutnya  di halaman index dan animasi parallax untuk memunculkan konten website secara perlahan agar  terlihat  atraktif  dan  menarik.  Selain  berisi  tentang headline ,  pada  halaman  ini  juga terdapat  informasi  tentang  sambutan,  Profil  Lulusan,  Berita  &  Artikel,  Pengumuman, Agenda, Pendaftaran Mahasiswa Baru. Halaman ini juga terdapat navigasi untuk  memilih halaman  selanjutnya  yang akan  dituju.  Halaman tersebut  antara  lain  Tentang, Akademik, Galeri, Mahasiswa, Pencarian.
Gambar 8 Halaman index ( Landing Page )
3. Halaman Tentang
Pada halaman ‘tentang‘ akan ditampilkan informasi berupa deskripsi Visi, Misi dan Sejarah  Berdirinya  Program  Studi  Desain  Komunikasi  Visual  Politeknik  Harapan  Bersama. Beberapa  interaksi  pada  halaman  ‘tentang’  adalah  animasi smoothscroll serta parallax , animasi smoothscroll bertujuan  agar  pengunjung  langsung  diarahkan  dengan  pelan  ke konten selanjutnya di halaman tentang dan animasi parallax untuk memunculkan konten website secara  perlahan  agar  terlihat  atraktif  dan  menarik.  halaman  ini  juga  terdapat navigasi untuk memilih halaman selanjutnya yang akan dituju. Halaman tersebut antara lain Beranda, Tentang, Akademik, Galeri, Mahasiswa, Pencarian.
Gambar 9 Halaman Tentang

## 4. Halaman Akademik
Pada  halaman  ‘Akademik‘ akan  ditampilkan  informasi  berupa  deskripsi  kurikulum prodi dan daftar Dosen pengajar Program Studi Desain Komunikasi Visual Politeknik Harapan Bersama. Beberapa interaksi pada halaman ‘Akademik’ adalah anima si smoothscroll serta parallax , animasi smoothscroll bertujuan agar pengunjung langsung diarahkan dengan pelan ke  konten  selanjutnya  di  halaman  Akademik  dan  animasi parallax untuk  memunculkan konten website secara perlahan agar terlihat atraktif dan menarik. halaman ini juga terdapat navigasi untuk memilih halaman selanjutnya yang akan dituju. Halaman tersebut antara lain Beranda, Tentang, Akademik, Galeri, Mahasiswa, Pencarian.

## 5. Halaman Galeri
Pada halaman ‘Galeri‘ akan ditampil kan informasi berupa portofolio tugas mahasiswa Program  Studi  Desain Komunikasi  Visual Politeknik  Harapan  Bersama. Beberapa  interaksi pada  halaman  ‘Galeri’  adalah  animasi smoothscroll serta parallax ,  animasi smoothscroll bertujuan  agar  pengunjung  langsung  diarahkan  dengan  pelan  ke  konten  selanjutnya  di halaman Galeri dan animasi parallax untuk memunculkan konten website secara perlahan agar  terlihat  atraktif  dan  menarik.  Selain  itu  animasi  lightbox  untuk  menampilkan karya/gambar  secara  penuh.  halaman  ini  juga  terdapat  navigasi  untuk  memilih  halaman selanjutnya yang akan dituju. Halaman tersebut antara lain Beranda, Tentang, Akademik, Galeri, Mahasiswa, Pencarian.
Gambar 11 Halaman Galeri
6. Halaman Search Navbar
Halaman seacrh pada navbar berfungi untuk melakukan pencarian informasi yang ada pada website prodi DKV Politeknik Harapan Bersama. Beberapa interaksi pada halaman ini adalah hover animasi dan smooth scroll.

## 7. Halaman Berita & Artikel
Pada halaman ini menampilkan informasi berita yang dipilih, Beberapa interaksi pada halaman ‘Berita’ adalah animasi smoothscroll serta parallax , animasi smoothscroll bertujuan agar pengunjung langsung diarahkan dengan pelan ke konten selanjutnya di halaman berita &  Artikel dan animasi parallax untuk memunculkan konten website secara perlahan agar terlihat atraktif dan menarik.
Gambar 13 Halaman Berita & Artikel
8. Halaman List Berita & Artikel
pada  halaman  ini  menampilkan  daftar  berita  yang  pernah  diunggah  oleh  admin,
Beberapa  interaksi  pada  halaman  ‘Berita’  adalah  animasi smoothscroll serta parallax , animasi smoothscroll bertujuan  agar  pengunjung  langsung  diarahkan  dengan  pelan  ke konten selanjutnya di halaman list berita & Artikel dan animasi parallax untuk memunculkan konten website secara  perlahan  agar  terlihat  atraktif  dan  menarik.  Di  halaman  ini  juga terdapat  interaksi  untuk  melakukan  pencarian  berita  berdasarkan  kata  kunci  yang diinginkan.
Gambar 14 Halaman List Berita & Artikel
9. Halaman Pengumuman
pada  halaman  ini  menampilkan  informasi  pengumuman  yang  dipilih,  Beberapa interaksi pada halaman ‘Pengumuman’ adalah animasi smoothscroll serta parallax , animasi smoothscroll bertujuan  agar  pengunjung  langsung  diarahkan  dengan  pelan  ke  konten selanjutnya  di  halaman  pengumuman  dan  animasi parallax untuk  memunculkan  konten website secara perlahan agar terlihat atraktif dan menarik.

## Gambar 15 Halaman Pengumuman
10. Halaman List Pengumuman
Pada  halaman  ini  menampilkan  daftar  pengumuman  yang  diunggah  oleh  admin website , Beberapa interaksi pada halaman ‘List Pengumuman’ adalah animasi smoothscroll serta parallax , animasi smoothscroll bertujuan agar pengunjung langsung diarahkan dengan pelan ke konten selanjutnya di halaman  daftar  pengumuman dan animasi parallax untuk memunculkan konten website secara perlahan agar terlihat atraktif dan menarik.
Gambar 16 Halaman List Pengumuman

## 11. Halaman Agenda
pada  halaman  ini  menampilkan  informasi  Agenda  yang  dipilih,  Beberapa  interaksi pada  halaman  ‘Agenda’  adalah  animasi smoothscroll serta parallax ,  animasi smoothscroll bertujuan  agar  pengunjung  langsung  diarahkan  dengan  pelan  ke  konten  selanjutnya  di halaman agenda dan animasi parallax untuk memunculkan konten website secara perlahan agar terlihat atraktif dan menarik.
Gambar 17 Halaman Agenda
12. Halaman List Agenda
Pada  halaman  ini  menampilkan  daftar  agenda  yang  diunggah  oleh  admin website , Beberapa interaksi pada halaman ‘List Agenda’ adalah animasi smoothscroll serta parallax , animasi smoothscroll bertujuan  agar  pengunjung  langsung  diarahkan  dengan  pelan  ke konten selanjutnya di halaman list agenda dan animasi parallax untuk memunculkan konten website secara  perlahan  agar  terlihat  atraktif  dan  menarik.  Di  halaman  ini  juga  terdapat interaksi untuk melakukan pencarian berita berdasarkan kata kunci yang diinginkan.
Gambar 18 Halaman List Agenda

## Test
Untuk mendapatkan respon terhadap hasil perancangan website informasi prodi DKV Politeknik Harapan Bersama, dilakukan uji coba website pada sejumlah responden yang sesuai dengan sasaran pengguna yaitu mahasiswa prodi DKV Polteknik Harapan Bersama. Pengambilan responden dilakukan dengan teknik purposive sampling , jumlah target pengguna sebanyak 68 responden yang terdiri dari 59 laki-laki dan 9 perempuan.
Tabel 2. Daftar Responden
No Jenis Kelamin Jumlah 1 Laki-Laki 59 2 Perempuan 9 Total 68
Uji coba dilakukan dengan cara responden mencoba mengoperasikan website informasi prodi  DKV  Politeknik  Harapan  Bersama,  kemudian  mengisi  kuisioner  yang  telah  disiapkan. Kuisioner  menggunakan  pilihan  alternatif  jawaban  menggunakan  skala linkert .  Penggunaan skala linkert dipakai  untuk  mengetahui  kecenderungan  pilihan  jawaban  apakah  sudah  sesuai atau  masih  diperlukan  perbaikan.  skor  nilai  skala  linkert  dimulai  dari  skor  tertinggi  sampai dengan skor terendah, nilai skor jawaban adalah lima, empat, tiga, dua, satu yang disesuaikan dengan urutan pilihan jawaban Sangat Setuju, Setuju, Netral, Tidak Setuju, Sangat Tidak Setuju. Urutan pilihan jawaban dengan nilai skor dapat dilihat pada table di bawah ini.

## Tabel 3. Pilihan Jawaban Skala Linkert
Skor Nilai
Pilihan Jawaban
5 Sangat Setuju
4 Setuju
3 Netral
2 Tidak Setuju
1 Sangat Tidak Setuju
Jumlah  skor  dari  jawaban-jawaban  responden  selanjutnya  dianalisis  menggunakan teknik analisis presentase dengan rumus perhitungannya sebagai berikut :
Keterangan :
P : Presentase ∑ X : Jumlah Skor Peniliaian ∑ Xi : Jumlah Skor Tertiggi 100% : Konstanta
Setelah  mendapatkan  hasil  jumlah  skor  jawaban  dari  responden,  selanjutnya  adalah membuat  analisis  presentase  untuk  menentukan  kategori  tinggi,  sedang  dan  rendah  dalam bentuk table statistik distributif. Dalam kategori skor dapat dilihat pada tabel 4.3.
Tabel 4. Interval Nilai Interval Nilai Kriteria 0% - 19,99% Sangat Tidak Setuju/Baik
20% - 39,99% Tidak Setuju/Baik
40% - 59,99% Netral
60% - 79,99% Setuju/Baik
80% - 100% Sangat Setuju/Baik
Ada  tiga  aspek  respon  yang  akan  ditanyakan  setelah  responden  mengoperasikan prototype website informasi  prodi  DKV  Politeknik  Harapan  Bersama  tegal.  1)  Aspek  konten, Organisasi dan keterbacaan, 2) Aspek Navigasi dan Tautan, 3) Aspek Visual ( User interface ).
1. Aspek Konten, Organisasi dan Keterbacaan Pertanyaan-pertanyaan  pada  aspek  ini  bertujuan  untuk  mengetahui  bagaimana tanggapan  responden  terhadap  konten,  organisasi  konten  ( Menu atau Submenu )  dan keterbacaan konten. Ada lima pernyataan yang diajukan kepada responden.
Tabel 5 Pernyataan Aspek Konten dan Organisasi
NO PERNYATAAN 1 Saya dapat dengan mudah menemukan informasi yang saya inginkan di website ini
2 konten yang disajikan pada website ini sudah dikelompokan sesuai dengan masing-masing Kriteria dengan baik.
3 Membaca konten website ini sangat mudah/nyaman.
4 saya  merasa  nyaman  dan  dan  terbiasa  dengan  bahasa  dan  perintah  yang  digunakan  di website ini.
5 saya tidak perlu menggeser ke kanan dan ke kiri pada saat membaca konten website ini.
Berdasarkan  hasil  pengujian  yang  sudah  dilakukan  pada  aspek  ini,  nilai  tertinggi terdapat  pada  pernyataan  terkait  konten  yang  disajikan  pada website ini  sudah dikelompokan sesuai dengan masing-masing Kriteria dengan baik yaitu dengan presentase sebesar  80,29%.  Mengacu  pada  interval  nilai  yang  sudah  dibahas  sebelumnya,  maka pengelompokan konten website informasi prodi DKV masuk dalam kategori “Sangat Baik” dalam  pengorganisasian  (menu  dan  submenu) website informasi  prodi.  Sedangkan pernyataan  lainnya  masuk  dalam  kategori  “Baik”  dengan  presentase 73,24%,  74,41%, 75,88% dan 75,88%.
Secara keseluruhan bahwa konten dan pengorganisasian konten website prodi DKV Politeknik Harapan Bersama Tegal mendapatkan prosentase nilai total sebesar 75,94%, yang artinya masuk dalam kategori “Baik”.

## 2. Aspek Navigasi dan Tautan
Pertanyaan-pertanyaan  pada  aspek  ini  bertujuan  untuk  mengetahui  bagaimana tanggapan  responden  terhadap  navigasi  dan  tautan  ( link )  yang  disediakan  pada website informasi prodi DKV Politeknik Harapan Tegal. Ada empat pernyataan yang diajukan kepada responden.
Tabel 6. Pernyataan Aspek Navigasi dan Tautan
NO

## PERNYATAAN
1 Saya dapat dengan mudah mengetahui posisi saya pada saat saya browsing website ini.
2 website ini  memberikan  isyarat  dan  tautan  untuk  saya  mendapatkan  informasi  yang diinginkan..
3 sangat mudah untuk berpindah-pindah konten di website ini dengan menggunakan tautan atau tombol kembali pada website
4 penempatan  tautan  atau  menu  pada website sudah  sesuai  dan  saya  dapat  mengenali dengan mudah
Berdasarkan hasil pengujian yang sudah dilakukan pada aspek ini, yang mendapatkan kategori “Sangat Baik” adalah Membaca konten website ini sangat mudah/nyaman dengan mendapatkan prosentase nilai sebesar 81,76% dan pernyataan saya dapat dengan mudah mengetahui posisi saya pada saat saya browsing website ini dengan prosentase nilai sebesar 80,29 %.  Sedangkan  pernyataan  lainnya  masuk  dalam  kategori  “Baik”  dengan  prosentase nilai 72,35% dan 74,41%.
Secara keseluruhan bahwa Aspek navigasi dan tautan ( link ) pada website prodi DKV Politeknik Harapan Bersama Tegal mendapatkan prosentase nilai total sebesar 77,21%, yang artinya masuk dalam kategori “Baik”.

## 3. Aspek Visual ( User Interface )
Pertanyaan-pertanyaan  pada  aspek  ini  bertujuan  untuk  mengetahui  bagaimana tanggapan responden terhadap tampilan yang disediakan pada website informasi prodi DKV Politeknik Harapan Tegal. Ada lima pernyataan yang diajukan kepada responden.
Tabel 7 Pernyataan Aspek Visual
NO PERNYATAAN 1 Tampilan website ini sangat atraktif dan menarik
2 saya sangat nyaman dengan warna yang digunakan pada website ini
3 konten  yang  ada  pada website ini  tidak  menggangu  saya,  seperti  banyak  menggeser  ke kanan ke kiri atau text  yang berkedip-kedip (warna-warni) dan animasi konten/text yang berulang-ulang.
4 tampilan website ini sudah konsisten dan menarik
5 desain website ini sudah nyaman dan sangat mudah untuk dipahami.
Berdasarkan hasil pengujian yang sudah dilakukan pada aspek ini, yang mendapatkan kategori  “Sangat  Baik”  adalah  Tampilan website ini  sangat  atraktif  dan  menarik  dengan mendapatkan prosentase nilai sebesar 81,18% dan pernyataan tampilan website ini sudah konsisten dengan prosentase  nilai sebesar 80,59%. Sedangkan pernyataan lainnya masuk dalam  kategori  “Baik”  dengan  prosentase  nilai  73,82%,  78,53%  dan  74,41%.  Secara keseluruhan bahwa Aspek visual ( User Interface ) pada website prodi DKV Politeknik Harapan Bersama  Tegal  mendapatkan  prosentase  nilai  total  sebesar  77,71%,  yang  artinya  masuk dalam kategori “Baik”.

## Simpulan
Berdasarkan hasil uji coba prototyping yang telah dilakukan, secara keseluruhan website informasi  prodi  DKV Politeknik  Harapan  Bersama  dapat  digunakan  sebagai  media  alternative untuk  memberikan  informasi  akademik  prodi  DKV  ataupun  informasi  kampus  Politeknik Harapan Bersama Tegal dan juga sebagai informasi berita atau artikel ilmiah terkait  keilmuan
Desain Komunikasi Visual (DKV) maupun sebagai tempat mahasiswa untuk menampilkan karya- karya yang telah dibuat  selama masa studi di prodi DKV Politeknik Tegal. Penggunaan teknik parallax dan smoothscroll ataupun microinteraction yang terdapat pada  navigasi atau tautan prototyping website ini  juga  dapat  menambah  ketertarikan  pengguna,  sehingga website tersebut  menjadi  lebih  atraktif  dan  interaktif.  Dengan  adanya  teknik  prototyping  ini,  maka kreatifitas web desainer dalam membuat suatu tampilan dasar (User Interface sebuah website ) tanpa harus ke scripting langsung. Hal yang perlu diperhatikan pada prototyping website adalah desainer harus mengetahui harus mengetahui animasi-animasi yang disediakan untuk scripting website (html, css dan javascript), agar nantinya programmer tidak mengalami kesulitan dalam perancangan scripting website prototype tersebut.

## DAFTAR PUSTAKA
Batchu,  Vamsi.  "Micro-Interactions:  Why,  When  and  How  to  Use  Them  to  Improve  the  User Experience." 2018, https://uxdesign.cc/micro-interactions-why-when-and-how-to-use- them-to-boost-the-ux-17094b3baaa0 .
Beaird, Jason. The Principles of Beautiful Web Design. 2nd edition, SitePoint Pty. Limited, 2010.
Cerrato,  Herman.  "The  Meaning  of  Colors."  2013, http://hermancerrato.com/graphic- design/images/color-images/the-meaning-of-colors-book.pdf .
Fakhruddin,  Dimas  et  al.  "Pengembangan  Desain  Informasi  Dan  Pembelajaran  Aksara  Jawa Melalui Media Website." ANDHARUPA: Jurnal Desain Komunikasi Visual & Multimedia , vol. 5, no. 01, 2019, pp. 1-23, doi: https://doi.org/10.33633/andharupa.v5i01.1990 .
Ford, Chris. "Examples of Unique Website Layouts." 2017, https://webflow.com/blog/examples- of-unique-website-layouts .
Galitz, Wilbert O. The Essential Guide to User Interface Design: An Introduction to Gui Design Principles and Techniques. Second edition, Wiley Publishing, Inc., 2007.
Kuswanto, Heri. "Analisis Prinsip Layout and Composition Pada Web Design Perusahaan Pt. Bank Rakyat Indonesia, Tbk Dan Pt. Fif Group Berdasarkan Buku “the Principle of Beautifull Website  Design  by  Jason  Beaird”." Elinvo  (Electronics,  Informatics,  and  Vocational Education) , vol. 2, no. 1, 2017, pp. 1-7, doi: https://doi.org/10.21831/elinvo.v2i1.14488 .
Miller, Brian D. Above the Fold: Understanding the Principles of Successful Web Site Design. HOW Books, 2011.
Plattner, Hasso. "An Introduction to Design Thinking Process Guide." Institute of Design, 2010.
Rahmasari,  Erisa  Adyati  and  Dzuha  Hening  Yanuarsari.  "Kajian  Usability  Dalam  Konsep  Dasar User  Experience  Pada  Game  “Abc  Kids - Tracing  and  Phonics”  Sebagai  Media  Edukasi Universal Untuk Anak." Desain Komunikasi Visual, Manajemen Desain dan Periklanan (Demandia) , 2017, pp. 49-71, doi: https://doi.org/10.25124/demandia.v2i01.770 .
Razi, Aria Ar et al. "Penerapan Metode Design Thinking Pada Model Perancangan Ui/Ux Aplikasi Penanganan  Laporan  Kehilangan  Dan  Temuan  Barang  Tercecer." Desain  Komunikasi Visual, Manajemen Desain dan Periklanan (Demandia) , vol. 3, no. 02, 2018, pp. 219-237, doi: https://doi.org/10.25124/demandia.v3i02.1549 .
Saffer, Dan. Designing for Interaction: Creating Smart Applications and Clever Devices (Voices That Matter). AIGA Design Press, 2007.
---. Microinteractions: Designing with Details. " O'Reilly Media, Inc.", 2013.
Soverini, Andrea. "Ux Project Checklist." 2018, https://uxchecklist.github.io/ .
Yuhefizar. 10  Jam  Menguasai  Internet. Elex  Media  Komputindo,  2008. Jakarta:  Elex  Media Komputindo .