Putting the Face Back in Typeface

So the other day, Zeldman opined that he’s not seeing the sort of creative explosion he once expected from the web. I can’t say I disagree too much with that, but if you look in the right places, new jewels pop up every week.

Take Ni9e.com’s latest typographic illustration project. After watching it 20 or so times, I think it might really be the coolest thing I’ve ever seen in Flash. It’s creative, artistic, simple, and brilliant. The Bob Dylan (Garamond) one is my favorite, although all others are fantastic as well. Sometimes when I see stuff this good, it makes me want to get out of design altogether. I mean, when the bar is set this high, what’s the point of even jumping!

I can only guess how this was done:

  1. Use a pressure-sensitive tablet to draw a musician.
  2. Record every stylus movement using a custom-built Flash routine.
  3. Compile a text file containing the lyrics of a song from that musician.
  4. Write some Actionscript which recreates the original movement of the stylus, but using letters from the lyrics instead of a plain black line.
  5. Use the pressure-sensitivity to create bigger letters for when the stylus was pressed down hard, and smaller letters for when the stroke was light.
  6. Import the song and play it while the figure is being drawn.

It is great work like this which keeps me inspired about the web industry. Kudos Ni9e.com.

Like this entry? You can follow me on Twitter here, subscribe via email here, or get the RSS feed if that's how you roll.

5 Responses:

  1. You should also check out the ribbon page. I’m no designer, but it might help you see how they created it. I don’t think it was done with a stylus. I think they just recorded the mouse movement and put letters to them.

    Still, it doesn’t detract from how awesome it is. I sat there staring at it forever too (the biggie smalls one).

    P.S. ESPN.com ROCKS!

  2. CoryR says:

    I contacted Evan Roth, the creator of the Typographic Illustrations, and there will be a forthcoming tutorial on the process.

    He’s presenting at FlashForward 2004 about how to create your own Typographic Illustrations, and soon after he will post the tutorial at: http://www.ni9e.com/flashforward/ (nothing there yet of course).

    Thanks Mike for sharing this with us, I never would have seen them otherwise.

  3. Jonathan says:

    Are there any written out (step by step) tutorials on how to create typographic illustration projects such as the Biggie one? If so, where can I find such tutorials?

  4. hi-fi lover says:

    this one reminds me an ascii and ansi art in late 90es

  5. a true jewel

    This is quite possibly the coolest flash demo I have ever seen: ni9e.com Baskerville Old Face does Notorious B.I.G., Garamond does Bob Dylan, and Book Antiqua does the Beatles. Check it out… NOW! [caught this on http://www.mikeindustries.com/, the site of…

Leave a Reply:

Shared
Solitude and Leadership:

Multitasking, in short, is not only not thinking, it impairs your ability to think.Thinking means concentrating on one thing long enough to develop an idea about it. Not learning other people’s ideas, or memorizing a body of information…

Takes a little while to get going, but overall a great article about the virtues of seeking solitude from distractions in order to develop your own original thoughts.

“I think you’ve got a pretty good imagination, despicability-wise!”

“Look Around You - Computer Games”

Can’t believe I hadn’t heard of this BBC series before. Brilliant. Make sure to watch them all. (via daringfireball)

10 New Year’s resolutions for designers:

Do you think Chelsea Clinton asks herself if her mom would understand something complex? No. Because her mom is a badass.

How Doctors Die:

If there is a state of the art of end-of-life care, it is this: death with dignity.

This is the most concise, easily understood article on the perils of end-of-like care in the United States I’ve ever read. It is a must-read, and frankly, a must-heed, in my opinion. (via kottke)

Lost Type Co-op | Browse Fonts:

A nice collection of pay-what-you-will typefaces from Tyler Galpin and Riley Cran.
How to interview a designer with the perfect design exercise:

These sorts of tests are common for engineering hires, but it’s nice to see an example of a good design-oriented one.

Jessica Hische's Lovely Blog:

Embarrassed I had never seen this until today. Lovely work all around. (via drawar)

This recently unearthed video of Steve Jobs at work during the early days of NeXT is a remarkable look inside how he ran meetings, how he created culture at his startups, and how others — like Joanna Hoffman around the 11 minute mark — called B.S. on his reality distortion field. It’s also remarkable in that it reveals Jobs to be a man who picks carrots in pressed work shirts.

The Republican Clown College by WMxdesign. These are so great. Make sure to check out the whole set.

BuiltWith: Web Technology Usage Statistics:

Sometimes when you are deciding on technologies to use on a new site (e.g. jQuery vs. YUI or MS SQL vs. MySQL) it’s instructive to examine what everyone else is doing. BuiltWith has an incredible amount of trending data to help you out in that regard. Very, very cool.

A Brief Rant on the Future of Interaction Design:

Lots of good thinking here. No solutions, but a nice reminder that two-dimensional touch interfaces are transitional, not permanent.

Stephen Colbert loses it on-air. Rivals another one of my all-time favorite Colbert on air crack-ups.