The aim of this website, was to provide a site, which is both professional, but also relaxed and amicable. In order to give the site a certain level of professionalism, three distinct rows were implemented. However I also wanted it to appear relaxed, and thus, following the trend of many web 2.0 sites, I followed a three column layout, with the left, middle and right hand sides being used for internal links, content and notes respectively. Further more, the bottom row, was split into two columns, so that the uniformity didn't deter from the relaxed site was aiming for.
Continuing with the theme of professional but relaxed, typography was taken into much consideration. I decided upon using Garamond to provide a professional look which serif fonts create, and in order to emulate a relaxed feel, i decided upon using this font without any capitals. Serif fonts however do not anti-alias well in most browsers when assigned low font-sizes, and thus look blocky. This mean that I had to settle for using a sans-serif font for content. From these I decided to use Veranda, as it shares some similarities with Garamond. Along with this I decided that for more personal content, such as the "listening to" section I would use a handwriting font, finally deciding upon Journal my font of choice.
To yet further re-create a relaxed feel, I decided to use "icons". By icons I mean that within each content section on the page, I would assign an icon, which is of relevance to the contnt within the section, for example I used an icon depicting a woven picture, saying "Home Sweet Home" on it.
This idea was continued throughout the site, with for example the blog page, having an icon depicting a diary.
Despite aiming for professionalism, having implemented most of my website, I felt that the design was to impersonal. Thus I decided to implement the sticky-notes to make the site more personal, and within them entered more relaxed descriptions for what the various link being hovered over do. This helped to make the website looked more relaxed, as it helped emulate a "desk" environment, when combined with the internal links discussed later. When implement however i discovered that the sticky note flcikered, and in order to stop this I implementd and idea which I had used in several games I had written. This ideas was to create a sprite containing each instance of the sticky note,so that when each link is hovered over only a select part of the sprite is shown.
Along with the sticky-note I decided to make the links in the left column appear as though they were being colored in or doodled on. To do this I highlighted them using an irregular brush stroke, so as to emulate the intnded look. I decided to do the rollovers for these using only CSS, and implement the same sprite idea as that in the sticky-note.
I always wanted to implement some AJAX into my site, but was uncertian of what to use to showcase this. I decided that most websites tended to hve very boring looking gallery and portfolo sections. I wanted a smooth animation to display the pics, and rather than using flash I wanted it to be done purely with AJAX and javascript. Using various libraries such as Prototype and script.alicio.us, combined with ideas from lightbox, I created a gallery which suited my needs and provided seamless animation.
I think that overall my website fully emulated the look which I had settled on, and my code was sufficently refined. I am pleased with the outcome, especially the gallery section, as that was achieved using AJAX and Javascript rather than using the "problematic to update" Flash.