Web Page Mockup Project



Create a web page using a grid.


  1. Knowing that I wanted to use the airline’s company I created before I research different airlines web pages to have a general idea of how they look to inspire me.
  2. After that, I sketched different ideas of how my web page could look like. I wanted to keep it simple and clean with quite a few images to illustrate.
  3. I used Photoshop with a 12-column grid to create my shape map for the sketch I liked the most.
  4. Using my shape map I started adding all the images, icons, and word to my web page.

sketch shape_map


I met with my sister Thamirys so she could give her opinion about my web page and if it looked good. She gave me some feedback on the shape I was using.

On Facebook, I gave feedback to Kayla Taculog and Brianna Haroldsen.


Easy travel booking system.


Anyone who is looking for airplanes tickets to travel.

Top Thing Learned

Pay attention when you are using the zoom, because you may end up creating something too small and having to resize everything.

Color Scheme & Color Names

Monochromatic Blue

Title Font Name & Category

Noir Medium, San Serif

Copy Font Name & Category

Klinic Slab, Modern


rio new-york mexico london hawaii wing2






New York:

Rio de Janeiro:


3 thoughts on “Web Page Mockup Project

  1. Looks great! Your site plan looks so professional and realistic! I really like the pictures you chose and the flow of your layout.

    My blog! – jennajesperson.wordpress.com


  2. First off, I really love the photos you chose! I think they compliment the look of your website nicely. Also, I think the look of your box for booking flights looks really realistic so good job! Lastly, I love your meticulous work on the smaller details on the website. Check out my blog and this one they are awesome!



    1. Hey there Kevin, if I were to go on to a website for flights, this is what I would expect! Such a good job, my friend. I really like all of the “clickable” areas of your page. It’s obvious where I can go to navigate. I also really liked the social media icons–I totally didn’t think to put those on mine. Anyways, well done!
      Here’s a link to Jessica’s blog: https://comm100blogforte.wordpress.com/2016/11/16/web-page-mockup-project/
      And mine: https://atmecham.wordpress.com/2016/11/16/web-page-mockup-project/


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