Today’s post highlights the design of ApolloHQ.com. With an attractive auto-advance animation of product screenshots, rich blue color scheme and strategically placed action elements, it is a well-executed example on how to do a modern product website. Also note the oversized header illustrations, overlaying a space ship and bright blue atmospheric effects on top of a starry sky.
Image by bethan
Every month this series is tracking the latest design trends and collecting the best examples of modern web designs. Here is the list for October 2010 with over 1000 links from 35 aggregator posts:
Today’s post highlights the design of CreativeMints.com by Mike Muzhychkov. You may remember Mike’s other creation, EmotionsLive.com that was featured in this series a few months ago. The instantly memorable style that combines rich saturated colors, oversized illustrations, decorated fonts and soft highlights turns what might have been a gaudy display of oranges, purples and greens into a lush and enjoyable creation.
Soft animation effects on the navigation menu, “new and noteworthy” accordion and section transitions triggered by the arrow icons along the right side of this single-page design add an extra dimension of finesse. The smooth animations continue in the cross fades initiated by clicking on portfolio thumbnails; unfortunately the transition to the full-size lightbox is rather abrupt and can use some extra love in the next revision of this otherwise engaging experience.
Today’s post highlights the design of CoolAndTheGuide.com by Dustin Heerkens. A stark monochromatic palette sets a spartan tone to the site dominated by typography and large desaturated images of interior design. Note the interesting switch between four column grid of header / footer and three column grid of the main content (and the top-right intro text blurb). This works quite well for the large text sections, but creates a certain visual imbalance between large images in the main section and small round icons in the header; this imbalance can perhaps be addressed by moving the icons to be above the navigation menu entries instead to the left of them.
Opting for smaller font sizes creates a number of problems. Rather large text sections in the main content require more effort to read, partially due to 11px Arial with thin stems that are rendered quite unevenly on LCD screens. Zooming in the content to address the legibility issues makes all columns wider (instead of preserving fixed pixel sizes), breaking the horizontal containment within the browser window. In addition, the styling does not provide any visual indication of what is a hyperlink – the links are indistinguishable from the regular content. My overall feeling is that the strong focus on the spartan palette and typography has unnecessarily sacrificed the usability and navigation ease.
