It’s been a little under two years since I’ve first written about responsive mobile design. A lot has changed since, but one things has remained consistent – we are surrounded by an ever-increasing variety of screen sizes, aspect ratios and form factors, and our users demand a consistent user experience that adapts and responds to the device they are currently using.

As we were getting our first bearings in the world of responsive mobile design, we’ve started with details pages of individual items to flesh out the higher-level design approaches, as well as lower-level implementation details (see here, here and here for more information). In parallel, around last summer it has become painfully clear that our main pages – streams or collections of items – were built on a very rigid and inflexible foundation that had very little ability to scale to the ever-increasing demands from both design and merchandising teams. And so it was that a few people took a long break in an undisclosed location, to emerge a few months later with a new design. A design that is now taking its first baby steps across all Play apps.

Two of our designers – Marco and Owen – were guests at the last week’s “Android Design in Action” show to talk about the various aspects of this design. If you haven’t watched that video, I highly recommend that you do. They have covered a lot of high-level ground, and in this article I’m going to delve a little bit deeper and talk about the pervasive presence of responsiveness across the entire level stack of the new design.

This is the main landing page for the books section in the Play store. Here you can see item collections (such as Summer Deals) represented by a single row of three cards, a personalized collection (Recommended for You) with a single card and an edge-to-edge banner that links to an editorial collection. The Summer Deals cluster is the first example of micro-level responsiveness. When the book title can fit on a single line, the book author is displayed on the second line, while the price always stays in the bottom-right corner. As the author moves to its own separate line, it can span the entire width of the card (3rd book), whereas if it’s on the same line as the price, it gets cut off to prevent content overlap (2nd book).

A second, and much more fundamental example of responsiveness is the Recommended for You cluster that has only a single card. Here our backend indicates that it’s not a collection of books created by our content people. It is a collection of books where each book has a reason (or two) to be included. Specifically, “Snow Crash” has +1’s from two people in my circles. This signal elevates the importance of the item in the stream, and we switch to a more prominent visual representation of the content. Not only we show the title, author, cover and price, but we also show the reason itself, as well as a few lines of the book description in the rest of the space.

Not all signals are created equal. A recommendation based on the +1’s from my social circles is not the same as a recommendation from top / popular lists. One is not necessarily better than the other – as you interact with the stream itself, dismissing recommendations or buying items, that information can be fed into the backend algorithms to tweak the content to each individual user, elevating content based on the signals that are most appropriate for this user. On the client side, this elevation is reflected by displaying more information about the specific item.

Switching between different card layouts is not confined to individual sections – it can also be applied to the full stream as shown above. On right, New movie releases are shown in a three-column layout of mini cards. On left, the full Recommended for You stream uses a two-column layout that allows displaying individual reasons for each item.

The stream is flexible enough to mix three-column and two-column card clusters, based on the content within each section.

Now let’s take a step back and look at what can we do at a slightly higher level – showing the same content on devices of different screen sizes and how the card clusters adapt – or respond, if you will – to such transitions.

This is the same Recommended for You collection on three devices – portrait Nexus 4, portrait Nexus 7 and landscape Nexus 10. As the screen size grows, so does the number of columns and the number of cards shown in the cluster. The data is the same, but the visual representation of it is different. We go from a single item on Nexus 4 to 5 items on Nexus 7 and Nexus 10 (arranged in different templates for the last two). Note how the cluster arrangement visually promotes the very first item in the collection (with larger cover and more space available for the description).

Now the same collection on the same device – Nexus 7 – in portrait and landscape orientation. We switch from three columns and five items to five columns and only three items. The main reason here is that we aim to limit each cluster to the confines of a single screen-sized area. As such, we switch from two card rows in portrait to only one card tow in landscape.

And this is the same collection on Nexus 10 – in portrait and landscape. And yet again the representation of the content responds to the current device configuration – going from a 4-column cluster with one very large card and four smaller ones to a 6-column cluster with one medium-sized card and the same four smaller ones.

An important point to repeat here is that the cluster template (layout of the cards within the specific section) is chosen not only based on the device width, but also on the device height. And so, while portrait Nexus 7 and landscape Nexus 4 use the same number of columns (three), the templates are quite different, as we can fit more content vertically on a portrait Nexus 7. Then, as the template is chosen, we go back into adapting the item presentation based on the specific card – how big the cover is, how big the font for the title is, how many lines of title to show, where to display the reasons (if present), whether to display the item description, etc.

The design is full of these decisions – what to respond to, and how to respond to it. Are we responding to the screen size, are we responding to the specific bits of data, what do we do when we don’t have enough screen estate to show all pieces of data?

This is another example of such responsiveness. The two banners (Lady Antebellum and Daft Punk) are not static images as they were in the previous Play store design. Instead, they are defined by the main image, background fill color, collection title and collection subtitle. At runtime these elements are combined together into a single unit, and the layout of that unit depends on (or responds to) the device size and orientation. If the title needs to go to two lines, it will go to two lines. If the title needs to go to three lines, the entire banner will grow vertically. Then, the title and subtitle are treated as a single unit (that has its inner content left-aligned) which is center-aligned in the space to the right of the image (take a look at the horizontal alignment in the right screen). Finally, the main image itself is displayed in a way that does not take too much width on portrait phones. Compare how much of the Lady Antebellum image is visible in portrait vs. landscape – and how the main interest point of that image is anchored to the same relative point in the overall banner structure.

The store app (and all Play apps in general) are full of these decisions that permeate every level of logical and visual hierarchy – such as switching to two-column layout on search results when we have enough space to do so.

Responsiveness is not something that you add as an afterthought. It needs time and patience to understand and distill. It needs time and patience to introduce to all levels of your design. And, when done properly, it shows respect to your user. Respect to her choice of device and respect to her choice of how to interact with it.

Strikingly beautiful compositions of simple lines and complex structures highlighted by limited color palettes and bold typography. Welcome to the world of Gianmarco Magnani (or M for short). In this interview he talks about his early influences, finding his own style and working on two large-scale projects, “100 Prints” and “Sixty Watts”.

---

Kirill: Tell us about yourself and how you started in the field.

M: I studied graphic design but I focused my attention as an illustrator. I love books but I’m not one of people who read a lot. I love everything about design and I love to be involved in projects and art direction. I have always been drawing since I was a child, so I think that in some way I’ve always been in the field.

Kirill: Why did you decide to move from animation and video to illustration?

M: When I was in college I was completely focused on animation and everything related to the screen. Then I started working as an animator for different clients, as well as on some personal projects. At the very beginning everything looks great but then I started to see that developing a great product took a lot of my time, and required to have a team to work with. Then you add up all those things about screen resolution, plugins, or any other technical issue that changes under you every six months. So I decided to think about something more simple technically, something that it won’t change so quickly and also something something that I really would want to do.

I always loved everything about drawing, so I made some explorations being an illustrator and the things went really great.

Kirill: What informs and shapes your taste and style?

M: It was the 80’s. I was around eight years old, and we didn’t have Internet, computers, phones or even 150 channels on the TV. Communication was very limited, but I had an opportunity to be involved with things that came from Japan. It was really hard to come by things like that in those days, and for me they were the first design references. A good friend of mine who traveled from time to time to Japan gave me some VHS tapes with TV shows from Tokyo, a lot of Japanese magazines and some action figures as well. I couldn’t understand anything of what I was seeing, but all those images, icons, packagings, booklets and texts were very attractive to my eye.

I’m really sure I’m going to keep those references always in my work and in my mind. I’m also very influenced and very interested in books about graphic design and identity. And there is a recurrent interest about designs made in Germany in every field, and also some interest on the Scandinavian style.

Kirill: The human figures in your illustrations have deceptively simple yet skillfully accurate outlines. How do you distill the multiple facets of the body language into a single silhouette?

M: I realize that my work is composed with just lines with no shades or depths, so I tried to keep working in that style.

At the beginning I tried to do my work in different styles using shades or grayscale palette, but it didn’t look natural, so I came up with my own simple line style and tried to learn a lot of things. For example, I looked at the composition of vintage comics and manga, how they were composed just with black ink and how they didn’t need anything else besides that. I understood that I have to use just the things the work needs and nothing else. Right now I always try to have that in mind when I start every single project.

Kirill: It is often said that the eyes are the window to the soul, and yet you go to great lengths to hide them or crop them altogether. Why?

M: One of the things I always keep in mind is the hint / insinuation in my work. When I studied photography I learned about the difference between showing a complete scene and just a part of it. I understood that if I have just a part of an idea, the viewer begins to imagine and complete the idea in his mind. On the other hand, if I show a complete idea and totally describe it, the imagination of the viewer simply disappears. So in my work I prefer to have at least one window closed.

Kirill: Your latest works has moved away from using multiple colors, employing pure black with one or two accent colors. Is this a self-imposed constraint to push yourself into exploring and refining your style?

M: When I started my first project called “100 Prints” I decided to start all over again. So I worked for a year trying to have a good balance between my style and all my interests.

I chose the same square format for all my pieces, defined the line style, worked on the technique and kept the color scheme very simple.

I think that in my work the black ink always defines the main structure of the composition. On the other hand, color, in some cases, just says where do you have to see, and in other cases it provides a good balance.

I also think that greatest designs have always been composed just by the simplicity, so I would like to work – or try – to make the things that way.

Kirill: And then, on the other hand, you have these intricately layered complexity of musical instruments and motor vehicles. Is the goal to provide a counter-balance to that perceived simplicity?

M: Yes, maybe is a good contrast and balance between both elements.

Kirill: How do you work with type? Do you design your own fonts, or adopt and adapt existing ones?

M: I love to work with type. Right now I can’t imagine my work without headers or texts around other elements.

Sometimes I create my own, or adapt existing ones. For example, when I have to create a logotype or something next to an icon, almost every Print I use existing typefaces. I also keep in mind that in my work words do not necessary need to be read. For me words also need to be seen. For example, the header on the Print Nº019 doesn’t mean anything, it just looks good.

Kirill: On average, how much time do you spend on a single illustration, and where does that time go?

M: When I make an illustration it depends on the complexity or how much detail it has. It just takes time.

Things change a lot when I have to make a Print because it’s an entire composition between headers, icons, logotypes, color schemes, texts and all the those things around the main character.

In general it can take around a week or two working all day, but in some cases it can take more than a month. There are a lot of unreleased Prints and also an entire Series that I have worked on for months, and for some reason they are still incomplete, and from time to time I try to look at them and identify what they need.

Kirill: How much different the final illustration is from the initial concepts that you’re imagining in your head?

M: They change a lot, but I think it’s a positive feedback because it surprises me and sometimes gives me new ideas.

The problem is (and it happens a lot) when you have a great idea in your mind and you think about all the details for a while and then, when it’s on paper, it loses all that magic that is still in your head and you don’t know what happened. I’m pretty sure I’m not going to have anyone of my Prints complete at the first try, and if I think differently, I’m sure I wouldn’t have any of them.

Kirill: How do you preserve color fidelity for the printed media?

M: I try to use them in the simplest way. I try work using just one or two flat colors with no textures, complex gradients or any other effects.

Kirill: How does it feel to hold a physical print of one of your illustrations?

M: When I have the first copy of a Print, I always spend time to look at it and hang it on the wall. That moment really feels great, but after a few minutes of looking at it I start to think: let’s move this, and this, and this, and also this … but that part of the work and the process is also fantastic.

Kirill: You number all your prints, starting from Nº001. What’s the final goal?

M: I have always been interested in working on huge and long projects.

This project is about creating 100 Prints, divided in 25 Series composed of 4 Prints each. They are all created in the same square format with the same style and are numbered from Nº001 to Nº100, and at the end of the project I would like to publish a book.

I started with this project in 2010, and since then I don’t think about the upcoming Prints or Series. I’m sure that’s one of the reasons this project always keep my mind busy and every new Series is a surprise for me. I think I’m going to finish the last Print around 2016, but sometimes I think that it would be better to call it “200 Prints”.

Kirill: “Sixty Watts” has a prominent place in this series, and a few months ago you’ve launched the companion site. And yet, there is no actual band. What is this experiment about?

M: “100 Prints” is divided into 25 Series. When I started the project I decided to create a theme for each Series. When I thought about creating a Series about music, I started thinking about a rock band, but I didn’t want to make designs for any existing band. So I created a band called “Sixty Watts”. At that moment it was just a Series composed of 4 Prints and nothing more. I needed a band and I needed a name, so I came up with something that had a good phonetic sound and also had a very symmetric number of letters for each word.

I published that Series called “Sixty Watts” and a few weeks later I read a post on some French blog about my work and that specific Print. The post said something like: “it’s a Series about a rock band called Sixty Watts, but don’t try to search for the music because it doesn’t exist”.

So at that moment it made sense for that Series to start a new project. It sounded like an interesting idea, with a great opportunity to design everything about a rock band – the discography, the posters, the album covers, the instruments and all those kinds of things.

I started researching some great rock bands. I also bought a lot of things just to know how to design the packaging, how to compose the tour posters, all the logotypes or icons included in each piece, how to create an album, a single, the Japanese versions, an LP and things like that. It was very exciting and I had a lot of ideas in my head.

I always wanted to be in charge of art direction for a rock band campaign, album or tour, and I never thought that if the opportunity never comes I can invent it. So I decided to create my own rock band.

When I started the process I thought several times how ridiculous such an idea might sound like, but then I started thinking about it as being “different”. That’s why I continued with the project and published it, and I am still working on new illustrations and also on an upcoming new album.

This project makes a lot of sense for me when I think about the moment when someone looks at an album cover for the very first, and without listening to the music what kinds of ideas come to your mind. Your imagination start creating a complete story, and if you want it, it can be endless.

Kirill: What do you do when you run out of ideas and get stuck?

M: I talk to my wife.

Kirill: What’s the best thing about being an illustrator?

M: That I love what I do.

---

And here I’d like to thank Gianmarco Magnani for this interview. You can find more of his work at his main portfolio, as well as the companion “Sixty Watts” site. All the Prints are available for sale, and you can follow him on Facebook and Twitter.

In my previous lifetime I was a Swing developer. And I liked shiny things. As a proof, here’s the pinnacle (or so I thought, at least) of my explorations in making shiny glossy glitzy buttons. That was around April 2006.

Different UI toolkits provide different capabilities that allow you controlling visual and behavioral aspects. Putting the technical details of styling aside though, UI control styling usually works at the level of an individual control.

And so as I was working on my own look-and-feel library, I heard more and more tidbits about Vista. It was released in January 2007, but it had a long [really really long] history. People kept talking about the three “pillars”, and I was mainly interested in the Presentation one. I don’t have a link, and I can’t even tell if it was a feature that was eventually shelved or just a rumor. But when I heard it, it made a long-lasting impression on me.

The gist of it was that entire UI is a 3D model. You know how they say that buttons should look like something that can be pressed. So you have some kind of z-axis separation. Drop shadows, bevels, some kind of a gradient that hints at the convex surface. And don’t forget to throw in the global lighting model. And so that bit of pixel feature rumor said that the entire UI – from the window level down to an individual control – would be an actual 3D model, with each object living in its own z plane.

So instead of styling each control to create an illusion of z separation (with whatever 2D images are backing each individual control), you would have a spatial model. Each control has its own 3D geometry. Now all you need to do is place the controls in the 3D space, create a few global lights, create a bunch of textures to use on the controls and voila – ship it over to the GPU to compute the final pixels. Want to restyle the UI? Supply a different texture pack and a different lighting model. All the rest is taken care of by the system. Have your own custom control library? Define the 3D meshes for them. All the rest is taken care of by the system.

Now imagine what you can do. If you place two buttons side by side, with just the right tweaking of the meshes and just the right amount of reflection on the textures you can have a button reflecting parts of other buttons around it. And the other way around. You know, all those shiny reflection balls from the early ray tracing demos.

Or, if you model the mouse cursor as an object moving above the window, you can have the back of it reflecting in those controls that it’s passing over. If your control mesh has some kind of a curved contour, the cursor shape would get distorted accordingly as it glides off of the edges.

Or, as you press the button, the press distorts the button mesh as the exact spot of the press, and the entire geometry of the scene reflects that.

I had serious thoughts of doing that. In Swing. That never happened though. Here’s why.

In my mind, there were three big parts to actually doing something like that.

The first one was relatively simple. It would involve transitioning from the point of view of looking at a single control at any point in time towards creating a global view scene that had the entire view hierarchy. There were enough hooks in the API surface to track all the relevant changes to the UI, and even without that you can always say that applications must opt into this mode and have to call some kind of an API that you provide that there are “ready” for you to build that graph.

The second one was also relatively simple. I would need to generate the meshes for all controls. Some are simple (buttons, progress bars), some might be trickier (check marks, sliders). But nothing too challenging. Mostly busy work.

But the last one was the effective non-start. How to actually create the final render of the entire window with acceptable performance? Doing my own 3D engine was kind of out of question. I knew just enough of what is involved to not even begin down that path. So that left me with OpenGL.

JOGL was around at the time, and had a nice momentum behind it. They were gearing towards providing bindings for OpenGL 2.0. There was a lot of activity on the mailing lists. Java3D was another alternative that was under similarly active development. There was even a talk of merging the two. And so I started looking into a simple proof of concept of making a simple JOGL demo on my trusty Windows box.

Around that time (early 2007) Ben Galbraith announced the first (and, posthumously, the only) Desktop Matters conference in downtown San Jose. I left a comment on that announcement. He asked me whether I wanted to make a short presentation on one of my projects. I was quite happy to do so. That was my first public presentation [thanks for the encouragement, by the way!]

It was a nice gathering. Around 100 people, I’d say. And they had quite a few people from the desktop client team at Sun available for informal Q&A. Chris Campbell was my hero at the time (no offense, Chet). The dude was slinging code left and right, showing a lot of great things that could be done with Java2D. He was also working on hardware acceleration of a lot of those APIs. If I remember correctly, he was talking a lot about doing various acceleration on top of OpenGL and Direct3D. Who would be better to validate the overall approach of doing this thing that I wanted to do than him.

I managed to grab him for a few moments. I outlined my thinking. He was polite. He said that it sounded about right. That was just enough encouragement for me.

So after the conference was over I got to actual work. My first private demo was to render a colored sphere. And it looked horrible. It had jagged edges all around it. And it also had visible seams running all over the sphere. I could see the tessellation model before my eyes. It was quite bad.

So I fired off an email to the mailing list. Not about my grand vision. But rather about this specific thing. How to make a sphere look like a sphere. With no jaggies and no tessellation. And they told me to get a “real” graphics card, because whatever integrated graphics card I had on the motherboard is no good for any kind of OpenGL work. And that’s where I stopped.

What’s the point of even thinking going down that road if you must have an expensive graphics card? It might be OK for a demo. It might be OK if I’m satisfying my own itch and showing off my skills with some kind of a thing that runs well on my machine [TM]. But if it can’t be used on “everyday” computers that don’t have those fancy hardware components, it’s a no-go for me.

You might say that I chickened out. I had this grand vision, and folded at the first sign of trouble. But that was – and still remains – my main issue with anything that ends with “GL”. Its never “quite there” promise of commodity hardware availability that is “just around the corner” – and in the meantime, you need this very particular combination of hardware components, drivers and other related software to run. And oh, even if you do have a beefy graphics card, unfortunately it has this driver bug that crashes the entire thing, so you might want to either bug the vendor to fix it, or just disable the whole thing altogether.

Things might have been different. I had really a lot of spare time back then. I might have went down the road of biting the bullet and buying that graphics card (although, as mentioned above, it was not about my own cost, but rather about the reach of the final library). I might have had this thing done in some form or another. Can you imagine buttons reflecting other buttons reflecting the mouse cursor passing above them and rippling as you press them? With the ripple reflected all around that button, and being reflected back in it?

So that never happened. And now it’s all about flat. Flat this. Flat that. Flat *ALL* the things!

Chris Harris at 24:40 into episode 47 of Iterate podcast:

I call it undiscovered country. You can imagine it like a bunch of ships arriving on the shore of this new land, and there’s a town there. And that town was iOS when it was first created. You land and you claim this area around it. You’re out there, and you always land to explore. And we’re very much in the infancy of touch-based design. The interesting thing is that we’ve just landed on the shore, and some people are spending all their time designing, effectively, in the town they’ve landed at.

All these ships are arriving, and more people are arriving on the shore and turning up in this town every day. And some of us are saying “Oh my God, you can go over there and claim a mountain and stick a flag on top of it”, and that’s the thing you can do. Loren Brichter was out there and he planted one. There’s a hill right outside the town, a little way down the road but off the beaten track. And he went right out there to stick his flag and claim pull-to-refresh.

That’s the way I look at it. We’ve got this amazing opportunity to go out there and claim mountains for ourselves. It will never come again. We’ve got this opportunity right now to go and claim these mountains right close to the shore. Afterwards, in the distance, people will have to travel further. You’re going to get across mountain ranges in order to find something new, in order to get something new to explore. I want to go to the top of those closest mountains and claim those myself.

That mountain – once you get to the top of it and standing there and saying “Oh my God, that really worked, that was amazing”, and you see all these people and boats clustering down there, and you’re going “Guys, guys, over here”. And down the other side of this mountain, in the valley down hill, there are all these other things that we can do, and that’s the most amazing thing. When you’re at the top of one of those mountains, you get to see things that other people can’t, and that’s where I feel I am right now. Some of us are at the top of mountains looking down the other side into grassy valleys.