Working prototype: Digital comic book magazine

The iPad launched bringing my dream of producing a digital comic magazine along with it!

UX Design, information architecture, content strategy, wireframing, illustration, prototyping

A finger swiping on an iPad to read comics

Industry: Comics, entertainment, storytelling

My Role: End-to-end product design from ideation to UI design to prototyping

Project Time: 2 months

Ideation and opportunity

Many dismissed the iPad as a giant iPod Touch when it launched in 2010. However, I saw it as an ideal platform for launching a comic book magazine! A dream I’ve had for years. Reading comics on mobile devices was a clumsy experience back then – downloading a PDF and/or pinching and zooming from one panel to the next!

The issues would be short, funny, and serialized in order to keep readers coming back. Stories would collectively act as a prequel to a small print run comic book I had published a few years earlier based on Spud, a cartoon character from the moon I had drawn since high school. Friends have told me over the years how much they enjoyed reading my Spud comics and always asked for more.

User experience and wireframes

I envisioned a single comic panel filling the iPad’s screen. Readers would swipe from page to page to read the entire comic book. I decided to lock the web app in landscape mode since the human eye likes horizontal.

Pencil sketches of wireframes
Pen sketches of wireframes
Pencil sketches of wireframes

Information architecture

Scribbled notes with details about information architecture

I used best practices and incorporated my assumptions of what would be interesting to comic strip readers. List of comics to read via a drop-down submenu, character profiles, about us, contact us, follow on Twitter, and perhaps news.

Visual design, UI

I also chose an overall red colour scheme for the UI since the colour goes well with my black and white comics. I also made the UI web app look like it was constructed out of good old fashioned pulp.

I included drop down menus, interactive popups, and a newspaper style layout for information-rich sections.

I drew my comics with paper, pencil, and ink, then scanned and cleaned in Photoshop and resized to fill the iPad screen

Screenshot of a website
Screenshot of a website displaying a comic strip
Screen shot of a website displaying a comic strip and popup window
Screenshot of a website displaying a bio
Image of a character bios web page laid out like a newspaper
Screen shot of a web page
Screen shot of a webpage

I designed the last panel of each issue to contain enough blank space for me to embed an email newsletter sign up form for readers to be notified when new comics were available.

And build a fan base to leverage later on.

The social media follows was my way of making it easier for users browsing their feeds while taking public transit.

Prototyping

The prototype was made exclusively for the iPad in order to keep front end production and back end development simple since screen sizes differed greatly from the iPad to the iPhone, iPod Touch and Android tablets. I’d worry about responsive design for a proceeding phase.

I enlisted the help of a developer friend to code the back end with Ruby and Javascript which I assembled into the resulting prototype built in HTML and CSS.

I shot a walk-through video due to changes in the iPad’s dimensions over the years – my proof-of-concept web app no longer neatly fills up the screen. As of this writing, it seems to only work in iPad Minis using the Chrome browser!

Outcome

I am really happy with my digital magazine prototype! I showed it to about 10 friends and they enjoyed it very much, laughed in all the right places, and a few asked for Android versions.

Next steps

I didn’t have a chance to market my app since another project took off (a good problem to have!). So I reluctantly shelved the app with the plan to work on making it responsive to different screen sizes and accessible to people with disabilities in the future. 

It’s ten years later as of this writing and HTML5 and CSS3 have really taken off in the interaction design area so I’m now looking to build a fully responsive and accessible version to use in that other project I just mentioned.

Watch this space!