Today’s post highlights the design of JosephPayton.com. Set in various shades of steel blue, the site features an intricate header that combines multiple illustration techniques for a unique and memorable appearance. The background layer starts with a soft geometric pattern, which is overlayed with a few watercolor strokes and a pencil vignette drawing. A three-tone color palette used for the stylized portrait of the designer creates a friendly and humane feel, further inforced by the custom typography used for the header bullet points. The next header layer combines the navigation menu section (set in a slightly darker shade of the brick red color from the portrait) and the social icons bar. Both use simple rollover highlights and rounded tab appearance for better balance. While these two sections use drop shadows to raise them above the illustrations, an even harder drop shadow separates the entire header from the main content. This separation is completed by overlaying and extending the fingers into the main section.

A two-column layout in the main section highlights snippets of recent blog entries and the latest tweets. The attention to details shows in every element of the snippets – consistent usage of custom fonts for the titles, title rollover effect, watercolor strokes behind the moleskin notebook, the dark mahogany color of the notebook cover that continues the color continuum of brick reds in the header section and slightly raised “callout” bubbles with the comment count. A simple footer section set in deep steel blue completes the usage of custom illustrations on top of watercolor strokes.

When you visit the main page, move the mouse over the header portrait illustration for an attractive fading transition that invites you to visit the designer’s portfolio.