Recent posts

  • Relative readability Why go so big on type? There’s a short answer and a long answer.
  • Excuses, excuses Some people might suggest it’s not worth redesigning a site I only post to twice a year. They’re missing the point.
  • The Optimizer Every designer is wired differently. Some people are idea people, some people are artists. I’m an optimizer.
  • Indistinguishable from magic I love video games. I’m terrible at most of them. But I’m a sucker for a game with a good story.
  • Airport express Recently I learned two things about interaction design and user experience from waiting in lines at the airport.
  • Shouts and echoes There have been some situations lately that have got me thinking a lot about the Internet as a megaphone for personal communication.

Archives

15 October 2008

Excuses, excuses

Some people might suggest it's not worth redesigning a site I only post to twice a year. They're missing the point.

Well, I redesigned again. Some people might suggest that it’s hardly worth redesigning a site I’ve only posted to twice in the last year. I say those people are missing the point.

I started this site as an excuse to experiment with design and CSS. Over the years, I’ve enjoyed the writing as well. It’s nice to have a place to record and share those stories and observations. I have a terrible memory, so it’s especially satisfying to read back through some of the best moments of my life. If I didn’t have this site as an excuse, I probably never would have written all that stuff down, at least not in that much detail. It’s like telling stories to my future self.

Yeah, yeah, “I’m doing this for myself, not for you.” Whatever. But I do enjoy having this site and watching it evolve — even at a glacial pace. I post when I have something I want to share or remember enough to take the time out to actually get around to organizing my thoughts about it. And writing it. And editing it down. And posting it. Sometimes all those things happen, but more often they don’t, and a lot of stuff floats around in various stages of “not done”.

It’s the same way with the designs. For each redesign of this site that’s actually launched (that’s four, counting the original slapped-together Movable Type template) I’ve started about five others. With each of them at some point, for whatever reason, I wasn’t feeling it, and I just stopped working on it.

That’s a luxury with personal projects. There’s no money on the line, no deadlines, and no expectations. I’m doing it because it’s interesting, and when it stops being interesting, I stop doing it. If it stays interesting long enough for me to actually finish it, maybe it’s interesting enough to share. It’s not exactly a model of follow-through (in fact it’s basically applied laziness), but it means that my effort on a project is directly proportional to how good it is. The better it is, the longer I keep at it. And the longer I keep at it, the better it gets.

Sometimes I wish real projects worked that way. We’d hardly ever get anything done, but we’d get a lot less crap, anyway.

This time around, it started with a poster. I was poking around Flickr for inspiration, and I ran across this great set of posters from one of my favorite Swiss designers, Joseph Müller-Brockmann.

There was one concert poster in particular that I hadn’t seen before. It’s one of those great examples of beautiful visual design by way of good information design. It’s visually appealing because of the structure — the type size contrast, the grid — and the structure is there because it represents the information. 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.

I love green, if you hadn’t noticed. For some reason, it’s always the color I’ve come back to as a starting point for a lot of different designs. I tried lots of different color combinations for this site over the years, but they never stuck.

I wanted to branch out this time, but I wanted some flexibility, so I built the site frame and homepage to adapt to different colors and backgrounds. I started with the classic green, but that will change periodically.

The homepage in particular uses RGBA color values to add transparency to the text so it picks up the background tone, whether it’s a solid color or an image. Even the “black” text on the homepage is slightly transparent, which gives it just a hint of the background color. It softens the contrast a bit, and it reminds me of the effect when I used to overprint colors in print design.

Not all browsers support RGBA, so I’ve included a fallback to plain black for IE and older versions of Opera. It’s not as pretty, but the design stays intact.

Firefox 2 was a special case, because it doesn’t support RGBA, but it didn’t feel right to leave it out in the cold. I made a separate stylesheet just for Firefox 2 that uses the opacity property to achieve the same effect. I’d avoided using opacity overall because it causes ugly glitches with text antialising in Firefox 3 and Safari. I couldn’t find a clean way to deliver CSS just to Firefox 2, so I used some ugly old Javascript user-agent sniffing. Sue me.

With the type, I wanted to go big. I opened up the width to maximize the whitespace and make room for some big titles to get the impact of that size contrast.

I’ve always been a fan of Helvetica, but I never liked how it looked on screen at small text sizes. I’ve used Lucida Grande a lot, which is very attractive and readable at text sizes, but it’s not so hot at title sizes, and the best fallback options for Windows and Linux are Verdana and Vera Sans, which are very readable, but have drastically different character widths compared to Lucida. Helvetica always looks good big, so if I was going to use it, might as well use it big. It might be a little outsized for the Web, but I think it sets a nice tone.

On the same scale, the post body text is much bigger as well, with more whitespace and shorter line lengths. It’s also the only thing that’s not Helvetica. I love the effect in print (it’s popular in magazines) of interspersing sans-serif bold text with serif body text for emphasis. It really does stand out more, but it doesn’t feel disjointed. I’ve gone through some old posts and added some formatting along those lines, and I’m really happy with how it breaks up long chunks of text and makes it more readable.

Overall, I’m proud of this design, more so than any of the previous iterations of this site, including the ones I never finished. I really liked the homepage design of the last version (still available here for posterity, though there may be some quirks since I’m serving it from the same database), but I never was happy with how the interior pages looked. This time I started with the interior page design and worked out from there, and I think the result is much more consistent.

And hey, it gave me an excuse to post something before the end of the year.

Comments

  1. 15 October 2008

    Oliver Beattie

    Wow this is beautiful. More crazy-amazing attention to detail — absolutely gorgeous :)

  2. 15 October 2008

    Daniel Black

    I like the section headers as sentences contained in the paragraph. Nice touch. And the posters? Beautiful.

    Are you using sIFR?

  3. 15 October 2008

    Reuben Whitehouse

    Very lovely this is. Love the use of color. Bravo!

  4. 15 October 2008

    dean royal

    for what it’s worth (coming from a sales geek) i agree with your sentiments on why do any of this posting and redesigning. ‘my future self’, terribly awesome. looks great, man. i’m a fan of the huge contrasts.

  5. 15 October 2008

    Jacob Kaplan-Moss

    Looks fantastic, as usual. You’re so damned talented I can barely stand it.

  6. 15 October 2008

    shelbybark

    simply beautiful.

  7. 15 October 2008

    Patrick Beeson

    Wilson, you are one of the few Web designers with a distinct, and beautiful, style all your own. This redesign re-enforces this. Fantastic.

  8. 15 October 2008

    Jorge Quinteros

    Congrats on the redesign. I particularly enjoy the distinct layout between the main page and that of a single post. Simplistic in nature yet very functional in presenting your web life. Between you, Jeff Croft and Tom Watson, Django seems to be the most efficient way to truly merge all social habits into on central hub.

  9. 15 October 2008

    Kyle

    Bravo! I really like the idea of using opacity. The ‘Work’ section is nice, too.

  10. 15 October 2008

    Brade

    You’re right on about the false starts giving way to the truly worthy final product. A good redesign has to earn its keep. I really like what you’ve come up with!

  11. 16 October 2008

    Chance

    Beautiful Wilson! Grid, Typography, Color—Brockmann would be very proud!

  12. 16 October 2008

    Albert Pi

    Amazing work. So clean, so swiss.

  13. 16 October 2008

    Ben Bodien

    Beautiful stuff, Wilson. You should change your middle name to “#9ED652”.

  14. 16 October 2008

    Nathan Pitman

    Wonderful. I particularly love the simplicity of the little previous and next entry widgets at the top of the 3rd column. :)

  15. 16 October 2008

    Ken Chang

    Squeaky clean, Wilson! Love the mixture of Helvetica for emphasis and Palatino for body copy. It has a nice calming effect.

  16. 16 October 2008

    Lisa Price

    Well I think it looks smashing! Palatino’s one of my favourite fonts - we used to use it for typesetting poetry books in my first ever job.

  17. 16 October 2008

    Timothy Long

    Great structure. Great use of type. Makes me want to spend time here.

  18. 16 October 2008

    Brandon Konkle

    Fantastic desgin! I love the larger text sizes and the minimalistic very readable layout. The colors are great, and your headers really jump out at me. The WM logo is nice, too. :-) Kudos!

  19. 16 October 2008

    kevin Crawford

    Very nice redesign—my favorite part is the logo identity.

    I recently did a redesign, with many of the same objectives as you. I think you were much more successful in using your white space, though!

  20. 16 October 2008

    Katherine

    This is lovely, I’ve been thinking about redesigning my blog and now I just might have to!

  21. 16 October 2008

    Steven Clark

    I really like the clean less is more (with quality) style of your new digs. Particularly the treatment of the poster breaking out of the box, so to speak.

    Very nice.

  22. 17 October 2008

    Daus

    This is great Wilson. The colour is so you.

  23. 17 October 2008

    Daniel Marino

    Looks great. I like the color scheme a lot. I love the white space and the simple layout. Also - the logo is very-well designed.

  24. 17 October 2008

    Paul Annett

    Absolutely love it. It’s inspiring me to actually bother designing my blog rather than leaving it as a Wordpress theme. I must find the time, although that will be harder now that I can’t stop looking at your blog cos its so gorgeous.

  25. 17 October 2008

    Jess Wittebort

    most plUMP. really great stuff going on here.

  26. 17 October 2008

    Greg

    Looking fine my man. I have two questions:

    1. Can I have your old blog design? Because it rocked just as hard as this one IMHO.

    2. Why go so big on type? Could not the same affect be achieve with smaller sizes?

  27. 17 October 2008

    Tom Watson

    Absolutely stunning man. I love how you’ve been able to put a lot up yet still give it that feeling of space. Going “big” really, really worked. I’m just annoyed that I want to take a look at redesigning my site again. Damn you.

  28. 18 October 2008

    Manuel

    Superb redesign: I absolutely love it!

    I noticed that you switched the doctype to HTML. At the same time your code follows the stricter XHTML rules. Could you comment on this choice?

  29. 18 October 2008

    Spike M

    Wilson, I’ve never come across your site before.. I’ve spent too long looking on ‘inspirational website designs’ and such to find the true quality that is wilsonminer.com. I’d just like to say that this redesign is one of the nicest, and importantly the most readable, that I’ve seen in my time.

    Thank you for your beautiful work of art. I, for one, have been gleefully inspired by the whitespace of it all!

    -Spike

  30. 19 October 2008

    Ole Martin Kristiansen

    Great grid, great typography and lovely colors. Clean and crisp and very enjoyable in terms of readability.

  31. 20 October 2008

    Scott JOhnson

    My favorite element of this new design is the use of Helvetica for the section headings. I absolutely love the contrast up against the serif body text.

  32. 20 October 2008

    Wilson Miner

    Thanks, Greg. In answer to your questions…

    1. Can I have your old design? As long as you change everything to orange, I’m sure nobody will notice.
    2. Why go so big on type? Good question. Here’s an answer.

    Manuel, I switched back to using HTML 4 doctypes a couple years ago. The stray XHTML closures were leftover from the previous templates. It’s really just a matter of preference, but the WebKit team makes as good a case for HTML as anybody.

  33. 20 October 2008

    Robert Josiah Bingaman

    Before I add my comment, I’d like to point out that no one, aside from you yourself, is more aware of all the things you’ve “made” than I. No one.

    Good job.

  34. 21 October 2008

    Luke Dorny

    This is absolutely stunning. I’ve been staring at the Blanka.co.uk pages for what seems like ages trying to replicate 4 of the styles on different parts of my site in EE. http://www.blanka.co.uk/Design/Muller-Brockmann/Gallery_2… I’m moving way to slow, and I’m also quite stunned at your success with it.

    Wonderful job! Congratulations!

  35. 25 October 2008

    Martin Berglund

    Congratulations on the redesign. I think you have succeeded very well in focusing the readers eyes on what’s important and should have attention. The combination of Palatino and Helvetica Neue is supersmooth :)

    Could this link help you with the browser specific problems better than the script you all ready have used?

  36. 26 October 2008

    Jonathan

    Perfect!

  37. 26 October 2008

    Markus Lund

    I like the outfit you’ve given this place!

  38. 30 October 2008

    Jane Nguyen

    “That’s a luxury with personal projects. There’s no money on the line, no deadlines, and no expectations. I’m doing it because it’s interesting, and when it stops being interesting, I stop doing it.” I agree with you at this point as I feel the same way too and congrats that you are proud of this design :)

  39. 30 October 2008

    Jeremy Lwanga

    Congrats on the redesign!! Great font and contrast! I also had to say way to go on that proposal in http://www.wilsonminer.com/posts/2005/jul/31/an-engaging-… ;)

  40. 2 December 2008

    Carlos Hermoso

    Nice site you got here. I really like it

  41. 2 December 2008

    Chris Cox

    Wonderful redesign which really inspired me during several recent projects.

  42. 5 December 2008

    Artur

    You got here a really nice site!

  43. 6 December 2008

    Eman

    great sensibility and kudos for understanding the function of typography…readability. JMB and his contemporaries were masters of ‘Information Design’… it was good that you went to the right source in capturing clarity and hierarchy.

    unfortunately, most contemporary designers adapt this as style and surface without really understanding its intent. you on the other hand rationalized your design based on some very good investigative questioning and therefore the result supported your concerns. great work!

  44. 11 December 2008

    freddywang

    I told my friend, I swear this page was green before !!

    :-)

  45. 22 December 2008

    Simon Pascal Klein

    Absolutely typographically charming. As another another Swiss Style fan, I Had a near typogasm upon reaching the home page. Beautiful work. (:

  46. 20 March 2009

    William Echo

    I agree with everything you wrote there, and just HAD to say this site is beautiful. Good job. Loving the purple here too - even though it’s my least favourite colour.

  47. 31 March 2009

    Vishal Goyal

    Absolutely typographically!! Gr8 Work