The new Gmail and Facebook apps use a navigation that hides behind the main content, and can be summoned by a tap in the upper left — on a “Menu” button and row of lines icon, respectively — or by dragging the content out of the way using the menu bar.

Facebook’s also serves a place to list search terms (Gmail’s search is included in the main interface).

Another place I’ve seen this is in Asana’s HTML5 mobile app, app.asana.com. Here there are three levels of hierarchy, and the main menu is always visible, even if only slightly. There’s no dragging here (probably partly because it’s a web app living in Safari) but the cards do slide left and right, strengthening the sense of overlap.

I also found some screenshots (on Behance) of a Russian application called Beeline that also appears to be using this strategy.

At first this pattern struck me as weird because all of these screens are more constrained horizontally than they are vertically, so a smallish sliver of vertical content is actually quite a lot of screen real estate. This doesn’t seem to be a problem, however. Facebook doesn’t need the entire screen width for navigation, and Asana’s task card looks fine with a little less space on the left.

Lastly, the fact that these interfaces use card-like is vaguely reminiscent of Palm OS, except Palm only uses cards to represent entire applications. The hint of off-screen content (“teaser” content as it is sometimes called) also reminds me of the Windows Phone 7 UI, except I don’t believe Windows uses it for hierarchy.

Are there other examples out there? Has anyone else written about this or given it a name?

I’m interested to keep track of how this pattern evolves over time.

Wow! Shoot analogue movies on regular 35mm film. A 36-exposure roll gets you 144 frames of lo-fi, wide-screen awesomeness. Check out the LomoKino or watch more mini-movies.

Watch Paul Graham write his essay “Startups in 13 Sentences.”

Text that is yellow will eventually be deleted, making it easy to see his writing process. What starts out as colloquial (“kind of happy”) eventually turns into formal and concise (“semi-happy”). Very interesting.

Also read his post about the experiment.

New highway signs. Very clean, great colors.

I love how this shows the fluid nature of La Presse across papier, web, and applications mobiles.

(via Brand New)

Speaker Deck, a better-designed SlideShare?

From a little while ago.

Now, I suspect that what you’re doing is showing a Default.png image (which loads immediately) that looks exactly the same as the functional passcode screen, and then showing the real interface. This is a neat trick that is usually supposed to make applications feel like they are loading faster. But in this case it’s making your app feel like it’s broken, because when I tap what looks like a button, nothing happens. So I have to wait for a while — probably longer than I have to, in fact, just to make sure — which actually makes logging in slower. Oh no.

So, here’s my advice for you: use a Default.png image that is similar to the real passcode screen, but not exactly the same. That way I know when it’s time to type in my digits. One idea would be to show an interface that looks disabled, with a greyed out input box and buttons. Alternatively, don’t even show the buttons, and instead show a witty message, like “Finding buttons” or “Please hold.” I’m sure you’ll think of something.

(Oh, and I love the recent pending transactions update, with the dashed lines. Pretty.)

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)

You could be using this interface for only 99 cents!

I love this logo.

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 UI is another great collection of mobile interfaces. This instruction interface is particularly lovely.

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.

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).

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.

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

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

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.

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!