Category Archives: Things I’ve Made

Maker Year Project #11: Letter Apps

Letter apps are apps whose icon’s primary visual element is a letter. For instance, Hyperlapse, Gmail, and Groupon are letter apps.

icon-mistaken icon-abstracted icon-letter

I looked through the top 10 000 apps on the iTunes App Store on January 1 2015. From those, I found 834 letter apps. Then I visualized them. Tap or click the visualization below to see it in its full glory.

makeryear-letter-apps
It looks really good really big. 1 MB

Observations

When using a colour background, white is almost always used for the foreground.

For the letter C, over half of the icons have white backgrounds. No other letter has such a high percentage of white icons.

Many names of the O apps don’t actually begin with O.

M and S are very popular letters (62 and 57 icons). This is probably because a lot of app names begin with M and S.

J, K, and I are least popular (6, 11, and 11). Most likely because there aren’t many apps beginning with J, K, or I. But I like to think the dots on the i and j make them particularly unpopular.

icon-hybrid

Sometimes apps like Guitar Master Class are letter apps and sometimes they’re not. In some, the icon dominates the letter. In others like Gmail, the letter dominates the icon.

icon-doubleLetter

I didn’t include apps like CamCard because there’s more than one letter. But if I did, there’d be 386 more apps in the set.

Why I’m okay with someone stealing my idea

Ten years ago in 2004 I made The Collective Type Project, an online experiment where anyone could draw letters of the alphabet. Everyone’s input would be averaged together for each letter of the alphabet, and in the end a typeface (font) representing everyone’s contribution would be created and made available for free. The project completed in 2007, but you can still download the font and see all the letters.

2as
2 contributions averaged for A

 

255 contributions
255 contributions averaged for A

 

Screen Shot 2014-07-16 at 3.42.43 PM
The final typeface for The Collective Type Project

 

Recently, The Universal Typeface Experiment was posted on my Facebook feed:

collectiveFacebookPost

It was posted because I also made a globally crowdsourced, mouse drawn, eventually downloadable font 10 years ago.

Here’s the description of Bic’s Universal Typeface Experiment:

This experiment allows individuals from all over the world to contribute their handwriting. A specially developed algorithm then calculates an average, allowing us to merge contributions into a single, ever-changing and always evolving typeface.

Ten years ago I’d be livid to see this because I would have thought they stole my idea.

But today, after ten years of designing products, I feel the opposite. I don’t think my idea was stolen. In fact, I’m excited for Bic’s project because I’ve learned a few lessons.

Lesson 1: Ideas are rarely unique

Before I make something, I keep the following in mind:

  1. Before starting, assume what you’re about to make has already been made
  2. While making, assume other people are actively making the same thing
  3. After you’re done, assume other people will make the same thing, whether intentionally or unintentionally

It’s just how things work. Ideas are cheap, plentiful, and tend to repeat. Don’t take it personally when they do. But some people do take it personally, and that leads to the next point.

Lesson 2: I don’t think anyone stole my idea

It’s a marvelous conceit to believe someone stole your idea.

The first time someone stole my idea was in Mrs. Small’s first grade classroom when I was seven years old. At show-and-tell, I was going to show off my transformer toy, but Scott shared the exact same toy before I could.

He STOLE MY IDEA.

Two years later I discovered a large quartz deposit in the backyard of a house next to the schoolyard. A chain-link fence separated me from some dirt, so I used a stick to dig at it, scored some sweet quartz, and quickly became the first quartz baron of Oakwood Public Elementary School.

A week after showing everyone my quartz haul, dozens of quartz-greedy children abandoned a sweet playground for poking the dirt with sticks through a rusty chain-link fence, allowing me full reign of the swing set.

But still, they STOLE MY IDEA.

Things like this happened for years. All the time. Even recently when I worked at Microsoft designing the thumb keyboard for Windows 8.

We were so excited to reveal it to the world at the D9 conference in 2011. Months of work led up to this moment. After the big reveal, there were like, three tweets about it. It was that monumental.

Screen Shot 2014-07-16 at 2.01.15 PM
I remember where I was when the world was changed forever.

Four days later, Apple revealed updates to their forthcoming iOS 5, which included a thumb keyboard for iPad. What!? They must have seen our keynote, and in 96 hours scrambled, strategized, planned, designed, coded, tested, and integrated a fully functional thumb keyboard into iOS. Because there’s no way they could have had that idea without seeing my idea first.

Apple STOLE MY IDEA.

If the theme of STOLE MY IDEA doesn’t sound completely ridiculous yet, it should. Because saying someone stole your idea (lacking evidence) is like saying humans are incapable of independent thought. That ideas are not intuited, but only exist by stealing from others.

You may be saying THEY STOLE MY IDEA. But what everyone hears is I’M INCREDIBLY INSECURE ABOUT THIS SMALL THING THAT NO ONE BUT ME CARES ABOUT.

Ask anyone “Who released the thumb keyboard first: Apple or Microsoft?” and you’ll get a consistent answer: “Who cares?” No one cares who’s idea it was. No one cares who was first.

In the end, screaming “they STOLE MY IDEA” only makes me sound like a petulant first grader in Mrs. Small’s class.

Lesson 3: Influence is inspiration

If you want to influence and inspire people, you can’t be upset when their work reminds you of your own.

Averaging many visual things into one visual thing isn’t a unique concept. I was probably influenced by Jason Salavon’s work where he averaged every Playboy centerfold into one image:

salavon
Jason Salavon’s Every Playboy Centerfold, 1988-1997 

One of my all-time favourite songs is A Warm Place by Nine Inch Nails. Interestingly, the melody is nearly identical to David Bowie’s Crystal Japan.

In an interview with the two musicians, Reznor talks about writing A Warm Place and how it sounded too good to be original. Unintentionally, he re-wrote elements of Bowie’s song. Was Bowie pissed to find out? No, because Bowie wrote it 14 years prior and had written, evolved, and released a whole pile of new work since then.

But not only was he not pissed, the two collaborated on “I’m Afraid of Americans.” Similarity and influence doesn’t have to end with antagonism.

Did I influence someone involved with the Bic project? Maybe someone saw my site ten years ago and was unconsciously influenced. Maybe not. But what I do know is I now have something in common with MediaMonks (the people who built the Universal Typeface Experiment.)

Honestly, I’m really excited for MediaMonks because the project will reveal some really cool data, insights, and human behavior just like Collective did. It’s really fun stuff. And I hope I’ll be able to meet or at least chat with some of them to learn how they approached the project, where they’ll take it, and some of the cool stories they find in the data.

I’m sure they’d love to hang out if the first thing I said was “HEY ASSHOLES, YOU STOLE MY IDEA. We should get coffee some time!”

Lesson 4: Execution > idea

The Universal Typeface Experiment is being executed in a way Collective couldn’t. Because I love the concept of aggregating mass participation into an unpredictable and functional end product, I’m just super stoked to see it evolve.

In 2004, no one had a touchscreen, web servers had bottlenecks, and mass participation was difficult.

In 2004, people had to “write” letters into Collective with mice connected to desktop computers. My web server limited me to storing 255 contributions per character. Rallying mass participation was difficult unless you were mentioned on a major design site like K10K or NetDiver.

When I built Collective, Facebook was only for ivy leaguers, Twitter didn’t exist, Reddit didn’t exist, YouTube didn’t exist, and DeviantArt was a lot of drawings with bad lens flare effects. The best I had for rallying mass participation was combining MSN messenger, email, and Friendster and hoping it’d appear on SlashDot.

In 2014 things are different. Ubiquitous touchscreens make drawing letters easier and better. Cheap computing allows Bic to get over 1 million contributions instead of 30,000. And mass participation is easy thanks to the powerful sharing methods of the social network du jour.

On top of that, Bic is bringing in user data for things like handedness, country, age, and gender to make things even more interesting.

I had fun building Collective, it was a cool portfolio piece that helped me get a job I loved, and then I moved on to the next thing. If I cared about it that much, wouldn’t I have evolved it by now? How can I be mad about someone doing something similar when I practically abandoned the project eight years ago?

Lesson 5: Protect when necessary

Everything I’ve written so far has been lovey-dovey. But there’s always the chance someone intentionally took Collective and re-implemented it.

IP theft is horrible, frequent, and can destroy people and businesses when it happens. But if you’re in a position where someone stealing your idea results in you getting fucked, your job description has a new bullet point: Protect and defend IP. If someone steals and implements your IP, you need to get better at your job.

In conclusion

Know what’s valuable, know what’s worth defending, and protect it. Because it will be replicated intentionally or otherwise.

Maker Year Project #1: The Steven Seagal Turing Test

I’m happy to share my first real project for Maker Year: The Steven Seagal Movie Title Generator. If you’re familiar with Steven Seagal or his films, I’m sure it will make you laugh.

Project Origin
On June 5, I arrived in Cambodia’s capitol, Phnom Penh. Exhausted, overwhelmed, and disoriented, I sought reprieve in my hotel room after a long “short walk” through the city. Trying not to sweat too hard in my 35° C room, the television presented three options:

  1. Watch Twilight with Khmer voiceovers
  2. Watch Force of Execution, Steven Seagal’s 2nd newest film
  3. Watch nothing and turn it off

Naturally, I chose #1.

But I was quickly confused. Why does this gentleman always have a 10,000 foot stare? Why does he sparkle in the sunlight? Why is this girl’s lip not scarred and scabby from two decades of pensive biting?

That’s when I turned to Force of Execution. A film with a Tarantino-esque title sequence followed by a 99 minute plot hole.

On learning the title of the film, I realized it means absolutely nothing. It’s just random words that conjure imagery of detectives, criminals, or courtroom proceedings. Yet it sounds intense, serious, and legitimate. Something that would impress a 12 to 15 year old boy. So I look into Seagal’s other films to see if this naming convention is “a thing”.

Not only is it “a thing”, I quickly learn Seagal has starred in over 40 films since his 1988 debut, Above the Law. And all titles follow this theme.

And this is when I invented the Steven Seagal Turing Test. “Can a computer fool someone into thinking an algorithmically generated Steven Seagal film actually exists?”

Thus, in Southeast Asia a seed was planted. The Steven Seagal Movie Title Generator is but a seedling, ready to grow into a sturdy tree bearing sweet fruit.

What problem does this solve?
Boy, do Eric Ries and Startup Weekend love that question. This doesn’t solve anyone’s problem at all. This solves my problem: How do I transition from building things in Flash to building things in technologies that work on any device?

I figured it was time to learn me some SVG and jQuery.

What I learned

  • SVG needs major improvement in the typography department. Word wrapping doesn’t exist.
  • Use getBBox() to find the x, y, width, and height values of SVG elements.
  • Don’t create SVG elements with jQuery. The elements won’t be recognized as SVG and things like getBBox() won’t work. Instead, I use this method provided by a helpful person on Stack Overflow.
  • At the moment, getBBox() doesn’t work with anything in a <tspan> in certain browsers, so use <text> if you’re programmatically measuring and positioning text.
  • SVG attributes like textLength are case-sensitive, so they’ll break if you define or manipulate them with jQuery’s attr() function. Attr() converts everything to lowercase.
  • You can get the raw HTML object from a jQuery object like this: $(‘#elementName’)[0].
  • When learning a new language or technology, the project I’m applying it to needs to be well scoped, easily understood, and devoid of ambiguity. Otherwise I’m figuring out two things at once and I’m easily overwhelmed by not knowing anything and having to learn everything. I’ll rapidly stall out and resign myself to watching Terminator 2 with Khmer voiceovers.

Next steps for this project

  1. Make the posters savable and shareable
  2. Apply the actual Steven Seagal Turing Test by letting people vote whether they think a title is real or automatically generated
  3. Create more poster variants
  4. Improve typography: layout, sizing, and typefaces

Fun facts about Steven Seagal
Steven Seagal is 62 years old and people say awful things about him “becoming old, slow, and fat”. To those people, when you reach age 62 I invite you to compare your appearance and achievements to those of Steven Seagal’s. You’ll beat him on total number of internet comments written. That is all.

Steven Seagal is prolific. To date, he’s been in 45 films, and not a single one involved being a kindergarden cop, acting alongside Danny DeVito, or doing a voiceover for a baby or cartoon character. Every single one involved crushing someone’s bones or joints.

Here are all his films:
Above the Law (1988)
Hard to Kill (1990)
Marked for Death (1990)
Out for Justice (1991)
Under Siege (1992)
On Deadly Ground (1994)
Under Siege 2: Dark Territory (1995)
Executive Decision (1996)
The Glimmer Man (1996)
Fire Down Below (1997)
The Patriot (1998)
Not Even the Trees (1998)
Prince of Central Park (2000)
Exit Wounds (2001)
Ticker (2001)
Half Past Dead (2002)
The Foreigner (2003)
Out for a Kill (2003)
Belly of the Beast (2003)
Clementine (2004)
Out of Reach (2004)
Into the Sun (2005)
Submerged (2005)
Today You Die (2005)
Black Dawn (2005)
Mercenary for Justice (2006)
Shadow Man (2006)
Attack Force (2006)
Flight of Fury (2007)
Urban Justice (2007)
Pistol Whipped (2008)
The Onion Movie (2008)
Kill Switch (2008)
Against the Dark (2009)
Driven to Kill (2009)
The Keeper (2009)
A Dangerous Man (2009)
Machete (2010)
Born to Raise Hell (2010)
Deadly Crossing (2011)
Sheep Impact (2011)
Maximum Conviction (2012)
Force of Execution (2013)
Gutshot Straight (2013)
Dark Vengeance (2014)