Chris and Ben made some color palettes… and then we just looked at the pictures instead of out the window.

These are birds from Emily Gobeille’s and Theo Watson’s interactive Puppet Parade. Theo and Emily used to work in our office all the time, but now they live in New York. We miss them.

Hey Theo and Emily, what’s the story about these colors?

The color is very important with this project. The environment had to be inviting and neutral, because the colors and textures of the creatures change based on the foods they eat.
What’s the name of this bird?

Pointy. Pointy is very happy but also very hungry.

What does Pointy like to eat?

The creatures eat the food made by the children and if they want to erase their color they eat the clouds.

And what do they like to do?

They like to be controlled by frantic arms and they are always hungry for a meal (being a giant puppet burns a lot of calories).

Why are they so colorful?

In this world ‘you are what you eat’.

This is a photo that James Grady shot last fall. When James doesn’t go to RISD, he is a designer for us. This is what he wrote about the colors in his photo:

In the late fall, the crisp air and bright blue sky make for the most amazing sunsets. I love the way the solar flares bounce off the camera lens and create a beautiful prism of color that ranges from hot pink too cool blue, while all the other colors fade to graphic silhouettes.

 

When we asked Katy which colors she likes today, she sent a vintage label for Orange Crush soda from across the room:

I bought a batch on eBay with about a hundred old soda labels from all over the world. They were really beautiful, and had great names, like Howdy and Cheer Up!. The backgrounds were screen prints or lithographs made for glass bottles, which allowed for spot colors and an intensity you just don’t see on modern labels. Incidentally, Fathom is housed in the Puffers building here in Boston, which takes its name from a local beverage entrepreneur who patented carbonation and bottling technology in the late 1800s.

Beatriz Ramos, artist and founder of New York/Caracas production company Dancing Diablo, channeled her roots in this painting for a stopmotion animation piece.

I come from the Caribbean, where the sea is turquoise, the mountains roll in lustrous greens and the sky is an intense blue. The sunlight is so bright that any colors you use for your house or your art work, have to be high in chroma in order not to look faded. You get used to rich, vivid colors.

New York photographer Anna Schori makes everyone look chilly like they were in Sweden or something.

Portrait of Ed Vallance, musician.

I like cold metallic blues and greens. The more underwater the picture feels, the more I can strip skin tones from warmth, and the more satisfying I find the result. During the winter months in Sweden, where I grew up, you get more dusk and dawn then actual daylight. The light that the snow reflects back then is a beautiful cold blue.

Sosolimited sent us a flyer they made for one of their shows at Middlesex.

This was a giant poster that we picked up from a CVS going-out-of-business sale. The original picture said something about “you go girl”. We think the colors are supposed to inspire youthful confidence, but the kind of confidence that is improved if you buy make-up.

But not everyone likes color. Skylar Tibbits from MIT Department of Architecture, finally put his foot down:

The spectrum from black to white is filled with nearly limitless variations and there is little to no need for any other colors in ones life. Even if there was a need for color (which there clearly is not), the average human life has roughly 2,208,816,000 seconds, which is just not enough time to comprehend the complexities of black-to-white, let alone the infinite spectrum and depressing qualities of the remaining colors.

If black is the absence of all color and white is the presence of the complete spectrum, then one might ask ‘what more do you need in your life than all or nothing?’  Who wants to be stuck on the fence?

Living proof of the purity of black lies in an architects outfit – I ask, ‘have you ever seen an architect dressed in color?’

Which made us feel a bit like this guy:

But we kept being happy about colors. Here are some other palettes we like:

Gucci’s fall collection

Lady Gaga for Thierry Mugler

Male Bird of Paradise

Frida Kahlo by Frida Kahlo

Cube installation by Robert Filliou

Photo by Guy Bourdin

Tim Burton’s Alice in Wonderland

Dencity, a map of global population density.

“Unprecedented” is a popular word in PR. Lots of things want to be unprecedented, few are. But last year’s hitting the population mark of seven billion was truly new. And just like how, for the past decade, a mild day in December or hail in July feels like a premonition of global warming, a transit hall on the day before Thanksgiving now quickly contains the association: there can be no more babies.

Experiencing a crowd moves fast from fun party to the black hole of Calcutta. On the larger scale of seven billion, it’s just hard to grasp. What is this unprecedented state like? How does being more change what we do? Where are all these people going? Last year, National Geographic asked designers to sketch narratives around “population density” and show how the world population relates the United States.

Not being chosen, we kept working on the project since we wanted to see what the world map could look like if drawn with numbers of population density instead of nation borders and topography.

If a map with country borders says something about war, politics, secured resources, and national identities, a map of people tells about popularity and access to the stuff of survival. There’s something interesting about how some people now identify with the regions where they have lived, rather than the nations where they were born.

Mark Monmonier said that any map is “but one of an indefinitely large number of maps that might be produced from the same data”. Since we wanted Dencity to be a poster — looking good on the wall and also show a more specific situation than a standard geographic map — we decided to turn a few things on their head.

When generating the first Processing sketches based on the density data, Chris flipped the scales of resolution. Dense meant smaller circle and sparse larger. By also creating different level of detail in the same map, which is contrary to the fixed level of standard heat map representation, we wanted to draw the eye to specific regions — show the action in densely populated areas (small circles of the reddest red, orange, and yellow) and give an immediate idea of where the sparser regions were (large circles in gray, blue, and purple).

These early sketches consisted of a square grid with finer and finer subdivision, in which inscribed circles were placed.

Last year’s summer intern, Lynn Kiang (now Lynn Wen), laid the foundation for the graphic design and this summer our designer James Grady finished it up.

Some things that struck us about the poster were that people like hot better than cold (excepting deserts). It’s hard to live on a mountain. There’s a big hole in the middle of Australia and if the world was a party, the kitchen, bar, back room, and porch would be found in Indonesia, on the stretch between Calcutta and Bombay, in Shanghai with neighbors, and around the Nile.

The map also inspired some questions that we may look at later. How has population density changed over time? How does it correlate with changing nation borders? Why and how do we move around and cluster? And what other variables than people change the shape and size of countries? We’ll see how it goes.

For now, the Dencity poster is available here.

In the original chart, LLNL outlines their estimates on energy resources and American consumption. There are many stories to tell with this data. All versions of this chart that we found online immediately shows how transportation is the biggest energy gobbler, at almost 36 percent of all energy used, and mainly from the most problematic resource: oil.

But another story that’s subdued in other versions is how more than 50 percent of all energy goes to waste in the United States. In the original chart, this is referred to as “rejected energy” and again — most of it happens in the category of transportation.  In our version, Katy made “energy loss” a larger portion of the final chart and added color and brightness to these graphs. How much of petroleum and other energy resources are lost as waste heat in the process of conversion or to inefficiencies in the infrastructure, was the point we wanted to make most poignant.

The illustration ran in the Future Energy issue of PopSci in July of 2011.

Katy with the July issue of PopSci.

Previous post.

Every time you make a PDF, the fonts from your document embed as subsets of the original font. The subsets lack the kerning information and other data for proper layout, and are therefore of little value to anyone extracting them in hope of acquiring a font for free, not unlike a store attaching ink tags to clothing to make them less desirable to thieves.

A few years ago, Ben wrote some code that collected these misshapen font parts, but unable to find a good use for them, he filed away the project for later. The thought “one day I’ll use this” can either turn you into a pathological hoarder or someone who pulls off creative projects so, luckily, Ben finally met what seems to be the saving grace for many projects: the right story at the right time.

When Kazuo Ishiguro began Never Let Me Go, he wrote for years about teenagers in a boarding school. He kept abandoning them for other stories, until one day he heard a radio program about advances in biotechnology. This inspired his driving force: the kids were clones, bred to be organ donors.

Never Let Me Go, like other stories touching the theme of responsibility for something we made that now has a life of its own, owes something to Mary Shelley’s Frankenstein. Frankenstein in turn owes Paradise Lost and Greek mythology (Titan Prometheus stealing fire from the Gods and giving it to man) for its theme, but the man-made setup was inspired by early nineteenth-century science, which is why the book is often considered to be the first science fiction novel. Another innovation: in Frankenstein, you root for the monster, not its human creator.

In perhaps the most heartbreaking sequence of the novel, the monster camps outside a cabin in the woods from where it eagerly follows the life of a poor family. He eavesdrops on their conversations and practices his own speech. He takes to their personal dramas and questions his own lack of family relations. He feels their pain, cares for their struggles, and, at night, helps them with chores for which his monster size and strength is handy. When he finally approaches the family and they reject him, Frankenstein’s monster becomes the bully who really just wanted to belong.

But it’s by no means a slasher plot from here. Nowadays the novel can be a bit tedious to read at times, but as a story — the monster’s journey of loneliness, love of one’s creator, innocence and sacrifice — it is timeless. Almost two hundred years old, the story contains enough universal themes to continuously inspire writers, filmmakers, animators —and designers. Frankenstein served as the perfect vehicle for Ben’s Frankenfont.

The typeface itself tells a story of how different fonts are used in office documents. The frequency of the letter from each font is calculated proportionally to how often that font occurs in a PDF. (This says something about how often people disregard design sensibilities and spiff up their presentation with Comic Sans.)  In the published piece, the arrangement of these letters reflects the progression of the Frankenstein narrative.

The beginning of the book, as Victor Frankenstein peacefully corresponds with his family, is visually calm, comprised largely of Arial, Helvetica, and the occasional Times New Roman (the by far most common fonts used in documents).

By pages 60 and 61, Arial Bold and Times Italic enter the story.

In the 200s, commonly used script fonts and more obscure faces begin to appear.

Towards the end, as the story dips deep into rage and despair, the pages crawl with non-Roman fonts, highly specialized typefaces, and even pictogram fonts, sometimes giving the story the feel of a Disney-style swearword.

The whole book is surprisingly readable, with the font emphasizing tone. “I will be with you on your wedding night” or:

…set with a mix of fonts, adds a dimension of anguish.

For those interested, you can purchase hardcover or paperback versions of the final book. As with some of the other items we sell online, we’re donating the proceeds: profits will be given to Donors Choose to buy books for students, which seemed apt given the nature of the project. We just finished our first month of sales, and we’re looking forward to spending the $600 in profits on Donors Choose projects.

The making of Frankenfont

The technical side of Frankenfont came about because of a fascination with the way that PDF files contain incomplete versions of fonts. When a piece of software (Acrobat Distiller, or the PDF driver, or the Mac OS printing system, etc.) creates a PDF, shape data of high enough quality to reproduce the original document is embedded. However, only the necessary characters (and little of the font’s “metrics” that are used for proper typographic layout) are included in the PDF. This is what prevents others from extracting the fonts to be used for practical purposes.

For each of the 5,483 unique words in the book, we ran a search (using the Yahoo! Search API) that was filtered to just PDF files. We downloaded the top 10 to 15 hits for each word, producing 64,076 PDF files (some were no longer available, others were duplicates). Inside these PDFs were 347,565 subsetted fonts. From those fonts, 55,382 unique glyph shapes were used to fill the 342,889 individual letters found in the Frankenstein text.

The initial code calculated how often different fonts are found in PDFs from internet searches. Next, it lined up all 342,000 letters in the book into one long list. Then, if the lowercase “e” from Arial is three percent of all the letter “e”s found in fonts in the PDF files, the first three percent of all the lowercase “e”s in the list of 342,000 will be set to that same Arial “e.” It continues setting each character like this based on usage, eventually getting down to the really odd things (that rarely appear in PDFs) toward the end and voila — a:

Spread from Frankenstein, or the modern Prometheus

Preservation of Favoured Traces via @taulpaul

The pieces in the exhibition draws from traditional graphic design outlets such as books, magazines, and corporate branding. But the curatorial team also specify their selections as representing “ a series of developments over the past decade, such as the entrepreneurial nature of designer-produced goods; the renaissance in digital typeface design; the storytelling potential of titling sequences for film and television; and the transformation of raw data into compelling information narratives.”

Or, in a context provided by Alice Rawsthorne in the New York Times:

The sub-text of the show is that digital technology has both democratized the design process and empowered designers by giving them powerful new tools. “Designers have responded by becoming more expressive and experimental,” said Andrew Blauvelt, curator of architecture and design at the Walker, who organized the show with Ellen Lupton, curator of contemporary design at the Cooper-Hewitt. “Their work is more conceptual and analytical: a quest for autonomy and alternative modes of practice. We now have the designer-as-author, as entrepreneur, as editor, as producer, as publisher and as curator.”

continuing:

Graphic design is the largest area of the design industry, employing more than 250,000 people in the United States alone. Yet “Now in Production” is the first major U.S. museum survey of the discipline since 1996 when the Cooper-Hewitt presented “Mixed Messages: Graphic Design in Contemporary Culture,” which also was curated by Ms. Lupton.

Graphic Design: Now in Production is up until January 22 at the Target and Friedman Galleries of the Walker Art Center and will be presented by Cooper-Hewitt at Building 110 on Governors Island from June 2, 2012, through Sept. 30, 2012.

The work on 9,999 + 1 began as we were working on a project about genetic disorders and realized how hard it is to genuinely relate to incidence — is one in ten thousand quite likely or really rare? For a happier context, we turned to plants.

A four-leaf clover grows for every 9,999 with three leaves. Yet, as with other anomalies that catches our attention, it’s easy to think they are more common than they are.

We wanted to make a piece that exemplified the probability of finding a four-leaf clover in a field of clovers (1:10,000) and at the same time had an emergent pattern. After sketching out ideas for a bit, we decided on a grid-like pattern where the word “luck” would emerge from a field of clovers.

Here is Chris’ report on the process:

Assuming a square grid of tiles (4×4) and 10,000 total clovers, each tile would have 625 clovers (16*625 = 10,000); we simply would need to remove one three-leaf clover in one of the tiles and replace it with a four-leaf clover to get the exact frequency.

A simple particle system for each letter made the word “luck” emerge out of a seemingly random field of clovers. Bitmapped images of the letters initialized the clover particles and constrained their final states.

As the clovers converged, the letters built vertically in individual frames. Finally, we assembled the tiles for multiple letters in InDesign to get a final layout. This wasn’t the end of the story, but really the beginning of multiple iterations that yielded a final design.

Some early sketches and late prints.

9,999 + 1 showing at Arts for Hearts’ silent auction in Faneuil Hall Market, Boston.

This sketch started as something I wanted to build using the Fortune 500 ranking data, after finding a huge CSV file going back to 1955 had been linked from Wikipedia (it seems to have since been removed). I did most of the work while taking the train down to New York one morning, and since then have spent a couple hours here and there fixing it up further. Since it’s a sketch piece, it’s not perfect, but it’s a fun example of how you can interact with a really large amount of data in a very fluid manner.

Additional details for the curious:

• Many companies have merged, separated, or otherwise been renamed. I didn’t have time (nor interest) in going through tens of thousands of entries to figure out what’s what.
• The left and right arrow keys will move back and forward by year. The up and down arrow keys will move up or down through the list of companies. This isn’t perfect, because of how things reorganize, which is why it’s not advertised in the piece.
• No scale is shown on the vertical axis. It’s just not useful for how much it would interrupt the overall design. The point of the plot is to see an overall trend, and then look at individual values more closely.
• A log scale is used for revenue and profit. It’s the perfect example of why a log scale is useful because without it the plot looks like jumbled nonsense. On the other hand, because logs don’t play nice with negative values, there are breaks in the profit plots. Of course, this could be handled with some additional work, but I decided to move on instead. Nevermind, went back and fixed the negative values (losses on the profit view). If it’s on the internet is has to be perfect.
• The piece uses Java. I spent a few hours on a JavaScript version, but it ran at 3 frames per second (instead of 60; it’s like 1998 again!) It also required a 6 megabyte JSON file for all the data. All likely fixable, but no thanks.

I left my job to see what else design can offer (I think I’m onto something…). I’ve been frustrated with the separation of traditional graphic design and programming. Mainstream design software is also frustrating due to the separation between layout, photography, video, animation, interactivity, and coding. My experiences at Fathom not only broke down the walls between designer and developer, but also opened my mind to other ways of tackling design through programming and computation.

This semester, I’ll be at Fathom one day a week to work on an independent study: Visualizing Data, which I plan to incorporate in my thesis.

We had a ton of fun this summer. These are some of the projects I worked on:

Genes and Genetic Conditions

The challenge here was to take the overwhelming amount of content on genes and genetic conditions from the National Library of Medicine and make it accessible as a mobile app for a general audience. Having little knowledge about the topic, this was rather intimidating. But I soon realized I was designing for someone like me — a layperson — and having minimal knowledge can be an asset.

Chris, Eva, Shannon, and I worked on simplifying the categories, navigation, and interaction. The goal was to make it equally easy for the user to look at a particular gene or condition as to explore the whole system of how genes and conditions relate to one another. Chris and I worked on many iterations of navigation and animation transitions.

Population density

The challenge for this project was to create a narrative of population density — show how the world population relates to the U.S. We generated this map visualization with data from the Center for International Earth Science Information Network (CIESIN). Each circle denotes the number of people in that area. Larger, darker circles show areas with less people; smaller, brighter circles highlight crowds. White outline circles mark the top twenty cities.

(The project is a continuation of work done by last year’s summer intern, Lynn Kiang (now Lynn Wen). We were initially approached by National Geographic about doing a sketch depicting the story of the world’s population hitting 7 billion. Ours wasn’t chosen, but we decided to continue the piece because we liked it. —Fred)

I found it fascinating how the circles that represent people per square kilometer still create almost full geographical contours of the continents (and how few people there are in Canada, eh!).

Chelsea Football Club

Chelsea Football Club tracks their player performance with a sensor that monitors their physical activity during practice and rehabilitation. This sensor provides an amazing data set that Chelsea turned into power point charts.

Mark and I distilled the ten individual slides (e.g. foot distribution, acceleration, deceleration, distance, and force) into one interactive overview of each player’s performance. This way, the manager could quickly scan the charts to see each month’s performance and rehabilitation trends. The charts were detailed enough to show exact performance on each day.

We also designed a weekly team training overview. This chart outlines the daily team recovery, strength, resistance, speed, and reactions. Both of these charts were an interesting design challenge.

Something that stuck out in my first encounter with this type of visualization work was how the negative space of the graphics played as much a role as the positive space. It felt like I was designing a new typeface with a keen eye on form and counter form.

Rag Time

At lunch one day, I mentioned I had this idea for a typographic video game. At my old job I designed publications with lots of running text. I was constantly ragging and fixing line breaks. This is an important element of design for me. Whenever I look at somebody’s design work I always check if they know how to rag.

But it’s love-hate relationship.

Sometimes I have this dream where a wall of text comes crashing down on me like huge Tetris blocks that I have to correct before they smash my face. I told the team about this dream and Chris immediately volunteered to help make it a reality. Then he went off in the corner for two weeks coding (I thanked him in the end with a bottle of Johnnie Walker).

And here it is. If you think you have what it takes to be a good typographer I challenge you to three rounds of Rag Time. Don’t be a Scheisser Rag! My high score is 1678, which is a Guten Rag!.

Guten Rag!

And when it came to designers…

BEN FRY NAMED TO SLATE’S “TOP RIGHT” LIST OF THE MOST INNOVATIVE AND PRACTICAL THINKERS OF OUR TIME

Slate has just named Ben Fry a “Top Right” honoree, Slate’s compilation of the 25 Americans who best combine inventive genius and practicality.

Fry was selected for his work in helping designers think like programmers, and vice versa. Here’s Slate’s piece noting Fry’s genius: http://www.slate.com/id/2301425/.

Slate’s “Top Right” follows the formula of the quadrant graph and honors those individuals who land in the top right quadrant between inventiveness and practicality – America’s best real world problem solvers. You can read more about “Top Right” here: http://www.slate.com/id/2298976/

To agree with Slate and show your support of Fry and his work, use this interactive feature that lets you choose exactly where honorees should land within the Top Right quadrant, in comparison with the four other picks for design geniuses. Here’s the widget (scroll down), where you can place them on the graph: http://labs.slate.com/topright/design/

I find it hard even to envision a crowd of this size. I can see thirty. That’s a school class, bunched together for some awkward activity like a photo shoot. I have a decent idea of what 200 people in a lecture hall look like. I know I have seen close to 20,000 people in one space at the Boston Garden. But even so, how relate “one in ten thousand” to my hopes and fears? No clue.

One in ten thousand is the incidence of a four-leaf clover. I never found one, but doing so seems likely to me. If I sit in a patch of clovers — I look.

Ten thousand is the number of bird species in the world. In the human brain, each neuron is connected to other neurons in about ten thousand different ways. One in ten thousand is also the incidence of Prader−Willi syndrome, a genetic disorder that causes insatiable appetite and obesity. So while finding the four-leaf clover seems likely, I’ve never knowingly met anyone with Prader−Willi syndrome and telling apart ten thousand birds or imagining one thousand connections seems insurmountable.

So why is this? The properties of clover play a role, of course. Clovers are smaller and move around less than humans, they come in only two kinds (clover with four leaves and clovers with other number of leaves) and are visible to the eye. But my illusion of ease for finding a four-leafer, has probably more to do with this Google image search for “clover”…

The ubiquity of images and stories of the four-leaf clover makes them seem likely. Just like celebrity-ridden media makes teenagers believe they are likely to grow up famous (rare) and drama-drenched features on child abducting strangers (even rarer) make parents afraid to open the door.

Most narratives focus on the crisis and the exceptions. This shapes the common idea of the world in more subtle ways than “the world is bad but I will win the lottery.” (While in reality, in America, things are getting harder on an interpersonal and financial level, while the world is getting less, not more, violent). In the book Four Arguments for the Elimination of Television, published in 1978, former adman Jerry Mander lays out the world view of television viewers, which includes detailed beliefs such as cops and lawyers being much more common real world-professions than they were.

But is it possible to show things in context, more true to the way they are, without putting the audience to sleep? Is it possible to find a sustainable storytelling of the normal?

Fortunately — as Chris shows here with 9,999 three-leaf clovers — the normal sometimes behaves in wondrously surprising ways.