Web Page Mockup Project

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.






4 thoughts on “Web Page Mockup Project

  1. Skyler Foxx

    Hi Dave,
    Color me impressed! There’s a lot going on with this web page, but it looks very good. The color scheme and alignment of everything is spot on. I especially like the touch you added with the header page with the “Home” button being highlighted. I also really like the arrows next to the top image, indicating that it slides to different links for you to click on.
    Great job!

    Here’s a link to Heather’s blog:

  2. Heather

    Dave, I really like this! It looks so professional, while still feeling welcoming. Plus, who doesn’t love puppies? Your choice of images is excellent. I also really like your color scheme. You added a lot of extra touches that really make this work. Great job!

    Here’s a link to Chearsten’s blog: https://thewebbdesign.wordpress.com/2016/11/16/10a-web-page/
    And here’s a link to mine: https://heatherhholt.wordpress.com/2016/11/16/web-page-mockup-project/

  3. Miranda Duncan

    Dave, great job! I’m always a big fan of analogous color schemes. The white background really does a great service to the main focus of the page – the animals. As a matter of marketing, I also like the donation buttons right there on the home page. I think you could have tightened up the drop shadows on the dog and cat a bit – they seem too far away from the images. That said, the dog and cat are stunning – great job with Illustrator on those!

    Mine: https://duncanmiranda.wordpress.com/2016/11/17/10a-website-mockup/

    Heather’s: https://heatherhholt.wordpress.com/2016/11/16/web-page-mockup-project/comment-page-1/#comment-38

Leave a Reply

Your email address will not be published. Required fields are marked *