CSS Zengarden

Inspiration

For CSS Zen Garden, I wanted something that was bold and visually striking, so I went with an Art Deco style. But instead of sticking to the usual sharp lines and geometric patterns, I was inspired by Antoni Gaudí’s unique twist on architecture. Gaudí’s work is super creative and full of organic shapes, crazy mosaics, and vibrant colors, which adds a cool, unexpected vibe to the structured Art Deco style. My goal was to mix these two styles to create a design that’s both elegant and imaginative, with a hint of that wild Gaudí flair.

Getting started

After deciding on the Gaudí-inspired Art Deco theme, I wanted to bring that inspiration to life visually. To start, I chose one of Gaudí’s iconic buildings and began illustrating it in Adobe Illustrator. This process helped me break down his complex designs into simpler shapes and patterns that I could then translate into my CSS layout. The illustration became the foundation for my design, giving me a clear direction on how to blend Gaudí’s organic, flowing forms with the sleek, structured lines of Art Deco.

Applying the style

Once I had the style figured out from my Gaudí illustration, I moved on to the actual page design. I picked a color palette that mixes Gaudí’s bright, vibrant hues with the classic rich tones of Art Deco. Then, I applied these colors consistently across the whole site to keep everything looking unified. I also started rounding the sections and elements to bring in that organic, flowing feel that Gaudí is known for. This softened the sharp Art Deco lines and added a more playful, dynamic vibe. Combining these colors and rounded shapes helped blend the structured elegance of Art Deco with Gaudí’s unique, whimsical style, making the whole page pop with personality.

Final Touches

With the style in place, I moved on to the finishing details to really tie everything together. One of the key touches was finding the right font. I wanted a serif font that captured the elegance and sophistication of Art Deco but also complemented the more playful, organic elements inspired by Gaudí. After some searching, I found a font that balanced both vibes perfectly. Adding this font across the site helped enhance the overall aesthetic, giving the text the same polished yet artistic feel as the rest of the design. These final touches brought everything together, making the page feel complete and true to the vision I had from the start.

Dynamic Poster

Inspiration

For this dynamic poster, I wanted to create something that would not only look great but also capture the essence of my favorite movie, The Lord of the Rings. One scene that has always stood out to me is when Gandalf and Bilbo are smoking on the bench in the Shire. There’s something so peaceful and timeless about that moment, and I wanted to bring that feeling into my design. The idea was to use CSS animations to make the poster feel alive, just like the scene.

Resemblence Scene

Getting started

I began by sketching out the background scene with pencil and paper, focusing on capturing the peaceful setting of Gandalf and Bilbo on the bench. My goal was to get the overall mood and composition right before adding any dynamic elements. Once the background was sketched, I recreated it in Adobe Illustrator, knowing I would later illustrate and animate the dynamic elements like the moon and swaying tree using CSS.

Recreating the Scene

Once the background sketch was ready, I moved on to recreating it digitally in Adobe Illustrator. I focused on translating the peaceful Shire setting into a clean, digital format, ensuring that the colors and composition reflected the calm atmosphere of the scene. The background set the stage for the dynamic elements, which I planned to add next. With the background in place, I turned my attention to the dynamic elements from the sketch. I illustrated the characters, moon, the swaying tree, and other small details, keeping in mind how they would eventually move on the screen.

Background drawing design process illustration

Combining and Adding Effects

With both the static background and dynamic elements completed, I focused on integrating them to create a cohesive poster. I combined the illustrated background with the animated elements, ensuring that everything worked seamlessly together. To make the dynamic elements truly come to life, I added effects like gentle movement to the heads and a subtle sway to the tree. I fine-tuned these animations to enhance the serene atmosphere of the scene, ensuring the motions were smooth and natural. These final touches brought the poster to life, capturing the peaceful essence of Gandalf and Bilbo’s moment in the Shire while making the entire piece feel interactive and engaging.