Zen Garden Project

Mind Map: I had originally thought to do something with Japanese Art but couldn’t specify enough what that meant to me as far as “zen”, so instead I’m going with the idea of baking, more specifically cupcakes!

Mood Board: As I said previously, I completely changed my idea for my Zen Garden site after hearing feedback from my classmates. I went with the one idea on my mind map that was completely opposite from the rest – cupcakes. It went through the concept of food -> junk food -> cupcakes, and also I find baking to be relaxing for myself and a lot of people, the idea of comfort food and baked goods go hand in hand. I made up a mood board of images that I found to be inspiring or already existing websites and companies along with illustrations and color schemes. I feel that this idea is much more solidified and I can do more with it then the previous one that I had in mind.

Design: I illustrated the cupcakes first and then designed the rest around their appearance. I decided on this color palette because it reminds me of actual flavors, colors you normally associate with cupcakes or sweet treats. Creating the roof/awning for the header was a real challenge, but I figured it out and I’m really happy with the result. I think that it gives the site a feeling of depth and brings the whole thing together. Not shown here are the rollover menus that are on the bottom three links. I messed around with the idea of a sidebar but I felt that it took away from the design. I realize that most people look to the top of a page for the navigation, so if this would function better at the top of the page I could easily fit it there.

Development: Here is a compiled screen shot of my final website for the Zen Garden project. As you can see, it’s a lot different then I originally started out with. After struggling for days to make the design work within one absolute screen, I had to make it a cascading site with the information scrolling down rather then all at one location. I had a really hard time getting all of the elements of the site to stay where they were supposed to – most of the time when I’d add a new DIV, the one I was previously working on would lose it’s place all together. I also tried to make the navigation bar a drop down menu, but the javascript attached to it was very confusing, so right now they don’t function aside from being rollovers. I have to say, this project was a lot harder then I thought it was going to be. I’m not very happy with the end result, but there’s only so much I could teach myself through online tutorials and playing a guessing game.
Also, here is a screen shot of what my site looked like in Dreamweaver. I knew that they weren’t going to look the same, but it was really getting frustrating to be trying to work and having everything where it’s supposed to be then opening up the live version and have it be all scattered (or, for a while in Safari, there wasn’t even anything showing up on my page.) I started getting in the habit of only working with the code and not even looking at the design screen in Dreamweaver. Refreshing the internet browser is a much easier way to see the accuracy of the CSS code.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s