is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Vice President of User Experience at Wildcard and co-founder of Kidpost. Previously, Khoi was co-founder and CEO of Mixel (acquired by Etsy, Inc.), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children. RSS sponsorship opportunities available through /Syndicate Ads.
The award-winning photographer Fan Ho spent many years capturing the grit, congestion and vibrancy of mid-Twentieth Century Hong Kong. A selection of his photos have been on display at San Francisco International Airport’s Terminal 2, though apparently they’ll come down at the end of the month, so there are just a few days left to see them. Not to worry, though, as later this year, Modernbook Editions will publish the third in its Fan Ho monographs, “Fan Ho: A Hong Kong Memoir.” As you can see below, the photographs are uniformly breathtaking in how they play with light to portray the distinctly narrow verticality of the city.
The “poet laureate of baseball,” Roger Angell has been translating the sport’s milestones-just-passed into vivid, crystalline reminiscences for decades. In the latest issue of The New Yorker he bids farewell to the Yankees’ Derek Jeter, who is retiring this fall. Though the iconic shortstop isn’t quite gone yet, the league has spent the better part of the year to date missing him already; Angell captures it all with exquisite succinctness.
This is the first in a series of posts from Melissa Mandelbaum, designer at Percolate, about lessons to be found in architectural principles for product designers.
Here she focuses on the notion of circulation within buildings as it relates to navigation within apps: a building’s given method of circulation—stairs, elevator—directly impacts how we use the building, e.g., stairs might inhibit moving upwards, where an elevator might make it likelier that heavier objects are brought into the building. She relates how she applied those ideas to deciding between “hamburger” navigation and tab navigation for Percolate.
The Dissolve’s Movie of the Week is Steven Soderbergh’s 1998 classic “Out of Sight,” a small, taut and unyieldingly charming adaptation of an Elmore Leonard novel—that also happened to reignite the director’s career. Its success put Soderbergh back onto Hollywood’s A-list, and in the decade and a half that followed, he went on to create a string of both big budget Hollywood blockbusters and fascinating indie experiments—one of the finest bodies of film work of the early 21st Century.
Celebrating “Out of Sight” is worthwhile, but even more interestingly, editors at The Dissolve use its Movie of the Week spotlight to look at the period that immediately preceded Soderbergh’s triumphant return. In an essay appropriately titled “Soderbergh: The Wilderness Years,” writer Jason Bailey goes into considerable detail about how the director seemed to peak early with his 1989 debut, “Sex, Lies & Videotape,” which he made at just age 26 and which won the Palme d’Or at the Cannes Film Festival. Almost immediately after its success, the director ran aground.
Bailey expends almost 3,000 words critically reappraising the movies that Soderbergh made between 1989 and 1998, and the analysis is insightful. But in actuality his essay is a chronicle of failure, of how a talented director wrestled with great expectations and repeatedly flailed, misfired and lost his sense of true North. Bailey quotes Soderbergh’s particular dissatisfaction with his 1995 neo-noir “The Underneath,” which was made at a low point for him both professionally and personally.
‘It’s a very unpleasant feeling,’ he explained recently, to ‘see everybody working so hard, the cast and the crew, to give you what you want every day. And you know that this thing’s just dead on arrival.’ The issue was not problematic collaborators, or studio interference, or lack of funds. ‘I had everything I needed,’ he said. ‘I’m the one that didn’t show up’…‘I can’t say that I would recommend it to anyone,’ he adds, ‘other than to look at it in the context of a career.’
What’s interesting is that though Soderbergh regards it as a nadir, he also recognizes that “The Underneath” is possibly his most important work. His dissatisfaction with its process and end result were the impetus for a new creative chapter; even before the film was done he knew he had to find new approaches and more fertile ground to work from. Almost immediately after that film wrapped, he made the highly experimental “Schizopolis,” an odd, intentionally unorthodox project filmed on a tiny budget and with no stars, but that reignited his drive and provided templates for many of the ideas that would fuel his later successes.
I’ve been a devoted fan of Soderbergh’s work since “Out of Sight,” so I’m probably predisposed to being captivated by this story. Nevertheless, I think there are a lot of lessons in this essay for anyone who still operates under the misconception that careers are direct trajectories, or who has experienced the valleys of trying to forge a career of personal work. Read the full article here.
Nick Keppol “dissects” the new design language of OS X Yosemite’s icons.
There was a lot of speculation that icons in Yosemite would all be super-ellipses or circles. Thankfully that’s not the case. I think Apple’s designers have done a great job building a flexible system that allows for a clean look, but retains the flexibility we desire to create a unique icon.
Keppol sagely notes that “Apple is consistently inconsistent,” so if you’re looking for a grand unifying theory of Yosemite iconography, even this level of inspection will frustrate you. Read the full article here.
Somewhat unexpectedly, many designers are now would-be animators too, thanks to the transformation wrought by native mobile apps. Mike Rundle’s new book, “Motion Design for iOS,” the latest installment in his “Design Then Code” series, offers the best yet overview of what it means to bring the magic of movement to what has until very recently been the relatively static art of designing digital products. It’s a how-to book, but it’s also a flag planted in the ground—if it’s not the first, then it’s likely the best yet statement on the intersection of these two disciplines.
Well, to be more accurate, they’re using 3D technology to render not only the product images in their famous catalogs, but also the exquisite, idealized and some would say unrealistic “photographic” tableaus of Ikea products in home settings, like this one.
That’s right, that image was generated entirely inside some nerd’s computer. This fascinating article at CGSociety (“The most respected and accessible global organization for creative digital artists”) includes lots of revealing details on this practice.
It began only in the past decade, as 3D technology matured, and advances made it possible not just to create entirely convincing images, but also to relieve the logistical headache of coordinating the delivery of props from all over the world to a photo shoot. Today, three-quarters of Ikea’s product images are CG, and the team maintains a bank of about 25,000 models, all rendered at “ridiculously high resolution” so that they can be used for any purpose, including very large wall murals in stores.
I found the comments on how the company made the transition from photography to mostly digital through cross-pollination of disciplines particularly interesting:
There was a very intensive period of training where the entire photography team met with V-Ray gurus over in Bulgaria and came back with a number of tasks to complete—more 3D pieces to create. And for the 3D artists, it was the opposite way around. They were trained in photography in the studio. This process is absolutely what made for an increase in quality—both in 3D and photography. Actually now some of our photographers have completely ‘gone over’—they’ve become 3D artists. And some of our 3D artists have abandoned their computers and become photographers!
Even as the notion of cards as the next big software interaction paradigm continues to gain momentum, it hasn’t gotten much easier to explain to the uninitiated what, exactly, a card is. When asked this question, I find it hard not to ramble on at great length, and even harder to avoid using technical jargon, which usually produces diminishing returns in conversations with “normal people.”
So I thought I would try to unpack this idea a little bit, as simply and briefly as I can. No guarantees, though.
To begin, when we talk about cards in digital products, it’s important to understand that there are actually two, interrelated concepts at work that some people conflate as one. I’ll use some grossly simplified language to label them as cards as presentation and cards as third-party content.
Cards as Presentation
This is the most visible permutation of cards right now. It simply entails adapting the visual form of cards that we know from the real world (e.g., index cards, business cards, credit cards, etc.) into a visual unit for presenting an app’s content or features. This is familiar to many users from Tinder, Pinterest or even The New York Times, where the things that you read or do are displayed concisely in rectangular shapes, and are arranged so that they’re clearly distinct from one another, whether they’re separated by vertical space or laid on top of one another in a virtual stack.
Choosing to visually package content in this way seems arbitrary, but this trend is reflective of our changing relationship to software. We used to sit down with software and point and click on things; now we carry software around and tap, swipe, pinch and zoom on things. As our computing habits have gotten more mobile and more physical, the metaphor of pages, which implies a more focused, dedicated frame of mind, has become less useful.
Cards offer an alternative metaphor that’s much more complementary to how we use phones and tablets. Just as in the real world, you don’t need to sit down at your desk in order to use cards; you carry them around and whip them out whenever or wherever they can help you—again, think of index, business or credit cards—in context of what you’re already doing (that respect for the user’s current context is important to cards as third-party content, too). Cards just make more sense on mobile than pages.
Moreover, cards in digital products are ideal for a world in which users often expect the same content or feature to be usable regardless of the screen size or platform they’re viewing it on. A card’s inherently simplified design form almost always consists of a single column of words and images—there’s no room for multi-column layouts or fancy grid systems (sniff). As a result, cards are much more conducive to responsive design methods, and can scale up or down according to the screen size.
Cards as Third-Party Content
If that was all there was to this cards phenomenon, it would make for an effective user interface approach, but not a particularly powerful new interaction paradigm. The second concept at play in cards makes them much more interesting: the idea of cards as third-party content. This describes a more advanced conception of cards in which they look the way I’ve described above, but they can also surface content or functionality from elsewhere—and make it available and interactive directly within a user’s current context.
This is a departure from the convention of clicking on a link and being taken to its destination, familiar to us from years of using web pages. In a third party card, the content is embedded in the card itself so that it can be experienced wherever a user might encounter that card.
You can see the fundamentals of this approach in action today with Twitter cards, which for some time now have proactively transformed links in users’ tweets into cards (even though, frustratingly, they don’t look much like cards). Twitter cards first require third-party sites to do some technical work to make their content visible to Twitter as cards. Once that’s done, a link to a story on a news site, say, will render with the story’s headline and accompanying picture right alongside the original tweet itself.
Granted, that’s not a tremendous amount of third-party functionality to surface. It doesn’t truly obviate the link itself; it just gives the user a better idea of what awaits on the other side of clicking that link. But cards are getting more robust as time goes on, and before long they won’t require the user to click through at all.
This tweet from Acura is a very recent example of Twitter’s ambitions for the form. It showcases a more advanced card in which users can configure the features on an Acura TLX sedan without leaving the Twitter stream. It’s still fairly rudimentary stuff, but it doesn’t take much imagination to extrapolate from this a not-too-distant future in which cards will allow users to book travel plans, bid on auctions, check in at venues, scan for real world objects around them, and much more.
This kind of syndication of content and features is nothing less than an attempt to reshape the mobile landscape. Rather than requiring dedicated apps for every situation, an ecosystem that supports third-party cards can allow you to access the content or features that you need, where and when you need it. Is it truly necessary to go to the trouble of logging into the App Store to download a native app from a given airline, say, if you only fly that airline once in a while? Given the right cards, you could book your flight, check-in, track its progress and more, all at your whim. What’s more, when you’re done, you can essentially dispose of the cards until you need them next; that functionality that you needed from Delta for just a few days no longer has to reside on your device, taking up space while it sits unused until you fly Delta again at some unknown point in the future. That’s a much more fluid, much more lightweight experience that’s easier for consumers and more efficient for companies on many levels.
A Working Definition
So much for brevity, right? And I’ve only just touched on the most basic underpinnings of the card concept—there are many more aspects to this paradigm. Having run through all of this, though, is it still possible to write a simple answer to the question, “What is a card?” Here’s what I would say:
A card is a single unit of content or functionality, presented in a concise visual package. More advanced cards use that form to surface content or functionality from other apps, and allow users to interact with that content or functionality directly in the context of where a user encounters the card.
That’s not perfect by any means, but if you have some suggestions as to how that can be improved—and, ideally, shortened—let me know and I’ll update it here.
Further Reading on Cards
Wildcard. Full disclosure: I get paid to think about and design cards at this startup in New York City, where we’re working on the world’s first browser for cards. You can read more here or find out about our partner program here. None of what I’ve written today has been vetted by the company, and I’m solely responsible for its content.
“Twitter, Canvases and Cards.” This article by Benedict Evans from last year was a highly influential rumination on cards based on changes that Twitter was making at the time to move towards the new paradigm.
F37 Bella, type designer Rick Banks’s beautiful riff on Didot serif typefaces and a 2012 Tokyo Type Directors Club winner, is currently on sale for half off at HypeForType. Bella comes in three weights—Original, Heavy and Stencil—all of which have luxurious, buxom curves and theatrical hairline (or basically invisible) serifs. In practice, it’s virtually useless for typesetting paragraphs of text, but if you have occasion for ostentatiously large, dramatic letterforms, this is a fantastic arrow to have in your quiver.