## RANCANGAN DESAIN WEBSITE RESPOSIF SEBAGAI SARANA INFORMASI PADA SMK PUSTEK SERPONG
Indah Liani 1) , Ari Saputro 2)
1 Manajemen Informatika, Fakultas Teknologi Informasi, Universitas Budi Luhur
1,2 Jl. Raya Ciledug, Petukangan Utara, Kebayoran Lama, Jakarta Selatan 12260 E-mail : indaaahliani@gmail.com 1) , ari.saputro@budiluhur.ac.id 2)

## Abstrak
Seiring  berkembangnya  teknologi  dalam  bidang  pendidikan,  adanya  website  dalam  suatu  sekolah sangatlah diperlukan. Website berfungsi sebagai sarana promosi dan sebagai sarana informasi tentang sekolah. SMK Pustek Serpong telah memiliki  website sejak tahun 2013, namun penggunaan dari website tersebut masih kurang efektif dikarenakan tampilan website yang belum responsif dan terperbaharui. Maka dari itu peneliti ingin membuat rancangan desain website responsif untuk SMK Pustek Serpong dengan menganlisis kekurangan website sebelumnya. Peneliti mencoba membuat tampilan agar dapat menyesuaikan di ukuran layar berbeda serta cara kerja  website agar mudah digunakan dan juga informatif, yaitu dengan membuat desain  website menggunakan software Adobe Muse CC 2018. Desain web yang dibuat menggunakan layout dan menu yang sederhana dan jelas serta pemberian konten yang menarik.
Kata kunci: website, webdesign, responsiveweb

## 1. PENDAHULUAN
SMK  Pustek  Serpong  sudah  mempunyai website sejak  tahun  2013  dan  masih  aktif    sampai  - sekarang, website digunakan  oleh  sekolah  sebagai media  untuk  menyampaikan  informasi.  Namun,  ada kekurangan  yang  peneliti  lihat  pada website SMK Pustek  Serpong,  dimana  tampilan website SMK Pustek  Serpong  belum  fleksibel  ditampilkan  di beberapa ukuran layar perangkat. Desain tampilannya juga masih kurang menarik dan kurang efisien karena terlalu  banyaknya  konten  yang  seharusnya  dapat  di kategorikan lebih teratur dan ringkas.
Dari hasil analisis statistik pengunjung dan jajak pendapat  yang  ada  pada website SMK  Pustek Serpong  tentang  pertanyaan  bagaimana  tampilan website SMK  Pustek  Serpong  menurut  pengunjung website dengan  pilihan  jawaban  tidak  tahu,  sangat bagus, cukup dan kurang, menunjukkan bahwa 45% pengunjung website menjawab kurang. Maka dari itu peneliti  ingin  memperbaiki  tampilan website sebelumnya  dengan  mencoba  memberikan  desain serta layout yang  lebih  baik  dan  membuat  tampilan website dapat  fleksibel  ke  berbagai  layar  perangkat (responsif). Pembaharuan desain website ini bertujuan  agar  murid,  orang  tua  murid  serta  guru dapat mengandalkan website sebagai salah satu media mencari informasi tentang SMK Pustek  Serpong.
Dari uraian diatas diketahui rumusan masalanya adalah  masih  kurangnya  antusias    penggunaan website sebagai  media  penyampaian  informasi, dimana murid, guru dan orang tua murid masih jarang menggunakan website yang ada.
Dan tampilan website masih statis, belum fleksibel ke ukuran layar perangkat lain, dan menu pada website SMK  Pustek  Serpong  kurang  efisien  karena  belum dikategorikan lebih ringkas.
Adapun  tujuan  dari  riset  dan  penulisan laporan  ini  adalah  untuk  memperbaiki  tampilan
website SMK Pustek Serpong menjadi responsif yaitu dapat  menyesuaikan  di  berbagai  ukuran  layar perangkat.  Dan  Membuat  tampilan  desain,  UI/UX serta layout pada website SMK  Pustek  Serpong menjadi  lebih  menarik,  simpel,  mudah  digunakan, informasi lebih lengkap dan lebih baik lagi.
Batasan  masalah  dalam  penelitian  ini  yaitu desain website yang dibuat hanya sebatas rancangan dan  belum  dapat  diakses  di  jejaring  internet. Stationery yang  dibuat  berupa  kartu  nama  dan notebook , merchandise yang dibuat berupa mug .

## 2. METODE PENELITIAN
Dalam  melakukan  penyusunan  laporan  ini, berikut merupakan metode yang peneliti gunakan :
1. Metode Kepustakaan Mencari dan mengumpulkan data melalui buku dan jurnal.
2. Metode Wawancara Mencari dan mengumpulkan data dengan
secara langsung mewawancarai bagian yang
berkaitan SMK Pustek, dan juga pada pengguna website yaitu murid dan lain-lain.
2.1. Tata Letak/ Layout Menurut  [1], Tata  letak  adalah  sebuah  proses sket rancangan awal untuk menggambarkan oragnisasi unsur-unsur komunikasi grafis  yang akan disertakan. Desainer membuat berbagai alternatif tata letak  sebanyak  mungkin,  untuk  menghindari hambatan pada proses selanjutnya.

## 2.2. Website
Menurut [2] dalam bukunya meyebutkan bahwa web  atau  istilah  lengkapnya World  Wide  Web (WWW)  dikembangkan  pertama  kali  oleh  Tim Berners-Lee pada tahun 1989. Dokumen dapat saling
berkaitan melalui suatu link . Web merupakan bagian dari  layanan  yang  dapat  berjalan  di  atas  teknologi internet. Halaman web dapat diakses dengan adanya teknologi web server sebagai penyedia layanan web, HTML sebagai bahasa baku dan HTTP sebagai jalur pengiriman dokumen web.

## 2.3. Web Design
Web Design merupakan sebuah konseptualisasi, perencanaan dan membangun beberapa data elektronik yang kemudian menentukan layout , warna, desain  teks,  struktur,  grafis,  gambar  dan  digunakan sebagai  fitur  interaktif  dalam  sebuah  halaman  web yang dilihat oleh pengunjung web [3].

## 2.4. Responsive Web Design
“Responsive Web Design adalah ketika ukuran layar  ataupun  jendela web  browser dikecilkan, beberapa  elemen  web  akan  menyesuaikan  baik  dari segi  ukuran  maupun  posisi,  misalnya  mengecilnya gambar  dan menu pada website mengikuti  ukuran perangkat kecil” [4].
Responsive Web Design lebih fleksibel dan bisa beradaptasi hampir disemua layar berbeda. Tampilan dari  rancangan website yang  dibuat  memiliki  5 ukuran  yang  berbeda,  yaitu  1600px,  1200px,  1000, 768px  dan  480px.  Ukuran  tersebut  dapat  fleksibel atau dapat menyesuaikan mengikuti ukuran layar PC , tab , dan smartphone.

## 3. HASIL DAN PEMBAHASAN
3.1. Sejarah Organisasi
SMK  Pustek  Serpong  merupakan  sekolah kejuruan  swasta  yang  beralamat  di  Serpong, Tangerang Selatan. Didirikan pada tahun 1999  oleh banyak  pihak,  diantaranya  :  H.Totong,  Dr. H.Mathodah  S.  Msi.,  Ir.  Harmen  Latief  M.  Mpd. SMK  Pustek  telah  mempunyai  website  sejak  tahun 2013 dengan alamat www.smk.pustekserpong.com.

## 3.2. Unit Kerja Lokasi Riset
Unit  kerja  lokasi  pada  riset  ini  adalah  pada bagian operator atau admin di SMK Pustek Serpong, yang  bertugas  sebagai  pengelola website dengan tugas  membuat  berita  dan  meng update foto. Sedangkan  super  admin  atau  bagian  utama  yang mengelola website adalah dari bagian yayasan SMK Pustek Serpong.
3.3. Spesifikasi Teknologi Hardware
Tabel 1. Software dan Hardware Pendukung Nama Perangkat Spesifikasi Notebook Vaio S Series Core i7 2.80 GHz AMD Radeon HD Graphics 3000 RAM 4 GB
3.4. Spesifikasi Software
1. Adobe Muse CC 2018
Adobe Muse merupakan software yang digunakan untuk mendesain website tanpa menggunakan coding .
2. Adobe Illustrator CC 2018 Adobe illustrator merupakan software yang digunakan untuk membuat vector berupa ilustrasi dan sebagainya.
3. Adobe Photoshop CC 2018 Adobe photoshop digunakan untuk editing foto.

## 3.5. Objek Penelitian
Gambar 1. Tampilan Website SMK Pustek Serpong
Pada gambar 1adalah tampilan website SMK Pustek Serpong, berikut penjelasannya :
1. Website SMK Pustek Serpong memiliki tata letak/ layout satu kolom. Dimana seluruh konten disajikan tanpa merubah layout.
2. Menu-menu sangat lengkap dan bervariasi namun belum di kategorikan lebih ringkas.
3. Ukuran layar masih belum responsif.
Gambar 1. Draft Rancangan Beranda bagian pertama
Gambar 2 Merupakan Draft Rancangan Beranda Bagian 2
Pada  gambar  2  dan  3  adalah  draft website SMK Pustek Serpong, berikut penjelasannya :
1. Rancangan desain website pada draft mengutamakan kesederhanaan dalam penempatan  serta  pengkategorian  di  tiap kontennya. UI ( User  Interface )  dan UX ( User Experience ) juga dibuat semenarik mungkin. 2. Penggunaan warna dipilih dengan menyerasikan  dengan branding SMK  Pustek Serpong, dimana warna  biru, dan kuning  yang mendominasi  warna  menu  serta  konten  pada rancangan desain website ini.
3.6. Rancangan Aplikasi
1. Rancangan Layar
Gambar 3. Rancangan Layar Menu Profil SMK Pustek
Pada  gambar  4  merupakan  rancangan  layar  menu profil  pada website SMK  Pustek  Serpong,  berikut penjelasannya : 1. Menu profil SMK Pustek berisikan infomasi tentang sejarah sekolah, sambutan kepala sekolah serta fambar fasilitas yang ada di sekolah SMK Pustek Serpong
Gambar 4. Rancangan Layar Motto, Visi & Misi SMK

## Pustek Serpong
Pada  gambar  5  merupakan  rancangan  layar  menu motto, visi & misi di website SMK Pustek Serpong, berikut penjelasannya :
1. Menu motto, visi dan misi berisi tulisan motto serta visi mis SMK Pustek Serpong yang disajikan dalam bentuk gambar.
Gambar 5. Rancangan Layar Berita pada SMK Pustek Serpong
Pada  gambar  6  merupakan  rancangan  layar  menu berita  pada website SMK  Pustek  Serpong,  berikut penjelasannya :
1. Menu  berita mempunyai tampilan dua kolom dimana kolom pertama berisi pilihan berita.
2. Pada kolom kedua berisi tampilan dari berita yang dipilih.
Gambar 6. Rancangan Layar Kompetensi Keahlian
Pada  gambar  7  merupakan  rancangan  layar  menu kompetisi keahlian di website SMK Pustek Serpong,
berikut penjelasannya :
1. Menu kompetisi keahlian menampilkan gambar ilustrasi yang menunjukkan tentang tiap penjurusan, disajikan menurun kebawah.
Gambar 8. Rancangan Layar Download Brosur SMK Pustek Serpong
Pada  gambar  8  merupakan  rancangan  layar  menu download pada website SMK Pustek Serpong, berikut penjelasannya : 1. Menu download menampilan gambar berupa brosur SMK Pustek Serpong dengan tombol
untuk mengunduh dibawahnya.

## 2. Flowchart
Gambar 7. Flowchart Beranda 1 Pada gambar 9 merupakan flowchart beranda bagian satu, berikut penjelasannya :
1. Flowchart untuk beranda bagian satu adalah dimulai munculnya tampilan beranda.
2. Dalam header terdapat menu-menu yang terhubung sesuai kategori yang dipilih.
3. Lalu terdapat pilihan konten/menu yang masing-masing akan terhubung ke kode yang sudah ada, lalu berlanjut ke flowchart beranda kedua.

## Gambar 8. Flowchart Beranda 2
Pada gambar 10 merupakan flowchart beranda bagian kedua, berikut penjelasannya : 1. Pilihan konten/menu yang masing-masing akan terhubung ke kode yang sudah ada, lalu berlanjut ke flowchart beranda kedua. 2. Pilihan konten weblink yang akan menuju link yang sudah tertaut.
3. Bagian footer berisi pilihan link ke social media dan lain-lainnya.
3.7. Implementasi
1. Website
Gambar 11. Implementasi Halaman Beranda
Pada  gambar  11  merupakan  implementasi  halaman beranda, berikut penjelasannya :
1. Header berisi menu-menu dan kategori.
2. Terdapat slide show konten atau poster yang berisi informasi.
3. Tiga berita terbaru.
4. Pintasan kejuruan/kompetisi keahlian.
5. Testimoni alumni.
6. Ilustrasi SMK Pustek Serpong.
7. Log In dan video SMK Pustek Serpong.
8. Weblink dan Peta SMK Pustek Serpong.
9. Footer berisi alamat serta link social media SMK Pustek Serpong
Gambar 9. Implementasi Halaman Motto, Visi dan Misi
Pada  gambar  12  merupakan  implementasi  halaman motto,visi dan misi, berikut penjelasannya :
1. Berisi tulisan motto,visi dan misi SMK Pustek
Serpong dengan menambahkan hiasan pada gambar.
2. Background halaman menggunakan latar foto ruang kelas.
Gambar 10. Implementasi Halaman Profil Sekolah
Pada  gambar  13  merupakan  implementasi  halaman profil sekolah, berikut penjelasannya :
1. Berisi sejarah singkat SMK Pustek Serpong, sambutan kepala sekolah dan fasilitas pada SMK Puster Serpong.
Gambar 11. Implementasi Halaman Berita
Pada  gambar  14  merupakan  implementasi  halaman berita, berikut penjelasannya :
1. Berisi berita SMK Pustek Serpong, pada kolom sebelah kiri terdapat pilihan berita.
2. Kolom sebelah kanan menampilkan isi berita dari tombol pilihan berita yang dipilih.
Gambar 12. Implementasi pada Layar Ukuran Berbeda
Pada  gambar  15  merupakan  contoh  implementasi pada  perangkat  ukuran  layar  berbeda,  berikut penjelasannya : 1. Tampilan website yang dibuat dapat fleksibel ke berbagai perangkat. Seperti : PC, Laptop, Tab, dan Smartphone.
2. Tampilan dapat menyesuaikan tanpa merubah bentuk asli.
Gambar 13. Implementasi Halaman Organisasi Siswa
Pada  gambar  16  merupakan  implementasi  halaman organisasi siswa, berikut penjelasannya : 1. Berisi gambar dari tiap organisasi siswa yang di tampilkan dengan elemen dan warna yang cerah.
Gambar 14. Implementasi Halaman Download
Pada  gambar  17  merupakan  implementasi  halaman download , berikut penjelasannya :
1. Berisi gambar brosur tiga kolom yang dapat diunduh dengan menekan tombol download dibawahnya yang akan terhubung ke halaman
download brosur format pdf.

## 2. Stationery & Merchandise

## Gambar 15 Stationery Kartu Nama
Pada gambar 18 merupakan implementasi stationery berupa kartu nama, berikut penjelasannya :
1. Kartu nama didesain menggunakan elemen sederhana dan elegan.
2. Menggunakan warna branding SMK Pustek
Serpong.
Gambar 16. Stationery Notebook bag. Depan
Pada gambar 19 merupakan implementasi stationery notebook bagian depan, berikut penjelasannya : 1. Notebook didesain menggunakan elemen yang modern. 2. Logo SMK Pustek diletakkan dibagian atas. 3. Menggunakan warna branding SMK Pustek
Serpong.
Gambar 17. Stationery Notebook bag. Belakang
Pada gambar 20 merupakan implementasi stationery notebook bagian belakang, berikut penjelasannya : 1. Notebook didesain menggunakan elemen yang modern. 2. Alamat e-mail SMK Pustek diletakkan dibagian bawah. 3. Menggunakan warna branding SMK Pustek
Serpong.
Gambar 18. Merchandise Mug
Pada gambar 20 merupakan implementasi mug /gelas, berikut penjelasannya :
1. Gelas berbahan keramik dengan desain cerah dan sederhana.
2. Berisi tulisan tentang keunggulan SMK dan jurusan/kompetisi keahlian yang ada pada SMK Pustek Serpong.

## 4. KESIMPULAN
Dari  penulisan  laporan  ini  dapat  disimpulkan bahwa  seiring  berjalannya  waktu, website sangat diperlukan  hampir  di  banyak  bidang.  Dalam  bidang pendidikan  terutama  sekolah, website mampu memberi  informasi  yang  diperlukan  dan  sangat efektif untuk dijadikan sarana informasi dan promosi. Tidak hanya informasi, namun tampilan serta desain
dari website tersebut  haruslah  diperhatikan  karena semakin  simpel,  efektif  dan  baik  tampilan  sebuah website ,  akan  mempengaruhi  kualitas  penggunaan dan keberhasilan website itu sendiri.

## DAFTAR PUSTAKA
[1]  Kusnadi.  2018. Dasar  Desain  Grafis. Tasikmalaya  :
Edu Publisher.
[4]  Solichin,  Ahmad.  2016. Pemrograman  Web  dengan PHP  MYSQL. Jakarta  :  Universitas  Budi  Luhur. [2]  Banindro,  Baskoro  Suryo  dan  M.  Faizal  Rochman.
2019. Panduan Perancangan   Web Interaktif. Yogyakarta
: Dwi Quantum. [3] Mulhim, Imam. 2014. Desain Web untuk Desktop dan Mobile  dengan  Responsive  Web  Design. Palembang  : Maxikom.