Every month this series is tracking the latest design trends and collecting the best examples of modern web designs. Here is the list for June 2011 with almost 800 links from 31 aggregator posts:

Every month this series is tracking the latest design trends and collecting the best examples of modern web designs. Here is the list forMay  2011 with over 800 links from 37 aggregator posts:

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.

Today’s post highlights the design of LucidDesignConcepts.com by Joey Adkins. This single page site has an interesting visual rhythm, alternating between the strong brown, aquamarine teal and brick orange as background fills for the three main sections. This plays rather well with the site logo that not only defines the three main colors, but is also composed of bold large circles and custom slanted glyphs. The designer’s experimentation with typography is seen everywhere on the site, using different font styles, families and sizes (sometimes it feels a little bit too much, especially in the footer). Noise textures and serrated edges of section separators add nicely to the overall retro look of the page, with an extra touch of smooth rollover effects on the main navigation menu and social links in the footer.

As far as the usability is concerned, i’m rather puzzled by the placement and styling of secondary navigation buttons. These can be found in the two middle sections, with very misleading styling of the icons. I assumed that left and right pointing arrows would start paginating the content in the specific section – which is a well-known paradigm for navigating large portfolios. Instead, as i clicked the right arrow button, the whole page scrolled vertically to the next section, while i was expecting the next nine-pack of portfolio thumbnails to slide from the left. Perhaps extracting the secondary navigation to the right margin, or making the navigation header static would be a better solution that is aligned with what visitors have come to expect from in-page navigation.

« Go back in time
Step closer to the present »
All content copyright © 2007-2025 Kirill Grouchnikov
Pushing Pixels RSS