PELATIHAN WIREFRAME WEBSITE DI SMAN 58 JAKARTA

Nur Hayati, Fauziah, Harun Aljafar, Laurensius Oliver J.S , Adelia Putri Handayani, Hanni Oktaviana

doi:10.32722/mapnj.v6i1.5630

Authors

Nur Hayati, Fauziah, Harun Aljafar, Laurensius Oliver J.S , Adelia Putri Handayani, Hanni Oktaviana Universitas Nasional (UNAS), Jl. Sawo Manila No.61, RW.7, Pejaten Bar., Ps. Minggu, Kota Jakarta Selatan, Daerah Khusus Ibukota Jakarta 12520

DOI:

https://doi.org/10.32722/mapnj.v6i1.5630

Keywords:

Homepage Website, SMAN 58 Jakarta, User Interface, Wireframe

Abstract

Currently, there are lots of website templates that can be obtained for free. However, it is very unfortunate because most of the website templates in circulation come from abroad. Even though there are quite a lot of resources from Indonesia, we are really trained from the start to get involved in the world of programming, especially website creation. Based on this situation, this community service activity introduces how to make a website display or a basic introduction to User Interface (UI) using wireframes. In wireframes there are various components such as banners, headers, content, footers, links, forms, and others so making it easier to design the UI on the website. The participant in this community service is 19 students from SMAN 58 Jakarta. The result of this community service is that students are able to make a website homepage display using wireframes with different designs according to the creativity of each student.

Saat ini banyak sekali desain tema laman yang dapat diperoleh secara gratis. Akan tetapi sangat disayangkan sekali karena sebagian besar desain tema laman 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 desain laman. Berdasarkan hal tersebut, maka pada Pengabdian kepada Masyarakat (PkM) kali ini akan diperkenalkan terlebih dahulu tentang bagaimana membuat tampilan laman 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 laman. 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 beranda laman menggunakan wireframe dengan bentuk desain yang berbeda sesuai dengan kreatifitas dari masing-masing siswa.

Downloads

Download data is not yet available.

References

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.