Site colophon

This site is a showcase of my best works and also serves as a haven for my thoughts and reflections. My musings are mainly about User Experience Design related topics.

This latest incarnation of my website is the result of flexing my creative and technical egos, taking a break from client‐work and geeking‐out for a few months.

Tools, Resources and Kudos

This site was crafted on a Macbook Pro over the course of 3 months.

In order to develop a visual language for the website I started the design in Photoshop. After quickly realising the inadequacy of this approach to designing responsively, I reverted to sketching and experimenting in the browser. I wrote all the content in IA Writer—the best piece of software I own.

I painstakingly coded each and every bit using HTML5 and CSS3 in Macrabbit’s Espresso. I started by building a responsive prototype using the invaluable HTML5 boilerplate and 1140 framework—so much kudos to those guys. To leverage full blogging capabilities I decided to try my hand at building the website on top of WordPress, which has proven to be a wise decision.

Webfonts include the beautiful Calluna (for headlines and body text) and the occasional dash of Museo, both by Jos Buivenga. Elsewhere I use BebasNeue.

I’ve implemented the website icons using a semantic symbol font by Symbolset. I highly recommend this as a quick, lightweight, scalable and accessible option.

Some other plugins I use:

• Last.FM for jQuery by Engage Interactive
• WZ Tooltip by Walter Zorn
• Random Content Generator by Jon Cazier

Accessibility

I always try to adhere to web standards and best practices. Therefore, pages are semantically structured using valid HTML5 with presentational design provided by CSS. Behavioural enhancements use the jQuery JavaScript framework, and an extra layer of semanticism is available thanks to HTML5 Microformats.

All links in the page support the :focus attribute, to make navigating the website easier.

References

I’ve referenced and been inspired by the following articles and presentations:

• 7 Steps to a Kick‐Ass UX Portfolio by Will Evans
• Portfolios Matter by Lynn Teo
• Selling Yourself Better by Jason Mesut
• Fill Your Portfolio with Stories by Jared Spool
• Compose to a Vertical Rhythm by Richard Rutter
• Responsive Web Design by Ethan Marcotte
• Complex Navigation Patterns for Responsive Design by Brad Frost