The System
Role: Everything Project Date: Winter 2011 – Current Client: Personal
Reinventing the Webcomic Wheel
As someone who considers themself both a designer and a webcomic artist, the design of webcomic sites is something I've thought about for countless hours. While much has been written about the idea of comics on the web as an opportunity for an "infinite canvas", few people have spent the time thinking about a better frame for that canvas.
There is a large number of webcomics out there, most of which use the same template structure for navigation of their archives of comics. While there is a case to be made for standardization, this template was first developed in the late 1990's, when ideas of web design and site structure were very different and much more basic than they are today. In a post that I wrote on my site, I proposed integrating new technologies and ideas from other websites into a new idea for the comic template. Utilizing persistent elements and related posts, taking cues from addictive sites such as Tumblr, YouTube, and Gmail, I developed a new approach to the webcomic site, which I'm hoping will revitalize the "web" part of the webcomic community.
No Matter Where You Go, There You Are
The first key to the new design is persistent navigation. On most sites, the navigation to move forward and back between comics is above or below the image, meaning that users who read longer comics have to scroll to find these buttons either back up to the top after reading a comic, or down to the bottom on one they have already read. This new template features navigation on the lefthand side of the page, locked using CSS, so users can cruise through the site while barely moving their mouse.
Just One More...
The second key is the use of "infinite scroll" pages throughout the site. The homepage, as well as any page that reads multiple posts based on a query—such as all posts tagged with a certain topic—will load on one long scrolling page, and load more posts as you scroll to the bottom. By constantly moving the "end" a little bit back from the user, it encourages them to keep reading just a little bit more, increasing their time spent on the site.
There is also related content area attached to each individual post when viewed individually. There are tags on every post, but they are never called "tags", as this is a term that those in the website-building community use but the average user is not necessarily familiar with. Instead, they are treated as large, button-y links that are simply labeled "See more posts about…", encouraging users to keep reading more about a topic in which they have already expressed some interest. Every single post features related comics and/or news articles that are connected to that topic; research has shown that people who like comics about "bikes" or "coffee" tend to want to see more of the same.
TL;DR*
*Too long; didn't read.
There is an issue with larger comic sites. Those with larger archives tend to have more content than a user can easily catch up, leaving those with large amounts of content seeming a daunting undertaking by new users and forcing these creators to rely on an existing fanbase more than new ones. In order to resolve this problem, the an integrated archive system sorted by subject and date, while also featuring the Turbo Reader™, a function allowing users to start at any one comic and read all subsequent comics (going in sequential or reverse order) in an infinitely scrolling page. This allows users to read entire archives quickly and easily, while also giving them the opportunity to leave it behind and come back to it later, jumping back in where they left off.
Right now this project is in development as I import the old content into this new template. Once it is in place, the plan is to create an open source version of the site for other creators to implement themselves, and allowing webcomickers the opportunity to have a website that shows off their work beautifully.
To see more of the comics that are featured on The System's site, check out the "Comicker" section. For collateral materials created around the comic, check out The System Collateral.