Before I actually started physically redesigning the min-zen web page I had to map out some of the ideas I intended to use for the process. Peaceful imagery, simplicity, flow, and a strong theme were all elements I wanted to incorporate into my design. I realized that this project was intended to reflect some of the ideas and layout designs we learned through reading The Zen of CSS design so I specifically tried to incorporate these ideas. I tried to accomplish flow and simplicity in my design by only using pictures, colors, and fonts that lend themselves to the theme. I tried to use soft colors for headings and grey tones for the background of the container so that it would be easy on the readers eyes. I chose a theme implementing the outdoors and nature – something with a little zen.
I decided that the overall theme of my design would be influenced most by the imagery. I also knew that imagery options would be somewhat limited due to copyright regulations. Because I did not want to infringe upon such laws I had to choose between using free stock photography available for public use or pictures I had taken previously with my digital camera. I chose the latter. Eventually I came across a photograph overlooking the landscape viewed from the living room of my parents house. I used this photograph for both the container and the background of my design. However, the container uses only the top half of the photograph and the background only the edges of the photograph. I wanted the different forms of the same picture to compliment eachother. The background image allows the viewer to see what is most apparent in the immediate foreground of the photograph: grass, a bird feeder, woods. The header/container image provides for a more distant, landscape view: sky, barn, rolling hills. I think they compliment each other because certain trees and landscape are included in both the container/header region and background region. I also used different forms of transparency with my imagery to make layers look smoother.
I used Lucida Caligraphy for my heading type font and Courier for my paragraph font to keep things creative and simple. I created the main title heading using InDesign so I could manipulate the shape and color of certain letters to my desire. At one point during the design process, I tried usind fancy boxes around each heading to seperate the different paragraphs, but it made my page too cluttered.
I used a variety of techniques while redesigning the mini-zen page. Experimentation through trial and error was probably the technique I used the most. Randomly changing aspects of the original design and seeing what happened allowed me to see what functions did what and how I might use these functions to manipulate the design I wanted. I found that using the extension developer tool used with firefox allowed me to experiment and layout my design even quicker than Dreamweaver did. I also found it advantageous to view my design as I went along through the Firefox browser - being that it provides a better standard and display when compared to Microsoft's Explorer and Dreamweaver's content viewer. I also looked at the html guides, css guides, design and layout guides, etc links provided by our Professor at the course Website.
I encountered several problems that complicated the design process and completion process. Figuring out what specific CSS code manipulated what aspect of design, html, or style was often a difficult task. Aligning the container Background made in Fireworks with the html was surprisingly very simple – it just required a lot of trial an error.
I was unable to submit my finished design on time due to communication problems, technology problems, and personal lack of knowledge regarding how one properly posts a website onto GVSU's network. Failing to read or not completely reading certain documents allocated in the course website contributed in part to this error. Some of the links given to me to help remedy my situation either A. I did not understand, B. were under construction, or C. were useless. Technology problems were also an issue. GVSU lab computers could not transfer files to my N Drive via USB drive, let alone hardly read the files on my USB drive.
Eventually, Through GVSU's tech support page I figured out how to at least transfer my files to the network via ftp and perhaps gained a vague idea about how I was suppose to post a web page. When I still could not figure it out I decided to contact my Professor and all the students in my class, asking for help. Two classmates were kind enough to provide me with help, suggesting I place the files for my redesigned page under a folder labeled public_html. One of these two students informed me that I had to create this folder myself, had to make sure that I didn't make it under my documents folder, and even gave the url I could type into my browser to check if I followed the steps correctly. It Worked! Despite these few set backs I really enjoyed working on this project and learned quite a bit about design and code.
Assignment Home style sheet courtesy of stock.xchng. Tools used to help make my design include: Macromedia Dreamweaver and Fireworks, Firefox Web Developer Extention. Credit also goes to Professor Lowe and Classmates who helped with technical issues and design issues. Design for navcontainter links influenced by design by Eric Meyer. Design and Layout in General influenced by the many web designs at Zen Gardens.
Chris Slighly
Writing Major
Grand Valley State University
Slighlyc@student.gvsu.edu
November 2006