FNF Upcoming Fights Page Plan

Here is my layout which I have created in Ps of the upcoming fights page for the micro site. Looking at this layout for some reason I am not happy with the look of it and i cant put my finger on what I dont like about it at the moment. It could be the fighters names next to the thumbnails. This page may need some adjustments because of this.


FNF Home Page Plan

Here is an image of how i want the home page to be looking on the micro site. Before this page is seen there will be a loading bar and then the logo will animate and reveal the home page, where the fighters will appear from the bottom of the page.

FNF Fighter Page Plan

Fighter Page Layout

Today I have been working on the content/ layout for the fighters page, bearing in mind i wanted this page to have some kind of social media built into it so that user’s can post their thoughts on the fighters, upcoming fight etc. The way I plan the page to look can be seen in the image I have published on this post. I plan for the page to display 3 fighters at a time, and then if the user wishes to view more fighters they would click on the arrows and the fighter furthest to the left would shift left and and a new fighter would appear. Also when the user hovers the mouse over the fighter their name would show above their head and the real photo of the fighter would appear over the vector. You can see the speech bubbles on the left and right of the screen is where i wish the social media input to be placed.

FNF Web Schematics

I have just been thinking about what the content is going to be for the Friday Night Fight micro site. So I did a quick web schematics diagram in Ai to get some ideas down of how the website will flow and how the user will navigate around. Also after doing this I now know exactly what each page is now going to contain and what it will be displaying. I think that the next step I am going to take now is to maybe make some adjustments to the schematics diagram if needed. And show how the webpage will move from page to page, because I have an idea in my head of how I want each page to appear, I want the pages to shift right and left because looking at the mock up I have done in Ps I can see the visuals looking really nice with the transition I have in mind.

Hatton Boxing TV Friday Night Fight

Design Agenda


Today the branding for Friday Night Fight was presented to the group and discussed. The main thing that came out of the session was, that the logo would look much better if the lines at the top and the bottom of the logo was removed, because at the moment the lines are making the logo look more like a pattern when the logo is reduced in size. The aesthetic for the micro site is working well, the next stages of development are now to strip back the design and think about the functionality and content of the micro site, and to explore the possibility of social media being included.