I redesigned my website at http://people.emich.edu/lholt3/. The original site was used to store assignments, and other material for my studies at Eastern Michigan University. I wanted to create a new site a new website based on my old "Foolish Games" site. "Foolish Games" was a Jewel fan site created in 1997. Due to legal concerns, I stopped working on the website about two years ago. It seemed reasonable to create a new site design that would work for "Foolish Games" without the lyrics and multimedia downloads. I was faced with the task of creating a website that could host educational works and also appeal to Jewel fans who are typically 15-30 year old women. I decided to consult Steve Krug's Don't Make Me Think. The book focuses on web usability. I also reviewed material in The Non-Designer's Web Book by Robin Williams and John Tollett, and XHTML/CSS Basics for Web Writers by Margaret W. Batschelet. The Batschelet, and Williams and Tollett books describe the process of creating a website. The HTML and CSS elements are not as important as the design principles presented.
Adequate separation of the Jewel content from the English writing is an issue with this project. Steve Krug says in regard to design, "I should be able to "get it" - what it is and how to use it - without expending any effort thinking about it" (Krug 11). Mixing information for two different sites is problematic at best. The navigation must allow access to all pages on the site while separating the Jewel content from the rest. The site design will be used on foolishgames.com after the project is complete and it will not include the schoolwork. I thought about this problem for some time. I decided to focus on the Jewel site layout and color scheme. A template was created for the Jewel content with navigation at the top of the site, a white background, off-black text, and light blue and pink headings. I centered the website content in the center of the page. While it looked good, it failed to account for the English material. Krug offers an interesting fact of life, "We don't make optimal choices. We satisfice" (24). Users do not scan pages, but rather guess and try again if they fail. I had to include global navigation for both sites. The solution was to create a menu in the top left corner on every page of the website. The menu has three categories that drop down with extra content similar to tabs. The categories are general, English 328 and English 444. By selecting general, users can get to the home page with the Jewel content. The other two categories provide links to a portfolio of my work. As the menu appears on most pages of the site, users can get back to the right place if they guess incorrectly. Users should be able to "get it" with trial and error, and some will guess correctly on the first try
My site needed to target the intended audience of Jewel fans. Williams and Tollett suggest, "The more you focus your site on its goals and the more precisely defined your target audience is, the more efficiently and effectively you can present the information" (Williams and Tollett 88). I already know some information about the target demographic. I know they are typically women and they are younger. Most likely, they are familiar about using a web browser. Most fans are probably not technically savvy. Specific information needs to be easy to find. Batschelet states, "Audience is closely allied to purpose - knowing whom you expect to come to your site will make a difference in what you want your site to accomplish. Moreover, the nature of your audience will affect the kind of organization, design and navigation your site will use" (Batschelet 3). Using this advice, I created a navigation structure breaking content up into what I think users will want. I considered one-time visitors and repeat visitors. Some people will want to read news articles or see new content. Other people might be casual fans who rarely look at fan sites, and just want to browse pictures and news. I created five distinct links at the top of the page: home, biography, discography, news and pictures. Biographical information is often read only one time. Repeat visitors will not look at this material. New albums are released periodically which should be presented in discography. All types of visitors view news and pictures.
My new site is easier to navigation and it serves a purpose, but I still needed to improve its appearance. It was coded by hand in BBEdit with no help from graphics applications. The new design was created using a number of Adobe products including Dreamweaver, Fireworks, Illustrator and Photoshop. I used BBEdit to fine tune XHTML and CSS code. CuteFTP Pro was used for uploading pages. I used Dreamweaver to format my essays for the website. It was easier to see changes in the design. Illustrator was used to create the top navigation bar on the Jewel pages. I then broke up the image into five pieces using ImageReady and generated an HTML table. I adjusted the table in Dreamweaver to add the white space between entries and created the mouse over effect. Various images were resized in Photoshop. The FG logo was created in Fireworks. The globe at the top was made with clipart in Illustrator. Other images were resized and adjusted with Photoshop. I did most of the CSS and XHTML template coding in BBEdit that is a text editor similar to UltraEdit or Notepad in Windows; it offers syntax highlighting. The additional tools allowed me to create a visually appealing design not possible with only a text editor.
The final test was to have another set of eyes view the site. This process is known as usability testing. Watching a user interact with the site allows an author to find shortfalls in the design. My wife surfed the site for about five minutes. She found a few pages missing navigation. I made a note to correct the deficiency in the essay pages. Otherwise, she was able to find information. At first, I let her view the site without a goal. Then, I asked her to find specific information. She had success finding the requested information.
Certainly, my second website design has improved over its predecessor. The site is targeted at a specific audience of Jewel fans; it offers easy to use navigation, bright colors, and consistent style. Web design and graphics tools allowed me to enhance the visual appearance of the site. Simple usability testing allowed me to find several pages that require proper navigation. I am confident the site will be more successful than the previous incarnation.
Works Cited
Batschelet, Margaret W. XHTML/CSS Basics for Web Writers Pearson Education
Upper Saddle River, NJ 2007
Williams, Robin and Tollett, John The Non-Designer's Web Book Peachpit Press
Berkeley, CA 2006
Krug, Steve Don't Make Me Think New Riders
Berkeley, CA 2006
"Foolish Games" website
<http://www.foolishgames.com/> 14 June 2007