Analisis Perbandingan CSS Framework Tailwind CSS dan Bootstrap dalam Pengembangan Landing Page Website POS Digitaliz
DOI:
https://doi.org/10.47111/jointecoms.v5i1.19807Keywords:
CSS Framework, Tailwind CSS, Bootstrap, Perbandingan, Journey MapAbstract
Penelitian ini membandingkan pengalaman pengguna dalam penggunaan dua framework CSS populer, Bootstrap dan Tailwind, melalui studi kasus landing page. Penelitian menggunakan metode user journey mapping untuk mengamati perjalanan pengguna, yang meliputi web developer sebagai responden. Metode ini menghasilkan journey map yang merangkum kesulitan dan kepuasan pengguna selama interaksi.
Hasil penelitian menunjukkan bahwa Tailwind unggul dalam enam indikator, yaitu skor journey yang lebih tinggi, penggunaan class yang lebih banyak, lebih sedikit pemakaian CSS native, kemiripan desain yang lebih tinggi, tingkat kesulitan yang lebih mudah dari ekspektasi, serta waktu penyelesaian yang lebih singkat. Sementara itu, Bootstrap lebih unggul dalam tiga indikator, yaitu jumlah karakter yang lebih sedikit, efek hover yang lebih baik, dan responsifitas yang lebih tinggi.
Downloads
References
[1]Akbar, T. A.,“ANALISIS PERBANDINGAN FRAMEWORKCSSBOOTSTRAPDAN TAILWINDDALAM PENGEMBANGAN WEBSITE PORTOFOLIO”, Bachelor Thesis, Universitas AMIKOM Yogyakarta, 2023.[Online]. Available:https://eprints.amikom.ac.id/id/eprint/18506/
[2]Axza, F., Sofi’ie, F., & Qoiriah, A.,“Analisis Perbandingan FrameworkFront-endJavascriptReactdan VuePada Pengembangan Website”Journal of Informatics and Computer Science (JINACS),vol. 05,no. 02, pp. 157–164, 2023.[Online]. Available:https://doi.org/10.26740/JINACS.V5N02.P157-164
[3]Chastro, C., Darmawan, E., Kom, S., & #2, M. T. (2020). Perbandingan Pengembangan Front End Menggunakan BladeTemplatedan Vuejs. Jurnal STRATEGI -Jurnal Maranatha,2(2),302–313. [Online]. Available: https://strategi.itmaranatha.org/index.php/strategi/article/view/181
[4]Cody Lindley, “Front-endDeveloperHandbook 2019 -Learn the Entire Javascript, CSSand HTMLDevelopmentPractice!” n.d. Accessed October 3, 2023.[Online]. Available:https://frontendmasters.com/guides/front-end-handbook/2019/#2.
[5]Kusuma, I. J.,“ANALISIS PERBANDINGAN FRAMEWORKCSSmaterializeDANsemantic-uiPADA FRONT ENDWEBSITE PENDAFTARANMAHASISWABARUPADAUTM(UNIVERSITAS TEKNOLOGI MATARAM),” Bachelor Thesis, Universitas Teknologi Digital Indonesia, 2020. [Online]. Available: https://eprints.utdi.ac.id/9046/
[6]L. Yusuf, T. Hidayatulloh, D. Nurlaela, L. D. Utami, F. N.Hasan, “Simple Additive Weighting untuk Front-endFrameworkTerbaik.,” ILKOM Jurnal Ilmiah, vol. 12, no.2, pp. 136–142, 2020.[Online].Available: https://doi.org/10.33096/ilkom.v12i2.593.136-142
[7]MDN,“Front-endWebDeveloper.” Mozilla Developer, 2020. [Online]. Available: https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer.
[8]Samson, S., Granath, K., & Alger, A.,“journey mapping the User Experience,”College & Research Libraries, vol. 78, no. 4, pp. 459.[Online]. Available:https://doi.org/10.5860/crl.78.4.459
[9]Sarah Gibbons, “Journeymapping 101,” Nielsen Norman Group, 2018.[Online]. Available:https://www.nngroup.com/articles/journey-mapping-101/.
[10]State Of CSS, “State of CSS2023: CSSFrameworks,”2023. [Online]. Available: https://2023.stateofCSS.com/en-US/CSS-Frameworks/.
[11]Zaki Izzani Akbar, “Apa itu Persona dan Apa Saja Komponen pada Persona,”, 2020.[Online] Available:https://sis.binus.ac.id/2020/04/29/apa-itu-persona-dan-apa-saja-komponen-pada-persona/
Downloads
Published
How to Cite
Issue
Section
License
Copyright (c) 2025 Journal of Information Technology and Computer Science
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
