Jason Santa Maria: Articles

On the Subject of Design 2

2010-01-29T14:29:00-05:00

Once again I’m adding to my list of recommended books with some good reads I’ve come across in the past few years. I’m always up for finding new books to help me better understand design or improve my practices, but it can be very difficult to find the meat from so many fatty offerings. That’s why I try to keep this list focused on design, type, and theory. There are many lists for good web design books around, but few of just straight up good design books, and many of these topics are applicable anywhere. Like last time, this doesn’t aim to be comprehensive, but I personally vouch for the usefulness all of these books offer. Enjoy!

Stuff That Matters

2009-12-10T15:27:00-05:00

It’s official: I’ve started a design studio called Mighty. I’ve been working under the name since earlier this year, and today I’m launching a small site for the endeavor.

The prospect with Mighty is simple: I want to work on stuff that matters. I want the things I make to benefit people, and whenever possible, the design work I do to have a lasting impact.

Here’s to new beginnings! Head over and say hello to Mighty. Many thanks to my talented friends: Jessica Hische for the logo design, and Liz Danzico for her help with the site’s content/manifesto.

Typekit

Another big career announcement today, I’ll be splitting my days between running Mighty and serving as Creative Director for Typekit. As any regulars here will know, I have a deep love for typefaces and typography, and Typekit couldn’t be more tailored to that love. It’s a fantastic opportunity to work alongside some of the smartest people I’ve ever met, and continue to grow something I believe will help shape our industry for the future.

Portfolio Updates

I’ve also updated my portfolio with a bunch of projects that have launched in the last few months. A few from my time at Happy Cog: W. W. Norton, our oldest independent publisher, and The Amanda Project, a website and community counterpart to a book series for teens and tweens.

Earlier this year I worked on two Chicago-related sites: Chicago Now, a hyper local blogging network (working alongside Byrne Reese), and a one-day design sprint reworking the Chicago Tribune homepage. The Tribune team asked me to take a pass at a rough design they had already mocked up, basically saying “do as much as you can in a day”. This was a really fun experiment that I’d definitely like to try again. The design was later adapted by internal teams at other Tribune sites like the LA Times and Baltimore Sun.

A few months ago I was asked to do quick blog and store redesign for one of my favorite bands, They Might Be Giants (working alongside, Brian Warren), a lovely new site for my always insightful friend, Liz Danzico, and lastly, my two type-related loves, Typedia and Typekit.

I’ve been very busy lately and have lots of stuff coming down the pike. Stay tuned.

On Web Typography

2009-11-17T12:17:00-05:00

Well, it only took nearly a hundred issues since working on the A List Apart redesign for me to get around to writing an article.

I’ve had a blast working behind the scenes working with authors on fleshing out the visuals for their articles, but after repeated kindly nudges from the rest of the ALA staffers, I wrote one of my own: On Web Typography.

This has been a year packed with talk of type on the web. We’ve been making great strides in bringing real fonts to the web, a good progression that will help us rely less on replacement techniques. There are many great articles that boil down the technical hurdles involved in doing so, but I wanted to tackle what happens to our designs once we have lots of typefaces to choose from. How do you choose typefaces that suit your site’s message? What technical and aesthetic attributes should you look for in a typeface? How do you harmoniously combine typefaces? These are just some of the questions I tackle in my article, and I hope this helps start the discussion of how web fonts will affect a visual design process.

And, this installment of ALA is a whiz-bang all web fonts issue with an article on how to spec typefaces by the talented Tim Brown: Real Web Type in Real Web Context.

If you love type, head on over and check out this week’s A List Apart.

To Sweet Hereafter

2009-10-30T14:05:00-05:00

by Jim Coudal

A rumor borne of children talking, what befell All Hallows’ walking
Whispers of “this boy I knew” who on a cold damp sidewalk laid.
Which house on which dark moonlit street, gifted him his final “Treat?”
A Taffy Apple sealed his fate, a “Trick” malevolently played,
by deftly hidden razor blade.

What evil felled him lurks anew. Perhaps hid deep in Charleston Chew?
Does M&M stand for good? Or rather Murder & Maliciousness?
What vileness skulks in Tootsie Pop? Or sprinkled o’er a Lemon Drop?
Might Snickers creamy nougat hide a whipped suspiciousness?
Is blight twixt Twix deliciousness?

So Child attend what you’re receiving, less tainted it by foul deceiving
make Chuckles cry or Pixies sick or unleash a beastly Gummi Bear.
Red Hots that leave the tongue inflamed or Jawbreakers that do as named.
Lest you deny and lack despair and Trick–or–Treat without a care,
I have for you but just a prayer.

The orange moon is for the dying, deny their songs of baleful crying.
Don’t swap Hallow’s hay ride for one on a crepe-draped hearse.
And while in darkness and costume go, note what’s cheerful isn’t so.
As if an early death was not enough I pray you heed this verse,
for fear of finding something worse.

Candygrams are odes to candy by guest authors during the month of October.

Jim Coudal runs Coudal Partners, The Deck, Layer Tennis and Field Notes. And he seems to have a particular fascination with All Hallow’s Eve.

Botan Rice Candy

2009-10-28T15:34:00-05:00

by Khoi Vinh

There’s a communal dimension
to the candy that you eat as a kid.

Take for example, Nerds, which debuted when I was in grade school and quickly achieved a popular currency among my classmates. Every kid in school coveted them, and to get your hands on a package was to participate in what felt like a genuine phenomenon. Like buying a top 40 record on its way up the charts.

Being Asian and growing up with few other Asians as friends, however, there was very little street cred to be found in Botan Rice Candy, which my parents would treat me to when we visited the local Vietnamese grocery store. It came in a bizarre, watermelon–colored package, decorated with obscure, baroque Japanese imagery that might have resonated with kids in Tokyo but was a mystery to me entirely.

Still, I adored its wonderfully simple, colorless sweetness and, most of all, delighted in how its rice paper wrapping was designed to literally dissolve in my mouth. I’d let the entire piece of candy sit on my tongue until my saliva liquefied the rice paper into nothingness—possibly my first introduction to culinary magic—before the sugary core would finally hit my taste buds. The rice paper itself was more or less flavorless, but that made it even better—a secret message passed along in the preferred medium of children: nutrition–free sweets. I never tried to share my Botan Rice Candy with kids at school; sometimes as a kid it’s nice to have a secret.

Candygrams are odes to candy by guest authors during the month of October.

Khoi Vinh is the design director for NYTimes.com, and the author of Subtraction.com. He was born in Viet Nam and came to the United States when he was three.

In Sugar We Trust

2009-10-26T15:18:00-05:00

written and designed by Rob Weychert

When I was growing up, holidays offered early indications that communication design was in my future.

Determined to avoid disappointment on Christmas morning, I made what I wanted perfectly clear to both Santa Claus and my parents, constructing lists that were not only categorized and prioritized, but cross-referenced with several catalogs.

My approach to Halloween was no less meticulous. Putting together appropriately macabre costumes certainly appealed to my creativity, but as a child of the ’80s, even more of my attention was devoted to the maximization and subsequent enjoyment of material gain. If I did this night right, I’d be swimming in free candy well into the new year.

The trick-or-treat neighborhood route was carefully planned and updated each year. Maps were made, time/distance ratios were calculated, cost/benefit analyses were performed. Was that out-of-the-way cul de sac really a waste of time if it was a known source of full-size candy bars (as opposed to the ubiquitous, so-called “fun size”)? Conversely, was the most direct path between two lucrative streets really the best one? The houses could all be dark, or infested with raisins and pretzels, or home to that dentist that smugly hands out tooth brushes. There was much to consider.

Once the final doorbell had been rung, I dashed home to evaluate the returns. The candy was sorted by type, and the types were assigned value and sorted into four tiers by desirability:

4

Not to be traded or shared under any circumstances. Carefully ration these to ensure that the final piece of Halloween candy eaten is a Level Four.

Poster Children: Reese’s Peanut Butter Cup, Twix, Kit Kat, Dots

3

Trade for equal or greater value.

Poster Children: Milky Way, Three Musketeers, Butterfinger, Almond Joy

2

Trade for greater value. Eat these only if this tier constitutes a substantial percentage of the loot. Share with guests.

Poster Children: Snickers, Baby Ruth, Candy Corn, Tootsie Roll

1

Never eat these. Trade up as much as possible and give the rest away before they poison the rest of the candy bowl. Blacklist the houses that distributed them and mark the residents for revenge.

Poster Children: Mary Jane, Milk Duds, Sugar Daddy

You could say my methods took all the fun out of Halloween, but it would be rude for me to respond with my mouth full of candy.

Candygrams are odes to candy by guest authors during the month of October.

Rob Weychert is a graphic designer, artist, and lachanophobe in Boston, MA. He almost never writes at robweychert.com.

Mathematics of the Tootsie Pop

2009-10-23T14:10:00-05:00

by Liz Danzico

Everyone had a right way. Consume the chocolate off the top and bottom of the Reese’s Peanut Butter Cups first, saving peanut butter for last. Chomp the ends off strawberry Twizzlers, crafting a straw perfect for drinking 1985-vintage Cherry Coke. But none was more contested in our neighborhood than how many licks it took to get to the center of a Tootsie Pop.¹

Candy is not mathematics. That is sort of the whole point really. It was a pause from school uniforms and black marble notebooks. But the geometry and constraints of the Tootsie Pop were unequivocally appealing to a young mind. Namely: the best stuff is contained on the interior of a structure that one is capable of getting to, but should not get to, in the intuitive sense. One must take the slow route—by licking. Furthermore, there is a golden circle of humans who have reached the center only by licking, never crunching. And only they are privy to the magic number it takes to get there.²

Flavors aside, this magic number—the “math of consumption”—became everything. The Tootsie Pop, therefore, had some pretty key lessons to teach us about endurance and patience early on:

It separated, in one sense, the future distance runners from the sprinters. Who can hold out? It predicted who might be better at waiting and not giving in. Who needs instant gratification? On the other hand, the truth was, there was no real reason to wait. Kids who figured that out and crunched away to the center, most likely went on to be quite in control of their own happiness.

I want to report that we staged licking contests or conducted unscientific-scientific research to understand the exact number of licks it took to reach the center. Luckily, that’s been taken care of. As interested as I’ve always been in tracking patterns and mathematics, I lost interest every time about halfway through, sought after the center, and crunched.

Footnotes

The original “how many licks” video aired in 1970. After the commercial aired, Mr. Owl became the mascot.
Students from Purdue University reported that a licking machine took an average of 364 licks to get to the center.

Candygrams are odes to candy by guest authors during the month of October.

Liz Danzico is part designer, part educator, part editor, and full-time dog owner who writes part of her time at Bobulate.

Brain Food

2009-10-21T20:21:00-05:00

Though it will come as no surprise to those that know me, those of you that do not know me should know that I consider myself to be something of a nerd.

by Rob Giampietro

And so here I am, writing a piece about Halloween candy, and the obvious conclusion to draw is that I’ll be dedicating this space to the tart, two-flavored Wonka treat that goes by that description. Would you be wrong? Yes. While Nerds are delicious (and, I have it on good authority, nutritious), they are also, unfortunately, reminiscent of kitty litter, and, when dropped, as I did accidentally one Halloween in 4th grade, they form an motley constellation of unappetizing neon nuggets all across the kitchen floor.

No, there will be no crying over spilt Nerds here. My choice, instead, is the thinking man’s candy, the brain food packed in an orderly tube of tablets known in the U.S. as Smarties. Manufactured by Ce De Candy, Smarties were dozen or more pastel discs—their color was oddly reminiscent of both an Easter Bunny and a fancy sheet of flecked résumé paper—stacked into a striped log, and wrapped with a sheet of red-tipped cellophane. To finish, the wrapper was stamped with a circusy slab serif bearing the product’s name.

The Smarties package of my youth was an exercise in minimalism. Its graphic interest, the stripes of color, came directly from the different flavors inside. Its structural integrity came from stacking the tablets atop one another and twisting them tight. It’s as if Ce De Candy channeled Hideyuki Oka’s classic “How to Wrap Five Eggs” when they concocted the package. Today’s Smarties differ in one unfortunate respect: they depict the package on the package itself. Maybe it’s a symptom of our meta-obsessed times, or maybe it’s a fear of pure abstraction, but this minor graphic revision leaves the prospective Smarties consumer feeling a bit of the Dröste Effect with a dash of Cluckin’ Chicken thrown in for good measure.

Like its chocolate cousin M&Ms and unlike a Snickers bar, Smarties are meant to be munched in multiple bites. Though I knew kids who would gleefully consume the entire strip in a single mouthful, I always considered this approach “unsmart.” Better still was to savor each tablet or pop them like pills, or Tic Tacs. And, like Tic Tacs’ minty blast, the sour sizzle of Smarties was part of the treat. The candy’s British trade name, Fizzers, reflects this tasty fact. There was always a delicious frisson of excitement that came with leaving one on your tongue for awhile. The flavor of a Flintstones vitamin, but with none of the redeeming nutrients. Smarties were an unregulated drug, one no adult could take from us. Digging through my plastic pumpkin basket after a long night of Trick-or-Treating, I would set the chocolate aside, pluck out the Smarties, and gleefully eat them first.

Candygrams are odes to candy by guest authors during the month of October.

Rob Giampietro is a designer, writer and teacher who has a filing cabinet on the internet called Lined & Unlined.

Jackpot

2009-10-20T13:22:00-05:00

In the small-town neighborhood where I grew up, the Stenavage family’s house stood above all others each Halloween. They did it up right. Colored spotlights. Theatrical cobwebs. And, suspended from the roof hanging over their second-floor porch, the coup de grâce: a life-size green-skinned hook-nosed black-hatted witch riding a broomstick.

by John Gruber

Spooky but not scary, no house has ever looked more welcoming to a cabal of young trick-or-treaters.

It is 1980. My nose is sweating under the cheap plastic mask held to my face with a rubber band stretched across the back of my head. I am seven years old. Ding-dong. The door opens, and there’s nice Mrs. Stenavage. The house is lit by a slew of candles, and looks just as Halloweeny inside as out. She feigns ignorance as to our identities and praises our costumes after we reveal our faces. Her own children are older, teenagers. Mrs. Stenavage just loves Halloween.

And then, the treasure. No little packs of Smarties or Tootsie-Rolls or “treat-size” SweeTarts or any other typical bought-for-Halloween sugar-and-sour fare. No, Mrs. Stenavage always offered the real deal: giant full-size chocolate bars. Hershey’s bars (with and without almonds), Mr. Goodbars, Kit-Kats, and, oh yes, the chairman of the candy bar board, bright orange wrappers glowing in the candlelight like the golden idol in front of Indiana Jones: full-size two-packs of Reese’s Peanut Butter Cups.

“Go ahead, take two.” Jackpot. I’m a millionaire.

Candygrams are odes to candy by guest authors during the month of October.

John Gruber writes Daring Fireball, a somewhat popular weblog ostensibly focused on Mac and web nerdery.

All Things Nice

2009-10-07T14:01:00-05:00

by Mandy Brown

I remember the candy cigarettes most fondly, not because they tasted better, but because they were grown-up. Sticks of white sugar rested neatly in packaging that could have passed for the real thing. I could hold a candy cigarette between my fingers and perch on the curb—my too-long legs in front of me—and the driver in the passing car would open his eyes wide; I was seven going on seventeen.

It wasn’t long before candy cigarettes vanished from the aisles, sent off to the same warehouse where the toy-guns-that-looked-too-real went. They were too obvious a sign of our parents’ addictions, too easy a target for their guilt. And yet I’ve barely smoked a day in my life. Maybe practicing with candy eliminated the novelty; maybe all I ever really wanted was the sugar. I never held a candy cigarette long before eating it, and then it tasted like anything else: like candy hearts, or fun dip, or pixy stix. The packaging couldn’t change that—only my attention could.

And soon enough, that wavered; soon enough, I was seventeen, and it wasn’t as glamorous as I thought. I never long for real cigarettes, but I do sometimes pine for the candy ones—for the long days with nothing to do, and no one to be. For the illusion of vice without the consequences of it. I suppose that’s what it really means to be grown up. If only I had known.

Candygrams are odes to candy by guest authors during the month of October.

Mandy Brown is a Creative Director at W. W. Norton & Company. She writes about books and the reading experience at A Working Library.

Make Yourself Presentable

2009-09-15T14:44:00-05:00

My first time speaking professionally in public was back in 2005 at the first An Event Apart in Philadelphia. While not my first time speaking in front of a big audience, it was the first time I had to prepare a slide deck and use Keynote.

Before and after view of a slide deck. On the left, you can see the bright red used to slides that need work, as well as black and grey for title slides, and blue for quotations.

Two basic rules: simple and big

When I use images, I almost always use them full screen and free of distraction.

Keep your title slides to a few words, then speak through the rest of the story.

A sample quotation slide.

Understandably, I was nervous, so beforehand, I had scribed lots of notes to guide me as I was speaking. On the big day, I used Keynote’s “presenter mode” which allows the presenter to see their notes while the audience sees the normal slides. A few slides in, I realized my grave mistake: I had entirely too many notes than would fit on my small screen, and no way to access the hidden ones. I was lost.

I didn’t completely bomb, but I wasn’t great either. The mishap threw me off and made my delivery dry and hurried. I had spent so much time writing the talk, I hadn’t even thought about what I wanted to say. I was onstage without a point—or one that I was aware of without my notes.

At that point, I realized that I couldn’t let technology do the talking. Maybe it was watching people like Jeffrey or Eric, whose presentation styles are loose and conversational, but I realized that if I had any hope of injecting a bit of myself into a talk, I would have to get the information into my head rather than on my screen.

Since then I’ve done a good bit of public speaking, and I’ve never given a talk that way again. I’ve collected some pointers below that help me prepare on what I want to say, but I give no assurances. These are things that work for me; what works for you might be completely different. Public speaking, especially good public speaking, is tough as hell, and I don’t claim to be an expert.

Your Slides Are Not Your Talk

Even though slides are what most people equate with “the talk,” depending on your presentation style, they are actually one of the least important aspects.

Focus on what you want to say. I start out by making outlines in a notebook and flagging things I know I have information on, or things I need to research further. If you’ve read anything I’ve written over the years, you’ll probably see this process is similar to how I do many things, building with small steps and not worrying about the final product too early.

I try to find a story whenever possible, or at least try to give a talk a natural arc. Collections of assorted tips and tricks can be great if you’re that kind of speaker, but I’ve found this doesn’t work as well for me. Most times I like posing an argument then supporting and building on it over the course of a talk.

So how do you find your arc? Focus on the message that you’re trying to convey and make sure all your points support it. That, and don’t worry about the design of your slides until it’s time to start worrying. When I start working things up in Keynote, I use just three colors for slides. Black for titles, grey for secondary titles, and blue for quotations (if any). I transfer my outline into Keynote and build a structure around those three colors. When I hit an unknown slide, where I know something should go but I don’t know what that something is yet, I drag a red swatch from the color palette onto that slide to change the background to bright red. I can go back later and see where the problem areas are at a glance. (This is not dissimilar to Cory Doctorow’s tip for inserting “TK” when writing.)

Working this way allows me to build and write a talk in stepped approach. I introduce a limited number of slide types to help me reign in my thoughts and stay focused. I go through the deck in multiple passes, adding more detail and refinement each time until the story really starts to take shape. Only then do I start to worry about the actual design of the slides.

Don’t Be Small

I have two basic rules for slide design: simple and big. Type should always be big enough to read from the back of the room, and simplicity is best to convey information quickly. For instance, when I use imagery, I only use images that take up the full slide. And usually without any text. Just a simple big picture and then I fill in the rest of the story during the talk. I generally lean towards having lots of slides because I like having lots of examples or alternate ways of presenting information.

Throw Yourself A Line

I often think of a slide as the little graphics superimposed next to a news anchor’s head on TV. There is just enough space to convey a starting point to a thought, not always the thought itself. It’s your job as the presenter to deliver the story. I often employ short titles and phrases of one or two words and talk around that thought. This not only has the advantage of forcing you to turn your attention to the audience instead of worrying about what your slide says, but it also makes the presentation more special. You, the speaker, not the slides, are conveying the information. This isn’t something that can just be read and your presence inconsequential.

I never memorize what I want to say. Instead, I rehearse so that I know the concepts I’m trying to convey. The slides serve as my mental triggers: I see the title of the slide and it makes me remember the important parts of the idea I want to discuss. Then I just talk through the key points, which has the added benefit of bringing about a natural improvisation during the presentation, and hopefully, helps me act a bit more naturally. I never use presenter notes or the presenter display mode anymore, I see exactly what the audience sees.

Reading Can Be Deadly

You are not invisible up in front of everyone, so merely reading bullet points off a slide that anyone in the audience can clearly read themselves is not enough. Your mood, body language, and delivery all affect the message. The presentation is just as much about you as the material you’re presenting.

Introducing Typedia

2009-08-24T14:08:00-05:00

As SXSW 2006 came to a close, I was having lunch with friends at the Moonshine Grill and ranting about typography, as I am wont to do. I was complaining about how there are so many wonderful typefaces, but no decent way to find them. Sites like Flickr had already revolutionized the way we shared and discovered photography; why isn’t anyone taking advantage of the web for the sake of type? “I should do that,” I murmured. My friends offered up a shared response: “Well, do it.”

Today, I’m very pleased to announce the launch of a new site I put together with the generous help of friends called Typedia. At its simplest, Typedia is a shared encyclopedia of typefaces. Think of it as All Music or IMDb for type, but created and curated by everyone.

I can’t count how many times I’ve labored over looking for just the right typeface—from the right era, in the right style, or with just the right aesthetic qualities. This is often a frustrating process of hopping between sites and books with different criteria for organization, and most times, only involves the typefaces that a company sells. Typedia can be agnostic and unburdened to catalog typefaces from any library.

Because typefaces aren’t just pretty letters alone, but pieces of art that have distinct criteria, a more specialized tool is needed. The site is a wiki with structure, a “swiki” if you will. We’re dealing with similar subjects and shared parameters, so we can organize the form of that content, as opposed to a freeform essay-style site like Wikipedia. This allows us to basically make all the meta data into clickable tags.

Every time you attribute a designer or foundry to a typeface, a separate page is made for them as well. Typedia hopes to not only inspire people to learn more about the art of type design, but also to discover the underpinnings of it as well, like the type designers and the rich history itself.

The Long Road

The making of the site has been very much a labor of love, and I hope others see the same potential in it that I do. If nothing else, it fulfills my desire to work on stuff that matters and to learn more about type—something I have a very deep love for.

Though it has been in development for a couple years, many times we would have to put it aside for weeks and months while individuals pecked away at client work or start from scratch when we realized our system wasn’t as good as it could be. Sometimes people dropped out completely, and we had to find others to take over their roles. This has been a effort like I’ve never taken part in before and owes everything to the passionate people involved. Those very kind and talented folks are:

Design: Me, Khoi Vinh, John Langdon (logo), Dan Cederholm (icons)
Front-end code: Dan Mall, Dan Rubin
Back-end code: Mark Huot, Brian Warren, Ryan Masuga, Ethan Marcotte, Aaron Gustafson, and Shaun Inman
Information architecture: Liz Danzico
Classification and Logic: Mark Simonson, Stephen Coles, Kristin Dooley

Getting Started

A site like Typedia is only as good as its members. So we made it dead simple to contribute. Creating an account is quick, and adding a listing for a typeface only has one required field, the name. Fill in any other information you know, and others will (we hope) help by filling in what you don’t. The site also has a neat feature called “Good Deeds” that highlights only what’s missing from listings so people can go in and fill in the missing pieces.

The “Learn” section has specific details on some of the more cryptic typeface terminology, like Typeface Anatomy or what those Typeface Classifications mean.

Behind the Curtain

Type classification has long been a contentious topic. No classification scheme works for all typefaces, so Typedia doesn’t aim to have it right from the start. But the most important thing is that this is a start, a work in progress. It’s not perfect, and there will likely be some discussion about how it can evolve. Organization is just one piece of this very big typographic pie, and we’re always open to discussing how to continue improving it.

After trying to build a custom backend couple of times, we realized we were wasting time rebuilding common site functionality and ended up using ExpressionEngine instead, albeit a seriously customized installation of it.

For now, we’re using Flash for type specimen display. It’s not unlike sIFR, though much more custom-tailored for our needs. We realize Flash isn’t the ideal way to display type, but after trying and evaluating all the solutions we could think of, Flash won out due to copyright concerns, consistent rendering, and flexibility. We hope to grow into a better solution someday.

The site is, and will always be, a work in progress. Some areas are still a bit rough, but we didn’t want to wait any longer to launch. We’ll continue tightening and improving things in the coming weeks, if anything seems wildly amiss, drop us a note.

Lastly, I just want to thank everyone who offered advice, helped test, or offered support over the years. I hope Typedia grows to be something great, but I consider it a success already to have come this far.

Please take a few minutes to poke around, read the story behind the Typedia logo (designed by the ridiculously talented John Langdon, who you may know best for his ambigram work in Dan Brown’s novel Angels & Demons), follow Typedia on Twitter, and take a shot at adding some typefaces.

Royal

2009-07-16T14:16:00-05:00

I’m a collector by nature. I gather random bits of beauty and ephemera to surround myself with to keep inspiration nearby but also to remind me where my influences come from. I enjoy slowing things down and reflecting on past methods of creation and how they’ve brought about our modern means.

I like to think of many of the things I collect as artifacts of creation; drawers that once housed metal type, cameras that require both patience and dexterity, and through their past use these items tell stories of their own operation and creation. They tell us how ideas take their first breath.

This typewriter is one such acquisition. I was lured in by its blood orange shell, but after cleaning it up and pecking out a few lines of text, something else happened. Using this obsolete machine gave me a new appreciation for its place and time. It has dozens of moving parts, each assigned to levers or keys by way of springs and hinges deep in its tangled metal innards.

This typewriter is a product of the technology and needs of its time. It was a stepping stone to the digital contraption I use everyday from a time when the input from finger to keys gave a direct physical output. How far removed from that am I now?

I had to spend time practicing typing again. The ideal page has even weight to each character, press too softly and you end up with grey letters, too hard and you deliver too much ink. I take the ease of use I enjoy today for granted. Take a moment to consider the things around you. Sit down and reconnect with an object. What can you learn from it? Does it inspire you?

Where’d You Go?

2009-06-29T14:56:00-05:00

As you’ve probably noticed, I’ve been taking a bit of a break lately. But there’s some exciting stuff coming up in the not too distant future.

Excuses, Excuses

Despite the temptations of ever-warming weather, I had to throw most of my free time towards a new presentation for An Event Apart and @media last week, and on a gameplan for teaching in the fall. Well, that and sometimes I just don’t have much of anything to say. Rather than drop posts on here that I don’t care about, I decided to take a few weeks away from this site to recharge.

The New Stuff

Last week, along with six other lucky souls, I was elected to the AIGA/NY Board of Directors. I’m seriously humbled to be asked, and also very excited to work with the local community of designers. I’m already brainstorming some interesting activities and events I can help organize, but if you’re a designer in NY and there’s something you want to see, drop me a line.

In case you’ve missed it, I’ve been working alongside the talented group at Small Batch on a new service called Typekit. We’ve been working with type designers and foundries to bring real fonts to the web, in a legal way that benefits everyone. This promises to be big fun. Follow along with the blog and Twitter for updates, or sign up and we’ll let you know when it’s live.

Lastly, somewhat thematically related, look for a long-teased type-related side project of mine to be launched in the coming weeks. Until then, I’m going to get back in the saddle and on to some more regular updates.

Deadlines

2009-05-11T14:36:00-05:00

“
I love deadlines. I like the whooshing sound they make as they go by.
”

—Douglas Adams, March 11, 1952 – May 11, 2001

Listening Between the Leading

2009-05-08T20:26:00-05:00

It was my pleasure to be interviewed last night by Aaron Heth and Matt McInerney, two self-proclaimed extremely passionate design students from the Savannah College of Art & Design, for their Read Between the Leading podcast. We had a nice chat about where I got my start, from school to my first job, and a good bit about the state of web design and where we’re headed.

Thanks very much to Aaron and Matt for having me on! Be sure to check out a few of the past episodes with some of my favorite designers: Armin Vit and Bryony Gomez-Palacio of UnderConsideration, Stephen Coles of Typographica, John Boardley from ILoveTypography, Mark Simonson, and Antonio Carusone of AisleOne.

You can listen (or download) my interview from the site. Enjoy!

What’s Golden

2009-05-05T13:07:00-05:00

The rule of thirds and ratios such as the golden section are fantastic methods for achieving designs that feel cohesive. The problem is these principles don’t really apply to web design.

Golden Ratio: When the ratio between two numbers is the same as the ratio of the sum of those numbers and the larger number. Basically, a+b is to a as a is to b. Also referred to as the “divine proportion” from its frequent occurrence in nature.

Rule of Thirds: Imagine your canvas divided into thirds, both horizontally and vertically. By placing important elements along a divider lines or at their intersections, you can create interest, energy, and tension.

Ratios and the rule of thirds are relative properties and are derived from inclusive measurements. Which means that not only is a height dependent on and relative to a width, but in order to have the full desired effect, a viewer must be able to see or perceive the boundaries of an object.

We usually just regard a piece of work as a whole entity, in much the same way we perceive a painting. But you don’t go to the Louvre and see one-third of the Mona Lisa, you see the entirety of the painting in one go (crowds notwithstanding). The web is more like looking through a window outside of the Louvre that partially obscures your view.

Nature of the Medium

There are lots of tutorials, articles, and books that approach the topic of using ratios online. But many of these resources don’t really address the “why” behind using these methods, and none seem to tackle the topic of how they translate to medium of the screen.

By its very nature the web is a medium of displacement; content is not tied to being viewed on a specific device, screen, browser, and most importantly, at a standard size. Regardless of how well you plan your layout to work according to a ratio or principles such as the rule of thirds, you can’t predict how much of it will be viewable at a glance. If a visitor’s window or device prevents them from seeing the entirety of the layout, as you can by merely looking at a book or poster, the effectiveness of these principles is reduced drastically.

These methods are at their strongest when the sizes and relationships between all elements are based on them. Even if your page design manages to achieve the right balance, it’s almost certain that the size of the browser window, or the size of screen will not.

Letting Go

I’m not saying that using these principles is a dead end, what I am saying is their usefulness is questionable for web design. The design geek in me wants to just ignore the problems and push forward anyway with a sly “I’ll still know it’s there.” And that might be enough for some. But I’m not in favor of restricting content to a scrolling box, or jumping through hoops to regulate the size of content, pages, and browser windows. These methods push the problems on the viewers.

I’ve been beating myself up about stuff like this for years. I originally came from a print background where ratios are a great starting point towards unified design. It took me a long time to embrace the fluid nature of the web and let go of that kind of control. The best you can really hope for is leaving viewers with an impression of the larger whole.

New Foundations

Design has never been a cut-and-dried process. Just by using any of these methods, regardless of medium, will not ensure good design any more than coding with web standards will ensure a well designed website. For a long time we’ve been looking at web design through the lens of print design, and while some of the traditional design practices can make the jump to the screen, some cannot. The screen brings with it different kinds of challenges for visual design, some of which occur exclusively in interactive media. It’s unrealistic to think our old methods can fill in all the gaps, but new interaction patterns and visual languages emerge everyday. These are the building blocks for our new design principles.

Pretty Sketchy

2009-04-22T14:09:00-05:00

I seem to be getting into many conversations lately on the merits of keeping a sketchbook. Almost everyone agrees they are a good idea, but surprisingly few actually do it. The excuse I hear most often from non-sketchers is “I can’t draw”. And now I’ll tell you what I told them:

Sketchbooks are not about being a good artist, they’re about being a good thinker.

Obviously, some people bring the practice of sketching to a higher art form, but to me it’s always been about visual brainstorming and record-keeping in a format with a ridiculously low barrier to entry. My drawings look like shit, but fidelity doesn’t matter as long as I can convey my ideas to others or to my future self.

We should revel in not caring how good or bad we are, and by knowing that our means for thinking has improved with each stroke of our pencils. The point is to keep doing, it’s how you get stuff done. And most certainly how you get better.

I’m trying to get myself into the habit of filling up a page or so a day. Sometimes this might just be a list of thoughts, other times it’s a drawing or bunch of thumbnails. I don’t care if practice makes me perfect, I’m happy if practice keeps me competent.

In the spirit of awareness, I’ve set up a Flickr group for this very purpose. Post one, and only one, spread/page from your sketchbook. It’s always fun to see how everyone else’s mind works.

Reflections on Layer Tennis

2009-03-30T11:23:00-05:00

Last Friday I played in Coudal Partner’s Layer Tennis in a east coast vs west coast brawl with Derek Powazek, a friend and one of my favorite web designers. I thought it might be fun to give some background on the match.

The view from my desk during the match.

For those uninitiated with Layer Tennis, the premise is simple: two players trade a Photoshop document back and forth, each player has 15 minutes to iterate on the previous “volley” however they see fit. The matches are played live on Friday afternoons, and people follow along and comment via Twitter. It really isn’t about winning or losing, which is determined by voting on Twitter, it’s more of a exercise in visual literacy and design constraints. Also, it’s just a game and a fun distraction on a Friday afternoon.

I’ve played once before (a Halloween-themed match with Brian Taylor), but damn if I still wasn’t a mass of nerves. Derek is very talented, and playing the game itself is like having 10 separate clients looking over your shoulder while you work on each of their projects simultaneously.

The thing about Layer Tennis is there are no guarantees. You can have two brilliant designers face off and end up with a really dull match. Sometimes the ideas just don’t come. Sometimes you can’t find that right image. Sometimes, most times, you just don’t have enough time. But that’s the fun part, you don’t have much time to think, you just have to go with your gut and act. 15 minutes is barely enough time to create something coherent, you’re extra lucky if you manage to make something interesting too. My favorite matches are ones where there is some meaty collaboration going on and the end result yields some sort of flow or narrative.

Strategies for Layer Tennis: A Cheat Sheet

Both times I’ve played I kept a little strategy cheat sheet to fall back on when I’m completely stuck or to shake up any mental blocks. Obviously, these aren’t the only options, this list is just a few things that work for the way I think. Combining a couple can prove extra effective:

Next/Prev panel: If the last volley were a panel in comic book, show what would be the next or previous panel.
Zoom In/Out: Zoom in or out of the last volley to reveal more of the story.
Embellish/Exaggerate: Take the last volley one step further, make it bigger or smaller, make it ridiculous or somber.
Disarm: If your opponent returns a particularly scathing attack, make fun of it find a way strip it of its power.
Deconstruct: Take apart the last volley, break it up into pieces, write the story of it, or show what’s inside.
Re-contextualize: Bring your opponent’s last volley into a new setting.

Back and Forth

Derek and I decided to do something a little different this time by playing the old bar game “three truths and a lie”, essentially playing a game within a game. Layer Tennis is already crazy stressful, and this turned up the volume by making us not only need to create visuals that carried a thread, but stories too.

Jim Coudal did the play-by-play and also decided to shake things up by doing audio (instead of the typically written) commentary for the match, and was later joined via phone by seasoned-commentator John Gruber. All of the experimentation turned out to be fun at times and severe monkey wrench at others. Have a look at each volley below, and be sure to click through to the commentary.

Volley 1 by Derek

Derek sets the rules of the match: We’ll both tell four stories, three will be true, and one will be a lie. Because we gave ourselves this new constraint, we agreed beforehand that the first and last volleys were reserved for setup and reveal, respectively. (spoilers follow)

Volley 2 by Jason

I dig out an old illustration of my hands I did eight years ago for a project that never happened, toss in a stock fish and scribble out some type very quickly. This really set the pace for everyone watching to start speculating on truth or lie. In no time at all, Andrew Glaser tracked down a photo of me on Flickr that revealed the truth.

Volley 3 by Derek

Derek fires back with a story about how he appears nude on a mural in Santa Cruz. He craftily ties it back to my previous volley by referencing The University of California publication Fish Rap Live, where he was an editor.

Volley 4 by Jason

Derek’s big image gave me just enough of a hook to carry into my next volley to reveal a seedy story from my school days: I nearly failed photography class, but barely managed to pass with some help from a friend. Before anyone calls my college, I should say it wasn’t cheating in the truest sense, I just had a lot of help. I picked up on Derek’s use of Univers Condensed to tell the tale, and emulated the view through a Polaroid viewfinder, a subtle self-jab to reference how awful I was in the darkroom with developing real film. I dropped in the film reel at the last moment to help people figure out where to start reading.

Volley 5 by Derek

The volley comes back with a story and photo of Derek’s (awesome) squid tattoo and implies he has another tattoo, potentially somewhere naughty. I wasn’t sure how this one played off of my last volley, possibly he was picking up on the idea of hiding something from those around you.

Volley 6 by Jason

Derek went minimal on volley 5, leaving me with little to work with. Cunning bastard! So I picked up on the visual of the squid to spin what turned out to be my lie. I did always wander off from my parents when I was little, but it never earned me a nickname. Regardless, this was a good excuse to use a squid on a map, which there are far too few opportunities to do. Derek left the door open for me to take a pretty heavy tonal shift, so I jumped on it, swash italics and all.

Volley 7 by Derek

Derek grabbed my image of the explorer, dropped a torch in his hand, put it on top of a photo of a bonfire, and holy crap Derek carried an Olympic torch! This was my favorite of Derek’s volleys, both for the story and use of the previous volley’s artwork.

Volley 8 by Jason

I’ll be honest here, I backed myself into a corner because I already told my lie. I had to tell a truth this time and I spent 8 of my 15 minutes working on one that didn’t pan out. I quickly had to put together something else and the tie to the last volley wasn’t as strong. It’s a good story though, and I managed to bring in the Gotham Bold Italic and steer it back to the idea of fire. I quickly scanned in some scribbles and tossed it on top of the photo (note: it’s not a photo of me or my date) to hide my weepy face.

Volley 9 by Derek

Derek grabbed the paper texture and scribbles from my last volley and picked up on the theme of fire. This is my favorite story of the match. His mom didn’t care that he nearly burned down their house. And someone let this guy carry the Olympic torch!

Volley 10 by Jason

Just as the first layer was the setup for the game within a game, layer 10 was reserved for the reveal. Because of this, I didn’t feel the need to heavily reference previous volleys, but I brought back the ref from the coin toss and volley 1 to serve as our (conveniently enough after the squids) eight-armed teller of truth. It looks like a simple enough presentation, but it was a pain clipping him out quickly, dropping in chunks of replacement background, and getting that shadow to work with all of his new appendages. I had this idea early in the match and it felt like the most natural way to end the game.

Post-Game Wrap-up

As was mentioned a few times in the commentary on the matches, there are many ways to carry over ideas from volley to volley, one is visually another is conceptually. Because of the added constraint of the “three truths and a lie” for this match, some of the volleys are more subtle in the ways they carry the narrative thread, which was an experiment with the nature of the game itself.

This match was a blast, and I’m honored to have gotten to play with a designers I’ve looked up to since I first got on the web. Thanks to Derek, Jim, John, the Ref, and all the great people at Coudal Partners!

In Person

2009-02-18T13:25:00-05:00

I’m trying to cut back on travel and speaking dates this year, but I’ll be out and about a few times. If you happen to be attending any of these events, be sure to say hello!

Not the Same Old Story, SXSW Interactive, March 14, 11:30am

I’ll be moderating a panel exploring how people from different backgrounds tackle the problem of design and storytelling online. From the description:

If the web provides so many ways to connect with audiences, why are we all stuck telling the same story with our designs? Hear from a panel of storytelling experts on the importance of narrative and art direction online to break away from static and boring experiences.

I’m honored to be joined on the panel by some very talented folks:

Nicholas Felton, feltron.com
Daniel Burka, Creative Director, Digg/Pownce
Emily Gordon, Editor-in-Chief, Print Magazine, Emdashes.com
Ian Adelman, Design Director, NYMag.com

The Influencers, DOT DOT DOT, April 15

The upcoming Interaction Design Masters program at SVA is really building steam, and they’ve been giving back to the community with a free monthly lecture series called DOT DOT DOT. I’ll be giving a 10-minute talk on the night’s theme of “The Influencers” alongside Steve Heller and Hillman Curtis. Get details and RSVP for free here.

An Event Apart, Boston, June 22-23

I’ll only be at one An Event Apart this year, and luckily it’s during my birthday. I expect everyone in the audience to bring presents. Register with the promo code “AEAHCC” and save $100.

@media09, London, June 25-26

Later the same week as An Event Apart, I’ll be jetting over to London for @media and the need to fulfill some serious bangers and mash cravings.

Layer Tennis, February 27, 3pm NY time

Next week I’ll once again jump onto the tennis court to do battle. Last time was a wonderfully macabre Halloween-themed match, this time it’s just straight up pixels and brain cells against none other than Derek Powazek (commentator TBD). I’m definitely going to need to get lucky on this one.