This project demonstrated my knowledge of CSS-based design, mainly through trial and error. This report was done after finalizing the design of Gardens of Rapture. The design was inspired by a friend's poem, also titled Gardens of Rapture. This website was designed for Writing 351, taught by Dr. Charlie Lowe at Grand Valley State University.
I originally had absolutely no idea what I was going to do with this assignment, but after looking through some websites I found a bunch of pictures that inspired me in many different (and conflicting) directions. I thought about making a design using peace signs, but couldn't find any images that were elegant, interesting, or usable for this project. Then I read a poem a few days later by a friend (who wishes to remain anonymous) titled "Gardens of Rapture". After reading this poem, I knew that though it might seem un-ordinary to design a page with a garden theme on an assignment titled "Zen Garden", that I had found a great concept that I could work with.
I found while designing this website that CRAP (Contrast, Repetition, Alignment, Proximity) was extremely useful and important in the design process. To start out, I replaced the header div with an image. This image allowed me to create without the added usability issues of CSS. Once I made the image, I was able to start laying out the project much more easily. This was probably one of the best ways for me to start the design, and the image turned out exactly the way I intended, and as I found, website design often takes turns that are completely unexpected.
This design started out very boxy and in terms of alignment and proximity was very poorly done. I had the boxes (for divs: requirements, description, sidebar) with huge borders and laid out in a way so that I could make a background work. The background I wanted to use was beautiful, but I found that I couldn't make the design work with a busy background and have it contrast in the way it needed to (the background design was just too busy). After I removed this background, I replaced it with a solid color, and found that I could do a lot more with the design using simple images and still get the same effect that I was going for. In some ways, the current design is more representative of the garden theme.
As the design began to evolve, I experimented with many colors:
Eventually I found that the repetition rule was best, and stuck to a few basic colors. I also repeated the image used in the header in the footer (though it isn't extremely obvious, since I cut down the image). I also repeated the colors in the header in footer backgrounds, so that there was a sort of beginning and ending to the page. Repetition was also done with the bullets.
The layout was difficult, since I had to do some math with the proximity and size of the divs: requirements, description, and sidebar as well as their padding, margin, and borders (which I eventually removed) so that it aligned exactly with the div header and its size. The one thing that was set throughout the process was the header and footer, everything else was moved and eventually I found the three columns were the best in organizing the information and with my theme of a garden. The reason that each column is lower than the one to the left of it is so that it appears to be stairs, stepping into a different part of the garden.
Typography was the hardest for this, since the different sizes, back up fonts, colors, and heights and widths were difficult to narrow down. I thought different text would work to fill up space on the outer two columns but found the repetition was lost and it began to look a bit busy. Since the headers repeated, the text had to as well.
It was difficult to get the contrast element with this design, since I chose to make the background green. I used black text so it was easy to read, and contrast was important for the headers and links. The most important part – the header is contrasted greatly with the base, and draws immediate attention to the mission of the site and its title. I also gave the header and footer small 2px borders so the friction between the green and pink wouldn't strain the eye.
I also chose the green as the base for the page, since though there are many gorgeous colors in flowers, the base is always green grass. Green is (according to The Zen of CSS Design) associated with nature, earth, health and renewal, all of which are feelings one would get in a real garden. I found that with this theme, less is more. The design started out with lots of images and patterns and ideas, but I dwindled it down to a basic colors (pink-flowers, blue-sky, green-grass, yellow-sun, brown-dirt) inspired by my theme and the chosen images.
CSS design was probably one of the hardest projects of my college career. I spent three weekends working on the CSS of the design, and in the last two weeks have worked almost every day on the project. I went through three different designs before I was happy. The writing of the html for the report was not difficult for me since I was already familiar with html. It was extremely difficult overall, at times I felt like I was taking a language course. Luckily, I learned something about CSS and how designs can work, and I feel like I can understand the language very well now that I have worked with it so much.