Design I Like: Homestuck

Homestuck is an ongoing webcomic created by Andrew Hussie on April 13, 2009 that makes fantastic use of art, text, and web design.  It features both hand-drawn and photo-manipulated static images, as well as animated gifs, flash animations, and musical elements.  These are accompanied by text reminiscent of text-based adventure games, such as > Enter name. and > Examine room.  This is meant to give the reader the feeling of advancing through a game rather than simply reading a story.  

Dialogue between characters is facilitated through separate text windows designed to appear as instant-message conversations, furthering the game-like aspect.  The comic itself is drawn in a several different styles: a highly iconic sprite-based style for most of the game-like interactions, a more realistically proportioned style for action and key narrative moments, and a loose scribbly style for some moments of humor.  The different art styles reinforce the nature of the events taking place, whether they are serious, humorous, informative, etc. 

The iconic artwork also makes the numerous characters easy to identify and differentiate.  Each character has a unique silhouette and features, as well as both a symbol and color they associate with.  In addition, the characters each have their own distinctive typing quirk and type in their own associated color (examples: ALL CAPS, no caps or punctuation, L33T SP43K, aLtErNaTiNg CaPs, iNVERTED cASE, etc.), which makes determining who is saying what during dialogue exceedingly easy and intuitive. 

Apart from the artwork and text, the comic makes fantastic use of layout design, using the website itself to enhance the narrative.  While the panels and text commands are presented front and center, the dialogue is collapsible and hidden behind a spoiler tag style button.  This differentiates the dialogue from the main text of the comic and adds to the interactivity between the reader and the comic.  Over the course of the comic, several walkaround style flash-based games have been embedded into the narrative, allowing the reader to take direct control of a character and move them around and have them interact with a virtual environment.  These flashes take the video-game motif of the comic to a literal level. 

During a segment of the comic that lasted several months, the website layout was used to an even greater extent with the inclusion of the banner space.  A second set of narrative events was depicted in this space simultaneously with the rest of the comic.  This allowed for three different narratives to take place on a single page of the comic: one in the main comic space, one in the dialog box, and one in the header. Soon after making this change, the author began making use of HTML’s alt attribute to add additional text to the comic which could be viewed by hovering the cursor over the header.  By taking advantage of the flexibility of web design, Homestuck expands its narrative space in new and unique ways for the benefit of the reader.