Analisa Hierarki Tipografi Pada UI Web Menggunakan Hitungan Fibonacci Dengan Aplikasi Adobe Illustrator

Authors

  • Nugroho Bangkit Indarmawan Program Studi Sistem Informasi, STMIK YMI Kota Tegal
  • Muh Musthafa Yoshananda Program Studi Teknik Informatika, STMIK YMI Kota Tegal
  • Arif Zaenul Program Studi Teknik Informatika, STMIK YMI Kota Tegal

DOI:

https://doi.org/10.33506/insect.v11i1.4215

Keywords:

Hierarki Tipografi, UI Web, Fibonacci Golden Ratio, Adobe Illustrator, Analisis Tipografi

Abstract

Hierarki tipografi dalam desain UI web berperan penting dalam meningkatkan keterbacaan dan estetika visual. Penelitian ini bertujuan untuk menganalisis penerapan Fibonacci Golden Ratio dalam hierarki tipografi UI web guna menilai efektivitasnya dalam menciptakan desain yang seimbang dan nyaman bagi pengguna. Metode yang digunakan melibatkan analisis tipografi tiga website—Apple.com, Wikipedia.org, dan Archive.org—dengan perhitungan berbasis Python serta validasi desain ulang menggunakan Adobe Illustrator. Hasil pengujian menunjukkan bahwa Wikipedia.org dan Archive.org menerapkan prinsip hierarki tipografi berbasis Fibonacci, sementara Apple.com tidak memenuhi kriteria tersebut. Temuan ini mengindikasikan bahwa penggunaan Fibonacci Golden Ratio dalam UI web dapat berkontribusi terhadap keseimbangan visual dan keterbacaan yang lebih baik

References

[1] I. Purwanto Hadi and S. Kurniawan Dwi, “User Centered Design dan Golden Ratio ‘Phi’ Dalam Komposisi Desain Antarmuka Pengguna Pada Halaman Beranda Website,” Smart Comp Jurnalnya Orang Pint. Komput., vol. 11, no. 3, pp. 458–465, 2022, doi: 10.30591/smartcomp.v11i3.3896.

[2] D. Hasanudin and O. Adityawan, “Perkembangan Flat Design dalam Web Design dan User Interface (UI),” PANTUN J. Ilm. Seni Budaya, vol. 5, no. 2, 2020, doi: 10.26742/pantun.v5i2.1424.

[3] C. B. Susila, “Analisis User Interface Pada Website Stainu Pacitan MenggunakanMetode Eight Golden Rules,” J. Qua Tek., vol. 1, no. 10, pp. 26–35, 2020.

[4] R. P. Arifah Dian Susilowati1), “Perancangan Antarmuka Pengguna Yang Menarik Untuk Website E-Commerce Cv Hasna Bedarasa: Gaya Desain Art Deco Dan Flat Design,” J. Ilm. Sain dan Teknol., vol. 2 (12), no. 2, pp. 1–24, 2024, doi: 10.37202/kmmr.2024.29.2.1.

[5] K. Maulida, P. Hasyim, D. Eridani, and A. S. Nugroho, “Perancangan Antarmuka dan Pengalaman Pengguna Aplikasi Forestrytech Menggunakan Metode Design Thinking User Interface Design and User Experience Planning of Forestrytech Application Using Design Thinking Method,” vol. 3, no. 1, pp. 11–18, 2024, doi: 10.14710/jtk.v3i1.44155.

[6] L. P. A. S. Tjahyanti and G. R. Sutama, “Pengaruh Desain Antarmuka Terhadap Keterbacaan dan Aksesibilitas untuk Pengguna dengan Disabilitas,” KOMTEKS J. Komput. dan Teknol. Sains, vol. 3, no. 1, pp. 5–9, 2024, [Online]. Available: https://ejournal.unipas.ac.id/index.php/Komteks/article/view/1951

[7] G. B. Thapa and R. Thapa, “Hubungan Rasio Emas , Matematika dan Estetika,” vol. 14, no. 1, pp. 188–199, 2018.

[8] M. klara A. C. S. D. Tukan, W. B. Nuba, and Dosinaeng, “Mathematics in the Arts : Study of the Fibonacci Series and Golden Ratio in the Song Hey Jude from The Beatles,” Gondang J. Seni dan Budaya, vol. 6, no. 1, pp. 59–66, 2022.

[9] A. Marzuqoh, T. Toheri, and I. Nursuprianah, “Rearrangement of The Song Suwe Ora Jamu Using Fibonacci Numbers and Golden Ratio,” Eduma Math. Educ. Learn. Teach., vol. 10, no. 1, p. 71, 2021, doi: 10.24235/eduma.v10i1.8064.

[10] Y. Yulius, “Pengaplikasian Golden Ratio Pada Perancangan Logo Dalam Perspektif Desain Komunikasi Visual,” Besaung J. Seni Desain dan Budaya, vol. 3, no. 3, pp. 94–99, 2021, doi: 10.36982/jsdb.v3i3.492.

[11] S. Fauzia, F. Eka, U. Syaripudin, and Y. Ichsani, “Perancangan Prototype Tampilan Antarmuka Pengguna Aplikasi Web Kamardagang.Com Dengan Teknik Flat Design Pada Pt. Selaras Utama Internasional,” J. Tek. Inform., vol. 9, no. 2, pp. 148–157, 2018, doi: 10.15408/jti.v9i2.5606.

[12] M. I. Nugraha, B. T. Hanggara, and B. S. Prakoso, “Evaluasi dan Rekomendasi Perbaikan Desain Antarmuka Pengguna Aplikasi Lumajang Bersahabat menggunakan Metode Usability Testing dan Pendekatan Human Centered Design (HCD),” J. Pengemb. Teknol. Inf. dan Ilmu Komput., vol. 6, no. 8, pp. 3847–3856, 2022, [Online]. Available: http://j-ptiik.ub.ac.id

[13] I. Safii and K. candra Brata, “Evaluasi Usability dan Perbaikan Antarmuka Pengguna Aplikasi Malang e-Policing dengan Pendekatan Human Centered Design,” J. Pengemb. Teknol. Inf. dan Ilmu Komput., vol. 4, no. 9, pp. 3037–3046, 2020, [Online]. Available: http://j-ptiik.ub.ac.id

[14] F. Nurliana, G. Hanifati, and F. Ali, “Analisis User Experience terhadap User Interface Website dengan Design Thinking,” Magenta | Off. J. STMK Trisakti, vol. 6, no. 02, pp. 971–991, 2022, doi: 10.61344/magenta.v6i02.90.

[15] W. P. Hapsari, H. M. Az-zahra, and P. Zulvarina, “Perancangan Desain Antarmuka Pengguna Aplikasi Pertunjukan dan Pembelajaran Kesenian Tradisional Menggunakan Pendekatan Human-Centered Design,” J. Teknol. Inf. dan Ilmu Komput., vol. 9, no. 7, pp. 1763–1770, 2022, doi: 10.25126/jtiik.2022976789.

[16] D. A. Budi, “Perancangan Sistem Login pada Aplikasi Berbasis GUI Menggunakan Qtdesigner Python,” J. SIMADA (Sistem Inf. dan Manaj. Basis Data), vol. 4, no. 2, pp. 92–100, 2021, doi: 10.30873/simada.v4i2.2961.

[17] R. P. Pramudita, “Penerapan Konsep Bilangan Fibonacci dalam Desain Web,” 2019, [Online]. Available: https://www.mathworks.com

Published

30-03-2025

How to Cite

Bangkit Indarmawan, N., Yoshananda, M. M., & Zaenul, A. (2025). Analisa Hierarki Tipografi Pada UI Web Menggunakan Hitungan Fibonacci Dengan Aplikasi Adobe Illustrator. Insect (Informatics and Security): Jurnal Teknik Informatika, 11(1), 25–33. https://doi.org/10.33506/insect.v11i1.4215

Issue

Section

Articles

Similar Articles

1 2 3 4 > >> 

You may also start an advanced similarity search for this article.