What’s Ahead for Designing Web Pages and Apps

President Obama in the Oval Office

A recent post over at Cloudinary shows off some of the neat things you can do with HTML’s new <picture> element and Cloudinary’s cloud-based image management service. In a nutshell, it describes methods for applying different crops to the same image based on the aspect ratio of an image container given any state of a responsive layout. So as the image container gets wider, for instance, the picture gets cropped into a shallower aspect ratio so as to avoid pushing the content below it further down.

Where it gets interesting is when Cloudinary’s gravity parameter comes into play. That allows the cropping to be done in an intelligent—or less dumb—way. The developer can specify that the image gets cropped from the top before the bottom, from the left before the right, etc. That’s a powerful tool for designers; being able to define how an image is viewed in different scenarios allows a responsive layout to better maintain fidelity to the designer’s original intent. Essentially, it brings back some measure of the control that visual designers relinquished in the digital realm.

Even more interesting, the gravity parameter takes a face detection variable which builds even more intelligence into the cropping. Cloudinary can detect the presence and location of a single face or even multiple faces and make sure that they are preserved in any given crop (within the limits of practicality). No more heads lopped off unceremoniously.

This stuff is still fairly rudimentary as far as making computer vision practical and commercially viable, but I find it very exciting. There are many interesting roads ahead for user experience design, but the notion of content-aware layouts particularly holds a lot of promise. The templates that designers create for web sites and apps today are more or less ignorant of the content that they’re intended to deliver to users. To be sure, designers build in as many smarts as they can—if we know that a given image container is usually going to contain portrait-oriented images, we shape the layout accordingly.

But in the future we’ll be able to define truly responsive systems that react not just to the size of the viewport—the box, so to speak—but also the content—what’s in the box. Given time, rich image services like Cloudinary and Imgix (which also supports face detection) will be able to extract color information directly from an image and offer up complementary palettes, identify the best spots to place type on an image, automatically wrap text around an image silhouette, automatically adjust the color and shadow of type for maximum legibility given an image, and so many more possibilities. That will make the designer’s job a bit harder in that there will be many more scenarios to account for when designing a solution. But that’s been the trend for designing in digital media anyway: every five years or so, the problem gets an order of magnitude more complex At the same time though the solutions become orders of magnitude more meaningful for users, too.

Read the full article at cloudinary.com.



Operator Mono

Hoefler & Co. have a new, monospaced font with some unique characteristics. From the introductory post:

Like many screen fonts before it, Operator could pay extra attention to the brackets and braces and punctuation marks more critical in code than in text. But if Operator took the unusual step of looking not only to serifs and sans serifs, but to script typefaces for inspiration, it could do a lot more. It could render the easily-confused I, l, and 1 far less ambiguous. It could help “color” syntax in a way that transcends the actual use of color, ensuring that different parts of a program are easier to identify.

It’s interesting to note that at larger sizes, as shown below, Operator looks quite idiosyncratic and, frankly, not remarkably appealing.

Operator Mono

But in a developer’s environment, as shown below, the idiosyncrasies are neutralized the font begins to really sing. The distinction between the standard and script variants makes for outstanding code legibility.

Operator Mono in Use in a Text Editor

More at typography.com.



Unsplash, Curated by Yours Truly

Unsplash Collection

The photo above is one of ten images that I curated as part of this week’s featured collection at Unsplash, the premier outlet for high quality, entirely free—do whatever you like with them—stock photos. I’m not sure there’s any special significance to the fact that this is collection number one hundred, but I’m honored all the same. Here are thumbnails of the rest of the set:

Thumbnails from Unsplash Collection

When you make a curated collection for Unsplash you get a peek at the many photos yet to be released to the public; I was pleasantly surprised to realize that there are tons of great ones just waiting to for their public debut. At first I wasn’t sure how to pick amongst them, but eventually I settled on a theme in which all of the images in my collection include figures whose faces are either turned away from the camera entirely or obscured somehow. This was inspired by—stolen from, really—this genius Pinterest board from my friend Ariel Aberg-Riger which collects hundreds of images of “no face” shots. My Unsplash collection is just a faint echo of that one but it does have the very nice benefit of being yours to do whatever you like with. Enjoy.

See the full collection at unsplash.com.



The Trouble with Superman

Still of Superman from “Batman vs. Superman”

Ahead of the upcoming, awkwardly named blockbuster “Batman vs. Superman: Dawn of Justice,” The Atlantic takes a look at how difficult it has proven in recent years to make the iconic superhero relevant to contemporary audiences.

The problem [Superman’s publisher] DC faced was this: You can’t fix something if you’re not sure where it’s broken. One of the issues halting a successful reinvention of Superman is a shift in the nature of the comics market. Since the 1980s, the dominant trend in the industry has been specialty comics shops replacing newsstands as primary distributors. Given this change, companies like Marvel and DC have focused their marketing toward an ever-dwindling market of adult fans, darkening their characters in an attempt to keep the interest of a readership desperate for mainstream respectability. In effect, adults were colonizing young-adult narratives and warping them in the process—an early example of what later occurred with Michael Bay’s legendarily crass ‘Transformers’ films.

In one of the uglier paradoxes of the superhero-comics industry, characters who were devised to entertain children soon became completely unsuitable for them. Leaning into this trend in an effort to entice new adult readers, DC largely abandoned its strengths as a publisher of optimistic, bizarre superheroics and fumbled for an edgier identity. Aspirational characters were hit hard by this change—Wonder Woman in particular has suffered nearly as many reboots as Superman, the latest of which has cast her as the bloodthirstiest of her Justice League coworkers, her trademark lasso of truth traded for a sword.

But the trend proved particularly damaging to the Man of Steel. The 1986 ‘Dark Knight Returns,’ one of the landmark wave of ‘mature’ superhero comics, cast him as a Reaganite stooge and ended with Batman knocking him out. The choice directly shadowed Superman’s history up until the present. The dour trailers for ‘Batman vs. Superman’ draw directly from the imagery of ‘The Dark Knight Returns,’ with several shots paralleling panels from the earlier comic. The effect is to shout for everybody watching: This is a serious film. Pointedly, in these trailers Superman never once smiles.

I largely agree with the assertion that modern culture doesn’t really know what to do with Superman, especially in film, where his impact is felt most keenly (or not). However I disagree with the dichotomy that’s usually presented in discussing how the character should be interpreted: the choices are almost always only between dark and brooding, on the one hand, and bright and sunny, on the other. The right answer doesn’t lie at either extreme.

Just as I found Zack Snyder’s 2013 “Man of Steel” to be leaden and heavy-handed, I’ve found most of the many self-referential installments in the Marvel Cinematic Universe—especially the overrated “Iron Man” series—to be pretty slapdash, a form of crass commercialism masquerading as levity. There’s so much uncharted territory between these two approaches; I long to see a breed of comic book movie that’s both “serious” in that it’s well made and thoughtful about its ideas and “light” in that it’s entertaining, funny and even inspirational. There’s no reason why we can’t have a comic book movie equivalent of Ryan Coogler’s phenomenal “Creed.”

For Superman, particularly, I often wonder why the franchise’s many different regimes of comic book writers and film producers have continually overlooked what to me seems like an obvious opportunity for interesting stories: the idea that, of all the professions he could have chosen, Clark Kent decided to become a journalist. To me, the tension between the journalistic credo to solely observe and report, and having the god-like power to literally change the course of what gets reported is a fascinating one that has never been really explored. Superman hides in plain sight as a reporter clearly because he does not want to change the course of human history (beyond what’s possible for a human being working for a news organization is capable of); and yet his very existence theoretically alters mankind’s course forever. There’s a fantastic Superman movie to be filmed with Clark Kent’s life as a journalist at its center, one that could be serious and thoughtful but also one that could be genuinely fun and uplifting. Too bad nobody put me in charge of a Hollywood studio.

Read the full article at theatlantic.com.



I’m Done with MacBooks


Last week I was on the road for five days straight. I brought along my MacBook Pro because, knowing that I would be away from my desk for so long, I anticipated needing to do some actual design work at some point. Unfortunately, you still can’t do “real” design work on an iPad, which is my preferred travel device, so there was little choice but to bring along the laptop. What surprised me was that, after having traveled exclusively with my iPad Air 2 and a Belkin Qode Bluetooth keyboard for months, toting along my MacBook was really uncomfortable and even unwelcome.

I’ve been using laptops for decades. The first one I ever owned was a PowerBook 3400c, and I’ve never not owned one since then. But now, in contrast to my iPad, my laptop seems altogether much more cumbersome than I prefer to deal with. It’s much, much heavier and bulkier than my iPad, especially when you factor in its power supply and a carrying case.

It’s much more fragile, too—I regularly toss my iPad around in ways that I would never do with my MacBook—and as a result, it’s much less versatile, at least for me. This is partly because the MacBook also restricts my movement; I have to be sitting or standing in a way that accommodates typing, whereas I have so much flexibility with my tablet that I’ve become accustomed to using it while positioned in just about any variant of laying down, sitting, standing or even walking.

What I’m starting to believe is that desktop operating systems like OS X might not be all that well suited for these away-from-your-desk use cases, that in spite of the overwhelming success of laptops as a form factor, they’re really not what we should be using on the go. Granted, it’s true that iOS has a ways to go before it can replace OS X for everyone, but that doesn’t mean that OS X is the really the right long-term solution for mobile productivity.

When I think about where I’m most productive with OS X, it’s always at my desk, where I have a huge monitor (on my iMac, at home) or even two Cinema Displays (at work). It’s so much more comfortable to be able to manipulate the operating system’s myriad windows when I have copious amounts of screen real estate, just as it’s so much more pleasant to have a full keyboard (with a number pad!) and the physical desk space for all of the many peripherals—printer, scanner, USB hub, etc.—that really complement the desktop OS experience.

I know this runs counter to the past decade-plus of computing trends, during which time desktops have become more and more antiquated and laptops have become more and more powerful. It’s not that I believe that transition was a mistake; rather I suspect that laptops may be just a transitional form factor, one that helped us envision computing in a less tethered form, but that won’t sustain us over the long term. I also believe that the tablet is a better mobile device than the laptop; even if most people don’t see that today, it will become obvious soon.

To be clear, I don’t argue the fact that OS X is still the best platform for heavy duty work, and that it is likely to continue to be that for years if not decades. But it seems apparent to me that it’s at its most potent in its original form: on the desktop, where immensely powerful chips do best and battery life is not an issue. When I think about what I want to be using in the near term, I would much rather own a fast and fully stationary iMac and an iPad running a much more productivity-capable version of iOS, than just a MacBook. Having two professional devices is a luxury, I know, but in this same scenario, I would contend that most people would do fine with just the iPad.



Album Colors of 2015

Marcos Rodriguez and Zé Felipe assembled dozens of last year’s most notable album covers into a continuous color spectrum. It’s a nice showcase for some of the best designs of 2015, and a welcome bit of attention to the form in an age when many music listeners only ever see album covers as thumbnails on their phones.

An idea for next year: it would be really interesting to compare multiple years, side by side, and at a higher level. The site requires a lot of scrolling, which to its credit is a fair presentation of the art, but the macro level below is more illuminating, in my opinion.

See the arrangement in more detail at albumcolors.com.

Album Colors of 2015