Today’s post highlights the design of CubanCouncil.com. The design has a rather loose layout, with heavy reliance on large images with significantly varying sizes and styling. From precise square corners of the images in the bottom row to slightly rounded corners and drop shadows of the four-cell portfolio to the completely round thumbnail of the blog post – it’s an interesting exploration that forgoes a rigid grid in favor of a more relaxed arrangement.

The round shape of the blog post thumbnail also serves as a very attractive way to skim the recent entries without leaving the main page. Moving the mouse over the diagonal arrow “expands” that arrow in place hinting at interactivity. Clicking on the arrow initiates a transition that slides the next thumbnail and cross fades the description section below. The same amount of visual polish can be seen by moving the mouse over the portfolio thumbnails, initiating a pleasantly quick fade in of explanation border.

The navigation menu in the left part of the header are particularly well thought out. A multi-state image is used to emulate the mouse as a light source that casts shadows below the protruding menu texts. Pixel-perfect alignment of textures and texts ensures that cross-fading between the matching rows in that image results in a visually pleasing and consistent sequence that is rarely seen in web pages. Finally, notice the double footer with expanding top part, detailed wooden texture of the header, ever so slight horizontal gradient on the wavy pattern of the main section, random perturbations of separators and simply perfect arrangement of client logos just above the footer (click the “show more clients” to see the full listing). Not to mention the great pairing of golden yellow and light blue for hyperlinks and highlights.