Today’s post highlights the design of Kapepur.com by Greenhouse Studio. A light-on-dark design uses a warm color palette of peach red, light gray, dark brownish gray and tangy yellow; the later is used for both hyperlinks and section headers leading to somewhat unpredictable browsing expectations. Rich vignette illustration elements contribute to the warm feel, from the oversized logo to separators to the stippled drawing of a coffee tree. The header seems slightly off balance (to the left) – the tree illustration is too “anemic” to balance out the heavy tagline, big logo and the background map. There’s also some work needed to align and balance content in the footer to use more consistent typography and alignment. Finally, while the embedded flickr widget adds a nice splash of color, it feels that the social icons (twitter / facebook) need to be stylized with one of the palette colors; the cyans / blues are too bright and distracting.
Today’s post highlights the design of HelloMountee.com by Padraig Kennedy and John Ryan. Playing off of the product name (which combines the action of mounting a drive with the abbreviation of the publishing platform), the design guides the eye towards a large full-color icon that replicates a stylized uniform of the Canadian mounties. This splash of bright orange surrounded by somber steel gray is a great backdrop for the main call-to-action “buy” button located directly below it – note how the button uses a muted shade of orange to maintain a professional look of the product.
Unlike an overloaded product page for Cornerstone featured earlier in this series, this landing page opts to use brevity and puts all the content above the fold. An embedded overview video of the product takes the center stage, with the default freeze frame using the same muted dark steel gray as the surrounding color palette. Note subtle textures, drop shadows and radial highlight around the video; combined with clean typography (embedded Aller font family) and a strong alignment of elements – especially in the right column – placing just the right amount of product information on the landing page, leaving the rest to additional pages readily accessible from the navigation menu.
Today’s post highlights the design of Shop.TheHeadsOfState.com. Placing main emphasis on highlighting the different products, it uses a clean monochromatic palette, simple typography (mixing Helvetica Neue for body text and monospace Courier for most of the header content) and an austere header logo. Note how the logo slightly overlaps the full-width slideshow that highlights promoted products.
Most of the store products have a distinct vintage look, which is further reinforced in the header section. The cart tracker is decorated with a slightly distorted background that combines a desaturated turquoise color and a dot noise pattern. The muted background grunge patterns can be seen further along the sides of the main slideshow. Finally, each one of the slides (note the nice cross-fade transition effect) features a unique retro-style description of the specific product, combining typography, colors and ribbon elements.
This seemingly simplistic design has a great visual balance, strong alignment and, most importantly, great presentation of the featured merchandise.
Today’s post highlights the design of DotVita.com by Dave Onkels (@daveonkels) and Chris Vogel (@imchrisvogel). A deceptively simple landing page has two main parts, both comfortably fitting above the fold. The top part puts a spin on the main tagline, framing a picture of an air stewardess with beautfully styled condensed typography, all laid out on top of an intricate fantasy landmass map that fades towards the left and right edges.
Note the exquisite interplay of the three main colors from the site logo, earthen brown, raspberry red and light orange. The desaturated brown of the map frames the much heavier brown of the woman’s hair and eyes and highlights her fair skin tone, while the red and orange of her uniform fabric and buttons are mirrored in tall double arrows that lead to more content. The bottom half of the landing page uses a more somber monochromatic color scheme, with three simple content boxes, a thick slanted dash separator and a simple footer with contact information.
The “Logbook” page connects the “30,000 feet” tagline to the studio portfolio, with an attractive “altimeter” that simulates physical descent the closer you get to the bottom of the page. The two arrows at the bottom of the altimeter widget allow scrolling the content, but this is not a very usable affordance. While a previous click is being processed and the content still scrolls, subsequent clicks are ignored; in addition, dragging the pointer arrow does not have any effect.
The “Contact” and “About” reuse the layout and the palette of the main landing page, although with no striking illustrations. However, the “Logbook” page mentioned earlier features an illustration of a vintage suitcase that makes me wish that other pages had such great header illustrations as well.
