Web Desain

Persyaratan Umum:

  1. Peserta adalah siswa/siswi jenjang SMA/SMK/MA/Sederajat sekolah negeri maupun swasta yang masih aktif pada tahun pendidikan 2023/2024 (dibuktikan dengan Kartu Tanda Pelajar)
  2. Peserta wajib melakukan pendaftaran melalui link bit.ly/pimpelpitcomfest
  3. Setiap peserta wajib menyelesaikan pendaftaran serta administrasi pendaftaran
  4. Peserta lomba wajib melampirkan scan kartu identitas aktif, berupa Kartu Tanda Pelajar saat mendaftar
  5. Peserta terdiri dari (individu atau tim yang terdiri dari 1-2 orang dengan 1 pendamping)
  6. Guru pendamping bersifat opsional
  7. Peserta harus sudah hadir 15 menit sebelum lomba dimulai, bagi yang terlambat harus mendapatkan izin dari panitia dan tidak ada perpanjangan waktu
  8. Peserta wajib mengikuti syarat dan ketentuan kompetisi sesuai dengan GuideBook PIMPEL X PITCOMFEST
  9. Peserta wajib mengikuti Techinical Meeting yang akan diadakan H-3 pelaksanaan lomba PIMPEL X PITCOMFEST
  10. Wajib mengisi daftar hadir pada saat setiap cabang lomba
  11. Peserta lomba wajib menempati dan menggunakan peralatan lomba sesuai dengan hasil undian
  12. Penulisan nama peserta wajib menggunakan nama lengkap tanpa disingkat

Syarat dan Ketentuan Lomba Web Desain

  1. Peserta adalah siswa/siswi jenjang SMA/SMK/MA/Sederajat sekolah negeri maupun swasta yang masih aktif pada tahun pendidikan 2023/2024 (dibuktikan dengan Kartu Tanda Pelajar)
  2. Setiap peserta wajib menyelesaikan pendaftaran beserta administrasi pendaftaran.
  3. Lomba bersifat individu dan team ( 1-2 orang)
  4. Peserta lomba wajib melampirkan scan kartu identitas aktif, berupa Kartu Pelajar saat mendaftar
  5. Tidak dibenarkan peserta diganti pada saat tengah lomba berlangsung.
  6. Peserta harus hadir pada ‘technical meeting’.
  7. Lomba pada penyisihan pertama akan dipilih berdasarkan racangan desain website yang sudah dikirimkan ke panitia.
  8. Peserta yang lolos 10 tim terbaik akan lanjut untuk mengembangkan layout web tersebut.
  9. Peserta harus sudah hadir 15 menit sebelum lomba dimulai, bagi yang terlambat harus mendapat izin dari panitia dan tidak ada perpanjangan waktu.
  10. Wajib mengisi daftar hadir pada saat setiap jenis lomba yang diadakan.
  11. Penentuan nomor peserta dilakukan melalui undian, bagi peserta yang tidak mengikuti technical meeting, nomor undian ditentukan oleh panitia.
  12. Berpakaian bebas sopan (berkerah).
  13. Peserta lomba wajib menempati dan menggunakan peralatan lomba sesuai dengan hasil undi.
  14. Waktu istirahat ditentukan sesuai situasi saat lomba.
  15. Peserta tidak dapat melanjutkan lomba dikarenakan sakit atau hal-hal lain, maka dianggap gugur/mengundurkan diri.
  16. Peserta tidak dibenarkan berkonsultasi atau mendapat pengarahan teknis tentang pekerjaan (job) pada waktu kegiatan berlangsung dari pembimbing masing-masing kecuali dari tim juri.
  17. Kegagalan/keterlambatan pekerjaan tidak diberikan toleransi (misalnya karena lupa pekerjaan belum di-save).
  18. Kerusakan peralatan (hardware/software) akibat kesalahan prosedur yang dilakukan peserta, menjadi tanggung jawab peserta itu sendiri.
  19. Tidak dibenarkan menggunakan peralatan (hardware/software) di luar ketentuan yang ada
  20. Tidak diperbolehkan membawa buku/catatan/HP/flashdisk di ruang lomba.
  21. Tidak diperbolehkan mengakses internet pada saat lomba berlangsung.
  22. Untuk alasan kesehatan peserta diperbolehkan membawa makanan kecil dan minuman ke dalam ruang ujian.
  23. Ketentuan lain yang belum tercantum dalam tata tertib ini diputuskan oleh kebijakan juri (ditentukan kemudian sesuai kebutuhan).
  24. Pelanggaran terhadap tata tertib ini akan diberikan sanksi berupa teguran sampai berupa pemberhentian sebagai peserta

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 “Insipiring the Next Generation of IT Professionals”, 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

2. 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 secara luring pada hari Senin, 19 Juni 2023 dengan waktu selama 150 menit bertempat di ……
  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
Kriteria Penilaian
secara luring pada hari Senin, 19 Juni 2023 dengan waktu selama 150 menit bertempat di ……
  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. Penilaian Layout Website (Seleksi 2)
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/11-
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.

Fasilitas Juara 1

  1. Sertifikat
  2. Uang Pembinaan sebesar Rp. 1.000.000

Fasilitas Juara 2

  1. Sertifikat
  2. Uang Pembinaan sebesar Rp. 750.000

Fasilitas Juara 3

  1. Sertifikat
  2. Uang Pembinaan sebesar Rp. 500.000
Registrasi Web Desain
CP : Tama