WEBCOMIC Webdesign for the Beginner

Posted April 6th, 2009 by KEZ

In my previous article on webdesign, the point that I wanted to get across was that you need to design a site before you jump into coding that site.   Well, that’s all well and good, but how do you know what you should have, and where you should have it? Webdesign is often a simple and logical thing. The most visited sites out there with the highest traffic always have certain elements in common.  The same goes for the most visited webcomic sites.

Here is what you need to design for as you go about creating your webcomic website:

1: TITLE

Preferably, this should be a graphic. Comics, whether on the web or not, are a graphical medium! A text title shouts “I’m boring and too lazy or inexperienced to make my own logo!”  While I may often use title graphic and logo synonymously, I should point out that they are NOT always the same thing. You can have your logo on TOP of a title graphic.  Your logo is either your comic’s title, with or without an accompanying image that is recognizable at large and small sizes, or a symbol that stands for your comc title. For example, Xyliatales, Wayfarer’s Moon, and No Need for Bushido. Your title graphic or banner may include that as WELL as more graphics.  For example in increasing size/complexity, Gunnerkrigg Court, Galaxion, Calling Home, LadyStar.

Well, how large or small should your title be? I’m not much keen on taking sides in the text vs. graphics web battles, especially since the internet is so bloody fast nowadays. Good webdesign puts the focus on where it needs to be (in this case, your comic) while ALSO focusing on fast loading and solid aesthetics, but at the same, as comic creators, we know we need to brand the site.  I usually see SMALL title/logo graphics when people want to have above the fold ad space. I usually see LARGE graphics when ads are not part of the site.  I see small graphics on image-lite sites with the “validated” text at the bottom. I see large graphics on sites made by beginners who haven’t yet learned how to get large impact out of a small area.  The bottom line: your title or logo needs to be LARGE enough it will be seen and recognized by new visitors, and small enough that more important content is readily visible without a scroll.

2: SITE NAVIGATION MENU

I’m going to make a quick distinction here between SITE navigation, and ARCHIVE navigation, so no one gets lost. Site navigation is your links to other webpages. Archive navigation deals only with the comics.  Either directly beside your title or underneath it, you need to have your site navigation menu. This menu can be horizontal or vertical, but it definitely must be above the fold, and given priority over other content (the comic, the comic navigation, buttons, other non-essential images). Your “Home” button/link needs to be FIRST in the list even if you are ordering the rest of the list alphabetically. All other page links should appear either in order of importance or alphabetically. I prefer to order buttons in order of importance, or really, which pages a new visitor would want to visit first: “Home, Archive, Cast …….. Links, About.” I have “about” as last because generally that link is always last, and that is where I am accustomed to seeing it.  Buttons/links on either end of the menu get seen more, which is generally how it works. Between cast and links is where my other pages go.

3: COMIC NAVIGATION MENU

I’m going to say this now: first, I already wrote an article on the necessity of having the FULL comic navigation menu, below AND above the comic if your comic extends below the fold. Second, I HATE ComicPress’ design of having comic navigation in the SITE navigation menu. It’s disorienting, and it means you most often DON’T have the 4 necessary links (first/prev/next/last) because there’s not enough room for all that crammed into your site menu.  I GUESS I understand the reasoning why it’s there (“navigation is navigation, right?” Wrong.), but they are two very separate systems! If you have CP and you have your comic navigation in the default place and you don’t have all four links, I strongly encourage you to change that!

Your comic navigation menu needs to be made using recognizable symbols, fonts and/or text titles. Don’t name these links as something inane and silly that only you understand! For example, a mega fail: “Baby Food, Granola Bars, Garbage Plate, Coronary.” As always, title things exactly what they are. Either first/beginning/start/etc; previous/prev/back/before/etc; next/tomorrow/after/etc; last/today/etc, or the appropriate symbols of double arrows and single arrows. Both together are good too.

4: YOUR COMIC

Please notice that your comic is FOURTH on this list. Not first, not second, not third. Your title and all navigation should appear above and/or left of your comic. However, as much as possible of your comic should appear above the fold. If your comic is on your front page and not immediately visible in a 1024×768  browser, you need to redesign your site, because you are only wasting room.  If your comic does not appear on the front page, then the links to the first page and most recent page must have prominence.

5a: BOTTOM COMIC NAVIGATION

(see section 3)

5b: NEWS/BLOG

It is very important that your blog or news area does NOT take precedence over your comic other more imporant comic elements.  There are ways to get around this using sidebars, twitter, or not blogging at all, but the safest place to have your blurbs is right below the comic AND bottom comic navigation. It is very annoying for some people to have to scroll through your news to find the “next” button/link, so don’t do that.  I already wrote an article about what should be posted here and when, so I’m not going to repeat myself.

6: FOOTER

Your footer is very important. It should not only contain a copyright block (copyright should also appear on your comic images), but also redundant “contact” information and other links of choice (for example, privacy policies).  It makes me very sad when I come to comic site that has no copyright block anywhere.  You may automatically own that copyright, but people online are thieving idiots. It’s best to explicitly and clearly state that “this”  is yours, and how to get in contact with you if people want to copy, use or redistribute. It won’t stop thieves from doing it anyways, but you do what you can.

————-

The above are my personal BARE MINIMUM recommended elements. Obviously, there is more you can include, but I do NOT recommend less.  Lastly, don’t forget to add alts and titles to your links and images! Webcomic sites OUGHT to be graphic-centered, in my opinion, but that means you need to do a little more to make your sites appear in search engines.

Next Up: Webcomic Website Review

3 Responses to “WEBCOMIC Webdesign for the Beginner”

  1. Joumana Medlej

    Hey there, this is Cedarseed from deviantART. As you know, I follow your writings on webcomics with interest and I wonder if you’d like to review my comic’s website. It’s a bit of a special case because it’s actually a print comic that I happen to also post online, so it’s bound to a non-webfriendly format and its own publishing schedule, but I’m sure your insights could be very useful for improving the site. Anyway, no pressure :) Keep up the writing,
    J

  2. Kez

    Hey J! As soon as I get through the next 4 people I’m supposed to review, I’ll be taking down names for the next set. I fear that if I just start a list, I’ll never get them all done, especially since you’re about the 10th person who asked. I will keep you in mind though, and post a notice here and on DA about opening up 5 more spots. Ugh, I have to get back on this. Been so busy lately!

    Thanks for the comment, sorry for the lack of any promise.

  3. Dirty Carrie

    *Hugs* I’ve been knocking around the thought of starting a webcomic for a while and this post was precisely what I was looking for. Thank you! I’m off to graze your archives.