Project 5: Interface Website Design: Alyssa Hillman

Here are just a few pages of the website design:

Walk a Mile in My Shoes is an event that is sponsored by the Syracuse Rescue Mission. This cause is to raise money for the organization and to also spread awareness of the issues of poverty and homeless in the community. The current website for the event is confusing and cluttered with too many options and information that is not necessary. My main goals were to incorporate my poster design (from a couple of projects ago) and to eliminate the extra information.

The headline includes the title of the event as well as the first navigation bar (which is to navigate throughout the Rescue Mission Website, not just the event’s). This bar included information such as volunteer opportunities (shown in the active page), employment opportunities, the organization’s mission and their home page. I decided when the mouse hovered over the selection; it would turn from italics to regular type and would have a gray box surround it displaying the menu options. Another active option was with the shoe navigation bar (left side), when the mouse hovered over the different shoelace sockets, it would turn red and the name selection would pop up. I did a pop up selection bar because with all of the selections showing, it was very cluttered and difficult to space. Throughout the website, I strived to be as simple and clean as possible in order to shadow the Rescue Mission’s current organization website.

I wanted to maintain a separation between the information and the shoe and I did this with the gray line (part of the shoe) and the advertisements.

The color scheme is mainly white, black, gray, and red. These colors do pop and are still readable on a computer screen. They hold a contrast but do not clash. I used the red (RGB 190, 30, 45) as a visual hierarchy tool as well as the many different fonts I used. For the actual information sections for each page, Avenir was the basic font family. I did this because not only was it readable but a modern and versatile family with many different options for use.

For the headline, I did use the vertical height tool in order to align the different letters. For instance, the L and I in “Mile” and the L and K are not naturally that tall but I made their vertical height 115% in order to create a margin. I was also able to match the A in “Walk” and the E in “Mile” so that they were also similar in height. Also in the headline, I used kerning to fix the distance between “Walk” and “A”. For the rest of the headline, I used a serif for “In My” and a italics serif for “Shoes”. Because “In My” was smaller, I knew that the serif would help it stand out as well as a nice contrast from the Legacy-italics “Shoes”. The shoelace wraps the W as both a symbol of a hug and shows a sense of three dimensions (done by tracing the original ribbon and then placing the new ribbon on top of the text).

The shoe graphic itself is purposely off center in order for the audience to see its simplicity but also become curious because the whole shoe is not seen. I applied the Gestalt principle because in this case, the parts are greater than the whole.

I did this project in InDesign because I was having a hard time understanding the layer concept in Photoshop. I also designed the website on tabloid paper so I would be able to hit the exact dimensions that transferred to 11.11 inches x 8.33inches.