hero Image (from flickr)

Development

Development

Planning

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.

sitemap

Design

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.

design process

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.

Development

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:

  • The part of the head section that is the same in all pages;
  • The main navigation bar on the top;
  • The Secondary navigation on the left in each section;
  • Footer section and login popup;

Once I finished I validated each page and made sure there wasn't any error.

Login

Please make sure all fields are filled.
Please enter a valid email address.
The data inserted are not valid, please retry.
Registration completed. Please use the data you submited to log in.
You just logged out of your account, you can login again or keep browsing normally
x close window

We use cookies

This site uses cookies to optimise your user experience. By using this site you are consenting to our use of these cookies.

x close window