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.

Today’s post highlights the design of ParamoreRedd.com. A rather unusual color palette mixes dark olive and light yellow for background, with chartreuse and dull orange for section headers and links. This creates an overall cool and reserved look that highlights the perfectly balanced slideshow of agency work. Unlike similar slideshows on other sites, this design opts for a static featured case thumbnail placed above a scrollable looping gallery of images.

A large swath of light yellow directly below the slideshow serves two purposes. First, it further highlights the featured work (note oval drop shadows below the thumbnails). Second, it hosts a small snippet of the latest blog post with an attractively styled header, as well as an action button to sign up for a newsletter. Note the vertical gradients and drop shadows that add subtle dimensionality to the blog header ribbon, and the mixed typography in the header itself.

The bottom part of the page reuses the dark olive background (sans noise texture) and contains contact information, signup form and a few social links.

Today’s post highlights the design of SlavikDizajn.com. As with a few entries features in this series, the site places the main emphasis on the large image-based portfolio slideshow, and mutes all the other visual elements. A richer color palette of mahogany brown and light yellow adds more vibrance to the design, and the large radial background gradient breaks a large swath of background color and indirectly guides the way towards the light source “hidden” under the image slideshow.

Note the two-level navigation bar below the slideshow that groups the thumbnails based on the specific projects, and a simple header navigation menu that employs stylized bird silhouettes to add a nice humane touch. The slideshow itself uses a smooth cross-fade transition for switching between the images. Unfortunately, the rest of the visual elements do not use rollover animations, resulting in rather abrupt transitions between dark mahogany and light yellow states.

No, Tweetdeck, this is not how i expect to compose a new tweet from the widget. And yes, i know it’s a beta :)