On the past two iterations of this website I turned from a Tim Van Damme presentation –still viewable on my portfolio– to the usual bearings of a blog layout. Both worked fine, looked nice and I were, for the most part, pretty fond of them. However, I began missing one when viewing the other and the experience derived into something which seemed too disjointed for my pleasure. I also felt I wanted a more prominent place for my photography which was kind of buried down after the second iteration.

So a few weeks back I started drawing some initial mockups of what would become an idea to combine those views. The first visual element I constructed was the navigation: writing, portfolio and photography, as those were the three main areas I wanted to showcase upfront on the site –hence the name of this post.

I wanted a clean design given that I would be adding real time switching from one section to the other and it needed to feel responsive and smooth (or as responsive and smooth as it could get) without detracting the viewer. The navigation laid out the foundation for the main composite elements of the design: the boxes. They would structure the different places of the front page and new interface buttons could be created for different functionality with ease and consistency.

Furthermore, it also allowed me to experiment with colors while the grand picture evolves around white-space: the frame responsible for setting the tone. The breath allowed by the areas of the design with no elements placed connected fine with the text and boxes.

By far, the most challenging effort was designing the different instances so as to only require a minimum animation to switch from one to the other (I am still mangling with it, though). The idea was that the pacing should follow the flow as if the site slightly rearranges itself to accommodate the content it will display as in a continuum that remains organic to the overall experience. Just from the start I declined the option of having the entire site working this way; I opted instead to display only the last post on the front and connect that to the main blog logistic.

I wanted to leave most of the animation on the CSS and use jQuery just to switch classes and add or remove markup. The added markup would trigger the new CSS and (on Safari and Firefox 4 at least) execute the desired animation. I believe it works quite well and allows for quick changes in the placing of elements and their animation without touching the laid functionality and javascript foundation. Having a manageable set of classes and using clever selections was of the utmost importance given that I intend to add some shiny responsiveness in the near future. As a result, I have the markup, the added functionality and the visualization mostly separated, which is good.

For this iteration I started the process on unstylized markup, just polishing the inner-working and the bones of the site. After the main structure was working well I ported it to a pristine Twenty Ten theme which proved to be extremely flexible – I have some hardcoded bits I need to turn into functions. Then I went to add some details around; always an ongoing process. I ended up also experimenting with the addition of a last twitter post to better balance the front page. The gallery is a nice experiment of ease-of-use. I am using the Galleria jQuery plugin and applying it to the output of a WordPress gallery. Now I just need to upload a new image to the gallery and voilá.

There are still plenty of rough edges and areas needing further improvement in order to make the experience as seamless and accessible as it should be. For one, the back button on the browser should take you back when you are on the front page. I have yet to face the issue of touch devices: still thinking on how to display what the three main buttons stands for on those devices deprived of hovering. I have still to make anchors work as direct links and play nicely with the photo gallery. So, if you see anything out of place send me a message or leave a comment around here. And if you have an iPad tell me what behaves or shows wrong.

Over the next few days I plan on finishing what is not working as expected, clear most of the piled up code-clutter and hopefully start on the different sections of the blog which are still severely undeveloped.