Design, uninterrupted #139

February 9th, 2011

Today’s post highlights the design of the templates section on CampaignMonitor.com. An exquisitely drafted header is by far the most attractive element, with excellent balance, clean typography and muted gradients on faded brown color palette. The secondary navigation bar (with the names of template designers) scrolls with the rest of the header; once it reaches the top edge of the viewport, it stays anchored to allow quick navigation between the different sections. Each section provides a nice short overview of the specific designer, along with links to their homepages and twitter streams; large thumbnails show details of the templates, with attractive rollover effects that overlay buttons to preview or download the specific template.

The page itself is quite tall (eight screens on my monitor), and the anchored secondary navigation bar aims to address this issue. It feels that the template sections should instead be arranged in a large slideshow, with each “slide” showing the work of one designer. The secondary bar can be used to navigate between the different slides. If placing all templates on one page was meant to allow quick comparison of the available charts, it does a rather poor job of requiring continuous vertical scrolling. Anchoring the templates sections to the same vertical edge (the bottom of the navigation bar) should improve usability and address overall visual overload of the page.