Design, uninterrupted #143

February 17th, 2011

Today’s post highlights the design of WhoIsLeon.com by Leon Truong (@whoisleon). Evoking an appearance of an old postcard, the design uses a duotone color palette of brownish gray and faded sand yellow, along with stylized stippled textures and the recently popular Museo font. The detailed silhouettes of electrical utility poles on the footer provide the foundation for the sky-themed illustration style that extends into the rest of the page, with a number of birds, a kite and smoothly flowing clouds that are anchored and do not scroll with the rest of the page. The portfolio section is styled in the same brownish gray, with rollover transitions to the full-color version and lightbox display of a full-size screenshot. The transition to the full-size screenshots uses a bouncing ease at the end that does not work that great with large animated areas.

Each one of the three sections of this single-page design replicates the main navigation menu, highlighting the name of the current section. I’d personally prefer having a single static navigation bar, either along the top edge of the browser viewport of in the sidebar. This is especially jarring given the relatively small height of the middle section which, combined with a maximized browser window, results in two copies of the navigation menu visible at the same time. The arrangement of sections is also not consistent with the order of navigation buttons – upon loading you’re transferred to the middle section, but it’s the first navigation element. The top (first) section corresponds to the middle (second) button.

For an extra visual treatment, study the details of the stippled social icons in the middle section and smooth rollover effects that transition to the full-color version.