Berkembangnya dunia teknologi informasi dan pemrograman saat ini mendorong banyak orang untuk mulai memahami dasar – dasar pengembangan teknologi seperti belajar bahasa pemrograman. Banyak sekali platform – platform pembelajaran di internet yang menyediakan learning course bagi pemula untuk membantu pembelajaran pemrograman. Salah satunya adalah W3Schools.

Gambar 1. Landing page W3Schools.

W3Schools adalah platform pembelajaran online yang menyediakan tutorial, referensi, dan latihan praktis bagi pengguna yang ingin mempelajari pemrograman mulai dari tingkat pemula hingga menengah. Dengan berbagai materi bahasa pemrograman seperti HTML, CSS, JavaScript, Python, C, dan Java serta lengkap dengan contoh kode interaktif yang dapat langsung dicoba, pengguna dapat belajar secara mandiri tanpa perlu instalasi tambahan, sehingga sangat cocok bagi mereka yang ingin mulai belajar coding dengan cepat dan praktis.

Namun, meskipun memiliki konten yang lengkap dan mudah diakses, tampilan antarmuka serta pengalaman pengguna pada W3Schools masih memiliki beberapa kekurangan seperti logo course yang terlalu general dan tampilan yang cenderung padat. Oleh karena itu, kami para penulis artikel ini berinisiatif untuk melakukan redesign W3Schools untuk meningkatkan kenyamanan dan efektivitas proses belajar pengguna.

Gambar 2. Hasil redesign homepage dari W3Schools.

Flow atau alur proses juga menjadi pertimbangan kami dalam melakukan proses redesign ini. Salah satu perubahan signifikan yang kami buat adalah berupa pemberian tata letak switch theme yang dimana diletakkan pada bagian navigation bar sehingga terlihat jelas oleh user. Perubahan warna-warna pada website juga dijadikan lebih contrast, khususnya pada bagian contoh code. Hal ini bertujuan untuk membantu user dalam mengetahui bagian mana yang salah dan benar.

Gambar 3. Pemberian warna yang kontras pada bagian contoh.

Selain perubahan warna, perubahan design layout dan learning path juga menjadi perhatian bagi kami. Design layout mengalami perubahan, khususnya pada bagian IDE, yang dibuat lebih terstruktur dan modern sehingga memberi kenyamanan bagi user. Adanya kejelasan pada learning path juga memberi bantuan user baru untuk memulai belajar pada website W3Schools ini.

Gambar 4. Kejelasan learning path pada website W3Schools.

Gambar 5. Perubahan layout  pada bagian IDE.

Tentunya redesign yang kami lakukan jauh dari kata “sempurna”. Masih banyak kekurangan dari proses yang telah dilaksanakan ini. Kami mengharapkan saran dan masukan dari para pembaca atas hasil redesign yang telah kami lakukan sehingga redesign ini bisa menjadi lebih baik dan sesuai dengan apa yang diharapkan oleh para pembaca dan pengguna.

Penulis

  • I Gede Wahyu Dipta Parandika
  • Irends Indriana
  • Gerald Cello Yosua | Reyhan Nino Aliffano
  • Jonathan Mouri Chen

PPTI 24 – Computer Science – BINUS @Kemanggisan – B29

Untuk informasi lebih detail: https://medium.com/@geraldcy05/ui-ux-case-study-redesign-website-w3schools-5252a4d48f73