Web Desain

Persyaratan Umum:

  1. Peserta adalah siswa/siswi dari jenjang SMA/SMK/MA sederajat, baik sekolah negeri maupun swasta, yang masih aktif pada tahun ajaran 2024/2025 (dengan bukti berupa Kartu Tanda Pelajar). 
  2. Setiap peserta wajib menyelesaikan proses pendaftaran beserta administrasi yang diperlukan. 
  3. Lomba ini bersifat individu atau team (1-2 orang). 
  4. Peserta wajib melampirkan scan Kartu Tanda Penduduk (KTP) atau Kartu Pelajar yang masih berlaku saat pendaftaran.
  5. Tidak diperbolehkan mengganti peserta selama lomba berlangsung.
  6. Peserta diwajibkan hadir dalam acara technical meeting. 
  7. Lomba pada penyisihan pertama akan dipilih berdasarkan rancangan desain website yang sudah dikirimkan ke panitia. 
  8. Peserta yang lolos 20 tim terbaik akan lanjut untuk mengembangkan layout web tersebut. 
  9. Peserta wajib hadir 15 menit sebelum lomba dimulai. Jika terlambat, harus mendapatkan izin dari panitia, dan tidak ada perpanjangan waktu. 
  10. Peserta wajib mengisi daftar hadir saat mengikuti setiap sesi lomba yang diadakan. 
  11. Penentuan nomor peserta dilakukan melalui undian. Bagi peserta yang tidak hadir pada technical meeting, nomor undian akan ditentukan oleh panitia. 
  12. Peserta diharapkan berpakaian bebas namun tetap sopan (berkerah). 
  13. Peserta wajib menggunakan dan menempati peralatan lomba sesuai dengan hasil undian. 
  14. Waktu istirahat akan ditentukan sesuai dengan situasi lomba.
  15. Jika peserta tidak dapat melanjutkan lomba karena sakit atau alasan lainnya, maka dianggap gugur atau mengundurkan diri. 
  16. Peserta tidak diperbolehkan berkonsultasi atau mendapatkan arahan teknis tentang pekerjaan (job) dari pembimbing selama lomba berlangsung, kecuali dari tim juri. 
  17. Keterlambatan atau kegagalan dalam pekerjaan tidak akan diberikan toleransi, misalnya karena lupa menyimpan pekerjaan.
  18.  Kerusakan peralatan (hardware/software) akibat kesalahan prosedur yang dilakukan peserta menjadi tanggung jawab peserta tersebut. 
  19. Peserta tidak diperbolehkan menggunakan peralatan (hardware/software) yang tidak sesuai dengan ketentuan yang telah ditetapkan. 
  20. Tidak diperbolehkan membawa buku, catatan, ponsel, atau flashdisk ke ruang lomba. 
  21. Untuk alasan kesehatan, peserta diperbolehkan membawa makanan kecil dan minuman ke dalam ruang ujian. 
  22. Ketentuan lain yang belum tercantum dalam tata tertib ini akan ditentukan oleh kebijakan juri sesuai dengan kebutuhan.
  23.  Pelanggaran terhadap tata tertib ini dapat berakibat pada sanksi, mulai dari teguran hingga pemberhentian sebagai peserta.   

Syarat dan Ketentuan Lomba Web Desain

Ketentuan Khusus: 

  1.   Karya belum pernah menjadi pemenang atau memperoleh penghargaan pada kontes sejenis baik dalam skala lokal, nasional, regional, maupun internasional, 
  2.   Karya dapat dikembangkan dari tugas pelajaran yang terkait dengan kegiatan akademik kurikuler pada program studi yang diikuti anggota tim kontestan, 
  3.   Jika tim menggunakan materi berhak cipta dan/atau gambar dari pihak ketiga dalam dokumen, video, atau presentasi, maka tim harus mendapatkan izin dan otorisasi terlebih dahulu dari pemilik untuk menggunakan materi tersebut. 

Ruang Lingkup

Materi yang dilombakan pada LKS saat ini meliputi kemampuan desain website dan layout. Lebih detail mengenai penilaian dan waktu dari tiap kemampuan dijelaskan pada tabel 1

NoSoalBobotWaktuRanah Kompetensi
1Desain Web (Seleksi 1)50-
2Desain Web (Seleksi 2)50150 menit

Soal praktek terdiri dari 2 modul (saling terkait). Elemen-elemen kompetensi yang dilombakan pada bidang lomba Desain Web ini antara lain:

1. Desain & Layout Website (Seleksi 1)

Individu perlu mengetahui dan memahami

  1. Masalah yang berkaitan dengan kognitif, sosial dan budaya untuk desain web
  2. Cara membuat grafis untuk web dan design yang sesuai dengan spesifikasi.
  3. Mengikuti prinsip-prinsip dan pola design.
  4. Keterampilan yang diperlukan untuk merancang web dan memanfaatkan komposisi warna dan tipografi.
  5. Penerapan elemen design yang disesuaikan dengan pengguna.
  6. Penerapan desain website untuk beragam device sesuai dengan keterbatasan internet dan resolusi layer

Individu harus dapat

  1. Membuat, menganalisa dan mengembangkan grafik yang dapat menyampaikan informasi dengan baik sesuai pemahaman komposisi hirarki, tipografi dan estetika
  2. Membuat, memanipulasi dan mengoptimalkan resolusi gambar untuk tampilan Web.
  3. Menentukan sebuah ide yang paling sesuai dengan pengguna dan tema.
  4. Menggunakan semua elemen yang diperlukan untuk membuat design
  5. Membuat desain responsif yang berfungsi dengan benar pada beberapa resolusi layar dan / atau perangkat
  6. Membuat sebuah design yang asli dan kreatif.
  7. Transform ide menjadi design estetis dan kreatif menggunakan software yang disediakan

Kisi-Kisi

  1. Tema besar yang diangkat adalah “Innovating Learning Experiences
    Through Technology”. Peserta diharapkan dapat merancang desain website dengan kategori edutech.
  2. Membuat desain halaman website responsif dengan menggunakan Figma. Minimal terdapat 2 rancangan halaman website yang terdiri dari landing page dan 1 halaman pendukung.
  3. Membuat icon atau aset-aset yang dibutuhkan dengan menggunakan Figma, Adobe Photoshop atau Adobe Ilustrator. Jika menggunakan aset yang berasal dari internet wajib dipastikan peserta mendapatkan izin terlebih dahulu dari pemilik.

Metode Pengumpulan Seleksi 1
Berkas yang perlu diunggah pada Design dan Layout Website berupa:

  1. Deskripsi rancangan website dalam bentuk PDF meliputi latar belakang masalah, tujuan dan hasil yang ingin dicapai, target pengguna, skenario penggunaan rancangan produk
  2. Link Figma rancangan website
  1. Penilaian Desain & Layout Website (Seleksi 1)
Kriteria PenilaianBobot
Kesesuaian dengan Tema20
Kreativitas dan Inovasi20
Estetika dan Tata Warna20
Kejelasan Informasi20
Kerapian Layout dan Tampilan10
Responsif dan User-friendly10

2. Layout Website (Seleksi 2)

2. Penilaian Layout Website (Seleksi 2)

Individu perlu mengetahui dan memahami

  1. Standar World Wide Web Consortium (W3C) untuk HTML dan CSS. Metode website layout dan website structure.
  2. Web Accessibility Initiative (WAI)
  3. Mengidentifikasi aturan CSS yang tepat untuk mendapatkan hasil yang diinginkan
  4. Mengintegrasikan animasi, audio dan video dalam website.
  5. Menggunakan Javascript untuk fungsionalitas website
  6. Menggunakan CSS dengan cara yang paling efisien dan efektif untuk konsistensi antara web browser

Individu harus dapat

  1. Membuat halaman web yang konsisten dan berfungsi pada berbagai perangkat dan perbedaan resolusi layer.
  2. Membuat website yang sesuai dengan standar W3C saat ini (http://www.w3.org).
  3. Menggunakan CSS atau file eksternal lainnya untuk memodifikasi tampilan website.
  4. Membuat website secara interaktif menggunakan javascript dan jQuery sebagai pembantu dalam menambah fungsionalitas

Kisi-Kisi

  1. Membuat halaman website responsif dengan menggunakan HTML5 dan CSS3 sesuai dengan standar W3C yang dapat diverifikasi lewat validator w3.org.
  2. Membuat desain halaman website yang responsif dengan menggunakan grid system dan CSS3.
  3. Membuat animasi dengan menggunakan CSS3 dan Javascript.
  4. Membuat website interaktif dengan menggunakan Javascript atau JQuery

Metode Pengumpulan Seleksi 2
Kegiatan Seleksi 2 Layout Website diselenggarakan secara luring pada hari Senin, 19 Mei 2025 dengan waktu selama 2,5 jam (150 Menit) bertempat di Laboratorium Komputer FKIP UMS

Kriteria Penilaian

Kriteria PenilaianBobot
Struktur HTML yang Rapi15
Penerapan CSS yang Efektif15
Responsif dan Kompatibilitas15
Kesesuaian dengan Desain15
Kecepatan Loading10
Kode yang Rapi dan Terdokumentasi10
Aksesibilitas10
SEO (Search Engine Optimization)10
Kelengkapan dan Fasilitas
Spesifikasi peralatan yang digunakan oleh peserta lomba adalah:
NamaKeterangan
PC (Personal Computer)Spesifikasi Desain dan Programming
Windows 10/11Versi Terbaru
Browser: Google Chrome, Mozilla Firefox, EdgeVersi Terbaru
Editor: Adobe Photoshop, CorelDraw, FigmaVersi Terbaru
Code Editor:
Notepad++, Sublime Text, Visual Studio Code
Versi Terbaru
CSS Framework: Bootstrap, TailwindVersi Stable
JQueryVersi 3.x

Alat dan bahan yang telah disediakan oleh panitia tidak dapat digantikan dengan alat dan bahan yang dibawa oleh peserta. Alat yang diperbolehkan dibawa oleh peserta dan bersifat opsional ditunjukkan pada Tabel 3.

NamaKeterangan
KeyboardOpsional
MouseOpsional
MousepadOpsional

Penentuan Juara

  1. Evaluasi dilakukan pada peserta pada tahap 1 (Desain Menggunakan Figma) berdasarkan kriteria penilaian dan bobot yang telah ditetapkan.
  2. 10 Peserta dengan nilai terbaik akan lolos ke seleksi 2.
  3. Evaluasi peserta yang lolos ke tahap 2 (Desain Website dengan CSS dan HTML) berdasarkan kriteria penilaian dan bobot yang telah ditetapkan.
  4. Nilai akhir berdasarkan skor akumulatif. bobot untuk tahap 1 adalah 50% dan bobot untuk tahap 2 adalah 50%, maka skor akumulatif akan dihitung sebagai berikut:
    Skor akumulatif = (skor tahap 1 * 0,5) + (skor tahap 2 * 0,5)
  5. Juara 1, 2, dan 3 ditetapkan berdasar skor akumulatif tertinggi.
  6. Cashback biaya registrasi PMB UMS bagi seluruh juara, syarat dan ketentuan berlaku

Fasilitas Juara 1

  1. Sertifikat
  2. Uang Pembinaan

Fasilitas Juara 2

  1. Sertifikat
  2. Uang Pembinaan

Fasilitas Juara 3

  1. Sertifikat
  2. Uang Pembinaan sebesar