Today’s post highlights the design of Capo product page from SuperMegaUltraGroovy.com. Matching the clean precision of the application design, the web site features a strong grid, austere dark slate color scheme and beautiful icons that highlight the capabilities of the product. Note the intricate combination of noise background texture, radial highlight emanating from the top edge and extending below the main screenshot, action buttons raised above the main layer with subtle drop shadows, beveled separators and muted icons.
The main screenshot appears to float slightly above the page as well (due to the drop shadows offsetting it from the highlight gradient). Note that even though this screenshot “encroaches” into the left column, this extra visual weight is canceled by large texts and big action buttons in the left column – effectively restoring the balance to run along the middle of the page.
The site has a number of animated transitions – from the fading tooltip on the “Download” button to the lightboxes shown you click on the main screenshot and the “Watch video” button. The only thing i’m missing is rollover indication on the otherwise perfectly skinned hyperlinks in the footer section. Even though the mouse cursor changes to hand, it would be great to see the foreground and underline change brightness.
Image by Straws pulled at random
Every month this series is tracking the latest design trends and collecting the best examples of modern web designs. Here is the list for September 2010 with over 1200 links from 39 aggregator posts:
Today’s post highlights the design of WeDesignWise.com. Completing the week of strong typography, this site is a rather extreme example of taking the traditional print design with rigid layout, precise kerning and bold color scheme, and simply transplanting it to the web world using nothing but images. It’s a rather interesting choice given the recent advances in CSS-based layouts and the fact that the design studio puts the websites before the print graphics in their main copyright message.
Having said that, i really enjoy the interaction of oversaturated splashes of pink, muted noise background, highlight effects behind the main logo and a spartan footer, as well as the overall consistent appearance of other pages (such as About and Contact).
Today’s post highlights the design of MerieBeetge.com. Heavy usage of narrow font faces, bold splashes of solid bright red color across the color steel blue background and an oversized collage of portfolio highlights directly below the navigation menu work well together to create a memorable first impression. The site features attractive transition effects across the different pages (play with the slideshow in the Project section) and consistent theming of icons.
However, it can certainly use more polish in kerning the main logo text, rollover effects over the header / footer icons and the overall appearance of the main “View projects” action button in the portfolio section on the main page.
