Design Report
My Personal Web site is entitled Limelight. The overall theme is based on limes, both in the form of images and a play on words leading to limelight.
The following Design Report briefly describes my design process and the final design.
Rhetorical Situation
In addition to showcasing my HTML and CSS skills, this Web site began as a way for me to share a few writing samples and my resume with family, friends and potential employers.
Since I was pursuing freelance writing as a career when I created this Web site, the professional and non-fiction writing samples and resume were useful for potential employers and networking.
The short stories and poetry samples are more of a way to express myself and show family and friends what I am capable of.
The mini biography and contact information are helpful to all visitors. Providing personal information about myself in these venues allows readers to think about my writing in terms of who I am as an individual, an author, and a writer instead of just a piece of writing.
It is important for people to realize that I am as much a part of my writing as my writing is a part of me. The two entities are inseparable, yet unique whether the piece is of a creative, non-fiction or professional nature.
Design Strategies
From the moment I began working on the CSS for this web site, I knew it would utilize ample white space. I wanted to depart from the tone of my previous design, Brick Buddha Mini Zen. That design is built upon a cold, earthy feeling. With this design I aimed for a bright, spring tone in this design.
Since this is a personal web site, I wanted my name to be prominently displayed on each page. Redesigning a previous personal logo to incorporate my new married name was the perfect way to do so. The logo was created, revised, and resized using Macromedia Fireworks and included in the page using image replacement. The logo also establishes the color tome to be used in the entire design.
As a way to balance the amount of white space and add a bit of color, I incorporated horizontal and vertical lines. This way the white space is divided into sections, while still retaining an open, light feeling. Lines also lend a sense of organization and visual flow to the pages. They are also a good way to add a bit of contrast to the page without overwhelming the eye.
In addition to color, I have also incorporated a seamless image to the left-hand side of the page. The image helps to anchor the design to the lime green color and the lime theme simultaneously. It also helps to add visual contrast in terms of weight. The image is heavier than the white space utilized elsewhere, but not overpowering.
The addition of the custom bullet point ties into my personal logo at the top of the page. By incorporating the small, purple flower in the sidebar, I have extended the color scheme of the logo to other areas of the page.
Hyperlinks in the sidebar and body text also incorporate the purple and lime shades of the logo. When the cursor is placed of active links, the text is surrounded by a lime green rectangle. Once visited, links are displayed in the purple shade. These CSS properties are a small, yet easy way to improve the page and tie even the smallest elements together.
Working Process
Compared to previous CSS and HTML coding, this design progressed extremely quickly and easily. Not because this design was simpler or less technical than its predecessors, but because I had more coding experience and confidence to encourage me throughout the whole process.
Most of my revisions focused on finding the right image for the left edge of the page and sizing my logo. I tried various images before settling on the lime slice image. The current image works well because it is seamless and scrolling.
By scrolling, the image repeats as necessary based on the length of the body text without leaving gaps of white space near the bottom of the page. After some editing in Macromedia Fireworks, the image is also the perfect size and shade of green. It is not too big, too distracting, or too bright in comparison to the rest of the page.
Deciding how to balance the size of my logo in the header of the page also called for a series of revisions. I originally designed a larger logo as a way to incorporate my name on each page. The logo itself was good, but it took up too much "above the fold" space on the page. As a way to move more content into this high visibility area, I diminished the size of the logo. Doing so allowed my logo to still be seen, while simultaneously moving more relevant content towards the top of the page.
Design Credits
I wrote the entire HTML code myself, but I did borrow two image files to complete the overall design. The flower bullet points utilized in the sidebar are courtesy of Bullet Madness. The seamless lime slice image featured on the left hand side of the screen is courtesy of Silvia Hartmann. I have edited both files for size and shape using Macromedia Fireworks so that they fit the overall theme and needs on my design.