Health Points! – Web Page Mockup


Create a mockup website page for your company you created in the last project.


I originally created three hand drawn drafts and settled on the last one I made. From that draft I created a wireframe, and used that wireframe to craft my webpage. I decided to use repetition by using the same arrows that were in my letterhead on the website, and made it the header and footer. I incorporated my sub logo by not only including it above the header but by shaping the images in the same dimensions as the logo, and giving them the golden box. I made sure all the images were evenly spaced apart along with all the other elements. I used the same fonts I used in the business card and letterhead.

Critique Process

I was critiqued by Levi Cooley, Sidney Rodrigues, and Aubrey Norris. They all really liked my design and only had a few suggestions. Levi suggested that the pictures and the text underneath be spaced out more. I used to have small prices underneath the food names and they were pretty close to the other pictures. He recommended I take those out, so I did. They also recommended I include social media links, so I did in the header. I wanted to add a lighter purple background in at least the portion above the header, but they recommended I keep it white, so it stayed the way it was.


Eating these snacks can help you be healthier.


People who play video games, male and female ages 18-30

Top Thing Learned

You don’t have to snap every element to the lines of the grid guide; you just have to use it as a reference for spacing and aligning.

Title Font

Franklin Gothic Heavy, Eras Medium ITC

Copy Font

Franklin Gothic Medium

Color Scheme

Complementary // Purple and Gold

Source Pictures

 Picture Sources

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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 )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s