Sketchbook: Domus magazine on iPad

(This is a slightly unusual entry in the Sketchbook series, as the end products are largely all the hard work of others, as noted below. Still.)

For the last couple of years, I’ve been a strategic advisor to Domus magazine in Milan, principally on their digital aspects, where I’ve also led much of the design work.

Domus is one of the most influential design magazines of all time. That is perhaps arguable, natch, but what isn’t is that it’s also one of my personal favourites. Plus, it happens to be now edited by Joseph Grima, a constant inspiration and the driving force behind Postopolis.

When he took up the reins, Joseph kindly asked me help pull a kind of practical digital strategy together, focused on revamping the website in the first instance. I’ll post about that a little later, when the coded implementation is a little closer to the specifications (it’s not there yet, but despite that the editorial makes it one of the better sources for architecture, art, design and related. Hopefully we’ll get there in the next iteration, and I’ll spend a bit of time unpacking that work here.)

I will show a few early sketches of the website though, as they also form a part of the design story behind the new Domus iPad app launched a few weeks ago, which is what I want to mention here.

And you can download this first monthly edition of the app for free.

Right from the start I’d wanted to design the website to be iPad-ready. This was April 2010, before I had an iPad, actually. But since the thing came out—I wrote about it at the time —it was clear it was going to radically change the way we approached Domus-like material in particular.

So my first sketches for the website were actually no more than stacks of coloured stripes superimposed onto a photo of Joseph’s new iPad (a photo he’d sent me from NYC, of him reading this blog over coffee! You can see the sketches, but here's the original.)

The stripes emerged from an incredibly simple design strategy for all the digital products; an endless stream of editorial, a vertical loop. (This is drawn from a series of influences—the Sinclair ZX Microdrive; Qing Dynasty scrolls; Instapaper; the flick-to-scroll of touchscreens; Bruno Munari; and structurally, working with the grain of HTML rather than against it—which I’ll unpack another day.)

So the endless loops and easy swipes defined the way I sketched the first Domus digital redesigns. Swipe up or down to grab more editorial, ploughing this furrow forwards or backwards. Swipe left for more editorial related to theme but from the past (the archive stretches back to 1929, so…) Swipe right for upcoming material/events around these themes, and so on. These mockups I did for Joseph and the publisher—featuring, as usual, my fictional content (a guilty pleasure)—are not exactly what got built, but it’s close, conceptually—the same horizontal stripes of colour, arranging simple streams of editorial.

They became things like this:

This was really a quick conceptual scribble, about the simplest form of layout being the most malleable, easy to produce, easy to understand—yet also attractive. You can see I hadn't even really made an active choice about typeface at this point (it would later go through Bodoni on its way to the Meta family.) The current incarnation shares the same approach, as does the next (which will look more like this)—based on these coloured blocks or stripes of "content", simply stacked vertically.

So here are the stripes on Joseph's iPad, for presentation. The stripes could even be themed based on editorial priorities—full colour, black and white, all blues, patriotic Italian issue!

So these mockups were, in a way, based on designing the website in the context of the iPad app, and the app in the context of the web. The original work included a quick sketch of an iPad app based around something other than the magazine material on the iPad, using location in partcular; in situ mode i.e.

But then we had to focus on totally reinventing the website, and Joseph had to also totally reinvent the magazine, and so the idea of an iPad app was firmly shunted to the back burner. And as it happened, when it returned, it would take a different direction.

(The website did indeed take on the endless vertical scroll. Although, again, the current site isn’t quite how it should look/work, but it’s close. It takes on the auto-loading tropes familiar from social media—which was rarely used in editorial brands, when we first implemented it—to keep pulling-back related editorial. It’s a deliberately simple layout to enable maximum flexibility. It also integrates banner advertising rather well, as there is this simple motif of the banner-like stripe for editorial which works well alongside the adverts, yet with their width clearly demarcating one from the other. It also deploys the very large images we wanted, alongside a relatively subtle social media integration (with more going on off-site). It’s a brutally simple layout, actually reinforced in the next version.)

Fast forward to September 2012, and an iPad app for Domus has just been released. The app that we ended up making actually uses the Adobe DPS solution, in those two years, has become close to a de facto standard for magazine-like editorial.

As a result, there are no great innovations here particularly—there is no Mag+ like breakthrough, for instance, although we had several conversations about a more transformative Domus app which might do different things to presenting the magazine material, sitting alongside the mag and the web as an entirely separate product (and that may happen later, based on the design strategy above.)

Yet I suppose the benefit of waiting a couple of years is that the dust begins to settle. While we don’t yet know where magazines are going, we know that the physical product, especially monthly or slower, can retain real value. We also now know that editorial on the tablets like iPads also works well—particularly given “retina” screens—and that the Adobe DPS model has a simplicity that is beginning to work well. We also know that websites work increasingly well on phones and tablets, as well as other computers. So a good iPad version of the magazine might detract from neither print mag nor web, if each format plays to its unique strengths. Each is different (and other apps might be different again.)

Where there is little or no prior knowledge—and I don’t think anyone really knows how magazines will or should perform on tablets—then there is only one way to find out what might work, and that’s to try a few things, to prototype and iterate.

We knew that the Adobe platform offered magazine publishers a tried and tested way to decant magazines into iPads. If we kept the bells-and-whistles under control, and found a language that might share the growing family resemblance between web and mag, we knew it would do the basics very well.

What opened my eyes to it was seeing what the great Berlin-based team at mono.kultur did for ECM. They made an iPad app to accompany the documentary “Sounds and Silence” about Manfred Eicher, who runs the legendary German record label (more here.)

I spotted the distinctive Adobe interface, after playing with it for a few seconds, but was utterly seduced by how elegant the application was. Sure, you might argue that ECM’s visual heritage (almost peerless, in my view), combined with mono.kultur’s skill, meant it was the creative equivalent of an open goal, but still, it clearly took great care to actually pull it off (and not to Ronny Rosenthal). But it also meant that you could do something like that with the Adobe platform, which I’d previously associated with editorial bloatware from the likes of Wired and Vanity Fair.

So I suggested to Joseph we throw the ECM app down as a marker, and see what we can do with the Adobe platform for Domus. Marco Ferrari, the creative director at Domus, then took a look and we kicked some salient points around in email a little. I suggested we take the basic navigation, add in a very simple in-article vertical navigation, let the layout breathe as much as possible … 

Marco then did some first quick layouts. These were immediately appealing, though I wondered whether they’d be slightly difficult to pull off in DPS. They’re still good, though, looking back.

So he reworked them into a simpler layout, which I’d suggested would work easily within DPS. It was also immediately appealing. Marco's good like that.

I suggested a few tiny alterations—mainly contextual information, navigation (I lazily pasted the Adobe DPS nav from the ECM app there!), captions, page furniture etc.—and sent back the modified images (some examples of the subtle tweaks below.)

This went back and forth a bit, mainly via InDesign, email and Skype. Marco did the hard work. Then, for one reason and another, months pass. At one point, we even wondered about dropping it (partly in the wake of that Technology Review article, partly as we all had enough on our plates…)

Ultimately however, Marco and Domus’s new interaction designer Manuel Ehrenfeld pulled it altogether. They took Marco’s year-old layouts and produced the whole thing in a month, essentially. We had several marathon email sessions fine-tuning elements, agreeing on a "weight limit", fixing things, but I think Marco and Manuel did a particularly sterling job in terms of knowing just how many interactive elements to deploy. You can do a fair bit with the Adobe DPS platform, but the trick is knowing what to do and what not to do. For a start, all those interactive features take time, which is how some publishers have racked up big bills for their iPad edition.

It’ll no doubt be iterated from here on in, but Marco and Manuel have already made smart design choices so it works right away. We had a few back-and-forths about better social media integration, but as all the editorial in the app doesn’t go online on the web, it’s difficult to aggregate interactions where there is no URL. We’re still chewing this one over.

This video gives a sense of what the app does, overall (there are some particularly nice touches involving plans and sections; the archive material looks particularly strong on retina, the photo-essays likewise; some of the really sharp information design that has graced our SuperNormal series works beautifully in a more interactive format; videos work beautifully, and so on.):

This version has no ads in it at the moment. Funnily enough, with the magazine in this format, we’ve noticed how the ads break up editorial usefully, occasionally, in terms of giving you a breather—it feels very dense, very rich. But simply breaking up density is not exactly the best use of advertising, or space, so we’ll look to find another way to vary the rhythm and intensity of editorial, as well as the best way to handle advertising and other commercial services. 

And who knows where price points and subscription models will end up? Again, there’s only one way to find out.

I don’t want to overplay what’s happened here; and certainly not what I did on this particular aspect (just as the website sketches above are so simple as to be almost ur-website.) All the hard design work was done by Marco and Manuel, and the organisational/editorial work by Joseph, and his team. And it is, in a way, no more than a good example of what you can get out the Adobe DPS platform. Unlike other apps and services we’ve thought about, and are thinking about, it doesn’t reverse the editorial model, build reader networks, take advantage of social media or location or machine vision or real-time updates some of the other things we could do. That will come later.

But it did reinforce for me the value in taking the path in front of you, sometimes, as opposed to endlessly thinking through the options and refining the strategy until it is right—by which point, of course, it won’t be. This particular world is moving rapidly, even for a magazine that’s been around since 1929 and has seen a few changes.

In a terrain where Rupert Murdoch’s NewsCorp has carelessly, unforgivably, thrown away at least $30 million on The Daily iPad app and then laying off a third of their staff in July, we wanted to make something simple yet good, relatively quick to produce yet quietly exploratory, useable yet elegant, and which honoured the editorial. A probe to gather strategic information, a prototype we could build upon, and for you, a new way to immerse yourself in some of the best editorial around.

It’s not radical, and radical might be what is ultimately required in publishing, but I do want to reinforce the importance of trying to extract maximum meaning with minimum means, of holding to the simplest yet most effective path through a constantly shifting commercial landscape, of finding a way true to Domus within the same platform that produces Men’s Health Australia and P&O Cruises apps, of honouring restraint and crisp elegance in a world of bells-and-whistles, of getting something out there to see how it performs, and then iterating.

Congratulations to Joseph, Marco, Manuel and the team. Do download the September 2012 issue of Domus for the iPad—your first one’s free—and let us know what you think.

Domus on iPad [iTunes]