Web Design Mockup Project




Design a mock website homepage.

Process (Programs, Tools, Skills)

  1. I took the business identity that I created for the last project and decided to create a basic homepage for that business.
  2. I first started by sketching out three different layouts for how I wanted the website to look. After looking at each of them, I decided to go with the sketch with the sidebar design.
  3. After deciding which sketch I wanted to run with, I went into Illustrator and I started to lay everything out using smart guides and my own personal guides to align everything and make it look unified.
  4. After creating my wireframe, I started to add in the actual content onto the page.
  5. My final design wasn’t very different from my original sketch and wireframe and it all was able to fit nicely together.

Critique Process

In class, we had two different critique processes that we did. The first one we opened our drafts in Photoshop and we would create a new layer and, using the brush tool, drew a line for where our eyes go when we first look at the page. This was to help us understand where people’s eyes go when they look at our webpage and helps us determine if our design works the way it should.

The second critique process divided everyone into small groups to give peer feedback and critique each other’s designs. These processes really helped me make my design look visually pleasing and fix some issues that I didn’t know I had.


The Workshop is here to help with all of your car problems.


Anyone looking for a reliable workshop to get their car fixed.

Top Thing Learned

One thing I learned is that I prefer Illustrator over Photoshop any day. It just is so much easier to me.

Another thing that I learned is how to crop a photo using the pen tool to create new anchor points on the image frame where I wanted the frame to crop and then just delete the outside corner points and conjoin the new corner points and it crops the photo how I want it.

Color Names

Gray and Red

Title Font Name & Category

Factoria // Slab Serif

Copy Font Name & Category

Verdana // Sans Serif

Thumbnails of Any Original, Unedited Image(s) Used in the Project

Source of Each Image (website name and hyperlink)

The logo is my own creation.

The photo of the pouring oil is from Adobe Stock:

Oil Change Photo

The other photos are from Pixabay.com:

Transmission Photo

Car Repair Photo

Tire Photo

Social Media Icons


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