Today’s post highlights the design of BradColbow.com, home of the popular web comic “The Brads“. Rich overlapping textured layers set the background of calm skies in the header and deep blue sea in the main and footer sections. A brush metal texture with roughly vertical orientation breaks large swaths of “boring” gradients. Outline illustrations of marine life in the footer section create a welcome distraction from the predominant design tenet of structuring a page as a collection of precise geometrical vertical and horizontal boxes. The page content is set in light blue color that borrows its brightness from the header section. While the footer links are set in light yellow and turn light orange on rollover, the big links in the top part use light blue foreground color. This inconsistency leads to uncertainty on what can and cannot be clicked. In addition, the content font could be a couple of points larger to improve readability.
Today’s post highlights the design of CreamyCSS.com. Set in rich saturated shades of brown and golden yellow, the main emphasis is on a two-column grid of thumbnails. Each thumbnail is set in a soft-clipped gradient frame with a drop shadow to offset it from the main content area. Move the mouse over the thumbnail to see an animated transition effect. The footer section embeds a bookshelf with pagination controls.
Today’s post highlights the design of JordAndChan.com. Set in light brown and beige color scheme, the design overlays a number of watercolor ink stains (some of the fixed) on top of the noise background texture. The main section uses a simple two column layout, one for Jord and another for Chan. Each entry in the main section has a carefully arranged header with custom typography for the title, date, comment count and one-line summary sentence set in desaturated steel blue color. The footer continues the two column layout, embedding a Flickr gallery, category list and sparsely set archive sorted by year and month. With plenty of white space around the elements, large serif fonts for the headers and dark beige text color, the visitor’s eye is not overwhelmed by a rather large amount of text on the main page.
Today’s post highlights the design of 15june.com. Beautifully styled header features clean typography and precise baseline placement of the main logo that has the descenders bleed into the main content area. Toned colors and letterpress effects offset the text-heavy horizontal bars that frame each blog entry on both sides. The main logo, the header navigation elements and the links use theme-consistent colors for the default and rollover (where relevant) states.
Each blog entry has its own CSS stylesheet that creates a unique and yet consistent appearance maintained throughout the site. Entries such as Aperture 3, Moments and Flashback 2009 feature image-heavy layouts, each with its own theme, and its own twist on placing the images and flowing text. The largely grayscale comment grid has a few splashes of the theme foreground color on commenters’ names and the “Add comment” button. This last splash of color is then anchored by a dark monochrome footer that completes the visual palette of the site.
