wilson miner

wilson miner

Sometimes inspiration can lead to great things. In this case, it is Wilson Miner’s newly redesigned website.

His new website—which includes both his blog and portfolio—is inspired by a concert poster designed by Swiss designer Joseph Müller-Brockmann. The way Wilson translated the idea of the poster into digital form is astonishing. If Joseph Müller-Brockmann were alive today (and designing websites), this is what they would look like—trust me.

Wilson’s use of type, color, and most of all, structure, not only keeps the Swiss style of graphic design alive (print withstanding), but also breathes a breath of fresh air into the world of web design and what is typically found on the Internet today.

Type

Among other things, typography plays the largest part in holding the design together. On the home page, which lists his various blog posts, photos, links, and other “ephemera”, every letter is typeset in Helvetica—from the navigation to the headings to the body copy.

One thing I’d like to point out is his use of Helvetica instead of Arial for body copy. It’s understandable why many designers use Arial at small sizes because of the horrid rendering of Helvetica on the Windows operating system; but the fact is, Helvetica looks great on Macs. I have yet to understand why some designers don’t use Helvetica instead of Arial on their personal websites, considering their target audience are Mac users (Khoi, I’m looking at you!).

The typography veers into a new direction when one digs deeper into the site. Blog entry pages are typeset in big, very readable Palatino. Despite the fact that this use of typography, in a way, disagrees with most of Brockmann’s work, the result here is positive. The type is easy to read, and is a nice change of pace.

In keeping with the consistent style of the home page, Wilson manages to use large, tightly letter spaced, bold titles set in Helvetica throughout most other pages. The contrast between the sans-serifs and the serifs is very comfortable on the eyes and makes for good hierarchy.

Color

When Wilson introduced his new design, he noted:

“The color is the only purely visual accent, but it only adds character to an impact that’s already there. I wanted to see if I could get that across on the web. First of all, that scale and contrast, but also that play between color and content. I’ve never been much as a purely visual designer, and I’m worthless as an illustrator. So I try to stick to the tools I have left: type, spacing and color. Especially color.”

And boy did he utilize those tools very, very well. His use of color is really what separates his site from most other Swiss inspired sites. White seems to be the popular color for most Swiss design, especially on the Web. When Wilson’s new site debuted, the background color of his site was green. It was memorable, and in addition to the type, it really made the design his. Within months, Wilson changed the background color from green to a cross between yellow and orange—once again: very memorable. I actually kind of hope he changes the color every month. He’s two for two, so far.

When a user clicks through to an interior page of his site, the background of the main content is changed to white (I’m assuming this was done for readability), while the header and footer remain unchanged.

Links are set in a blueish-turquoise color that looks great in contrast with both the white background and the colored background of both the header and footer.

Structure

And now, the finale. The typography and and color are merely accessories to the structure of the website. Every piece of content is staggered across a grid. Some columns remain empty for the sake of whitespace and readability, while others are used for either meta data, comments, or other important information.

The list of recent blog posts on the home page seems to be an almost exact replica of Brockmann’s orchestra poster. Most evident is the title (bold and larger than the surrounding text), which occupies the second column, which is very similar to Brockmann’s design.

One of the great things about Wilson’s design is the transformation of static, permanent content to dynamic, interactive content. The Photos section, for instance (found on the home page), is staggered across the grid, while the information (including titles and dates) is set against various columns of the grid in a readable and attractive way.

Conclusion

As hard as I try, I cannot criticize Wilson Miner’s website. Dare I say it: Wilson Miner’s website may be perfect. But then again, what else would one expect from one of the folks responsible for the Apple.com redesign?

This is just an idea, but I think it might be interesting if Wilson were to experiment with sIFR and attempt to replicate the Akzidenz Grotesk found on Brockmann’s concert poster.

  1. Dennis Eusebio

    Site looks amazing. Love the details and grid.

  2. Antonio

    Site looks nice but I’m not feeling the color. I think it really takes away from the beautiful design.

  3. Kyle Meyer

    @Antonio I agree, I much preferred the green color he began with, although the current isn’t terrible. But since such a large part of the design relies on the color choice at hand it’s always going to be a dramatic change. I’m sure blue will look quite nice, but I wonder if something more intense like red can be done without being too pinkish.

    Weird situation, I’d go insane choosing between tints and shades.

  4. inspirationbit

    This was the first time I’ve seen that site. I really like it, especially the grid. Not crazy about the colour scheme, but that’s just personal, otherwise the chosen colours work very well together, and of course, they’re different from the typical colour scheme often associated with Swiss style.

    Interesting idea about experimenting with sIFR, Joey. Wonder what Wilson thinks about it?

  5. Antonio

    I’s personally just make it black and white. I think it would look sexy that way. :)

  6. Tor Løvskogn Bollingmo

    Love it, simple and yet so easy to remember because of the color.

  7. Leon Paternoster

    A fabulous site that shows what can be done with plain text, inline images and a large dollop of imagination: puts my attempt at ‘Swiss’ to shame (similarly, my last redesign was influenced by an encounter some Swiss–style print).

    Bold helvetica/arial for headings is so direct and effective.

    I like this movement towards big text and simple structure and presentation—away from graphical design. Miner links to a designer I really admire (Vitor Lourenco) who is even more ‘extreme’ in this regard (note: Vitor appears to change his site every week or so, but the approach is always the same.)

    My only gripe would be the home page background/text contrast is a bit low. Apart from that it’s perfect.

  8. jim

    It’s unfortunate that his logo looks nearly identical to Waste Management’s logo: http://www.wm.com/

  9. Mark Otto

    Kyle, as I understand it, there are two reasons people still use Arial over Helvetica: it renders better than Helvetica on Windows machines (as you mentioned) and it is more predictable across different platforms.

    Consider the level of control designers want across browsers and operating systems. A font that renders nearly identical across all major browsers is much more preferred than one that produces different or unexpected line heights, font weights, etc.

    That said, I’m a Helvetica Neue fan myself :) .

  10. Kyle Meyer

    @Mark Hi Mark, I think you may have wished to direct that comment towards Joey, but I wholeheartedly agree. That said, depending on the ratio between platforms (Typesites for instance, has over 60% of its audience on the Mac OS), combined with browser usage (again, Typesites has near a 25% Safari rate) and I think that on sites targeting designers it is ok to go with Helvetica at larger sizes.

    But again, at small sizes, the rendering on PC’s is so terrible that it’s just not worth it, even if Helvetica is by far the better choice.

    Lately I’ve been using Helvetica Neue as the primary typeface, skipping Helvetica straight to Arial at smaller sizes. This allows those on Macs, particularly designers to see the site how I intended, without leaving any PC users out in the cold with terrible Helvetica rendering.

  11. Nick Caldwell

    I love the typography but I found the colour choices (foreground text colour against the background) made the text exceptionally hard to read. I double-check the colours with Jonathan Snook’s colour checker and confirmed my suspicions: completely inaccessible to users with poor vision or diminished colour perception.

    Not a good trend, folks!

  12. Mark Otto

    @Kyle

    Oops! You’re right.

    We do a similar treatment on our site ZURB.com. We serve up Helvetica Neue to OS X users and Helvetica to Windows users. Since Helvetica Neue is native on all OS X computers, we figured why not use the better font?

    And you’re right—it always depends :) .

  13. Joey Pfeifer

    Thanks for the comments, everyone. I also prefer the green background, although I don’t have a problem with the current color, either.

    @Antonio
    Black and white might look pretty good, too, although I think it’s the color that makes his site stand out so much.

    @Mark
    I think it all has to do with the audience. Some might decide that if 75% of their audience uses Macs, then Helvetica is probably okay. Any less, than maybe they’ll have to reconsider.

    I have thought about using Helvetica Neue (rather than Helvetica) and then Arial. I believe most Macs have it pre-installed, whereas most PC users don’t. It sounds like a nice solution.

    @Jim
    It’s also unfortunate for Waste Management that there logo isn’t as good as Wilson’s. ;)

  14. Daus

    Love the grid.

  15. James Broad

    Dislike the colour palette as mentioned by others already, however, this is just a preference; the said previous lime green version was stunning!

    The look of the homepage feels somewhat similar to some of the Flash work that comes out of design agencies, I was half expecting some animation on hover/click interaction, pleasantly surprised it was static.

    Very daring design, what with the minimalism and garish colours but the result pays off, it’s a spectacle of a site, much like yours Joey :)

  16. Jason Newlin

    A great designer and good friend Matt Gist (@mattgist) pointed @wilsonminer site out to me when he first launched it. We spend a good amount of time looking at everything with our mouths wide open in awe.

    It is a beautiful site, not much to say after that. It inspires greatness.

  17. Jason Newlin

    Sorry for the double comment, I forgot to respond.

    @jim - I am sorry, but if you think @wilsonminer logo ‘looks nearly identical to Waste Management’s’ you are missing something. I am not trying to be a jerk or anything, but they are nothing alike - except they have ‘W’ and ‘M’ in them. It’s all about refinement and the little details. Kinda makes me a little ill to compare the two logos, they are worlds apart. Just my $0.02.

  18. Richard Saling

    I really like the fresh design. The layout is innovative yet clean. The colors are a good choice as well. It’s easy on the eyes and attractive.

  19. Wilson Miner

    Thanks for the kind words, Joey and everybody.

    About the color - I’ve used that same green that I launched with for a long time, and I love it. I designed this site so that I could easily adapt the content different colors or backgrounds, but I still hesitated when I switched it over. The current orange isn’t as popular as the green was, but I like that it’s a little bit challenging, and if you don’t like it, it’ll be gone soon anyway.

    As for the note about using Akzidenz, I usually steer away from Flash text-replacement. I like playing with the limitations of the basic building blocks on the Web and seeing what I can do with those. Also, I think a lot of the unique character that Akzidenz has in print actually wouldn’t translate that well on screen. The fact that Helvetica is so uniform makes it less interesting, but it also doesn’t lose as much in translation.

    Thanks again for all the kind words!

  20. Kevin Crawford

    The green was sooooo much better. But I love it regardless. Very inspirational.

    And his logo? Awesome.

  21. brent lagerman

    love the logo, love the layout, the colors are kind of institutional though…

    brent
    @
     mimoymima.com

  22. brent lagerman

    oops just read some other comments, looks like the color thing has already been touched upon :D

    Awesome work, I hope you can read this comment (the type is SO SMALL…)

    brent
    @
     mimoYmima.com

  23. Yuuzaa

    This site looks very structured, very nice and clean.

  24. Dan Lane

    Love the front page and the execution is very well done indeed.

    I also don’t take issue with the mustard colour, in fact I think it emphasises the style from which the design has been derived.

    What i dont like is the mixing of colours and various typefaces on the other pages, this is where it all falls apart for me.

    The beauty of that homepage is in it’s simplicity, with the flood of colour, one typeface and a well considered structure.

    As soon as you introduce the tonal banding of colours and different typefaces it no longer holds together as a coherent design.

    I was really excited on seeing the first page and then felt let down with the others