Notes from our design process

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. (Ed. This piece was originally published at cityofsound.com on October 2, 2012. After several successful years, the Domus iPad app described here substantially changed once Joseph Grima was no longer editor.)

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 friend, constant inspiration, the driving force behind our various Postopolis collaborations, and much more.

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.

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 (it’s actually a photo he’d sent me from NYC, of him reading my blog over coffee. You can see the sketches, but here’s the original photo.)

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. If we can ask a brick what it wants to be, we can do the same of HTML, and probably find that it wants to be an endless vertical scroll of rectangular blocks.)

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. Left for the past, right for the future. Up and down for previous and next. Simple.

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 is also a quick conceptual scribble, really, indicating that the simplest form of layout is the most malleable, the easiest to produce, the easiest 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 via Bodoni on its way to the Meta family.)

The final iteration essentially shared the same approach; here’s my Photoshop mock-up of an article page from the final design:

You can see that it’s still essentially based on these blocks or stripes of editorial, simply stacked vertically and hooked together loosely. For the homepages and index pages, the image and coloured overlay create the same striped effect seen in the very first mock-ups. Here are those stripes on that Joseph’s iPad photo, a quick in-situ image I comped together for the Domus managing director, as part of a broader design strategy presentation.

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. Yet the iPad app was originally intended to play to the device’s particular strengths too. The original sketches included a quick one of an iPad app based around something other than simply the magazine editorial published to the iPad, using location in particular, suggesting a kind of in-situ mode e.g.

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, though. The site that was published wasn’t quite how it should look/work, partly due to the capabilities of the development team, but it’s close. It takes on the auto-loading tropes familiar from social media — which was rarely if ever used for 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—always a particular challenge—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, with large text, alongside a relatively subtle social media integration (with more going on off-site). The header navigation block simply repeats, ensuring all pages are only a click away, and there’s a bar for live news or other notifications along the top (these are both tropes I’ve used since the late ‘90s!) It’s a brutally simple layout, actually reinforced in the next version. More on this in another post.)

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 hinted at 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 neither detract from 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 seduced by how elegant the application was nonetheless. You might argue that ECM’s almost peerless visual heritage, combined with mono.kultur’s skill, meant it was the creative equivalent of an open goal, yet it clearly took great care to actually pull it off.

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 generally, 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, subsequently making the whole endeavour unviable. Aware of the load on editorial teams, we tried to find a balance between executing it with obsessive care, and being able to consistently execute it at all.

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.

There were some particularly nice touches involving plans and sections; the archive material looks particularly strong on retina screens, 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 actually serve to break up editorial usefully, occasionally, in terms of giving you a breather — it feels very dense without them, 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 finding the best way to handle advertising and other commercial services in return. 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.) 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, or 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 laid 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, and of getting something out there to see how it performs before iterating.

Saluté to Joseph, Marco, Manuel and the team!

This piece was originally published at cityofsound.com on October 2, 2012. After several successful years, the Domus iPad app substantially changed once Joseph Grima was no longer editor.