Design, uninterrupted #77

October 5th, 2010

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.