Chugging along in my web design program, I have come up to the CSS Zen Garden project and came to a full stop. This website has been around for a long time, giving advanced and novice web designers a way to showcase their skills and the capabilities of CSS. My task is to go forth and do the same as designers in the past.
This project requires me to change the look of the CSS Zen Garden website by using CSS only WITHOUT TOUCHING THE HTML! Can this be done? Sure, the website has a library of successful attempts. But can I do it? That is the big question.
Throughout the course, we’re taught to learn from what others have done, to check out their code and find out their secrets. This website makes it simple by including every contributor’s html and CSS files.
To pick which designs to help inspire me, I searched through 218 designs.
Out of those, two designs stood out the most to me.
In the “Apothecary” design, it sets itself apart from all the rest with a turn-of the century, old school feel to it that none of the other designs have. The images, colors, and font choices give a cohesive look that is easy to read, unique, and simple. The CSS code looks simple enough, almost like something that I could potentially pull off.
In the “A Robot Named Jimmy” design, animation, bright colors and a simple to read font were used to bring an eye-catching whimsical feel to the design. Aside from the Apothecary design, this design used the full SVG code to add the graphic details. Some CSS transitions were also utilized in the design.
After delving a little more into the code of other authors in the library, I think I may be ready to start laying out my own interpretation of CSS Zen Garden. First I created a moodboard. I started one not really having any idea on what I was going to create. After researching “soothing colors”, it all stemmed from there. You can check out my moodboard by clicking here.
Then I moved on to my wireframe. I was taught that the mock-up should be in grayscale to not distract the client from the layout. Since the client is me, I went ahead with full colors. I designed it in Canva. It’s a free tool for people who aren’t graphic designer to build something beautiful. I use it quite often in my job. I originally started out trying to create my mock-up in Illustrator, but I’m just not that comfortable with it yet. As you can see in my wireframe on the left, I’ve got some pretty grand visions on how I want my version of the CSS Zen Garden to look like. I didn’t feel that I needed any images but I wanted to stick with gradients, geometric shapes and the clean color scheme. I will incorporate the circle image below that I pulled from Canva. I hope to use it in the background.
Now I am in the process of creating my version of CSS Zen Garden. It is still a work in progress, but you can see the most recent updates by going to –
http://www.clorecreative.com/ZenGarden/
