Web Page Mockup

Description. I was asked to make a web page mockup using a grid.

Process. I made my mockup of the same company, Teeples Custom Homes, that I used in HTML and CSS coding project. I first started this project by sketching out three different layout possibilities. I next made a wireframe of my project in Photoshop using the 16 column grid. Then I used my wireframe  and started adding my pictures, text, and shapes. I really enjoyed using the grid.


Critique Process. I turned my project in on the Facebook page and Brother Stucki told me to change my typeface on my main writing, so I did that. He told other people to add social media ideas and I thought that was a good idea, so I did that too. I didn’t love my header on my first draft, so i spent some time playing around with that until I think that it looks better. Sarah Sharp commented on my post and said she like my color scheme and that she like the simplicity of my mockup.

Message. My message is that Teeples Custom Homes is a builder in Utah.

Audience. Anyone looking for a contractor.

Top Thing Learned. I learned once again how to work in Photoshop. I only use it for this class and I have a little bit of knowledge on how to use it, but I always have to relearn little things every time. This time I kept trying to change the color of text of Teeples Custom Homes, but I had imported it as a Smart Object, so it wouldn’t let me change it.

Color Scheme and Color Name. I went with a monochromatic color scheme using red (#84211B) and white (#FFFFFF).

Title Font Name and Category. I used Egyptian Slate Std Bold, which is a serif typeface.

Copy Font Name and Category. I used Legacy Sans ITC Pro, which is a sans serif typeface.

Thumbnails of Any Original, Unedited Images Used in the Project.


Source of Each Image. Click on each picture above to be taken to the original source.



3 thoughts on “Web Page Mockup”

  1. Hi Sarah,

    You did a wonderful job on making a unified website. You had a lot of elements that are repeated and really help solidifies the design. For example having the repeated red bars both the thick ones and the thin ones. Last your Typography really adds to your design as well. The Serif and San Serif work really well together.

    Here is my Website:

    Here is another website:


Comments are closed.