Design, uninterrupted #163

March 22nd, 2011

Today’s post highlights the design of MindWork3D.com by The Core Units and Goksel Eryigit for Can Tuncer. The portfolio section above the fold sets the visual tone for the rest of this single-page site. Breaking away from a traditional grid, the portfolio thumbnails are arranged across cells with different weights and sizes, while still using the same underlying “cell square unit”. The navigation controls along the left edge of this section, as well as the bright blue arrow button further anchor this underlying unit and lay out the visual foundation for the following sections. Each portfolio thumbnail has an attractive rollover effect, and once activated, opens an overlay lightbox with slideshows of the specific work.

Scrolling down the page reveals that the navigation controls are anchored to the browser viewport. The buttons highlight as you scroll to the matching section (with a rather jarring “skip” over the “Blog” button that leads to an external site). Each button has its unique distressed texture, while still reusing similar underlying brushes; note the helpful shortcuts embedded in each button that provide quick info on navigating the sections with the keyboard. An extra amount of attention went into vertically aligning the buttons when the content is scrolled all the way up; however, the perceived bottom edge of the last button does not perfectly align with the matching edge of the portfolio row due to extra drop shadows.

Each subsequent section has its own combination of the main underlying elements – distressed textures, monochrome grayscale palette with sky blue highlights, large uneven serifs for section headers. Carefully aligned large square buttons in the bottom right corner of every section help balancing out the large swaths of textures; my favorite texture element here is the hexadot pattern of the portfolio section trying to “break in”, peeling away the crumbling whitewash texture. Overall, the design is a great match to the visual style of Can’s CG work.