Model Site

Blissfully Aware site redesign.

Web designer Joshua Lane, currently best know for doing fancy web stuff at Virb.com, has overhauled his personal site in ways that are aesthetically pleasing and visually instructive.

Like all good site redesigns, this one starts with the content. Whereas the recent zeldman.com redesign emphasizes blog posts (because I write a lot and that’s what people come here for), Lane’s redesign appropriately takes exactly the opposite approach:

There is a much smaller focus on blog posts (since I don’t write often), and a much larger focus on the things I do elsewhere (Twitter, Flickr, Last.fm etc). Individually, I don’t contribute a great deal to each of those services. But collectively, I feel like it’s a good amount of content to showcase (as seen on the home page). And something that feels like a really good representation of “me.”

Not one to ignore the power of web fonts, Lane makes judicious use of Goudy Bookletter 1911 from The League of Movable Type, an open-source type site founded by Caroline and Micah, featuring only “well-made, free & open-source, @font-face ready fonts.” (Read their Manifesto here.)

The great Barry Schwartz based his Goudy Bookletter 1911 on Frederic Goudy’s Kennerley Oldstyle, a font Schwartz admires because it “fits together tightly and evenly with almost no kerning.” Lane inserts Schwartz’s open-source gem via simple, standards-compliant CSS @font-face. Because of its size, it avoids the secret shame of web fonts, looking great in Mac and Windows.

But considered type is far from the redesigned site’s only nicety. Among its additional pleasures are elegant visual balance, judicious use of an underlying horizontal grid, and controlled tension between predictability and variation, ornament and minimalism. Restraint of color palette makes photos, portfolio pieces, and other featured elements pop. And smart CSS3 coding allows the designer to play with color variations whenever he wishes: “the entire color scheme can be changed by replacing a single background color thanks to transparent pngs and rgba text and borders.”

In short, what Lane has wrought is the very model of a modern personal site: solid design that supports content, backed by strategic use of web standards.


15 thoughts on “Model Site

  1. Great design conceptually, but as someone who both stares at a computer screen all day and suffers from moderate (and increasingly worse) astigmatism, I’m bothered by the recent trend to black backgrounds on websites. It’s tempered somewhat by relatively low-contrast text, but light text on a black background causes a lot of eye strain for those of us with astigmatism!

  2. I’m bothered by the recent trend to black backgrounds on websites.

    All the more reason to love the site. By changing the background color on the body element with a user stylesheet you can change the look of the entire site.

  3. I like the contrast between blogging and referring to the site resources and other online properties Josh maintains. This is a great example of basically being a digital intersection to direct traffic based on interest while also still representing Josh, his value, and extending his brand reach.

    Often times it’s confusing for most people to understand why a person would be in and maintain multiple footprints across the web and this is a great example if you dig around on the site.

    Thanks for sharing.
    Justin

  4. I’ve come to realize that what’s considered well done in this world is completely and always subjective. I don’t think this is good design at all. It’s hard to read with no real focus in terms of visual hierarchy. The older I get the more I realize that success is being in the right place at the right time.

  5. While I love the typography (love Goudy Bookletter 1911), it’s just a little too boxy for me.

    The reversed type is alright, but I can see how many might have trouble with it. I have a personal preference for non-reversed type, but like Justin said, aesthetics is often subjective.

    Content and purpose, on the other hand, are pretty well executed, though there doesn’t seem to be much of a central focus here. Blog posts are spotty, says the designer, but then he goes on to put them in the place most of his audience would look for regular updating content.

    All in all it’s good work, but I don’t know it’s something I would have pointed to as ‘great design’.

  6. I’m not a fan of white text on black bg either, (makes my eyes hurt) but aside from that, while I can appreciate pushing boundaries by using web fonts, I looked at the site in 4 different browsers on PC and Mac, and the site looks different on each. IE on PC doesn’t smooth the fonts nor does it use the right color for each head or link as the designer intended. What’s good about that? PC also makes the serifs all wonky as well.

    Further, the heirarchy (as someone mentioned) is scattered all over the page, pulling my eye straight down once I land and see the logo.

    As far as being a model site, I dunno…

  7. I respect a progressive approach to just about anything, so well done in that regard. I changed the background-color to red – Sweet.

    Viewing in Chrome on Windows 7 the web fonts aren’t looking so hot. The top and bottom edges of the letters don’t define a straight horizontal line but look jumbled and awkward. Alas, I guess we’re in a bit of a quagmire still in terms of web fonts, but its good to see that there are some forward thinkers out there.

    Honestly, it’s hard to get any sort of idea of what this is on first impression. Where do I look? What is this site for? The eye just zigzags instead of following a linear path. The subheadings and photo captions are tiny and virtually illegible.

  8. I have to agree with the comments above – this seems pretty standard; not cutting edge, to me. And the actual hierarchy of content is confusing and seemingly inappropriate, since he admits he doesn’t blog much. Funny that he specializes in IA.

  9. The nice thing about personal sites is that the only audience you’re really designing for is yourself. So you can experiment and try new things… be inventive. Is the site perfect for everyone? Not at all. But it’s perfect for me and that’s all I was really going for.

  10. I’d love to, but it’s grey small print on a grey background…

    It’s “grey” print on a *white* background.

    It’s italic, which is a poor choice for long passages.

    It’s small, but you can enlarge it in Safari, Chrome, Opera, Firefox, and probably even IE.

    If you enlarge it in any good modern browser, then you won’t have to complain about it’s being small print.

    If the grey color is still hard for you to read, try a user style sheet or (even easier) use Readability, a free script/plug-in by New York’s Arc90 that makes *any* page easy and pleasurable to read.

    Try it.

Comments are closed.