A design report showing how I created "CSSexy" through CSS-based design -- My CSS Zen Garden
The purpose of this website is to demonstrate what I have learned about the effective use of CSS and other web design techniques during the first half of this course. Just as with the CSS Zen Garden project, I was given an HTML document to format with CSS. This is the final Design Report in which I discuss my goals and technical implementation of the project.
I knew from the start that my Mini Zen page would have a definite theme to it, and much like the rest of the work I put into this project, I came to this theme as a result of simply playing with the style sheet. My first order of business was to load a picture and see what I could do with it. Having no idea what I was going to do with my page, I pulled a picture from my hard drive only for the reason that it would provide something pretty to look at while exploring what I could do with an image. In what became a theme for this project, I found out as I played with the photo that I really liked what I could do with it.
The photo that I used as the tiled background of my page served as my inspiration for my Mini Zen page. As I looked at the various Zen Garden pages I found very little of what I would call sexy designs. I decided my design would prove this can be done successfully and tastefully. This was the initial inspiration for “CSSexy.”
After uploading my background image for the entire page, I spent many days undertaking simple trial and error to position a row of my background image along each side of the page as well as a column above it. I did so by changing the margins and padding of all the elements on the page.
I wanted to solidify this tiled background surrounding my text content before I moved on to anything else. I made a major change near the very end of my work, removing the repeated image that I had tiled across the top of my page becuase of how pleased I was with my header image.
I created this image in Fireworks. I knew I wanted to incorporate the photo of the female in sunglasses because it fit my theme, but after doing so with a plain white background I knew it would need more work. Using my limited and ongoing knowledge of InDesign, I used the gradient tool and transparency to fade my custom pink color I chose (FFC0CB) and faded it into the flesh tones of the face.
I was originally attemping to fade from the skin tone to a darker pink across the right of the page. After hours of frustrating trial and error I was basically able to accomplish what I have now on accident. When I inserted this image onto my sheet I knew had something really good and decided to build the rest of my design around it and my first image.
At this point, it was too difficult to read the header block quote becuase of the pink background. This is the essence of my work on this project: making a change leads to a problem in another area, and I needed to work my way through a solution that would not, in turn, create more problems. That is to say, more problems I could not fix. To solve the problem of the header block quote text, I increased the font size and the rest of the text in that box proportionately. At this point, the h1 was too large to fit on one line and I had to shrink it down.
My strategy was to work my way down the page and try to finish one element at a time. I realized I had way too much pink in my container that took away from my header image. I changed the container background to white. To keep with the pink theme, I changed the background color of my resources section, the footer and the h3 tags. Here I had to make major changes to my resources section because the text was pushed all the way to the bottom of the page and I had at least 10 picas of empty space between my header and requirements with a line separating the sidebar pushing into the white space.
I tried to fix this but ran out of ideas for a solution. Dreamweaver saved me here. After using the program, it was instantly clear that my problem was a 100px margin in h3, when I had been trying to fix my problem in the resources section. As soon as I fixed this all of my requirements sections came together and my page, for the first time, looked like a real website. This got rid of the massive white space between all the level 3 headings before I tried to fix them. This was one of my pleasant surprises.
Some other problems I encountered and the solutions I came to:
Then I had some fun with my page, such as making the links in the purpose section blink. I discovered this function while playing with Dreamweaver.
I noticed that there was a small 3px line of my border showing through at the very top of my page. I simply created a custom pink line to cover to cover that up.
I noticed a line in between my headerand the purpose section in the area under the nose of the picture in the header. I was able to make this much less noticable by grabbing some of the white above that area and blending the area leading toward the nose.
It was not until the very end that I chose to give my page a title and I drew it into my header image. I think this was a very important step.
I tested my CSS in both Safari and Internet Explorer 6.0. Everything seemed to work almost exactly as expected in Safari except the flashing link code did not work.
I.E. created more problems. It seems it used a secondary text because the size is differnt. My background image is doubled up on the left and not present on the right. The size of my sidebar and footer are off, which negates the smooth flow of pink I had in Firefox. Overall though, it seems to degrade quite gracefully.
The background picture I used came from a legal download through a subscription to The personal website of Andrea Lowell
The face with sunglasses and flower picture are used courtesy of stock.xchng
I borrowed code snippets from Dave Shea's "the Zen of CSS Design" to assist image positioning in my sidebar.
The website PeachPit provided me with a good start to using some of the tools in Fireworks to make my header image.
I used "Adobe InDesign CS2 Classroom in a Book" by The Adobe Creative Team for some general layout and design tips as tool usage that could carry over to Fireworks.