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.
Today’s post highlights the design of KickAwesome.tv by Nate Croft (@natecroft) and Jonathan Longnecker (@necker47) of Fortyseven Media. The energetic vibe of the show is highlighted with a rich color palette, an oversized slightly tilted photograph of the show hosts and a vibrant overlay logo. The logo features a great combination of translucent textures, radial highlights and fresh typography. This attention to details is seen throughout the rest of the main page, from the embedded condensed Proxima Nova and the cursive FF Market Web fonts to the muted bokeh texture to the hand-drawn outlines of social icons in the exquisitely styled footer sections.
Today’s post highlights the design of Design View at AndyRutledge.com. The content structuring and layout are an interesting mesh between traditional blog landing page, a magazine-style highlight overview and a detailed archive listing. Instead of letting the visitor view the full text of the latest entries, the top section provides an excerpt of the latest entry, and then transitions into a five-column layout that lists the most recent entries, a few tweet-sized thoughts and a large archive section. While the traditional blog layout puts archive links into a small sidebar or footer, Andy has decided to devote most of the page to a carefully categorized and meticulously arranged list of over 150 links. Using smaller fonts, padded dash separators and a monochrome color palette for this section alleviates the information overload while still allowing quick scanning.
A vibrant saturated orange is used for styling the external hyperlinks and rollover fill for the titles of recent entries. Combined with a clean typography, a strong grid and vertical transition from light to dark variants of the main hue it leaves an elegant, professional and memorable impression.
Today’s post highlights the design of Galp.in by Tyler Galpin (@tylergalpin). Clean and strong angular geometry permeates the main page, from the large yellow logo to brick red header ribbons to the oversized (and beautifully styled) call-to-action arrow / button combo. Typography geeks would swoon over the typefaces and drop patterns in the tagline section that features a unique combination of different font faces, styles and weights (note how the ampersand sign is the only curved glyph, and that extra thin “determination” has a different drop pattern below it).
The brick red color is used to draw attention to selected elements and hyperlinks, and generous content margins with coarse dot texture create a stark contrast with the much lighter color palette of the main content. If you like the precise geometry of the main page, make sure to visit the “Process” page that reuses the sand yellow color of the main logo in its stylized illustrations of Tyler’s creative process.
