Today’s post highlights the design of Panoetic.com. When first loaded, the site has two main sections – a three-row interactive portfolio and a selection of client logos. The portfolio features a number of attractive transitions – from rollover and (delayed) rollaway effects to the overlay slideshow of the specific project on clicking a thumbnail. Note how each successive row features more thumbnails (three to four to six) while maintaining the same overall vertical grid. The client logo section is placed on the background of earthen brown, with each logo colorized in the desaturated pink-to-yellow browns, creating the effect of the portfolio thumbnails “growing” from the client seeds planted in the ground.

The header section continues the vintage theme set by the background color palette of desaturated blues, browns and off white by interleaving a few intricate illustrations with the floral background patterns. Each illustration (two ribbons and the upward-pointing hand) is an action area that reveals hidden content above the header section. If you position the mouse over the charcoal-painted hand and click three times, the entire content will reveal three sections that provide further information on the agency itself and the people behind it. The vintage decoration elements are present throughout these extra sections, with additional usage of strong orange color to highlight the main action items (expanders, twitter links and the submit button of the contact form).

Finally, note the usage of embedded Felt Tip Roman and Salsbury for various headers and subheaders – both hand-written fonts that further reinforce the vintage theme of the site design.