Friday Night Fight Mock-Up Navigation - eSnips

University work - Friday Night Fight Mock-Up Navigation - eSnips

(For the interactive follow the link)

Here is a mock up of the interactive navigation that will fit into the micro site.


After the loading screen is done I wanted the logo of the Friday Night Fight to drop
down in the center of the screen and then the navigation panel would spread out with
slowly the links coming into place from a fade in.

Friday Night Fight Mock-Up Interface

Stitched Images.

Here I have quickly mocked up an interface to demonstrate on how the micro-site would work.

The way in that the site would work is that everything will seem like you are spinning round 360 degrees of

a main event.

The way this is created is by making a parallax animation where everything that scrolls pass seems as one.

Firstly I got a few environment images that would be related to boxing and stitched them up in Photoshop so that they are blended together.


The ratio that the micro site will be in is 1024 X 640, and each image is that size too.

'Images have been taken from Google images'

Third wire-frame

The third wire frame of the micro site is working 

on slide-able shapes to form navigation and has 

more animated movement within the micro site.

The point of diagonal sliding movement is from 

the idea of things being straight up 

cut in with punching.

Second wire-frame

This wire frame is designed for the site to have a 360 degrees pan effect which doesn' t need a 
navigation because all you do is pan from left to right to go through it.

First wire-frame

This is the first wire frame that I had designed for the 3D enviroment that I wanted to create

for the micro site.

Within this environment you can navigate from the TV screen to the locker room to find more information

about Hatton Promotions and by clicking on the ring you will get up coming Friday night fights and previews.

Ideas of logos for F.N.F to the final logo.

Hatton Promotions (Friday Night Fight)

Basically what I have to do for this assignment is to design a promotional micro site that would grab the attention of the public to give them information about the Friday Night Fight.