The project's third phase was designing and custom coding the Main Website, which offers a fun and easily accessible look into the world of modern digital designers. It has diverse layouts, various components, and a wide range of sections focused on systematic digital design. The design components aim to convey the designers' experiences and design process creatively. These components serve as both a means of storytelling and a demonstration of the Nexa Digital Design System.
The design process began with simple sketches and wireframes. Each section fills the entire viewport depending on the different screen dimensions. The video below provides a brief demonstration of the responsive behavior testing during the process.
Every section is designed to be responsive. During the design process, it was crucial to ensure that the design was not static but dynamically responding across various devices with different characteristics and screen sizes.
The project was custom-coded from the ground up. Version control was used throughout the entire process to document and track every change.
The Control Website allows users to customize various variables, including border roundness, shadows, colors, and more. The changes apply instantly on the Main Website. This is possible because Nexa Digital Design System is applied globally. The video below provides an overview of the Main Website, and it is not the final result.
Thinking of how to introduce the designers' experience and design process creatively was an essential part of the process. The concept of the website is to ensure that designers recognize themselves in an imaginary character named Eva, which is built from UI components such as toggle buttons and add button.
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