My website will consist of four main pages. These will be the home page, Schedule of Play, History and Player Rivalries. You can see how the pages will all be linked in the site map below...
____Wireframe
This is the wireframe for my website. I initially sketched it out before making a digital mock-up. This will be important for when it comes to setting up the basic template for my website before I drop in all the information, text and image.
As you can see from my wireframe my website will be:-
Website
Width - 1024 PX
Height - 768 PX
Font Family
Arial, Helvetica, Sans Serif
Navigation Bar
Top/Left Aligned
100% Width - 1024 PX
Height - 64PX
Buttons
Width - 128PX
Height - 64PX
Columns
4 Column Grid
Width - 256PX
Scamps
I sketched up the scamps for each page before I moved on to doing some initial digital mock-ups. Once I have mocked up a few alternate designs, I will choose one final design and start to put this together using dreamweaver.
This was my original idea of having a full scale images across the back of the website. After speaking with Simon, I figured that this would be hard to get it to work across a number of different platforms without having large coloured bordered down the side or having to create a pop out window.
This is what the website would look like with text dropped into the columns.
I tried the dissected logo, but again realised that most of the text would be covered up and hard to read which would hinder the legibility and readability of the website. I needed to come up with a simplified version of this.
This was my next idea which seemed to work a lot better. Simple Navigation at the top of the screen with the addition of colour through the logo. The logo would be able to picked up and moved around the screen and placed back down wherever to add further interaction and also visual ascetics.
An even more simplified version of the website in black and white. Again, I like the look of this but may be appealing towards the wrong type of audience.
Final Website Mock-Ups
____Schedule
My initial idea was to space out the information like this with the turquoise coloured logo overlaid above.
I then progressed the layout of the 'Schedule' page to be in a grid format like this. The logo will still be able to move around the website as you can see in the mock-ups below. As you scroll through the website the logo will follow.
____History
____Homepage
For the homepage, I wanted to keep a full size image with the chance to move the logo around to where the user would want it. I'm not sure whether to have a transparent 'multiply' effect through the logo or to keep it solid colour.
I used an image of Arthur Ashe which is what the stadium at the US Open is called. The Arthur Ashe Stadium.
____Saving Images for the Website
I saved these as low quality .png and .jpg files depending on a transparent background or not. These are now ready to be inserted into my website.
____Buttons
____Images
I created all the images and rollover image for the website and also saved them appropriatly to the correct size and name so that I can easily find then and keep my coding organised when working with html and css.
Leave your comment