USER EXPERIENCE AND ORİGİNALİTY PROBLEMS IN USING CSS FRAMEWORKS

Öz

This article examines the emergence of CSS frameworks which is the next step of CSS code libraries, the reason for their usage and the impacts on web development processes. As a graphic design environment and element, CSS frameworks are examined both as a whole and by separating them into elements. While elements are individually examined for both genuineness and functionality, they are also examined in the context of graphical design principles. The principles are determined as integrity, explanation, emphasis, balance, order, area, contrast, rhythm, completion, continuity, ratio/proportion. The CSS framework elements and their relationships are examined in the context of the principles. In the analysis of CSS framework elements, the user experience (UX) that affect the design of CSS framework elements and the effects & limitations of the technologies used are especially taken into consideration. While making evaluations in terms of functionality, which is another criterion of the examination, especially the effects of user experience and technical features are emphasized. As a result of the analysis, it reveals the importance of CSS frameworks to obtain desired graphic effects in web design and suggestions are provided in this context.

Anahtar Kelimeler

• Graphic Design
• Web Design
• Interface Design
• CSS
• HTML
• CSS Framework
• Application Framework
• User Experience

CSS ÇATILARININ KULLANIMINDA KARŞILAŞILAN SORUNLAR VE ÇÖZÜM ÖNERİLERİ

Öz

Bu makalede, CSS kod kütüphanelerinin bir sonraki adımı olan CSS çatılarının (Framework) ortaya çıkış, kullanım nedenleri ve web geliştirme süreçlerine olan etkileri incelenmektedir. Bir grafik tasarım ortamı ve ögesi olarak CSS çatıları hem bir bütün olarak hem de öğelerine ayrılarak irdelenmektedir. Öğeler ayrı ayrı özgünlük ve işlev bağlamında incelenmekle birlikte aynı zamanda grafik tasarım ilkeleri bağlamında da irdelenmektedir. Söz konusu ilkeler bütünlük, farklılık, vurgu, denge, düzen, alan, karşıtlık, tartım (ritim), tamamlayıcılık, devamlılık, oran/orantı vb. olarak belirlenmiştir. CSS çatılarını oluşturan ögeler ve birbirleri ile olan ilişkileri ilgili ilkeler bağlamında incelenmektedir. CSS çatılarının öğelere ayrılıp incelenmesinde özellikle CSS çatı öğelerinin tasarımını etkileyen kullanıcı deneyimi (UX) ile kullanılan teknolojilerin etkileri ve sınırlılıkları göz önünde bulundurulmaktadır. İncelemenin başka bir ölçüt olan işlevsellik açısından değerlendirmeler yapılırken özellikle kullanıcı deneyimi ve teknik özelliklerin etkileri üzerinde durulmaktadır. Yapılan değerlendirmeler sonucunda elde edilen verilerden hareketle web tasarımında nitelikli grafik etkiler elde etmek için CSS çatılarının önemi ortaya konmakta ve bu bağlamda önerilerde bulunulmaktadır.

Anahtar Kelimeler

• Grafik Tasarım
• Web Tasarımı
• Arayüz Tasarımı
• CSS
• HTML
• CSS Çatısı
• Uygulama Çatısı
• Kullanıcı Deneyimi

Kaynakça

1. 1. Shenoy, A., & Prabhu, A. “CSS Framework Alternatives: Explore Five Lightweight Alternatives to Bootstrap and Foundation with Project Examples”, 25-26, Apress, Mumbai, 2018.
2. 2. Unger, R., & Chandler, C. “A Project Guide to UX Design: For User Experience Designers in the Field or in The Making (Second Edition)”, New Riders, Berkeley, CA. 35-36, 2012.
3. 3. “The Free Dictionary” www.thefreedictionary.com https://www.thefreedictionary.com/web+page Ağustos 20, 2021.
4. 4. Eva Harb, Paul Kapellari, Steven Luong, Norbert Spot, “Responsive Web Design”, iaweb, ws201, 18-17, Eylül 10, 2021.
5. 5. “W3C, Consortium”, https://www.w3.org/Consortium/, Eylül 13, 2021. 6. Niederst, J. “Web Design In A Nurshell”, O'Reilly, Sebastopol. CA, 2021.
6. 7. Meiert, J. O., “The Little Book of HTML/CSS Frameworks”, O’Reilly, Sebastopol, CA, 2015.
7. 8. Beck K., Johnson R., “Patterns generate architectures. 8th European Conference, ECOOP '94 July 4–8, Proceedings”, 139-149. Bologna, 1994.
8. 9. Otto, M., “Building Twitter Bootstrap”, https://alistapart.com/article/building-twitter-bootstrap/ , Ocak 17, 2021.

9. 10. Bradley, “The Pros And Cons Of CSS Frameworks”, https://vanseodesign.com/css/css-frameworks-pros-cons/, Mayıs 14, 2021.
10. 11. Çelik Özbahçe, G., “Responsive Css Frameworklerı̇ İle Yapılan Web Sayfalarında Ortaya Çıkan Özgünlük Problemı̇ Ve Örnek Bı̇r Responsıve Web Sayfası Çalışması”, Gazi Üniversitesi, Ankara, 2019.
11. 12. Turan, O. B., & Şahin, K., “Responsive Web Design And Comparative Analysis Of Development Frameworks”, The Turkish Online Journal of Design, Art and Communication, Ocak s., 14-16, TOJDAC, 2017.
12. 13. Budak, V. O., Gezer, M., “Farklı Ekran Çözünürlüklerı̇ İçı̇n Esnek Web Arayüz Yapıları Tasarlanması”, Ejovoc (Electronic Journal of Vocational Colleges), 10-24, 2016.
13. 14. Margalit, L., “Is Your New Website Layout Killing Your Engagement?” Neuroscience Marketing: https://www.neurosciencemarketing.com/blog/articles/horizontal-website-layouts.htm, Temmuz 11, 2021.
14. 15. Levene, M., “An Introduction to Search Engines and Web Navigation.” Wiley, London, 2010.
15. 16. “Semantic UI Steps.” semantic-ui.com: https://semantic-ui.com/elements/step.html, Eylül 07, 2021.
16. 17. “What is a carousel in web design.” https://elevationballoonacademy.com/xxkvm/what-is-a-carousel-in-web-design, Temmuz 11, 2021.
17. 18. Brown, J., “What Is Parallax Web Design? Definitions, Tips & Considerations”, https://www.unleashed-technologies.com/blog/what-parallax-web-design-definitions-tips-considerations, Eylül 10, 2021. 19. “World Wide Web Consortium CSS ANIMATIONS”, https://www.w3.org/standards/history/css-animations-1, Temmmuz 11, 2021
18. 20. Sayın, Z., “Grafik Tasarımda Etki. 2. Baskı.” Pegem Akademi, Ankara.
19. 21. “Web Technology Serveys”, https://w3techs.com/technologies/overview/css_framework, Mayıs 04, 2023.
20. 22. “CSS Tools: Reset CSS”, tarihinde https://meyerweb.com/eric/tools/css/reset, Mayıs 04, 2023.