MY Web Site Visual Prototype

Hi Stephen Here,

Showing you a website I made in my class Interactive Media Tools. I will be going through what choices I made, why I made them, what I found challenging, and how I overcame those challenges.

First off I started with a quick layout and added my grids. If I didn’t like the placement of the pictures I knew I could move the grids and images to different positions. This simple beginning helped me to organize my starting folders as well as a general idea of where I want everything to be laid out.

Guides

 

With the grid I also made my base for my buttons. This part was challenging and time consuming for me because I continuously created my buttons outside of my working space.

Buttons

 

As I continued, I was aligning the images at the bottom to keep the page looking new and not repetitive. I tried a couple of methods but they all seemed too small and just did not show enough of the picture for a new view to understand what was going on.

Adjusting the placement of the images Continuously fixing layout of the images

 

 

This is the layout I slowly started moving towards. I decided that I wanted it to have a different feel from the other pictures, so I gave the picture and text a dark blue background color with a lighter blue stroke. I found this made the picture less repetitive and more eye appealing.

Fixing the backdrop color for a good mix with the pictures backdrop

 

This is the final adjustment that I chose for the pictures and text. I felt that the text fit perfectly at the bottom of the image and was more eye appealing. The only thing that I changed was the color to the text and titles.

5th fixing backdrop of images and letter fonts and colors

6th playing around with the colors on the fonts

 

Nearing the end I placed arrows on the buttons with an example of a drop down tab. This is to show what the user would be seeing when they hover their cursor over the tab/button.

7th setting up buttons and straitning the arrows for each using a grid

 

picture of tab with picture 7

 

I finally played around with the circular buttons to allow the user to change the image. Short story I chose white because it stood out the most followed by the black circle which was the image you are currently on.

8th circular button layout choose white

 

Adding the Log in and Sign Up buttons as well as the follow us images to give the top navigation a more professional and spacious area. Same with the bottom navigation showing off the publishers, developers, and the engine for the game with help, platforms, other genres, and disclaimers.

9th putting in the follow us IMG's

 

Final picture of compleated work

 

Advertisements

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