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 Principal Designer at Adobe. Previously, Khoi was co-founder and CEO of Mixel (acquired in 2013), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “How They Got There: Interviews with Digital Designers About Their Careers”and “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.
In this Print Magazine article, Sagi Haviv of prolific branding studio Chermayeff & Geismar drops some knowledge on his firm’s approach to designing logos. Specifically, Haviv explains how they decide whether the principal form of each logo should be a wordmark—the name of the company rendered in a unique way—or a symbol—a trademark-ready icon:
Creating a symbol can be a great design exercise, but we try to be very disciplined about only developing a symbol when there is a compelling strategic reason to do so. This is because visual identities work through familiarity, so any new visual element has to be learned first in order to be established. Using a symbol as part of the logo means that there is an additional element that has to be learned. We find that people are generally willing to learn as little as possible.
Haviv then runs through several examples of wordmarks that Chermayeff & Geismar have developed for brands like Mobil, Barneys New York, Hearst, Showtime and more. There’s so much to learn in just these few paragraphs.
Haviv argues that wordmarks are much easier to trademark than symbols, especially at this point in the broader history of corporate iconography when countless companies have trademarked symbols of nearly every possible shape, size and color.
No matter how excited we are with a new symbol design, it still has to be tested by the trademark attorneys to make sure it is ownable. There is no more humbling moment for a designer than when we receive the fat spiral-bound reports with all the symbols similar to our designs, and we can see how many designers out there have already thought about the same exact thing that we thought was so original. Although our designs usually survive this process, it is nice every now and then to be able to skip the search.
As valuable as this advice is, it seems to overlook a fact of the contemporary branding environment that is very real for a huge number of today’s brands: they need to be represented by an app icon. Of course, you can squeeze a wordmark into an app icon, but if your company’s name is more than just a few characters, it can be a tough exercise.
Here’s all the design tools news that’s crossed my desk over the past two weeks or so. First up, the cavalcade of new software tools from indie developers continues unabated—which is awesome, if you ask me.
Principle, a new OS X application that “makes it easy to create animated and interactive user interface designs,” emerged from beta this week. Principle is focused on prototyping and is well suited for designing individual animations and interactions or multi-screen user flows. Beta tester Benjamin Berger wrote about his experiences with the app in this Medium article. Based on feedback I’ve heard from designers who have been trying it this week, it seems like a solid release, and I’ll be giving it a spin myself soon. If you’re using it, email me and let me know what you think. Principle is available for trial and purchase at principleformac.com
Wake is a new app and service billing itself as “A private space to share and discuss design work with your team.” It too is out of beta this week. Wired wrote about it in this article. You may or may not find the app’s promotional video to be incredibly obnoxious. wake.io
FlySolo is a new project management tool for designers that’s in private beta. It promises “an individual environment” for each project as well as extensive integrations with the third-party tools popular with designers. Sign up for access at flysolo.co.
InVision unveiled Workflow, a “design project management tool” that integrates with the company’s flagship prototyping features, and Boards, a tool that lets you “Create custom moodboards and brand boards, share image galleries, present in-progress or final design assets” and more.
InVision also debuted usability testing features for prototypes on mobile, currently in beta. This is the first of what the company promises will be a series of testing-oriented features that they will unveil in the near future. Read about it in this blog post.
Finally, some miscellaneous items that caught my eye because I have so much free time to surf the web looking for fun stuff.
Are you interested in learning Framer? Are you interested in doing so via the cartoon likeness of a surprisingly divisive pop star? Lucky for you, designer Michael Lee wrote this post at Medium that shows you how to “Learn Framer with Kanye.”
I wrote about the impressive work that the Photoshop team has been doing with that application’s Design Space feature in this blog post from June. The team has continued to develop it in sprint form and they’ve been posting video of the results of each sprint. It’s a fascinating look into some major rewiring of one of the most important software applications ever. See all the videos to date at youtube.com
Here is Principle’s marketing video. It’s worth watching to see how they’re tackling the process of applying animation to user interface elements.
Read the last installment in this series here, and send me any tips and recommendations via the form below.
I tend to prefer the logos that I was familiar with as a youth far more than the ones that have replaced them. Two examples that come to mind are DC Comics’ Milton Glaser-designed seal from the 1980s and Saul Bass’s longstanding AT&T logo. Both were ill-advisedly retired in favor of far inferior updates.
The case of NASA’s famous, modern “worm” logo designed by Danne & Blackburn is an interesting exception. Rather than being superseded by a contemporary revision, the worm was replaced by a revival of the logo that came before it. Apparently many people with lots of influence preferred the NASA logo from their youths, and they brought back what is commonly referred to as “the meatball.”
Wired recently wrote about the worm in this article, which draws upon the wonderful work that the folks at Kind Company have done in highlighting milestones from mid-century Modernism over at their curatorial site Display. The Wired article points to this personal account of the worm’s development from one of its creators, Richard Danne of the design firm Danne & Blackburn. It offers wonderful insight into some of the finer details of a fondly remembered moment in design history—as does this collection of gorgeous photographs of one of Danne & Blackburn’s original NASA Graphics Standards Manuals from the worm’s hey day, posted to Flickr by Display.
All of which gave me occasion to revisit the worm in detail, and to realize that, as it turns out, I don’t like it very much. Though it was in fact the logo that I grew up with, looking at it now closely, I realize that it’s really not that spectacular a piece of branding. It’s better than the meatball, that’s for sure, but it just doesn’t invoke anything in me other than nostalgia for the Modernist past.
Which I think is the secret to its ongoing appeal to designers; it echoes a time when design was, if not more powerful, then more aspirational than it is today. Not that I think the logo is an effective conveyance of the dream of space; rather I think the worm represents the aspiration that all human endeavors, even the most ambitious, can be expressed within the constrained visual vocabulary of modernism. Looking at the logo as it appears in the photographs above, what comes to mind is not the idea of reaching beyond man’s limits, but the idea of incorporating the heavens into an enterprise, a system that reflects mid-Twentieth Century business practices. Seen this way, the worm actually feels quite unambitious, like a poor reflection of NASA’s lofty goals. The meatball needs to go, but the worm is not the answer.
Update 10 Sep 2015: NASA has just made a PDF version of this standards manual available for free download at nasa.gov.
French premium cable channel Canal+ commissioned this gorgeous video montage from branding studio Holman + Hunt and agency DBLG. Its fast editing and high level of abstraction suggests computer-generated enhancements, but in fact the effects were primarily done in-camera.
Athletes were filmed running and jumping through a short corridor lined with tall mirrors on either side. The mirrors were rotated via remote control and featured colored lights on their edges; the result is a high contrast, visual staccato that recalls early James Bond title sequences.
A wonderful example of the importance of the fundamental skill of drawing to the complex art of moviemaking: this image is a comic strip-like storyboard produced by visionary director George Miller as the first draft of what would become “Mad Max: Fury Road” (at least according to this tweet from user Will McCrabb). Looking at it closely, it’s remarkable to see how Miller structured the major plot points of the film in sketch form and how effective that planning was. With some details changed, the final plot is essentially the same, even though the drawing was dated 3 Mar 1999, sixteen years before the movie was actually released.
I wrote briefly about “Fury Road” in this June blog post; I still consider it to be one of the very best movies of the year. It’s out now on video, so if you haven’t seen it, you have no excuse to continue depriving yourself.
This is phenomenal. When longtime Los Angeles resident John Feathers passed away in 2012 at age fifty-six, he left behind a house crammed to the rafters with innumerable maps of all forms, shapes, sizes and styles, from the very scientific to the very fanciful. Feathers had apparently been amassing them throughout his life and had built a collection of unprecedented scale and breadth for an unheralded individual cartography enthusiast. After they were discovered by a realtor charged with cleaning out the house for sale, the Los Angeles Public Library agreed to acquire it.
Stashed everywhere in the 948-square-foot tear-down were maps. Tens of thousands of maps. Fold-out street maps were stuffed in file cabinets, crammed into cardboard boxes, lined up on closet shelves and jammed into old dairy crates. Wall-size roll-up maps once familiar to schoolchildren were stacked in corners. Old globes were lined in rows atop bookshelves also filled with maps and atlases.
A giant plastic topographical map of the United States covered a bathroom wall and bookcases displaying Thomas Bros. map books and other street guides lined a small den.
All told, the hoard was so massive that it instantly doubled the institution’s own map collection, which itself had been the result of a century of acquisitions.
This short film from The Los Angeles Review of Books features the LAPL’s map librarian Glen Creason talking about the collection, how he came to be aware of it, and the intellectual wealth that it represents. Creason is obviously passionate about the form, and it shows. He says: “They’re not just a bunch of lines on pages. They’ll give you an idea of how people lived if you look hard enough.” The film includes long, gorgeous pans of many items from the collection, and the variety of different types of maps from different eras is a marvel to behold.
Creason also shares maps from the library’s collection once a week at Los Angeles Magazine’s Citythink blog.
Former Wall Street analyst Neil Cybart now focuses on Apple and writes at Above Avalon. In this excellent article, he gives the most clear-eyed assessment I’ve read of a situation I’ve lamented for a long time: the declining momentum in the iPad market.
A product that carries so much brand relevancy that it still represents the entire tablet market now finds itself the leader of a category that has lost all momentum as other product categories marginalize the tablet form factor. Although Apple is still selling more than 10 million iPads per quarter, there is something about the iPad that just doesn’t sit right with me. We have gotten to the point that the status quo will likely lead to the iPad and the modern-day tablet becoming irrelevant over time. A new direction for iPad is needed based on a fundamental rethink of tablet computing.
Cybart goes on to recommend some remedies, making the case for the long rumored “pro” version of the tablet: “A new larger iPad with nearly 80% more screen real estate than the iPad Air, dedicated accessories like a smart pen, and better covers and stands can go a long way.”
While I largely agree with his thoughts on the importance of new, differentiated hardware, Cybart doesn’t address what for me is the more critical issue: the fact that so little software innovation has happened on the iPad since its debut. Until recently, Apple’s approach has been to closely tie the iPad’s operating system with the iPhone’s, a decision that has contributed directly to consumers really being at a loss for why they need to own these devices. I wrote about this last year and argued strongly for an iPad-specific fork of the operating system. Apple has started to address that with iPad-specific features in the forthcoming iOS 9, but as I suggested back in July in this blog post, so much more can be done to make the iPad more than just a big iPhone.
Apple’s stewardship of the platform has had an air of distractedness for too long, in my opinion. In the absence of true innovation, both consumers and developers have come to regard the iPad as inessential—a deadly combination. The fact of the matter is that Apple will need to take a much more aggressive approach to innovating both hardware and software to turn this situation around.
Last week my friends Gina Trapani and Anil Dash of ThinkUp launched a long-simmering side project called Makerbase—basically an IMDb for technology where anybody can sign in and register their contribution to any project, or give credit to collaborators. You can see my Makerbase profile here to get a sense of how it works. Anil wrote an entertaining essay explaining “How Makerbase is Different From…” and it’s worth a read, but I decided to ask Gina a few basic questions about what they built.
Khoi Vinh: How did this project start, and how did it evolve into today’s launch?
Gina Trapani: Makerbase was Anil’s idea—an idea he’s talked to me about since 2011, when we were having lunch, hanging out, just chatting about apps and things we wanted to see in the tech world. Looking back, what we launched today is very close to what I understood to be the original idea four years ago, down to the name.
Despite kicking around the idea for years, we didn’t start building Makerbase until eight months ago, because we were busy building ThinkUp, our company, and ThinkUp the product. Once ThinkUp was established, after the holidays in 2014, we had a couple months of “boring” back-end work to do—around billing and Facebook API changes—nothing user-facing, which is what we love to do. So, as a reward to ourselves for getting through that tedium, we decided to work on Makerbase as a 20% project. We basically spent Fridays on it, starting in January of this year. Once we had a working prototype, we both became more smitten with the possibilities, so we put some more time and resources into it to get to a real launch.
You wrote in a tweet that “Makerbase is about giving credit and attribution, especially where it’s overdue. Apps aren’t just made by founders and coders.” Can you elaborate on this?
In the tech industry, founders and developers are lionized, but a lot more goes into building apps and services than writing code or perfecting the pitch deck. Managing community, doing customer service, writing great copy, managing events, bringing donuts, training interns, writing detailed bug reports—all those tasks matter, but the folks who do them almost never get the credit they deserve.
There have been attempts at solving this before. What are the major challenges you see in making Makerbase work where they didn’t?
Every maker and project on Makerbase is editable by anyone, so it’s like a wiki in that respect. So, for it to be useful, it will require constant gardening, and a community of trusted users who can help. Our biggest challenge? Making Makerbase worthy of that kind of time and effort and trust. We’re gonna give it our best shot.
Okay so actually I have a fourth question: It sounds like Makerbase will require a lot of time. Will you have to choose between that and ThinkUp?
I don’t think so. From a technical perspective, ThinkUp and Makerbase share code, so when one improves, so does the other. From a product perspective, the two also share many attributes, voice, and visuals. (The eagle-eyed will notice Makerbase’s color palette is the same as ThinkUp’s.) From a business perspective, I like having a diversified revenue stream, with both subscriptions and sponsorships. From a day-to-day management point of view, we will have to make careful decisions about how we allocate our time and resources between the two products, and there will be times when we’ll focus more on one than on the other. It will be a challenge, but we think Makerbase and ThinkUp will easily coexist as siblings.
This looks phenomenal: a feature-length documentary about the origin of seminal satirical magazine The National Lampoon, which changed the way America thought about humor in the 1970s and 1980s. I was a bit too young to enjoy (or understand) The Lampoon in its heyday, but its effects on the culture at large were not difficult to grasp: the founding cast of “Saturday Night Live” was built on Lampoon veterans, and it influenced at least two generations of culture makers. I haven’t seen this documentary yet, but as I understand it, it gives Lampoon’s key art director Michael Gross his due, too. Gross was responsible for the magazine’s signature, Madison-avenue style aesthetic; often the magazine looked as professional as the straight culture it was satirizing, which made it even more effective.
The movie is out in theaters in late September. Read a review of the “Drunk Stoned Brilliant Dead” at hollywoodreporter.com.
After over six months of incredibly hard work, I’m so proud to say that today we’re releasing a brand new, completely redesigned version of Wildcard for iPhone. You can download it free right now. We’ve narrowed its focus to news and media, and my colleagues and I put a ton of time and energy into creating what we think is the best news experience in the App Store. It uses the card concept that is at the heart of everything we do at Wildcard, combined with a crackerjack editorial team that we assembled over the past six months, to create a remarkably efficient way to scan the latest news and dive into each story’s details as much or as little as you’d like—all in one place.
We also spent enormous amounts of energy creating a beautifully designed showcase for what cards can do. Here are some of my favorite details from Wildcard 2.0.
Halftones Instead of Blurs
Like it says in the title of this post: blurring is the Auto-Tune of UI design. That is, it creates a pleasant enough effect, but it’s heavily overused (to put it politely). We set out to create an alternative and, given our new focus on news, decided to borrow from the print world by using a halftone effect that emulates the way photographs appear in newspapers. You’ll see it in full color in the headlines we have at the top of the app’s home screen and in monotone throughout the rest of the app. This video shows it in action, but because halftones by design tend to look seamless at smaller sizes, you should watch it full screen to see the full effect.
Unfortunately there’s no halftone function built into iOS, so we had to roll our own: each time an editor selects a photograph to use in our content management system, it is automatically processed on a custom image server that produces a halftone counterpart. Here’s a few examples.
That halftone version, which is a fairly lightweight, translucent PNG, gets downloaded to the iOS client on the fly; each time a user opens up one of our collections of cards (look for cards with circled numbers in the top right corner), the thumbnail image enlarges and is replaced by the halftone, which serves as the backdrop for that view of the collection.
Cards Are Independent of One Another and Behave Accordingly
We’ve spent a lot of time thinking about what it means for something to be a card, particularly what “physical” properties it should have. At the risk of skeuomorphism, we decided that for us one of the foundational ideas is that cards should scroll independently.
In typical scrolling views, like the Contacts app on your iPhone or even Twitter, the constituent parts of the stream all scroll together, in lock step. That makes sense because in those cases the streams are really lists; in Wildcard our stream is composed of individual cards, with each card a representation of some other form of information.
It probably would have been fine to have them all scroll in lock step like traditional streams do, but we wanted to imbue each with independent motion in order to emphasize their card-ness, as it were. If you watch this video, you’ll see how, even though they all move together, they sometimes lag one another and space opens up between them. It’s not so much a single view that you’re scrolling here as it is a series of cards.
Reading Content in Web Views Can Be Better
Embedded web views are the bane of news apps. Wildcard 2.0 has a speedy, elegant Reader-like view (we call it View as Card) but we want publishers to get their page views too. So we decided to default to an embedded web browser—but we worked hard to make it the slickest one out there.
Instead of clearing away the summary card altogether, as most do, our web view loads just beneath the card when you tap on “Read More.” This lets you keep your context until the page itself is fully loaded and ready; when it is, the card quietly transitions away. When you exit the view, the card stream comes back onto the stage, right where you left off. Being able to maintain the user’s sense of place really mitigates the interruptive nature that native apps’ web views suffer from.
Cards Carry Their Own Actions
In Wildcard 2.0 every card has its own properties that allow common actions—sharing that card and saving it to our in-app My Cards file are both available now, with more to come soon. These are activated by pressing and holding (we’re ready for Force Touch when it comes to iPhone), but power users can also press, hold and drag the card to the action they desire.
It took many, many iterations to refine this interaction; at various points in development it was either too difficult or too easy to trigger this state. We thought about creating different affordances for novices and experts, but with tons of testing, we were able to come up with a single method that could scale between them.
Splitting the Difference Between Apple’s Brand and Wildcard’s
Part of the challenge for every designer of a new iOS product is how much to adhere to Apple’s design guidelines and how much to stray from them. Our approach was to respect the spirit of the law rather than the letter of the law, so to speak, and you can see that throughout the app: the user interface elements are familiar, but not perfectly consistent with the operating system.
We veered a little further when it came time to design our home page at trywildcard.com though. Apple is pretty clear about using its App Store badge and iPhone visual assets as is, but we decided to push the envelope a bit.
On the left side of the page, we’re rotating in and out a series of news images (updated every few days and treated with our halftone effect). As the colors change there, we’re making corresponding visual changes in the App Store badge and the highlights of the iPhone. The color shifts in the phone’s photographic details in particular are subtle, but the effect visually unifies the page. This is done with just two images; the standard phone image overlaid with a translucent PNG that contains just the darkest parts of the phone image (separated out in Photoshop) and colored with CSS.
Those are just some of the many details we really sweated over while designing this app. It was hard work but also incredibly fun; at the beginning of the project we were lucky enough to get broad agreement from the team that this new version should really be a design showcase. You don’t get that kind of opportunity every day, nor do you get to work with a talented team that fully commits itself to doing that.
