Design, uninterrupted #145

February 18th, 2011

Today’s post highlights the design of ShellyCooperDesign.com. It’s a single page-site that maintains a great balance between text and images, using a soothing duotone color palette of desaturated light blue and gray for the content and peach red for highlights. A cursive script Lobster adds a little spice to the sectionheaders, while slightly curved stems of Colaborate combined with white text shadow is a perfect companion for the sparse text sections.

The header strip remains anchored along the top edge of the viewport and uses a translucent white to create a nice overlay effect as you scroll down the page. The big splash of peach red is the main call-to-action, and is mirrored in three other places (which are all simple textual links that resolve in sending an email). This color is also used on the portfolio thumbnails for two purposes – a decorative strip to indicate new work and the rollover ribbon that hosts the encoded range of services provided for the specific project.

The rollover effects need some tweaking. While moving the mouse away from the thumbnail, the rollover fades out smoothly, but there is no corresponding (if only shorter) fade in effect when the mouse is moved to be over a thumbnail. In addition, moving the mouse over the inner rollover ribbon results in fading out the entire rollover layer – this is quite jarring if you happen to slide the mouse across the thumbnail, going in and out of the ribbon.

Elsewhere, note the amount of attention to visual details – from the fine background texture to letterpress effects on the large section headers and separator “stars”, from the drop shadows around framed thumbnails to the styling of the contact card in the bottom left corner. For an extra visual treatment click one of the portfolio thumbnails to see how the lightbox frame allows navigation between different projects, as well as between highlights of the current one – along with a short description of the project itself. And finally, the earthen brown used in the footer is a perfect complementary of the main desaturated light blue – in both the hue and value (but thankfully not saturation).