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.
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.
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.
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.
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.