Web Page Mockup Project

webpage

Description

Create a web page using a grid.

Process

  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

Critique

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.

Message

Easy travel booking system.

Audience

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

Thumbnails

rio new-york mexico london hawaii wing2

Source

London:
https://www.pexels.com/photo/big-ben-structure-near-white-concrete-structure-89432/

wing:
https://unsplash.com/photos/YvCg5X3pWzc

Hawaii:
https://unsplash.com/photos/2APB4zEw1Yg

Mexico:
https://unsplash.com/photos/2ktKz6CnNk0

New York:
https://unsplash.com/photos/7qheceNIy7k

Rio de Janeiro:

Advertisements

3 thoughts on “Web Page Mockup Project

  1. 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!

    https://sarahmm2016.wordpress.com/2016/11/16/web-page-design/
    https://atmecham.wordpress.com/2016/11/16/web-page-mockup-project/

    Like

    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/

      Like

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 )

Google+ photo

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

Connecting to %s