Building My Portfolio Website

For the past few months, I've been working on my portfolio website. The reason it took so long to finally put up a working website is because of my obsession with doing it right. I wanted the "perfect" portfolio website that reflects who I am as a designer and my aesthetic. The website is, of course, far from being perfect. I plan to constantly revise it to make it better, little by little. However, I am pretty satisfy with the ending result. But, nothing is ever final. I need an online presence to showcase my work and here it is.

I also thought that it might interesting to document the transition from sketch to execution.

I started out working with the concept of "the basics". What are the basics of how we visually understand the world? We all learn at an early age to associate objects with shapes and colors and I wanted the website to reflect that sense of play and discovery. Building on that concept, I visualized a primary navigation system based on large icons of shapes and pictograms that would change when hovered over. Set against a clean background, the navigation will stand out and invite play. Not to mention users will be quick to adapt to the somewhat unconventional look because of the lack of other distracting features. 

Though it made in interesting concept, when transitioned to the screen it was a little lacking and visually awkward. I worked with many iteration and decided to go back to the drawing board.

The button changes when hovered over by a mouse to indicate that it's a clickable element.

After some deliberation, I decided to retain the "big button" navigation. However, the primary navigation would have a more conventional location on the top of the browser, making for a more intuitive experience. The ending result was a little visually top heavy with the resulting secondary navigation looking a bit arbitrary. I also had a problem with the flow of consistency from the main page to the other pages on the website. So once again, I have revise.

For the sake of usability and consistency, I scratch my first concept all together. No more is the "in-your-face" navigation system that I might one day revisit. I decided that the look of the navigation should be secondary (as it should be) to the actual content of the website. What resulted is a simple and straight-forward primary navigation at the top of the browser. On the Works page, each showcase is accompanied by the appropriate background to immerse the users in the design. I think the website still retains a sense of play with the fun background images. Once again, nothing is ever final. I am already working to improve.

I could have never done this without some help from a wonderful friend who is more familiar with Ajax and javascript.