THE STORY OF MOBILE GAMING

We’ve worked on a number of projects for Adobe, ranging from full-blown animation and motion graphics to visual design and illustration. 

Today we’re going to look at a deceptively simple project for Adobe: an illustrated infographic that describes new developments in the mobile gaming space. As it turns out, the devil is in the details.

The creative brief described a tall, scrolling graphic that could be legible in a typical web browser window and also enlarged 40-50%. The brief also called for a playful, non-corporate look with custom illustration and visual references to video gaming culture. Adobe’s goal was to get this piece reblogged in the gaming community, and that wasn’t going to happen unless the content seemed exciting to the audience.

We knew that we wanted to explore retro video game textures, but we didn't know exactly how far we would go.  Would it be worthwhile to use more contemporary color and font families?

 

Palette-1.png

This was deemed too conservative in every way, and we moved in the other direction, drawing inspiration from the earliest 8-bi arcade games, which often had brilliantly saturated colors against a dark background: 

Palette-2.png

This was moving in the right direction, but the dark background was overwhelming the content, and the palette was so saturated that it didn't allow for much nuance. So we kept going:

Palette-3.png

We quickly settled on a few ground rules: there would be no photography, no stock art, and no middle-of-the-road fonts (we’re looking at you, Gotham). Colors would be saturated and bright, and typography would be big, chunky, and playful. And lastly, we would add an element of 8-bit nostalgia to the aesthetic, using blocky and pixellated graphics to reference classic game titles from Nintendo and Sega. It seems obvious in hindsight, but once you commit to an 8-bit aesthetic, you have to go all the way. Those really slick isometric charts and blocks of 3-D type you rendered in Illustrator? They're going to look downright strange next to a super-sized 8-bit brick.

 

8bit-comparison.png

Given that this infographic was going to be resized in all kinds of unforeseen ways, we needed to be sure that the graphics were going to appear as deliberately retro and not some kind of browser error. We settled upon a fairly large grid for all of the graphics, and cheated with some of the pixel tolerances— we were going for an impression, not a reproduction.

Once we had the building blocks of our design solidified, we moved on to formatting the final content of the piece. This is typically one of the most time consuming phases, as the content is prone to last-minute changes (back in my newspaper days this was called "creeping eloquence") and these changes have a ripple effect upon the carefully constructed layers of artwork. By establishing a strong grid for the text and containers, we were able to create sensible rules for headline lengths, body text character counts, and other bits of plumbing.

We're proud of the final design, and our friends at Adobe were happy too. It's always a pleasure to work with such a strong creative brief and collaborate with the client at every step of the way.

Adobe-Infographic-Flash-v8.png