Devember Challenge: Webcomic Blog

Overview

Recently in a patreon podcast, Wendell asked us what we would do if we had all the time and money in the world. My first thoughts were for the trail; I love to hike and backpacking is something that’s high on my priority list to get into for the coming year. But the more I considered the question after the podcast ended, the more I realized I haven’t been working on any real long-term illustration projects, specifically webcomics. I used to be very dedicated to writing and illustrating comics for the web; but it’s been hard to find the time the last few years. I saw the prompt for “Devember” and decided to try my hand at getting some work done (while also hopefully encouraging members of the community at the same time). While my project won’t be primarily dev related (there’s a lot of drawing that will have to be done too), there’s enough here to keep me busy I’m sure.

Background

The story I’m choosing to work on is the same story I actually worked on for my senior thesis in college. I chose it for a few reasons. I never quite finished it, for starters, but looking back on it now, I don’t think I was using the medium (web) to it’s highest potential either. I’ve learned a lot working as professional designer/developer, and I’d like to try and work in some of the principles I’ve learned since then. I also think there have been some interesting developments in digital story-telling, and I want to add my own stamp on that where I can.

Exemplars

I have a number of professional exemplars I admire and would like to emulate:

1. Hero - Hwei Lim
I’m amazed the javascript still works on this site. I remember reading this in high school.

2. The Boat - Nam Le
One of the best interactive comic experiences I’ve ever had. A little overbearing on the sound but otherwise really cool use of animations.

3. Masquerade - Overwatch Team
The overwatch team makes quite a few comics for the lore in-game, however this was one I really enjoyed the formatting for. It strikes a nice balance between interactivity and legibility.

Goals

  1. Come up with more innovative usage of animations to tell story - fades, parallax, etc.
  2. Learn more about Bulma Responsive framework. (I primarily use bootstrap at work but bulma is growing on me, I figured I’d take the chance to learn more about it this month).

More updates to follow, hopefully :smiley:

7 Likes

This is really cool, I’ve never heard of interactive stories made with javascript before.

Woot! Bulma is my favorite.

If its really growing on you, they have a patreon :slight_smile:

I’m liking it so far. I find the columns are a little less intuitive than bootstrap but they are ultimately more flexible in some ways (comparing to Bootstrap 3, haven’t had a chance to try 4 out yet). But it’s also a little more lightweight, which is good for smaller projects like this one.

Progress thus far:

Programmed the chapter index, and started on the first chapter. Menu for chapters also programmed (bottom left), though I may switch it to onClick instead of CSS hover later.

Still a lot of artwork to do as well. x_X

1 Like

Bulma and bootstrap 4 use flexbox for their grid sizing.

I prefer using CSS Grid for things, maybe you should check it out?

Didn’t get as much code done today, was working on some of the illustrations needed for the various panels. I did make some tweaks to my layout in bulma but not anything groundbreaking.

One such drawing:

3 Likes

Hows the project coming along? Got any other drawings/artwork done? The above drawing looks amazing.

I’ve done some more artwork, unfortunately got busy this weekend and didn’t have alot of time to do much else. Christmas season is upon us. :stuck_out_tongue:

Last bit of progress, with some more illustrations:

5 Likes

This is looking really nice!