CSS

Introduction

For my project, I was tasked with creating a CSS Zen Garden page, transforming a basic HTML template into a visually appealing design through the use of CSS. I chose a minimalist theme, focusing on clean lines, ample white space, and simple typography. The goal was to create a design that felt calm and balanced, allowing the content to breathe while maintaining a sense of elegance and simplicity. Through this minimalist approach, I aimed to demonstrate how thoughtful use of CSS can turn even the most basic elements into a cohesive and visually engaging experience.

Research

Moodboard

Lofi/Medium fi

Lo-Fi Wireframes To begin visualizing the structure and layout of the website, I created low-fidelity (lo-fi) wireframes. These basic sketches focused on the arrangement of elements and the overall navigation flow without diving into detailed design elements. The lo-fi wireframes helped me quickly iterate on ideas and establish a solid foundation for the layout.

Building upon the lo-fi wireframes, I developed medium-fidelity (medium-fi) prototypes. These prototypes included more detailed elements such as typography, basic color schemes, and initial interactions. The medium-fi prototypes allowed me to refine the user experience and get closer to the final design while still being flexible enough to make adjustments.

Hi fi

With the medium-fi prototypes as a foundation, I created high-fidelity (hi-fi) prototypes. These included detailed design elements such as refined typography, final color schemes, and polished interactions. The hi-fi prototypes provided a realistic representation of the final product, allowing for thorough user testing and final adjustments before development.

Final Design

Building on the hi-fi prototypes, I implemented the final design using HTML and CSS. This stage involved perfecting all visual details and ensuring the design was fully responsive and accessible. The result was a polished, fully functional website that captures the elegance and sophistication of the Art Deco theme. You can view the final design on CSS Zen Garden here