Category Archives: Web Site Visual Prototype

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.



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.



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