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.
Continuing a series of interviews with designers and artists that bring user interfaces and graphics to the big screens, today I’m honored to host Joseph Chan. You have seen his work on “Tron: Legacy” and “Oblivion”, as well as one quite a few motion ad campaigns for companies such as Sony, Google, HP, Intel, Blackberry and others.
Kirill: Please tell us about yourself and how you started in the field.
Joseph: I’m a motion graphic designer and I’ve been working in the industry since 2007. I graduated from Pasadena Art Center in 2006 with a degree in graphic design, specializing in motion graphics.
Before that I attended UC Irvine, I didn’t have a major and was deciding what I wanted to do as a career, and it was around the year 2000 when the .com boom was in full force. It was a great and inspiring time for me, people were designing amazing abstract graphics from 3D programs that I had never seen before. I learned Photoshop and put together a portfolio with personal projects that I did in my spare time. After I was accepted into Art Center, I transitioned from graphic design into motion design which had started to ramp up midway through my college years.
Kirill: What happened after you graduated?
Joseph: During school I took two internships. One was in an interactive design studio, creating graphics and content for websites. In my latter terms at Art Center, I took a class with Chris Do who owns and operates Blind which does motion graphics, and I interned under him and Tom Koh. From then on I decided to focus entirely on motion graphics.
Kirill: And here you’re not talking about Flash / VRML containers that were very popular at that time in the browser environment.
Joseph: I wasn’t into the technical side of Flash or into creating websites. I was mainly using it as a tool for simple layer and text animations, because that was what people used at the time. But the designers who were using Flash in amazing ways, creating beautiful websites full of motion really caught my eye and pushed me towards my career.
Kirill: So back to what you did after graduating…
Joseph: I graduated in mid December in 2007, took some time off for the holidays, and started freelancing at different motion graphics studios around LA and Santa Monica, and I’ve been doing it ever since. I’ve never been staff at a studio before, at this point in my career I feel freelancing is the way to go as I have a little bit more freedom in terms of studio and project choices.
Kirill: Are you also involved in art direction / concept design?
Joseph: Sometimes I am brought in to a project midway or near the tail-end, so therefore I won’t be as involved with the concept as someone who had been on the project since the beginning. So in that scenario I’d be helping out with animation and finishing. Other times I am brought in from the pitch phase, and that includes art direction, concepting, and designing. I do enjoy all parts of the process, designing and animating, and personally I like to find a balance between the two, trying not to do too much of one thing for long stretches of time.
Kirill: You’ve worked on projects with rather different styles. For example, the spot for the first launch of Google Chrome, the recent spot for Google Now and the one for the Gates foundation are semi-vintage illustration style, while Beats Envy and Sony spots have a very modern high-tech industrial feel. Do you like exploring radically different styles?
Joseph: Absolutely. I’m influenced by all kinds of different styles and I try not to limit myself to a particular one per se. I’d like to think that each project has a different and unique solution, so I keep my mind open to what the project asks for.
Kirill: How many people do you usually have collaborating on a single spot?
Joseph: It all depends on the project and what it entails. The spot for Google – compared to other big budget projects that I’ve worked on – was quite simple from the start and we knew that. We did everything from concept to delivery – illustrations, design, compositing and animations – with a team of four people. The spot for Beats Envy also had a small team, but it was a little bit more complicated due to the need for 3D modeling and animation. I worked on the UI designs, compositing of 2D and 3D elements, and the overall grade. The team was four or five people. And then of course we had producers and the creative directors.
Continue reading »
Continuing the ongoing series of interviews with creative artists working on various aspects of movie and TV productions, it is my pleasure to welcome Howard Cummings. In this interview he talks about his work on “Side Effects”, a mystery thriller directed by Steven Soderbergh featuring Rooney Mara, Jude Law and Catherine Zeta-Jones. In addition, we discuss his other two productions, “Behind the Candelabra” and “Contagion”.
Kirill: Please tell us about yourself and how you started in the field.
Howard: I went to the graduate school at NYU to study scenic design for the theater. Right after graduation I was asked for help to find somebody to work on this movie, and I said that I’ll do it myself. I had a theater job at the time, but when I did it, I knew right away that film was what I wanted to do.
I was the assistant designer on Nine the musical which was turned into a movie a couple of years ago. I’m not that skilled a draftsman, and I wasn’t a very good as an assistant art director. But I was good at organizing everything else, so I kept getting jobs from this one guy, because I would do everything.
When I did my first film project, I didn’t realize that there were prop people and decorators; in the theater you have to do everything, so I did it all. The producers were so shocked, and they decided to hire me for their next project. It was a very hands-on experience.
Kirill: You have so many people with so many different responsibilities in all these departments. What were your first impressions getting into that world?
Howard: It just seemed to fit. I was better as the designer as I found out. It seemed very lucky in the beginning to be working on the “American Playhouse” TV series. It was a literary-based historical drama, and my first experience as a kid fresh out of school was designing these historical pieces. The first was set in 1583 and we had to make everything. Then I did three movies in the 1900s, the Eudora Welty story in 1930s, Lanford Wilson’s play in 1950s – I got a real broad spectrum of design challenges. I didn’t really do the New York Lower East Side street movie until later. I did have that experience, but not until after I did a good amount of research.
My next project is turn of the century for Steven Soderbergh. He was supposed to have retired, but he suddenly decided not to. He’s more interested now in doing long format TV. We’re about to start a pilot and 10 episodes, and it’s about a drug-addled progressive surgeon in New York at the turn of the century. I’m kind of going back to where I’ve started. I have a reputation for gritty reality, but lately I’ve been able to do other projects and I’m really excited about this particular thing. It’s where my roots were.
Kirill: Your career started before the pervasive availability of digital tools that allow augmenting and enhancing physical sets in post production. Looking at the list of your movies, I see “Percy Jackson” as the only production that used these techniques on a large scale. Are you staying away from such productions on purpose?
Howard: No, I didn’t. I sort of didn’t get a reputation for that. I’ve been doing art films, and I got this interview to take over a job. At the time it was the biggest movie ever made in Canada, “The Long Kiss Goodnight” that was budgeted at around $140M back in 1996. We had a fair amount of digital effects in that movie. So that was my first experience coming across the birth of digital enhancing and set extension. There was this guy working out of Venice who taught me a lot about those tools. Back then you did have to build bigger pieces, and rotoscoping was so time-consuming and expensive.
I never got to do sci-fi movies. People tend to want to hire you for the type of jobs you’ve done in the past. You can get pigeonholed. I’ve done a lot of thrillers, but I’m not sure how that happened.
Continue reading »
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.
