Web Comic UI is All Skin and Bones

Note: The following article was submitted by Rob Stenzinger. His contact info is at the bottom of the article.

I have an interesting case for you, detective. It’s about investigating what comprises your comic’s User Interface (UI) and separating the skin and the bones.

Web Comic UI Detective Vision

Have you ever played the video game Batman Arkham Asylum? Not the landmark comic Arkham Asylum: A Serious House on Serious Earth but the 2009 action and crime fighting adventure. One of the awesome technologies Batman has at his disposal in the videogame is detective vision – which allows you to see your opponents moving skeletons.

What if you look at your comics user interface through the eyes of detective vision – see the skeleton underneath? Instead of glowing 3-D rendered bones you would see something like this diagram with regions on the screen that have an underlying purpose and a way to visualize that purpose. We see a clickable banner asking your reader to explore the comic archive, comic navigation buttons, advertisements, and of course the comic itself.

Figure 1: UI elements as a skeleton

UI elements as a skeleton

Here is an example of dividing up the screen layout with user interface elements. The elements are created with two lists of goals in mind. One from the author’s perspective and the other being the reader’s (or user’s) perspective.

Designing the Skeleton

Start by putting yourself in the shoes of your users. What sorts of things do they want to accomplish when they visit your comic? Next consider what you want to accomplish, your goals as an author and as a business person.

Take that list of goals as ingredients to come up with the elements (skeleton) that you want to have on the screen. These elements represent content and goals that serve both you and your readers.

Figure 2: goals for UI elements

Goals for UI elements

Once you’ve designed a skeleton that takes care of both your needs and your user’s needs begin to iterate your comic’s UI in a few ways.

I use this skeleton approach to serve as a checklist of widgets to turn on or turn off within my content management system (CMS). WordPress and ComicPress are great pieces of software and the default templates are helpful but by their very “default” nature they serve a general set of goals – not yours in particular. Using my element blueprint/skeleton as a guide, I can make quick adjustments.

Figure 3: iterating on AGZ UI over time – timeline

Iterating on AGZ UI over time – timeline

If you’re going for a fully custom design, each UI Element is a mini design-project in itself as you apply your overall colors, fonts, brand imagery and tune it all to accomplish the goal of that given element. For example, I debate adding forward and back guitars for comic navigation instead of basic arrows.

Iterative Detective

I’ve been using this process applied to my comic’s UI for close to 4 years. Not that you need to take that long – it’s something I like to revisit over time. Making comics is of course critical but I’ve found putting time and attention to the digital experience of my users is really useful. It keeps things feeling fresh, it has improved my bounce rate and given me positive reader feedback.

About the Author

Rob Stenzinger Rob Stenzinger provides User Interface + User Experience design services, is the creator of the comic Art Geek Zoo: The Way of Sound, and the videogame Guitar Fretter. He sees all these things as a general practice of intentional creative communication. It’s all about making usable, useful, and fun experiences.

Rob is a teaching artist at Lean Into Art and provides workshops such as “Storytelling to Make Your Comic’s UI Awesome” which builds on comic creators storytelling experience to design an interactive home for your digital comic.

Posted in Featured News, Tutorials.


Leave a Reply

Your email address will not be published. Required fields are marked *