Today’s post highlights the design of AnteMeridiemDesign.com by Inguna Trepsa. It combines solid dark gray / black backgrounds with oversaturated neon yellow-green palette to produce Tron-like visuals, especially in the three phones in the second section. The neon palette lends its colors to the oversized logo illustration, and is further reused (with some desaturation) in the headers, text sections, links and the static navigation menu.
Note how the last section starts using the brown hue to prepare the eye towards the transition to the stylized palm forest footer that mixes the yellow greens with browns, oranges and sand pinks.
On a less positive side, the main header illustration can use fade to transparency in the reflection effect, and the contact form should extend the top two text fields to be right-aligned with the larger text area and the “Submit” button. In addition, the rollover animations on the navigation menu feel very sluggish and should be improved by using much less initial delay.
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.
