Today’s post highlights the design of Blog.EchoEnduring.com by Matt Ward. Separated in six vertical sections, the design uses the full brightness spectrum of the teal color to frame the blog entry snippets. The darkest shade of teal is reserved for the thin contact / social / search strip at the top and the oversized footer at the bottom. The navigation section is placed in a lighter shade of teal, with a typography-based logo featuring a stylized stipple drop shadow; note the slight radial highlight “emanating” from the logo that sits atop an almost imperceptible noise texture.

The next section uses the lightest background and highlights the last two entries. Each entry gets a full row, with oversized thumbnails, generous font size for the titles and extra detail level of the metadata. Slightly older entries get smaller thumbnails, smaller fonts and less metadata. Finally, the third section of blog entries features text-only snippets laid out in four columns on a slightly darker teal background that transitions the eye toward the dark footer. Note how each section uses different shades of the main teal color for titles, snippets, metadata and links – maintaining the same hue but varying the brightness and saturation. Also note the consistent double-diamond pattern used to separate between each two consecutive sections.

To add a little bit more visual variety, each section uses a slightly different background pattern – from flat to noise, from horizontal stripes to vertical stripes. The design also strives to adhere to a four-column layout, but the second section of the entry snippets is a rather unfortunate deviation from the vertical grid lines, especially given the large vertical white space left behind the sliding ad snippet in the right column of the main entry section. The footer is an attractively styled collection of links, embedded Twitter widget and a smaller navigation menu.

Visit individual blog entries (note the styling of the comments section and contact info), category listings and archives to see how the visual theme is maintained throughout the site. Also pay attention to the usage of embedded fonts, particularly large-serif Latin Modern Roman for the main navigation menu / some of the entries metadata. The usage of CargoGothic Std for the rest of the body text is rather questionable, though, as it leaves much room for improvement in kerning, legibility and curve thickness for most of the font sizes.