Design, uninterrupted #46

June 25th, 2010


Today’s post highlights the design of MilesDowsett.com. A somber color palette of beige, olive, dark brick red and dark desaturated brown sets the tone for the site. Dark brown is used as the background for both the header and the footer sections that frame the main content, with olive and brick red used for links and section headers respectively. Olive is also used to embellish some of the texts (vignette ampersands and footer section headers are examples) – which makes it harder to know what is clickable and what is not. The site content is laid out in a precise grid that also leaves plenty of white space around the different sections. Note how the footer sections align with the main content sections above them, and the perfect horizontal alignment of the two “featured work” sections.

A few well-placed illustration elements add a human touch to the design – dented bottom edge of the dark brown header, the vertical ribbon with the main logo, fading dotted pattern behind the top part of the main section, floral illustrations and a custom separator below the introduction text.

Spot the differences

June 24th, 2010

There are four differences between the two images. You can cheat and look at the SVN history :)

The original:

https://substance.dev.java.net/release-info/6.1/office-black-2007-orig.png

The latest:

https://substance.dev.java.net/release-info/6.1/office-black-2007-1.png

Sneak peek, as we speak

June 24th, 2010

Almost ready…

https://substance.dev.java.net/release-info/6.1/office-black-2007-1.png

https://substance.dev.java.net/release-info/6.1/office-black-2007-2.png

Design, uninterrupted #45

June 22nd, 2010

Today’s post highlights the design of SkylarAnderson.net. A limited color palette of light beige and light blue for links, combined with a precise grid, plenty of white space and simple typography create a clean, modern and enjoyable design. Beveled horizontal separators divide the main page in three sections. The header features an embedded portfolio slideshow with cross-fading thumbnails of the designer work. Note how the drop shadows and the overlay ribbon create a subtle 3D effect, bringing the slideshow a little closer to the reader. The middle section uses a three-column grid to provide more info, contact information and contact form. A somewhat bright text shadow color hurts the legibility of rather large text sections. Also, the OS-provided “Send” button stands apart from the otherwise beautifully styled text fields.