Paper Heroes

Building a superheroic comic world

Pirate Flag
All the paper hero icons

Project: Empower users to create their own superheroic comic books

Role: Product Design, Illustration, Web Development

Tools: Illustrator, HTML, CSS, JavaScript, Greensock

Challenge

Craft a special edition icon character set and promotional website that inspires users to create their own stories.

Icon sketches

Every hero has to start somewhere: in this case on paper

Building up the icon

Before and after building a hero, shape by shape, from preliminary sketches

Approach

A limited, highly detailed icon set is more like a set of illustrations and presented a new challenge compared to icons for a UI. How would they be used? Why should people be interested? What if their purpose and a compelling story could be linked? In this case, the two met in the form of a comic book. Superheroes are iconic in their own right and a character set based around the common tropes of the genre provides the perfect use case by enabling the user to build their own comics.

Research Notes
Sketches of animation for website

Scheming how to bring the city to life with animations built around interactive scenes starring different heroes

Early test of the city layout

Early tests for the side-scrolling adventure focused on how to bring that over the top, comic book feeling to the web

Obstacles

So superheroes, easy right? Or not. Creating original superheroes who harken back (and poke a bit of fun) at tropes felt simple but required care to balance built-in characters with an impressionistic approach that leaves room for the user to create their own heroes and adventures. Project scope also became an issue as superheroes have a way of capturing the imagination and what began as a simple website to promote the heroes spiralled into concepts for a choose build your own comic right in the browser. Priorities had to be re-evaluated to deliver the best product under the constraints of the project deadlines and budget. At the end of the day, a design has to ship and better to understand the circumstances so you can make it a good one.

Solution

The final icon set features 12 heroes and villains ready to save (or destroy) Paperville, referencing superhero tropes and adding personality while leaving plenty of room for the imagination because ultimately it’s about the story you create with them. The promotional site is built from several ‘scenes’ where the user has the chance to interact and possibly permanently alter Paperville by shrinking a killer robot or activating the doomsday laser. Animations help bring the characters to life and establish the style of a living comic book.

To jumpstart users creating their own stories and suggest how to use the characters, the same components which bring Paperville to life on the screen, from flames to classic comic book sound effects, were added to the icon pack. Paper Heroes superpower? Empowering users to create their own comic books.

Explore Paperville
Pyro sets Dr. Insanity alight

Save the day: the Paper Heroes promotional site is composed of interactive scenes where user choices permanently alter the cityscape

Triggering the laser

Or Destroy the city: because no self-respecting super villain would be caught dead without a doomsday laser.

Reflection

Design is not just about delivering the best experience, it’s about delivering the best under the given constraints. A character set can be as simple or extravagant as you like but ultimately it’s important to keep the purpose of the design front and centre and deliver (not just create) the best experience for that. In this case, focusing on empowering the user to create their own stories with Paper Heroes rather than going wild with the website actually produced a better product with additional elements to facilitate comic book creation.

Made to the Sound of KONGOS - Lunatic

All designs shown © Kezie Todd 2018

Discover More