Abstract
The appearance of the application provides one of the first impressions that can engage the user and keep his interest. With many different applications with similar functionality, this element must not be underestimated during application development. Various procedures and methodologies are used to design applications. Many of them are relatively narrowly oriented and face various limitations when deploying them in complex web applications. The article describes selecting a suitable methodology, effective implementation, explanation of the critical points of the skinning process, and examples of skins for the day, night, and colour-blind mode created for the application. The basis of the proposed system skinning philosophy are techniques used for the organization and writing CSS code using the form of ITCSS methodology with BEM naming convention in combination with the capabilities of the SASS preprocessor. The article evaluated the implemented skinning philosophy, the visual design of the system, and the created skins. Subsequently, it presents the benefits of the proposed solution for the developers of similarly proposed applications. The application of defined procedures is described in a case study focused on skinning the web application Priscilla (https://priscilla.fitped.eu), a system focused on teaching and learning in programming for high schools and universities.
This is a preview of subscription content, log in via an institution to check access.
Access this chapter
Tax calculation will be finalised at checkout
Purchases are for personal use only
References
Acart Communications. (2017). Contrast checker. Retrieved from https://contrastchecker.com/
Adhuham, M. (2020). A complete guide to dark mode on the web. Retrieved from https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
Adobe. (2021). Adobe Color. Retrieved from https://color.adobe.com/create/color-accessibility
Al-Zewairi, M., Biltawi, M., Etaiwi, W., & Shaout, A. (2017). Agile software development methodologies: Survey of surveys. Journal of Computer and Communications, 5(5). https://doi.org/10.4236/jcc.2017.55007
Arsenault, C. (2019). OOCSS – The future of writing CSS. Retrieved from https://www.keycdn.com/blog/oocss
Attardi, J. (2020). Modern CSS: Master the key concepts of CSS for modern web development. Apress.
Blažek, L. (2019). Dark Mode teď prostě frčí. Retrieved from https://blog.newlogic.cz/development/html/dark-mode-ted-proste-frci/
Böck, M. (2020). Color theme switcher. Retrieved from https://mxb.dev/blog/color-theme-switcher/
Borody, D. (2017). Theming web apps with SASS. Retrieved from https://medium.com/@dmitriy.borodiy/easy-color-theming-with-scss-bc38fd5734d1
Chua, S. H., Zhang, H., Hammad, M., Zhao, S., Goyal, S., & Singh, K. (2015). ColorBless: Augmenting visual information for colorblind people with binocular luster effect. ACM Transactions on Computer-Human Interaction, 21(6). https://doi.org/10.1145/2687923
Dowden, M., & Dowden, M. (2020). Architecting CSS: The programmer’s guide to effective style sheets. Apress.
Eastabrook, J. (2020). CSS skinning: Let your visitors choose the style.
Etemad E. J., & Atkins, T. (2018). Selectors level 4. Retrieved from https://www.w3.org/TR/selectors-4
Feigenbaum, R. (2020). The complete guide to the dark mode toggle. Retrieved from https://ryanfeigenbaum.com/dark-mode/
Fomitchev, M., Garrood, S., Lacey, J.-D. K., & Rojas, J. J. (2007). System and method of skinning themes. Canada.
Ginnivan, C. (2020). Who can use this color combination? Retrieved from https://whocanuse.com
Google. (2021). Responsive layout grid. Retrieved from https://material.io/design/layout/responsive-layout-grid.html
Grant, K. J. (2018). CSS in depth. Manning Publications.
Harrell, J. (2017). Unlocking the benefits of CSS variables. Retrieved from https://www.jonathan-harrell.com/blog/unlocking-the-benefits-of-css-custom-properties
Jenny, B. (2020). Color Oracle. Retrieved from https://colororacle.org
Kalifa, F. (2020). Dark mode on the web: UX, DX and technical exploration for inclusive dark mode. Retrieved from https://fatihkalifa.com/dark-mode-web
Kojima, N., Ichihara, Y. G., Ikeda, T., Kamachi, M. G., & Ito, K. (2012). Color universal design: Analysis of color category dependency on color vision type (3). In Color Imaging XVII: Displaying, Processing, Hardcopy, and Applications (Vol. 8292). Retrieved from https://doi.org/10.1117/12.907669
Kudrna, A. (2019). Dark mode s CSS custom properties: přístupnost v atraktivní podobě. Retrieved from https://frontend.garden/dark-mode-s-css-custom-properties/
Maleki, N. G., & Ramsin, R. (2018). Agile web development methodologies: A survey and evaluation. Studies in Computational Intelligence, 722. https://doi.org/10.1007/978-3-319-61388-8_1
Michálek, M. (2017). BEM: Pojmenovávací konvence pro třídy v CSS. Retrieved from https://www.vzhurudolu.cz/prirucka/bem
Molina-López, J., & Medina-Medina, N. (2019). Design proto-patterns to improve the interaction in video games of people with color blindness. In ACM International Conference Proceeding Series. Retrieved from https://doi.org/10.1145/3335595.3335612
Morgan, C. (2021). My dark theme implementation. Retrieved from https://chrismorgan.info/blog/dark-theme-implementation/
Okabe, M., & Ito, K. (2002). How to make figures and presentations that are friendly to color blind people.pdf. http://Jfly.Iam.U-Tokyo.Ac.Jp/Color/Index.Html
Pedersen, L. A., Einarsson, S. S., Rikheim, F. A., & Sandnes, F. E. (2020). User interfaces in dark mode during daytime – Improved productivity or just cool-looking? In Lecture Notes in Computer Science (including subseries Lecture Notes in Artificial Intelligence and Lecture Notes in Bioinformatics) (Vol. 12188 LNCS). Retrieved from https://doi.org/10.1007/978-3-030-49282-3_13
Pickering, H. (2019). Inclusive components. Smashing Magazine.
Riegler, A., & Riener, A. (2019). Adaptive dark mode: Investigating text and transparency of windshield display content for automated driving. Mensch Und Computer 2019 Workshop on Automotive HMIs.
Roberts, H. (2014). Managing CSS Projects with ITCSS. Retrieved from https://csswizardry.net/talks/2014/11/itcss-dafed.pdf
Ryobi Systems Co. (2020). Visolve – the assistive software for people with color blindness. Retrieved from https://www.ryobi.co.jp/products/visolve/en
Skalka, J., & Drlik, M. (2018). Priscilla – Proposal of system architecture for programming learning and teaching environment. In IEEE international conference on application of information and communication technologies. Retrieved from https://publons.com/publon/27387754/
Skalka, J., & Drlík, M. (2018). Conceptual framework of microlearning-based training mobile application for improving programming skills. Advances in Intelligent Systems and Computing, 725. https://doi.org/10.1007/978-3-319-75175-7_22
Skalka, J., & Drlík, M. (2020). Educational model for improving programming skills based on conceptual microlearning framework BT. In M. E. Auer & T. Tsiatsos (Eds.), The challenges of the digital transformation in education (pp. 923–934). Springer International Publishing. https://link.springer.com/chapter/10.1007/978-3-030-11932-4_85
Skalka, J., Drlik, M., Benko, L., Kapusta, J., Del Pino, J. C. R., Smyrnova-Trybulska, E., et al. (2021). Conceptual framework for programming skills development based on microlearning and automated source code evaluation in virtual learning environment. Sustainability (Switzerland), 13(6). https://doi.org/10.3390/su13063293
Snook, J. (2012). Scalable and modular architecture for CSS (second). Snook.ca Web Development, Inc. Retrieved from http://smacss.com/
Tailwild Labs. (2021). Responsive design. Retrieved from https://tailwindcss.com/docs/responsive-design
Taivalsaari, A., Mikkonen, T., Pautasso, C., & Systä, K. (2017). Comparing the Built-In Application Architecture Models in the Web Browser. In Proceedings – 2017 IEEE international conference on software architecture, ICSA 2017. Retrieved from https://doi.org/10.1109/ICSA.2017.23
Team, B. (2021). Grid system. Retrieved from https://getbootstrap.com/docs/4.0/layout/grid
Torrecilla-Salinas, C. J., Sedeño, J., Escalona, M. J., & Mejías, M. (2015). Estimating, planning and managing agile web development projects under a value-based perspective. Information and Software Technology, 61. https://doi.org/10.1016/j.infsof.2015.01.006
Tzucker, J. (2019). Coding a CSS theme switcher – A multitude of web dev options. Retrieved from https://joshuatz.com/posts/2019/coding-a-css-theme-switcher-a-multitude-of-web-dev-options/
Wang, Y. D., & Emurian, H. H. (2005). Trust in E-commerce: Consideration of interface design factors. Journal of Electronic Commerce in Organizations. https://doi.org/10.4018/jeco.2005100103
Watson-Nolan, A. (2019). The front-end tooling survey 2019 – Results. Retrieved from https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results#css-processors
WCAG. (2012). Web content accessibility guidelines (WCAG) overview. Web Accessibility Initiative (December 2008).
Williams, S. (2017). Theming with CSS custom properties. Retrieved from https://ramenhog.com/blog/2017/06/07/theming-with-css-custom-properties
Yazid, M. A., & Jantan, A. H. (2017). User experience design (UXD) of mobile application: An implementation of a case study. Journal of Telecommunication, Electronic and Computer Engineering, 9, 197–200.
Acknowledgements
This research was funded by European Commission under the ERASMUS+ Programme 2018, KA2, grant number: 2018-1-SK01-KA203-046382 “Work-Based Learning in Future IT Professionals Education”, Ministry of Education of Slovakia, grant number 004UKF-2-1/2021 “Preparation and development of teaching courses in English with a focus on artificial intelligence in the form of blended-learning”, and Ministry of Education of Slovakia, grant number: 2020/8148:34-A1101 “Support for the development of practical skills of UKF students in Nitra”.
Author information
Authors and Affiliations
Corresponding author
Editor information
Editors and Affiliations
Rights and permissions
Copyright information
© 2022 The Author(s), under exclusive license to Springer Nature Switzerland AG
About this chapter
Cite this chapter
Sabol, D., Skalka, J. (2022). The Architecture of Visual Design in Modern Web Applications. In: Smyrnova-Trybulska, E., Kommers, P., Drlík, M., Skalka, J. (eds) Microlearning. Springer, Cham. https://doi.org/10.1007/978-3-031-13359-6_11
Download citation
DOI: https://doi.org/10.1007/978-3-031-13359-6_11
Published:
Publisher Name: Springer, Cham
Print ISBN: 978-3-031-13358-9
Online ISBN: 978-3-031-13359-6
eBook Packages: EducationEducation (R0)