Not signed in (Sign In)
    • CommentAuthorbuhbuhcuh
    • CommentTimeMar 24th 2011 edited
    I'm about to start putting together a site for a new webcomic that I am writing. As the medium dictates the media, my artist and I have been thinking hard about what it means to create a comic designed for the web.

    As much as I like to reinvent wheels, I know that I'm not the first person to think about this. Scott McCloud has done some interesting stuff with flash, and Daniel Lieske's "The Wormworld Saga" is a beautiful example of a scrollable comic.

    Are there other good examples out there? I'd love to see them!

    *The information capacity of a monitor is much less than that of paper - at least when we are talking about still images. The monitor also is typically a horizontal format, meaning that webcomics that are not designed to be printed are often done in a similar aspect ratio. Those that are designed to be printed can almost never show the full "page" at once.

    *Browsers are good at scrolling, so it makes sense to constrain your panels and pages in a way that no page/panel is larger than a "typical" browser window, but scroll through it.

    *Print comics translated to digital are typically presented in a highly skeuomorphic format that needs zoom controls to register detail on most monitors, taking away from full page flow.

    *Having a page that you can link to, and your readers can link to is important for any longer form project. Pagination also helps generate advertising revenue, if you are displaying ads on your site. How do you let your readers navigate through years worth of content easily? Especially if they "forget" about your comic for a few months.

    *Community chatter/comments can be helpful for engaging with readers, but can also take up valuable screen space that can be better used for art! Also: time consuming to moderate.

    *What do you do with social media? Facebook "like", twitter..ers.
  1.  (9683.2)
    Wormworld is very good in terms of its layout-- I remember Daniel (the author/artist) talking about it pre-release on another board, and I wasn't quite sure how it was all going to work-- as soon as I saw the completed version, well-- it clicked brilliantly for me.

    To me, the biggest function that a webcomic should strive for is Reader Intuition-- no reader should ever have to THINK about how to advance a page-- or get to your "character bios"-- or whatever other widget/bonus stuff you have...Navigation has to be completely thoughtless-- or you'll lose them.

    The Flash-based stuff drove me nuts (Re: Zuda) where upon loading a comic, I was presented with instructions on how to read the comic (page up and down/left right arrows)-- oddly, the one thing Zuda really never hyped was the "Full Screen" option-- which, as a former Zudite, was my preferred presentation of the comic I did there.

    Personally, I think that CONTENT trumps PRESENTATION-- that if you have an engaging story with great art, folks will read your comic no matter what stylistic container you decide to use-- In fact, I tend to think a reletivly bare-bones approach is the way to go-- Look at FreakAngels-- minimal bells and whistles-- and a quick load time. Just a quick glance and I know how to advance the page.

    One of the more popular webcomics around, The Phoenix Requiem is much the same. Click on the page to advance-- that's about all there is to it.

    That said, I have seen some neat nav stuff out there--

    When you load up Turbo Defiant Kimecan, you're faced with my loathed instructions again-- but they make it work within the boundaries of the page. Using it instead as a panel advance.

    You can't talk about Nav/Presentation without bringing up Nawlz, which I love-- but-- admittedly, makes you WORK to advance the story. Nawlz is just so goddamn beautiful that I think most readers are willing to put in the time.

    ReMind, which has been mentioned here in the past, takes an interesting approach by making itself a Blog first, and a comic second-- Jason Brubaker dubs his comic: "The Making of a Graphic Novel"-- so many of the page updates are supplemented with informative articles on how to self publish a GN-- it works for him, because the webcomic basically works as an advert for his hardcover edition. In a way, his readership is more invested in him as an artist than the story itself-- (not to say they don't come for the Comic-- but they also cheer his successes along the way)

    Finally, you're more than welcome to check out mine, Spy6teen-- It has taken a lot of tweeking (including killing the original layout a few months in), and even 37 weeks in, I'm still tinkering around with the layout and functionality/Navigation-- (Part of which is due to the fact that I'm a Comicpress Luddite)
    My big thing with the Spy6teen site was to make it feel uncluttered-- which is why I didn't junk it up with a 3 column layout-- instead, focusing the comic on the left side of the screen, with a sidebar running on the right.
    What's funny is that it was only within the last few weeks that I made the header clickable-- after I received some reader feedback when I removed the "Home" button.
    "Latest Page" and The "Jump To" buttons are all fairly recent as well -- In fact, I'm actually really happy with the Jump To buttons, as I think the images better showcase what we are as a Story-- less "superhero" and more "Alias/High School Spy"-- New Banner also helped with that as well..I think that was a lesson learned: That when a new reader visits your site, they should instantly be aware of the TONE of the comic, before even reading the page. Just something to think about...

    Personally, I'd avoid Chatter/Community rooms and your own Forum upon launch-- they'll really just collect dust-- focus instead on your comments section, and build your readership by replying meaningfully to each one you get. Eventually, your commentators will all start talking to each other.
    Lastly, I more or less feel that Social Media is a MUST-- you mentioned readers "forgetting" to check your site on update day-- Twitter/Facebook etc, helps remind them. Also, it's really useful in terms of networking with other webcomic authors to build relationships/help each other out.

    I guess the biggest thing I'd say on the topic is to stop thinking about the form and just start working on putting it out there-- You'll find your format as you go along, and you can "beta test" as you build your audience-- trust me, they're willing to suffer through some stupid mistakes you make-- and they're REALLY valuable for input on what's working and what isn't-- in fact, sometimes they'll tell you stuff you might not want to hear!
    • CommentAuthorbuhbuhcuh
    • CommentTimeMar 24th 2011
    Awesome, thanks for the links!

    I totally agree that content is more important than presentation, and it's always good to have a reminder that the comic is why the reader is there, not the shiny buttons.
    • CommentAuthordarrylayo
    • CommentTimeMar 26th 2011
    I just posted in a similar thread.

    Freak Angels is my favorite webcomic format for this style of graphic novelly webcomics.

    Honorable mention would go to my friend Liz Suburbia who does Sacred Heart. Her site was designed by our friend Kevin Czapiewski.

    On that note, I always liked the format of Steve Wolfhard's Cat Rackham, but he never updates the site, unfortunately. It's very simple. Each story is complete in a scroll format, accessible from the front menu of buttons. A lot of times I want to throw my pretension out the window and make a site as simple as this. It's so unassuming as a website. It asks nothing of its viewers. It's beautiful.
      CommentAuthorHEY APATHY!
    • CommentTimeMar 26th 2011 edited
    been looking at a lot of sites lately too ( as I attempt one of my own ) and it seems that the simple blog style layouts are always the best. Freakangels is really nice in the window but I think the limits the use of splash and double page spreads, which reminds me ...


    I kind of hate the ghetto coupon clip art look of wordpress websites but the fancy ones simply don't work. It took me three tries just to get into Nawiz and when I did, it froze & I gave up. I have this problem with most sites involving flash, stylish layouts or fancy animation. The simple websites let the reader access the comics no matter how crappy their computer is and they let the reader read rather than concentrate on navigating a labrynth.

    (maybe why Warren uses good old fashion wordpress ?)

    EDIT: @ buhbuhcuh- just "watched" the Scott Mcloud. I'm feel like I'm going to puke from motion sickness. The comic/art is cool but the panel movements make feel ill ( like staring at a moving spiral for too long)
    • CommentAuthorbuhbuhcuh
    • CommentTimeMar 27th 2011
    @darrylayo - thanks for the links. I do like the simple designs, they let the reader concentrate on the comic.

    @Hey Apathy - Haha, yeah, it's good that he is experimenting, but those particular experiments did not feel very successful. I kind of feel the same way about comic readers that animate between panels.
    • CommentAuthordarrylayo
    • CommentTimeMar 28th 2011
    @HeyApathy: I think that the double-page spread is specifically a storytelling tool to use in print comics. If you are presenting an original webcomic, then you don't use double-page spreads. And that's that. If you happen to be putting up work that was originally in print,, do the uncomfortable things and make the page clickable to a larger version (or something?)

    Just the mechanics of the screen--it'll never get bigger. The double-page spread works because of the mechanics of magazines and books. You have the sheets intended to be read individually but they are folded together. So you are able to play with the fact that they happen to form a double-wide shape. The screen does not do that.
  2.  (9683.8)
    @darrylayo- yeah it seems to be that way. The online presentation of comics ( and fine artworks) really changes the way we make work. It does seem odd to me that a number of sites seem to have a lot of unused space on either side of the screen and that a two-page spread fits perfect on a computer screen if it weren't for all the toolbars stuff using up the top 2-3 inches, yet there seems to be no solution. ( and yes I made a graphic novel consisting entirely of two page spreads just because my illustration/print publication professor told me it was not technically feasible)

    I also noticed page to page storytelling can get disrupted; the screen just doesn't lead our eyes around the same way as a book. An extreme example would be Sandman issue 10 page 10 when the panels turn horizontal forcing the reader to rotate the book sideways during a particular dream ( seen it in Cerebus too ). There are much more subtle techniques like this, all lost in the online translations.
    • CommentAuthordarrylayo
    • CommentTimeMar 28th 2011

    I am working on a new webcomic. I'm really excited! The design theory behind it is to make pages for the web, primarily. If I ever make a print version, it would be ugly and awkward. But that's okay because I think the primary market (web in this case) will be better served.


    I am excited to hear about your two page spread graphic novel. Like Miller's 300.

    If you webcomic it up, you might be able to use comicpress/WordPress and arrange your theme as the "comic strip" layout. It may still come out small (I cannot say) but I believe that this format will orient your spreads above the columns that constitute the rest of the website.
  3.  (9683.10)

    (maybe why Warren uses good old fashion wordpress ?)

    I seem to remember Warren talking about that when FA first started-- and I've heard it echoed a few times with design guys as well, basically when you're starting up a new site/project/techy thing, your best bet is to make sure that it'll run on the Lowest Common Denominator. Basically that someone with a x86 machine, with a 56k dialup modem should still be able to access and read your content...slow as it might be, they COULD do it.

    I'm running Spy6teen on the Wordpress/Comicpress platform-- yeah, it's cumbersome, not exactly the most user-friendly layout ever created, and there's a bit of "vanilla" to it-- but, once you start digging in, there are a number of tweeks you can do to get it looking like it's it own thing.
    The biggest thing for me is it's "plainness," oddly enough-- the fact that new readers are able to pop onto whatever page they happen to land on, and are already orientated to the site.
  4.  (9683.11)
    I also noticed page to page storytelling can get disrupted; the screen just doesn't lead our eyes around the same way as a book. An extreme example would be Sandman issue 10 page 10 when the panels turn horizontal forcing the reader to rotate the book sideways during a particular dream ( seen it in Cerebus too ). There are much more subtle techniques like this, all lost in the online translations.

    I know exactly what you're talking about there-- Bendis used that in-- Torso? I think...probably in Jinx as well-- little tricky/showy narrative device, but when used tastefully, it's really effective.

    Funny, I just thought about the frustration of reading a scene like that on an you tried to "turn" the "book" the screen would constantly orientate to landscape/portrait mode.
    Just got a mental image of a comic book reader pulling their hair out trying to catch a few words before the page flipped...makes me laugh.

    Huh...yup, that'll be a lost technique...
      CommentAuthorHEY APATHY!
    • CommentTimeMar 28th 2011 edited
    @ Tim Simmons - Spy6teen looks great online. simple, bold and very readable. I noticed you basically stuck to the widescreen format so that all the panels fit nicely on the screen. This is a sweet presentation (within the limitations of said issues, full page- double page and unusual spreads need not apply!).

    @darrylayo thought I'd google up that wicked 300 art to see how it was displayed online. 15 pages deep in the search engine and I found ... well nothing. Damn I was hoping someone already solved the issue. also let us know when you're design is up as we all love to see developments and new takes on the dreaded webcomic format. ( I'll post a link for mine when it's properly uploaded fer sure!)
  5.  (9683.13)
    I absolutely adore Top Shelf's reader and I'd love it for my own site. Simple and fast.
    • CommentAuthorbuhbuhcuh
    • CommentTimeMar 29th 2011
    @ William George
    The Top Shelf reader is really nice. I like how the header slides up, leaving just the comic. The navigation is well thought out as well. I'm a bit torn on the dynamic image reload - it's really nice to cut out the load times (and probably the server cost) of reloading the whole page, but there is no good way to link to a specific page except the first one. Still, good inspiration.

    @ Hey Apathy
    You should check that reader out - you mentioned the wasted inches on the top of the screen, hiding that header while you read is a slick solution.
  6.  (9683.15)
    @buhbuhcuh- hiding that header while you read is a slick solution. - maybe but it goes back to that catering to the biggest audience idea and any extra-instructions are going to hinder the comic reader's experience. In the future I'd like to see websites taking over the full screen when you enter them as the norm, that would be kind of cool.
    • CommentAuthorTim Simmons
    • CommentTimeMar 29th 2011 edited
    Spy6teen looks great online. simple, bold and very readable. I noticed you basically stuck to the widescreen format so that all the panels fit nicely on the screen. This is a sweet presentation (within the limitations of said issues, full page- double page and unusual spreads need not apply!).

    Thanks very much! Yeah, it's been a lot of experimentation in terms of the presentation over the 40-some-odd weeks we've been up. Yeah, I've been trying to find a solution to double-page spreads-- but, if we can't, it's fine-- just a limitation of the format. We do have a fullpage splash coming up in the next few weeks, which I think will sort of be the new "double page" if you will.
    Truthfully, in terms of print comics, I've never been a huge fan of the Double Page Splash anyhow-- rarely do you see it used for anything more than a bunch of heroes posing. (Although, that said: The 3-page spread that Kubert did in Astonishing Spiderman/Wolverine was REALLY impressive)--

    I absolutely adore Top Shelf's reader and I'd love it for my own site. Simple and fast.
    I just took a look at that-- that's pretty impressive! What is that, Java? Man, I'd love to figure out how to do those transparent page transitions! Really nice-- no real lag/load time either!
    • CommentTimeMar 30th 2011
    I tweaked ComicPress to allow for occasional pagespreads. You can see it at work between this page and the next (which isn't a double page but a strip, but the principal is the same). My page spreads aren't exactly twice as big as the single pages, but there's no reason why that wouldn't work.

    I've described the tweak as I was developing it in the ComicPress forum. (I'm Dreadfulgate there, btw.)
  7.  (9683.18)
    I haven't used ComicPress, but one trick for getting a two-page spread would be to make it come up in a DHTML window (like this, or this, where the window's draggable). Those are both Wordpress sites.

    Your reader would just need to click on an image, like in those two examples. The Javascript I'm using is based on this.
  8.  (9683.19)
    @ Vaeling - that's pretty good and simple. thanks

    @Bradley W. Schenck - this looks wild art/design and all! You're images look amazing (again art & design presentation).

    I see some problems with the extra clicks (making the image larger) in a panel to panel traditional comicbook. It's sort of a storytelling impact thing- you turn the page and ... BLAM! vs you turn the page, adjust you eyes to the small details, scroll over the image, click on it, then blam.
  9.  (9683.20)
    Yes, I can sure see what you mean. It's possible to have that DHTML window load when the page loads, too. That would be more seamless for the reader.

    I really only mentioned it because it's one way to make an image with a different aspect ratio come up without mangling the site template; it's still a nod to something you can do better in print than in a web version.

    Though now that I think about it, for a webcomic it might be sort of neat to have that load up on the page load. You wouldn't want that dark "veil" overlay, and you probably wouldn't care about making it draggable. But there could be something useful in there. One way or another you'd want the site's navigation to stay usable, though - and in some cases that would mean a click to close the big image... or on the other (which may be the third) hand, you could duplicate those nav buttons in the layout of the DHTML window, too.