Final Website Scamp

This is the design I'm going to go with for my website design, I might need to make a few refinements and might need to add a few margins so the columns don't interfere with the navigation, I'll speak to Simon about this this week but on the whole I reckon I can pull this website off and it's a pretty simple layout.

Website wireframe above. The container size is 1024 x 768

Background: #EAD9B9

The basic layout for all pages before content goes in. Navigation at the bottom and logo at the top, I like this layout and feel it's effective as it allows your eyes to focus on what's in the middle, what's most important - the content.

Scroll-down preview of the blog page. The homepage for the website will be the blog page, kind of like a newsfeed I'd regularly post to with MMA updates and news, so this will tie into making MMA accessible by posting in contextual and up-to-date articles. The navigation buttons will have transparent backgrounds as is the logo at the top which I want to hover over images as you scroll down. I hope this is relatively easy enough to do!

The greatest fighters ever page is a bit different to the other pages as it's in slideshow format and not a scrollable page. The margins basically become navigational buttons. You can see here how the website works with the wireframe.

Each page basically focuses on a different fighter, in my book I have about 50 fighters, but for the website I may need to narrow the list down for website file size. Would be cool to have a real-time transition to each different page and not an entirely different page loading, I'll ask Simon about this.

The whole margin will basically hide the 'next' or 'previous' button, so the actual arrow symbol itself isn't the link, the whole margin on the left or right is, as highlighted in red here. This will make going through each slide easy and effortless, you don't have to click on the little arrow!

Maybe there's a way to bring te left and right arrow keys in to it too.



As I understand you don't work with point sizes on web but for now I will anyway just to show how I want to look:

Headings: 20pt bold
Body text: 14pt regular

Navigation (will be images): 16pt bold


Rollovers, the roll overs for the navigation will be a simple little nudge upwards, I thought this worked pretty cool in the web workshop and I've allowed room in the navigational bar for the navigation buttons to be nudged a little for rollovers.

Black and white images? My book is all grey-scaled and half-toned inside, for print costs and also for aesthetic reasons. So maybe black and white greyscaled images would work better than colour images as the rest of the colour scheme is very monotone. 

Yup, black and white's better. Smaller file size too! 

Edmondsans Bold isn't a web-font but a bought font so will be risky to use online, I'll have to use it as a back-up as maybe the 2nd or 3rd font in a font-family. The closest web font to it that I can find is Century Gothic Bold. 

I think it still looks pretty decent and not too different from Edmondsans Regular. I'd be pretty happy to go with Century Gothic.