Today’s post highlights the design of nGenWorks.com. This is a refreshing design that explores a combination of diagonal elements, embedded fonts and an invitingly cool palette to create a memorable impression. Two large diagonal stripes frame the main content, with the header section containing an attractive typographic logo and properly rotated social icons. The navigation menu follows the rotation angle of the separator lines and uses images instead of CSS3 selectors that do not work in older browsers.
The main section features an oversized logo that uses three main palette colors – ochre yellow, brick orange and sky blue. Note how these colors are then reused in the main tagline to the left of it, highlighting the agency tools, and using the black color used for the logo outlines to highlight the main goal – the end user. Smaller text blurbs below use styled icons (note the color usage in the two middle icons that further reinforces the color palette while preserving the horizontal balance) – each blurb mirroring and expanding on one of the navigation menu links. Finally, the design transitions to slanted brick orange footer with three faded networking links.
The design uses clean typography by using embedded sans-serif Trump Gothic East Medium font that works well on section headers and large texts, and a readable serif FF Tisa Web Pro for the three-line explanation sections in the lower part of the main page. The later font is used elsewhere on the site (such as the company blog).
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.
Today’s post highlights the design of MrcThms.com. The design is based on a number of visual elements consistently applied throughout all the sections. Among the elements you can find multi-layered stippled noise background textures, fading multi-line separators, decorative elements with a stylized kite shape and attractively spaced wide font used in the navigation menu and subsection headers.
The oversized fringed “blob” icon is repeated twice in a smaller monochrome version, framing the big purple footer; in addition to creating a welcome visual repetition this also anchors the context balance along the horizontal center of the browser window. Slightly desaturated pink completes the color scheme as the foreground color for section headers and links. Finally, the main content section introduces the designer himself and adds a nice human touch by using down-to-earth language and a self-deprecating caricature figure.
