Friday 19 February 2010

Mockup -> Actual Webpage!

This is the mockup I made of the homepage

It has a logo/home button with the 3 buttons for the 3 pages underneath it.  Then I will have a short introduction to the website. The three images and the headings will also link to the science, wheel and meanings pages. The subheadings will be links to anchor points within the 3 content pages (science, wheel and meanings).

After I pitched this mockup I got feedback that the logo should be bigger, to fill the top-left, the most important part of the page. I've also been told that it looks like it's cut off at the top and should be rounded off where the C and the R are.


These are the reworks of the logo that I did, but i couldn't get one that looked as nice as the original so I decided to keep the original logo and use the space to the left and right for the links to the buttons and anchor points within a page.


The anchor links, on the right, will be the same sub-headings from the home-page and will show the different sections of the page you are on. For example if you're on the Science page, the anchor links will  be: light waves, How the eye sees, The colour of objects, Additive/subtractive reproduction of colour.

The 'nav' division is intended to be fixed at the top of the window so that if you've scrolled down a long way and want to go to another page/different part of the current page or the home page, the buttons will always be visible.

Logo will change colour on hover, 



doesnt work on blogger >:(


The actual page made of HTML and CSS 
(screenshot of)



I've made the buttons for the top left. I have 3 Divisions; nav, content and footer. inside the nav div are buttons, logo and anchors divs. I did this so that they would sit nicely at the top. I need to make the rollover versions of the buttons so that they look like they are being pressed in or glowing. I expect i will also change the background image and footer colour but for now they are useful for seeing where the divs are going.

I'm having problems with the margins. I want it to work in the same way as normal websites; where the content is always centred however big the window is but this isn't happening....

Fixed it! 
by containing the nav, content and footer in a wrapper div, and setting it's margins to auto on the left and right

(margin: 0 auto;)

the important parts stay in the middle.




No comments:

Post a Comment