Today’s post highlights the design of RiotIndustries.com. A memorable experience starts with a unique portfolio layout that places small thumbnails “peeking” from below the leftmost navigation column. Clicking on a thumbnail loads a slideshow of larger screenshots that highlight the specific project. The vibrant rich yellows and browns are broken by adding an uneven grungy texture that is reminiscent of an industrial rusty metal look.

All the transitions feature carefully timed animations that use custom physics to slide in new content and slide out the old one. Move the mouse over the gallery thumbnails to see rollover effects on the thumbnails themselves and the slide effect on oversized custom kerned project headers. The main navigation menu, and specifically the web / print / identity menu items, are actually action buttons that toggle the visibility of the relevant portfolio thumbnails. Clicking a “selected” menu item smoothly fades it out to a much lighter shade of brown, as well as collapsing the matching thumbnails. Clicking an “unselected” menu item launches the same two animation effects in reverse. Finally, clicking the “about” menu item reveals an additional vertical column with a short bio, social networks and links to online publications.

The only thorn that i could see lies in handling multiple clicks on gallery thumbnails. If you click a thumbnail twice or more in a row – before the full gallery is loaded – the main content area becomes a mess of multiple copies of slideshows, navigation buttons and loading indicator that sometimes stays on the screen.