We’re increasingly seeing apps whose selling points include top-notch illustration, animation and graphic design. Craig Grannell reveals how to become one of the creators of art-led apps.
Award-winning apps are increasingly being hatched within the minds of designers and illustrators. Unlike the action-packed offerings of the traditional gaming industry, these design-led apps tend to emphasise storytelling using richly detailed interactive interfaces. The apps may simply be vehicles for illustrated tales or, more ambitiously, they may be role-playing games with elements of puzzle-solving, as pioneered years ago by the likes of Myst.
So how do we reach this promised land? Perhaps the most fundamental hurdle to clear at the outset is the notion that there is a massive barrier to becoming a creator of apps. Unless you’re already au fait with coding, chances are you won’t know your C++ from your HTML5 – but you can always team up with people who do.
Gesundheit by Revolutionary Concepts, with art by Matt Hammill. Company founder Wayne Whatford is “not a coder” and said he “just had good ideas and a determination to find a way to get them out there”
Early sketches for Mojo Bones’ Tongue Tied app was no different to what they would have produced had they been working on an animated short or comic book
“Include programmers in the process early on,” says Nolan Baker of Moonbot Studios (moonbotstudios.com), based in Shreveport, Louisiana. “The more a programmer’s involved, the more they’ll understand what you want to achieve.” If you do it the other way around, he warns, designing everything before consulting a coder, you may discover late on that much of what you’ve envisaged simply isn’t feasible.
Secure in the knowledge that others can write the code to turn design concepts into full-fledged apps, designers should simply focus on coming up with ideas as creatively as possible. Wayne Whatford of Revolutionary Concepts (revolutionaryconcepts.net) says it’s best to view a touchscreen as a blank canvas. “We’re only limited by our imaginations regarding how things look and how users will interact with our apps. Avoid templates or presets, which limit your thinking to existing conventions.”
“Brainstorm ideas, and once you can latch on to something, put it in [an appropriate] context,” says Mojo Bones artist Mark Norman (mojobones.co.uk). Mojo Bones’ game Tongue Tied, for example, began life as an image of two characters in love and connected by a ribbon, but the concept rapidly evolved into an oddball cartoon creation featuring two dogs whose tongues are tied together.
As for the nitty-gritty of the design process, many advise starting with just pencil and paper. Trained as a graphic designer, game developer Greg Wohlwend of AEIOWU (aeiowu.com), based in Ames, Indiana, still begins each project by drawing on graph paper. “Anything interactive can grow from any number of aspects: interface, art, music, design, text. Where I start depends on a ‘feel’ based on what I’m most excited about,” he says.
Sketches done, Greg switches to Illustrator, where he considers “each element as a piece of a larger system, like any visual system in a magazine, newspaper or website”.
Moonbot Studios say it has engendered much stronger teamwork between designers and coders on its forthcoming Numberlys app by bringing the development in-house for the first time
Chris Stevens of Atomic Antelope says the Alice iPad app arose from his interest in “the idea of applying simulated physics to objects in the original Sir John Tenniel-illustrated edition of Alice in Wonderland”. The result: a new kind of digital pop-up book which has achieved a million downloads
Craig Bruyn (craigbruyn.blogspot.co.uk), who created the graphics for Chillingo’s game Coco Loco, also advocates Illustrator for app design. “It ensures crisp, clean character design in a format you can resize to cater for different screen resolutions. And with game backgrounds, where I get more detailed and organic in approach, Illustrator enables me to work [in a] painterly [fashion] and quickly.”
Some prefer other Creative Suite applications. Chris Stevens of Atomic Antelope (atomicantelope.com) says that when his firm came to tackle the Alice in Wonderland iPad app, most of the design work was done in Photoshop and text layout in InDesign. He adds that there’s “still no good solution for dynamic book typography on mobile devices”, so you might as well do it the traditional way and lock down the result.
Others aren’t afraid to shake up their usual process in order to come up with a great app. For illustrator and visual artist Shilo Shiv Suleman (bonifisheii.blogspot.co.uk), creating iPad apps means devising interactions before the illustrations. She believes the consumers of art-led apps place more value on interactions than the average user. “The [books as apps] revolution should be more interesting than ‘touch something and it moves’,” she says.
Regardless of the kind of app you’re creating, you’ll need to ensure your visual style is keeping with certain ground rules. “Clarity is key,” Craig argues. “Balance interesting and diverse characters and settings while minimising ‘design noise’, so details are clear even at a small size.”
Neil McFarland, creative director at Ustwo (ustwo.co.uk), says that what ends up on screen must be “appealing, intriguing and juicy” to convince potential downloaders during that split second when they are deciding whether or not to buy. “Visuals must ‘pop’ and convey very quickly what you’re trying to say.”
The iPad excited Shilo Shiv Suleman, whose art drives the app Khoya (above): “I saw a storytelling device, mobile like a book but with a touchscreen, capable of knowing how we hold it and connecting readers”
In moving to apps from graphic design or craft, interactivity must be considered, and with that comes the need to work within the abilities of the likely users. “UI design is about being intuitive and natural,” says Moonbot Studios’ lead artist Joe Bluhm. “If someone can’t figure out what they’re supposed to do, you’ve fallen short.”
Users are a varied bunch, notes Stuart Ryall of Mojo Bones. “Most people didn’t buy their iOS devices because of gaming, so be aware of this when creating [a game app],” he advises.
Shiv is ambitious when it comes to interactivity. “I want interactions that are like magical childhood ideas brought to life, she says, “or childhood rituals and traditional cultural symbols taken into the digital world.” She gives users magical devices to use in virtual space that are based both on real and imagined tools.
Shiv also suggests exploiting technology to the full, to enable people to interact with the outdoors, for instance. “Use augmented reality to have people explore gardens with their devices, discovering the magical creatures that live there,” she says.
Whale Trail by the British/Swedish agency Ustwo started out as a game mechanic that suited the touch interface; the design and indeed everything else flowed from that
Still, interactivity is not nearly as daunting a problem as you might think. Sometimes user interaction follows on naturally from graphic design, says Joe. This happened when Moonbot Studios created the app version of the Oscar-winning animated short The Fantastic Flying Books of Mr Morris Lessmore, which was directed by the company founders, William Joyce and Brandon Oldenburg.
Beyond conceiving visuals and interactions, you will need to test them thoroughly. “Spend time experimenting with how your app looks and feels at scale on a device,” says Wayne of Revolutionary Concepts. “The size and shape of the device is as important a consideration as your art. Explore how it’s held, in case thumbs obscure your work.” Chris adds that it’s often surprising how different your designs look on a device compared to how they appear on a desktop monitor.
Some design issues can be purely cosmetic. Tim Fishlock (timfishlock.com), who designed the game Sir Benfro’s Brilliant Balloon, recalls a scare with an early version of the app where artwork with high-contrast texture details flickered and swam as it moved. To fix this, they had no choice but to go back to the raw visuals and tweak them. ‘Gotchas’ can exist in finer details too, says Greg at AEIOWU, for example jagged graphics, mismatched colours and poorly rendered fonts.
Some issues can be fixed relatively easily. Aliasing problems that arise when objects with transparent backgrounds have edge pixels that are not 100% opaque can often be dealt with asking the programmer to switch the render mode from nearest-neighbour to smooth or vice versa, Greg says. And if you have a png with transparency artefacts such as haloes, a simple fix is to make the alpha channel visible.
The aim behind Sir Benfro’s Brilliant Balloon, says designer Tim Fishlock, was to fashion a game with a “strong visual aesthetic that lends itself brilliantly to fairly crude animation, as Terry Gilliam demonstrated with his work on Monty Python”
In the Mr Morris Lessmore app, as Nolan of Moonbot Studios recalls, a storm started out as a full-screen 200-frame animation, but a similar effect was crafted less demandingly by moving a few ‘layers’ of clouds. There are other tricks to consider: tiled backgrounds versus massive scrolling images, and making components modular.
The stumbling block is often the performance of the device, and this can be hard to deal with. “Physics drains frame rates, and apps are made on [their] responsiveness, so be sympathetic to your devices,” says Mark at Mojo Bones. If you can’t get the visuals to move smoothly at 60 frames per second, says his colleague Stuart, cap the rate at 30fps rather than risk jarring frame drops. But Nolan says you should nevertheless set out to be ambitious. “Only reduce frame counts, resolution and image quality if you need to. It’s all about experimentation and you don’t know what won’t work until you try.”
When things do go wrong, don’t be afraid to make sweeping changes, Stuart advises. “Bin something and work up an alternative. You’ll also sometimes find that something insignificant suddenly becomes a major feature because it feels or plays better than you expected, so take advantage of that.”
Know your limits
Andy Lafferty, Ustwo’s lead designer, says it’s essential to go through everything with the programmer early on, to understand the limits of what both parties can achieve. “This will produce a stronger end product and save time.” Shilo recommends creating mock-ups where possible. “Animate and prototype interactions and sit through each of them, figuring out what will work and what won’t.”
There are other ways to collaborate more efficiently with coders. “When working with characters, design so they can be easily animated, and provide plenty of information, such as their personality and how they move,” says Tim. His colleague Neil chimes in, “Make sure you keep extremely well-ordered work files.” Discipline is a must: “It’s all that’ll stop you pulling your hair out when a developer requests changes you otherwise wouldn’t be able to manage if you’d not designed with flexibility in mind.”
Greg of AEIOWU says to understand programmers’ needs and be patient: “Maybe they won’t mind using raw Illustrator files, but perhaps they’ll want fully formed sprite sheets. And coding requires time and focus, so don’t hassle your programmer, but do send progress updates to keep them excited and continue with development groundwork that can often be slow and thankless.”
And you get what you pay for. “To preserve the quality of your app, spend money on a good programmer with an artistic sensibility, whose previous work is stunning,” says Chris of Atomic Antelope. “Cheap programmers end up being the most expensive.”
Greg Wohlwend’s upcoming Ridiculous Fishing, like his other iOS apps, has strong roots in his grid-based graphic design training