tom haynes

OrbitalFleets

OrbitalFleets is designer Nate Utesch’s collection of space shuttle posters. They’re data-rich, very detailed, and beautifully designed.

Also check out his other project, Ferocious Quarterly.

(via The Fox is Black)

Really?

Tide forecast history1

You could be using this interface for only 99 cents!

CWNY logo

Creative week new york

I love this logo.

Lingua at CHI2011

Lingua poster

Last week I was in Vancouver with a project group, presenting Lingua at the CHI 2011 student design competition. We were one of 12 teams chosen out of 80 to come to the conference and present our poster (above). On Monday we pitched to the judges and got selected as one of the four finalist teams that would present again on Thursday. Our presentation went really well (thanks to lots of hard work from Jane and Cait), but we didn’t win the whole thing.

The conference was great, though, and Vancouver is a fun city.

Lovely

Lovely UI is another great collection of mobile interfaces. This instruction interface is particularly lovely.

Kindle ad

I love the copy in this Kindle ad. It directly and concisely addresses all the doubts that people have about reading books on digital devices.

Watchover

Watchover540

A few weeks ago Jane and I hosted a night of watching online videos on the big screen. Everyone submitted their favorite artsy/inspirational/funny/ridiculous videos and we watched them all! Here are some of the highlights:

Steve introduced us to live music programming with A Study in Part, shared music-making with glass bottles, and showed us 1 musician on 2 pianos.

Natalia’s one pick was 16 minutes long but totally worth it. Three songs, one music video: Russ Chimes – Midnight Club EP.

Jane shared deleted scenes from Pulp Fiction, a ridiculous John Berger documentary, and a special selection from the Tim and Eric Awesome Show Great Job!.

Saul showed us a fantastic Sarah Brightman music video and taught us about Water (chemical symbol H20) and The Brain through the BBC’s Look Around You series.

Oh, there was an Indian Superman sighting.

Signs was randomly submitted and much appreciated.

I showed off my current favorite video (about The Sartorialist) and CL!CK, which makes me smile every time (and also Spheres Of Fury and Dark Side of the Lens).

Linder shirts!

Here’s the final Linder shirt design. It’s great to make something and then actually get it out into the real world.

I made a little mistake in the “Cooperative” text — the text layer was on “Snap to pixel grid” and when I converted it to outlines all the created points snapped to the pixel grid, too. It’s most noticeable on the Es: they look a little muddy.

Also, the ring around the twin pines was supposed to be the same width as the lines in the house. But the house lines are made up of ink and the circle is the absence of ink. So if the ink bleeds even a little bit, you get that difference. I guess the fix there is to think about how each line is made and adjust the widths accordingly.

I got them printed at Underground Printing which was a huge mistake. Underground doesn’t care about your artwork or colors, they just want to get as many people through the system as possible. They got the colors completely wrong the first time, and told me that they don’t even look at the shirts before giving them to customers. And they were rude the entire time. Next time I’m going to VGKids in Ypsi.

FEZ

At first FEZ just looks like a normal side scroller. But then you realize that there’s a bit more to it than that…

Supakitch & Koralie

Great profile of two artists, and the mural at the end is fantastic.

Prototyping

Filmgrid

I’ve been working on prototyping a new interface for browsing movies called FilmGrid. Here are some of the things I’ve been doing to make the design and development process smoother, faster, and more fun.

JavaScript

I’m using jQuery, but also TouchSwipe for detecting swipes on iPad and boxy for dialog boxes. Not having to write all this code myself is clearly a Good Thing.

I’ve also been making use of the Module pattern to make my JavaScript cleaner, more readable, and easier to refactor. My $(document).ready() function is less than ten lines of code and easily readable.

Google App Engine

GAE is great because I can develop locally, but also push a copy to Google-hosted servers with one line (appcfg.py update .). That makes it super-simple to show other people the prototype. I can get feedback from someone over IM, make a change, upload it, and have them look again, all in five minutes.

GAE also can also host multiple versions of the same app at the same time. So I can have a stable version and another one for playing around with new ideas.

git

I’m using git for version control and hosting the source on GitHub. Even though I’m not actively collaborating with anyone on this project, having my code publicly available inspires me to write better and more readable code. It’s also really satisfying to code a new feature or fix a bug, and then commit it — it’s like checking something off a checklist.

Real content, but not necessarily live content

When I started laying out FilmGrid I just had a bunch of rectangles that represented movies. Not only was that ugly and uninspiring but it didn’t really give me a feel for how FilmGrid would actually work. Grabbing a bunch of random movies would have fixed the ugliness problem but FilmGrid’s layout is deliberate: adjacent movies are related, like browsing in a library or Blockbuster. So I wrote a script to fetch movies from themoviedb and put them in a JSON object. It’s a little slow, but I only have to run it once, and it populates the grid with appropriate content.

Winner

lingua-540.png

Lingua — my group’s SI 682 project — just took first place at ExpoSItion, the School of Information’s annual poster session.

We also got a bunch of great feedback that we’ll incorporate into our second iteration of the poster/presentation for CHI2011 in May.

Check out the full poster and let me know what you think!

New!

Some new things I’ve created recently:

Illustrator transform

Reflect

I just found the fantastic Transform effect (Effects → Distort & Transform → Transform) that lets me create a reflection of a shape and translate it so that it’s next to the original. And all in real-time, so I can edit the shape on the right and the whole shield changes!

in Bb 2.0

This is truly fantastic. When I first read the instructions — “play these together, some or all, start them at any time, in any order” — I thought, “There’s no way this will sound good.”

But it does; it’s better than good. Go play.

Know your neighbors

Here are the slides from the pitch/presentation that Jane and I gave in Boulder this past weekend for the Interaction ’11 student competition. All of the brainstorming, ideation, research, iteration, and creation happened during the 3 days of the conference. Lots of fun.

Many of the icons are from the free Glyphish set that is licensed under CC-Attribution.

Kickstarter search

I was just showing a friend the awesome Girl Walk // All Day project on Kickstarter and we both went “Whattt??” (in a good way) when we saw this live/instant/visual search interface. Try for yourself!

You’ll also want to click the scissors towards the bottom of the page. Maybe a couple times.

The UX-driven startup

Loving this presentation from Alexa Andrzejewski at Adaptive Path. So many practical ideas for thinking about UX. Be sure to watch in full screen mode.

Firefox usage visualization

Firefox released data from Test Pilot — their framework for collecting Firefox usage data from users that opt-in and install it — and asked people to visualize it. The data represents one week of Firefox usage for ~270,000 people, and ~4,000 of them also filled out a survey with basic demographic information. I was interested in what usage looked like over time and by age group, so I pulled out Python, sqlite, and R for exploration and used Illustrator to clean it up.

Here’s the final version:

And here’s a version with my annotations:

How?

I used SQL to grab all the STARTUP, ACTIVATE, SHUTDOWN, and INACTIVE events from the ~4,000 users that filled out the survey. Then I parsed that with a Python script that computed how many users in each age group were online every ten minutes. I plotted that data with R (using LOESS for smoothing) and then tidied it up with Illustrator.

Update: I was selected as a finalist and won a set of four Edward Tufte books!

Code and images are licensed under Creative Commons Attribution-ShareAlike 3.0.

Usership > ownership

A video that Jane and I made for the Interaction ’11 student competition. The theme is “Use not own,” and our idea is a system that helps people who live in apartments share things with their neighbors.

Flight Paths

Check out this video from the GE show. A little like time-lapse photography, but with video cameras. The typography and the way it transitions in is really nice, too.

Found on datavisualization.ch, a new favorite of mine.

The Atlantic

I love this quote from the president of the Atlantic Media Company on how they re-energized the company:

We imagined ourselves as a venture-capital-backed start-up in Silicon Valley whose mission was to attack and disrupt The Atlantic.

(From this New York times article.)

Actual size

This has been bothering me for a while now. If the image you’re viewing in Preview is already at 100%, the menu item for “Actual size” is greyed out, which makes it hard to find because my eyes skip over inactive menu items. Also, pressing the 0 shortcut for it beeps, which is the same result as (for example) 9, which never has a function. So I think I’m doing something wrong.

I argue that the command for making an image actual size should never be hidden or sound like an error. Trying to scroll up at the top of a webpage doesn’t beep. Making the font size 12 in a document where it’s already 12 isn’t an error. Pressing backspace in an empty document is not a crime. These are all things people do just to make sure they’re at the top, that the font size is 12, or that their document is empty. I just want to make sure that I’m seeing things at 100%, which is reasonable because the current zoom level isn’t displayed anywhere.

I know this is a small detail, but Apple is usually very good about things like this. I wonder if this is an oversight or a deliberate decision.

311

Great article and steamgraph (above) about the 311 service in New York.

Ghostly Discovery

Ghostly Discovery is now on the web! Slide the sliders, listen to music on the Ghostly label.