Background Image

Main Website

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.

Technologies
Figma
React
Next.js 15
Node.js
Typescript
Tailwind CSS
Lenis
Design System
Duration
2 months
Live Website

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.

Rules
Template

The project was custom-coded from the ground up. Version control was used throughout the entire process to document and track every change.

Template
Template

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.

Template

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.

Rules

Bachelor Thesis 2025

The Power of Systematic Digital Design

Design and code

Yoana Tacheva