Web Page Mockup Project


10A Angie Coates Mockup


Design a website homepage using a grid.

Process (Programs, Tools, Skills, Design Principle’s)

  1. I decided I would do a mockup of a website around the logo used in a previous project. I chose the color scheme around that as well.
  2. I made 3 sketched of various designs that I could use.
  3. I then got onto Photoshop and began to create a wire frame using a 12 grid template.
  4. I then filled in the wire frame with images and content.
  5. Through the process of designing the mockup I made a few changes from the sketch.


10A Angie Coates Sketch 110a-angie-coates-sketch-2.jpg

10A Angie Coates Sketch 3

10A Angie Coates Mockup wireframe

Critique Process

I met with Sabrina Dearth via Skype. She had some great suggestions about coloring and the images. She wasn’t sure she liked the blue color with in the header and footer area but I explained that I was bringing in colors from the logo. She thought the slider picture looked vintage and the other image felt more modern so she didn’t love that. I explained that in the website my vision was that the picture on the bottom would always be changing.

Facebook Critiques: Robert Wagner and Ralph Borcherds

One on one Critique: Porter Coates

Instructor Critique: My instructor suggested I keep the font consistent in the lower left panel of the page and correct white spaces that were in my social media icon boxes. I made those corrections and was grateful for the suggestions.


A comforting site to go to to get book reviews.


Book lovers who want recommendations on books.

Top Things Learned

It’s important to pay attention to the overall look of the site and try to see it from the perspective of a person browsing and what would look appealing to them. Also to be careful of alignment and positioning.

Color Scheme and Color Names

Split complimentary// red, blue, dark grey

Title Font Name and Category

Candara// sans serif

Copy Font Name and Category

Mason serif OT//  serif

Thumnails of any original, unedited Images used in the project

Source of each Image (Website and Hyperlink)

Purse and book

Woman holding book

Computer on wood desk








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 )

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