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



One thought on “Web Page Layout Design

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s