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
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.
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
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.
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 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!
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.
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!