Pelatihan Wireframe Website di SMAN 58 Jakarta
DOI:
https://doi.org/10.32722/mapnj.v6i1.5630Kata Kunci:
User Interface, SMAN 58 Jakarta, Pengabdian kepada Masyarakat (PkM), Wireframe.Abstrak
Saat ini banyak sekali template website yang dapat diperoleh secara gratis. Akan tetapi sangat disayangkan sekali karena sebagian besar template website yang beredar berasal dari luar negeri. Padahal sumber daya dari Indonesia cukup banyak jika memang benar-benar dilatih sejak awal untuk terjun pada dunia pemrograman khususnya pembuatan website. Berdasarkan hal tersebut, maka pada Pengabdian kepada Masyarakat (PkM) kali ini akan diperkenalkan terlebih dahulu tentang bagaimana membuat tampilan website atau pengenalan dasar User Interface (UI) yang mudah dengan menggunakan wireframe. Pada wireframe sudah terdapat berbagai komponen seperti banner, header, content, footer, link, form, dan lain-lain sehingga memudahkan dalam merancang UI pada website. Target PkM ini adalah siswa dari SMAN 58 Jakarta dimana jumlah peserta yang mengikuti kegiatan PkM ini adalah sebanyak 19 siswa. Hasil akhir dari PkM ini adalah para siswa mampu membuat tampilan homepage website menggunakan wireframe dengan bentuk desain yang berbeda sesuai dengan kreatifitas dari masing-masing siswa.
Unduhan
Referensi
A. Segara, “Penerapan Pola Tata Letak (Layout Pattern) pada Wireframing Halaman Situs Web,” J. Magenta, STMK Trisakti, pp. 452–464, 2019.
Dimas, “Perancangan Dan Evaluasi Desain Wireframe Sistem Informasi Lentera,” Semin. Nas. Teknol. Inf. dan Komun., vol. 3, 2020.
Haida, D., Erwin P., Nur W., Abdul J. L., Sumi K., dan Ade P. H., “Pelatihan Desain UI/UX Website UMKM Profile Labscarpe dengan Aplikasi Figma,” J. Pengabdi. Kpd. Masy. Nusant., vol. 3, 2023.
and S. A. A. Arif, W. Andri, “Evaluasi User Interface Website E-commerce Menggunakan Metode Heuristic,” J. Ilm. MATRIK, vol. 24, pp. 157–164, 2022.
Bagoes D. J., Eka P. A., “Perancangan Wireframe User Interface Semesta Baca Menggunakan Figma,” Bina Darma Conf. Comput. Sci., 2022.
A. Segara, “Penerapan Pola Tata Letak (Layout Pattern) pada Wireframing Halaman Situs Web,” J. Magenta, STMK Trisakti, vol. 3, 2019.
Niagahoster, “Wireframe: Pengertian, Cara Membuatnya dan Bedanya dengan Mockup,” 2022. https://www.niagahoster.co.id/blog/pengertian-wireframe/#:~:text=Wireframe adalah kerangka dasar halaman,dengan tata letak yang diinginkan.
D. P. Muhammad, F. R., “Pemodelan Wireframe Sistem Manajemen Proyek Perangkat Lunak (Studi Kasus: PT. Arkatama Multisolusindo)",” J. Pengemb. Teknol. Inf. dan Ilmu Komput., vol. 6, pp. 3372–3378, 2022.
Dicoding, “Belajar Membuat Front-End Web Untuk Pemula,” 2022. https://www.dicoding.com/academies/315
H. Muhammad Syarif, “Penerapan User Centered Design (UCD) Pada Wireframe Desain User Interface dan User Experience Aplikasi Sinopsis Film,” J. Elektro Inform. Swadharma, vol. 2, pp. 43–47, 2022.
Unduhan
Diterbitkan
Cara Mengutip
Terbitan
Bagian
Lisensi
Hak Cipta (c) 2023 Nur Hayati, Fauziah, Harun Aljafar, Laurensius Oliver J.S , Adelia Putri Handayani, Hanni Oktaviana (Author)
Artikel ini berlisensiCreative Commons Attribution-ShareAlike 4.0 International License.
