The purpose of this project is to demonstrate what you have learned about effective CSS and other web design techniques during Unit 1 of the course. Just as with the CSS Zen Garden project, you will be given an HTML document to format with CSS. You will also submit a final design report in which you discuss your goals and technical implementation of the project.
Every class member will have some input in final grading of this project. After the project submission date, the full class will review and vote on their favorite submissions.
Upon the first assignment of this project, I came up with a design that I though might be possible after looking at some of the other designs that were on display at the CSS Zen Garden web site. This design involved a night time city skyline of Grand Rapids, with the Amway Grand Plaza and Plaza Tower buildings providing the vertical borders of the page body. Here is the original design plan from MS Paint.
This new design is the result of the failure of the original idea. The color scheme that it has is not only the colors which I tend to associate myself with most, but they also convey the same theme that I like to see in graphic art. Similar to What Lies Beneath, this page features a strong, dark overall tone. Emerging from this darkness are these bright and bold colors, like stars transecting the night sky.
Beginning with the original design’s plan, I set out to downtown Grand Rapids with a digital camera, taking pictures of the two primary buildings, and the rest of the city from many different spots. One of the greatest problems from this step of the project was the weather. I wanted a day that was going to have a good dusk that I could get pictures of. Eventually, I had to just settle on a cloudy, somewhat rainy day, due to time constraints.
With these picture files, I began editing in Fireworks to clear out some of the backgrounds to get the shape I needed. When I actually tried to program these images into a CSS, it was just a mess and turned out nothing like I wanted. The pictures never turned out the right size and all of them ended up behind the images that were in Dr. Lowe's CSS that I was initially modifying. So after all that, I gave up and started from scratch again. I still have many of the half-way edited picture files saved in my CSS project folder.
This point was Monday, October 23, three days before the project was due. After an email expressing my frustration with the project and inability to recognize and manipulate the coding, I deleted the previous CSS and saved a brand new one to begin editing. This resulted in two more days of brief attempts and deletes of things that still did not work.
Wednesday night involved an all-nighter working on, among three other large assignments, the CSS document. Once more, at 7:35 AM, I emailed Dr. Lowe, convinced that I would not be able to finish the project within the day. At that point, I was tired, shaking from a combination of lack of heat and being hyped up on caffeine, and extremely hungry. That email was an offshoot of the anxiety I had in my state of mind in that moment.
After I sent the email and the caffeine jitters wore off, I began working on the CSS once more as I was waiting for a response. For some reason, at this point, the stuff just clicked. I continued on switching colors around, adding borders, and switching float positions around, until I ended up with this new design.
The moon image is the only graphic that I borrowed. It was posted by the user Pat-swan on stock.exchng and can be found here.
The rest of the design is additions to and modifications of the CSS design sheet posted by Dr. Charles Lowe.
