Control Website
The project's fourth phase involved designing and custom coding the Control Website, which enables users interacting with the project to change the design of the Main Website. The website has four sections: Layout, Typography, Border, and Color. They include various customizations such as layout padding, font size, border roundness, shadows, colors, and more.
The design process began with simple sketches and wireframes. Building the structure and thinking of a user-centered and easily accessible design. The video below provides a brief demonstration of the responsive behavior testing during the process.
Experimenting with different variables was essential in the design process. Testing each one was crucial to understanding which ones had the most significant impact on the overall design. These experiments helped immensely later in implementing custom presets. The video below provides a brief demonstration, but it is not the final result.
This custom React hook connects to a WebSocket server to synchronize and update CSS variables in real time. The server holds all variables, while the Control Website only listens and sends updates.
Experimentation and creating prototypes were a crucial part of the process. Testing different design variations was essential before starting coding, as it allowed for early identification of potential issues and helped refine the overall concept.
Bachelor Thesis 2025
The Power of Systematic Digital Design
Design and code