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.
Every month this series is tracking the latest design trends and collecting the best examples of modern web designs. Here is the list for January 2011 with over a 1000 links from 36 aggregator posts:
Today’s post highlights the design of ImageMechanics.com.au by Jason Cotterell and Vicki Tourtouras. The landing page features a fresh tagline (“Apps Schmapps”) that uses desaturated peach red to highlight the agency specialty – creating applications that stand out in a crowded store. The rest of the content is “hidden” behind the small blurbs of text with downward arrows. It feels like this content is not immediately discoverable, and at least a minimal amount of color can be added to the arrow icons.
Once clicked, each arrow icon initiates a smooth transition sequence that slides out most of the main content, slides up the section blurbs and then slides in an expanded content for the specific section. Consistent usage of peach red color for highlighting the key points, clean typography and plenty of white space is pervasive throughout the design, with only small peculiarities around switching the direction of arrow icons (they point to where the target content is, instead of where it will end up when the arrow will be clicked).
In addition to a great graphic in the “What makes a great app” section (shown above), i also like the layout of “Meet the makers” with its oversized logo and heavily desaturated picture of the studio owners that leaves only traces of skin tone that mesh well with the peach hue of the main highlight color.
