I started planning the site from the content, so after thinking on an information architecture that woulb be best for the project i designed a sitemap for it.
Once I had the structure planned, I needed to come up with a design that fitted the content of the site and that would allow the user to find information where he expected it to be making every action obvious and automatic.
Something important I had to keep in mind while planning the information architecture of the site was the ability to get to the informations quickly so the main and secondary navigation were designed so that every page on the site could be reached in a maximum of 3 clicks.
I usually start the design with a few sketches on paper, till I get a structure I feel I can start designing on.
I made sure if followed all usability standards by placing the logo on the top left, the main menu on the top right and keeping that section the same in all pages.
For the development I choosed to use HTML5 for my pages doctype and developend a custom css modular framework to fasten the process of alligning elements and adapting to for smaller screens.
After creating the basic css I started building the html structure for the home page, wich I used as a template for all the other internal pages.
Once I did that I applied css styles to each html section, at this point I had just to insert the logic to validte the forms, create cookies, open popups ecc.
Being a prototype, the plan was to make it work as it was a completely working website with login and registration, and I accomplished by using javascript cookies.
The information the user inserts in the register form, are the ones he's going to use to login to his profile page, from were he can then edit those information.
Unluckily most browsers do not support cookies for local files so I had to use Firefox to test the functionality of the site.
Once I had everything working the right way, I uploaded the files to the aquarius server and changed the extention of each html file to .shtml so that i could use SSI to make the site more managable.
The parts that were included trough server side include are:
Once I finished I validated each page and made sure there wasn't any error.