Web Page Layout Design


Shape Map

Shape Map



Process: I started the process with the idea that I wanted to share some fun tours that children enjoy in San Francisco. I started by sketching out several ideas until I came up with a layout I liked.  I knew I wanted my color scheme to be red and black with an accent color so I tried to find images that would go with my color scheme.  I then created my shape map in photoshop so I would have an idea of what my layout would like.  Once I had my shape map completed I started on my final project I removed an extra rectangle from my sketch and map because it didn’t look as good from paper to the photoshop.  I then searched online for images that went with the tours I wanted to highlight on my design. I took the images into photoshop and enhanced the photos by adding exposure,  saturation, and cropping. Once I got the photo’s the way I liked them, I did clipping mask to my shape map to make my web page come alive.  My audience was anyone who is traveling with children to San Fransico and ideas for food, lodging, and activities that are kid friendly. 

Critique: I critiqued Brittany Picket, Autumn Goettman, and Emmanuel.  I was critiqued by Autumn, Emmanuel, Carrie, Brittany, and Sister Peterson.  It was suggested that I align the menu bar, the footer, the typography and center the cluster of pictures. It was also suggested that I move down the San Fran since it appeared to be to close to the top.  I took all the suggestions offered to me made changes and for my final project. 

Fonts: Harrington- S F (Decorative Serif), Helvetica- Body, Menu, Captions (San Serif)

Color Scheme: Red, Black, White

Links to Images:


Boy Driving Boat

Boys Playing with Bubbles

Duck Boat in City

 Family  in front of Duck Tour and Daugther and Mother with Duck Beaks 

Golden Gate Bridge

Science Center