Hannah Doolin: Interface Design

Design Strategy:
Although I did my poster design for The Chair Affair, I chose to do an interface design for The Mutt March, a non-profit event put on by the Michigan Humane Society, because I felt that I could be more creative with my design. Also, the event was created in memory of Laura Lee Greer, who was my friend’s grandmother. The family is very involved in the event, so I was able to use some photos and information that they had.
I decided to use a textured background because I thought it would make the site visually appealing. I chose a stock photo of grass because paired with the bone-shaped buttons in the foreground, I thought that this gave the feeling of a dog playing in the backyard. The next idea was to use bone shapes for the navigation buttons on my site. I used Illustrator to trace a photo of a Milkbone to do this.
For the headline bar at the top and for the container on each page, I used a bright blue color because it contrasted well with the green grass, and added a bright, playful look to the page. I used a font from dafont.com called Mandingo and decided to make it white because it contrasted well on the bright blue. When the viewer navigates from one page to another, the text on the navigation button changes from white to blue so that it is clear which page they are currently viewing.
To make the headline bar more interesting, I created a doghouse in Illustrator and placed it in the upper left corner of the page as a navigation button that would take the viewer to the Michigan Humane Society website if they wanted any more information about the organization. I then created little paw prints and the image of a dog walking off the page. As well as adding cute detail to the page, it also acts as a way to draw the reader’s eye from the left side to the right side of the page.

Choice of Typeface:
I used a font called Mandingo from dafont.com for the headline type and typeface used for the navigation buttons. I chose this font because it looked young and playful, which is what comes to mind when I think of dogs.
I used Rockwell for the information in the containers on each page because I thought that it stood up well to the quirky Mandingo type and is easily readable.

Color:
The red color used for the bone navigation buttons (C=0 M=100 Y=100 K=0) contrasts well with the green background and works well with the Michigan Humane Society logo on the homepage because of the red heart. I used this same color to outline the headline bar, for accents in the doghouse image, and for the photo bowl.
The bright blue color used for the headline bar and containers (C=80 M=46 Y=0 K=0) also contrasts well with the green background and adds bright color to every page.
For text that would link the viewer to another site, I used a brighter blue color (C=50 M=0 Y=0 K=0) to show the viewer that this was something that should be clicked on.

Photos:
Some photos were taken from online sources and some were scanned because they were my own images.
On the event page I used a screenshot image from Mapquest.com, which would be clicked on by the viewer to navigate to the map and directions to the event location.
I created the photo bowl in Illustrator as a fun interactive image that the viewers can click on to view photos from Mutt Marches in the past.