Web Page Mockup Project

mock up

The purpose of this project was to use Adobe Photoshop and a grid format to create a wire-frame and final mock-up of a web page to submit to a client for review.

wire frame sketchshape map


  1. First, I hand sketched three designs with differing layout and home page features. After some thought, I decided to use my final sketch, with some elements from both of the first two.
  2. I downloaded a grid file provided by the class instructor, opened it in Photoshop, and re-saved it as my wire-frame file.
  3. Then, referring to the original sketch, I created markers on the wire-frame for my header, logo, navigation, body content including text and images, and the footer. I re-saved the Photoshop file and also saved it as a jpeg.
  4. I used Adobe Illustrator to create a logo, and then exported that logo as a png file for use in my Photoshop project.
  5. I created a duplicate Photoshop file from my wire-frame and used it as a starting file for my final mock-up.
  6. I placed actual elements and content into this new file, including the logo, text, and images. I also chose a color scheme and typography.
  7. I saved the final mock-up as a Photoshop file, and exporting it as a jpeg for sharing.

Critique Process

I was unable to do a full critique process this week due to personal and family illness, but I was grateful to have a critique from my friend, Dan, who is a professional web developer. Dan liked my choice of colors and also complemented me on my font picks. He suggested that I simplify the design by eliminating the blog post slider in favor of a featured article that linked to the blog. He also suggested I give the body elements some extra breathing room by increasing the spacing between them. I liked his ideas and when I implemented them the entire project looked a lot better.


The website attempts to entice people to assist the Friends of the Holbrook Animal Shelter charity by donating time or money, or adopting a dog or cat from the shelter.


The audience is members of the Holbrook, Arizona community.

Top Things Learned

I continue to learn that simplifying is often difficult, but can result in a finished product that is much more polished and effective.

Color Scheme & Color Names

I chose to use an analogous color scheme of red, brick, and orange.

  • Dark Red #8e393d
  • Light Brick #e4bd81
  • Medium Orange #e4a440
  • Neutral White #ffffff
  • Neutral Black #1a1919

Title Font Name & Category

Bitter (a Google font) // Slab Serif

Body Font Name & Category

Indie Flower (a Google Font) // Handwriting (script). Although I generally would avoid a script font for body copy, I felt that this particular font was easy to read and paired well with my title font.

Thumbnails of Original Unedited Images

The following images were downloaded from Deposit Photos with full usage rights.


social media icons

The following images were used by permission of Kim Jaster from Friends of the Holbrook Animal Shelter.