Webpage Redesign (I want opinions please)

[Metal_Solstice]

So I finally have my webcomic off the ground, but I find my webpage kinda minimalist at the moment, as it contains nothing but the comic itself. I figured I'd spruce it up a bit when I have some more pages done. Here's the redesign I got so far after looking at a few of the successful webcomics and seeing how they do their page. I've been designing the page in GIMP so far.



Keep in mind that some of the images are placeholders. Can you guess which ones? *cough* mostofthem *cough*

Things I need to do:
- Make the mechanical thingy around the header stand out from the background more
- Darker background
- Finish the header graphic. Investigate PHP random image rotation for it.
- Make a new non-animated "Metal Solstice" Logo
- Better navigation buttons (aka custom made and perfect)
- Work on details for the button bar
- Perfect my coloring techniques and digital art by the time chapter 1 ends (about 10-15 more pages). I want to do color, and the whole smooth line type thing is hard to do as I discovered. I'd rather draw like this (except less derp and more color, obviously).



Well, time to work on Wednesday's page. So excited as Monday is the 10th page! 10% of the way to 100 pages! Yay

[Metal_Solstice]

Someone spammed this thread with 5 advertisements about I phones, so I reported them and they are gone now

[LibertyCabbage]

I'd be pretty impressed if I saw this design on a live site. A lot of webcomics have very basic layouts, sometimes just a white background and the comic.

- Even with the shadow around the ad, it seems to kinda mesh with the banner. Maybe you could put the banner lower on the page somewhere?

- The industrial look's great, but judging from the screenshot, it doesn't seem to go with the comic's soft and bright art style that well. Maybe you could try making the background color lighter, and making the metallic parts less dominant. Although I see you wrote you're gonna color the comic, so it's gonna look a lot different.

- The rotating banner should be fairly simple to implement in Javascript or PHP. The easiest way's probably to name the files the same way, like banner0.jpg, banner1.jpg, banner2.jpg, and then code something like this: int = random number (0-2); img src=banner + 'int' + .jpg.

- The overlay navigation buttons are a nice touch, and should be fairly easy to do if you use z-indexing and a standard page size.

[McDuffies]

Conventional wisdom would say that when a reader loads the page, he should first see your comic or at least a part of it... that he shouldn't have to scroll for it. Perhaps you should consider making the area above the comic shorter, like putting logo right from the cast image, or moving the menu to the side... this is not set in stone, of course, but pages for older comics should definitely be more minimalistic. It would be a bit bothersome if you read through archives and have to scroll for the comic every time.

[robotthepirate]

- Finish the header graphic. Investigate PHP random image rotation for it.

SO going to steal that idea. Or a least try to and fail. My sites design is basic because I am a numpty!

Conventional wisdom would say that when a reader loads the page, he should first see your comic or at least a part of it... that he shouldn't have to scroll for it. Perhaps you should consider making the area above the comic shorter, like putting logo right from the cast image, or moving the menu to the side... this is not set in stone, of course, but pages for older comics should definitely be more minimalistic. It would be a bit bothersome if you read through archives and have to scroll for the comic every time.

I sometimes wonder if it's better to have a foyer page rather than have the comic on the first page. That way you can have fancy banners and links to extra content all the BAM look at this stuff in one place and get it out of the way so that people can simply click a link to the first or the latest comic and get on with it.

One thing I did for RTP is set up a page jump so that once the page is loaded it jumps so the top of the comic is at the top of the page, this hopefully means no scrolling for anyone. Though I imagine in the few seconds it takes for the page to finish loading most people scroll anyway.

[Bustertheclown]

I feel like colored and textured backgrounds call for colored comics.

[Phact0rri]

The buttons floating ON the comic, seems a little counter intuitive. For info centric webdesign (like say a blog or a comic) one should build a site around the content, not the content around the design.

[robotthepirate]

The buttons floating ON the comic, seems a little counter intuitive. For info centric webdesign (like say a blog or a comic) one should build a site around the content, not the content around the design.

Unless you can do one of those cool things where they only appear when you hover your mouse there. That seems very "in" at the moment.

[LibertyCabbage]

- Finish the header graphic. Investigate PHP random image rotation for it.

SO going to steal that idea. Or a least try to and fail. My sites design is basic because I am a numpty!

I grabbed this from the comic I'm reviewing. Easy peasy.

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = 'http://i288.photobucket.com/albums/ll17 ... banner.jpg'
theImages[1] = 'http://i288.photobucket.com/albums/ll17 ... Wallis.jpg'
theImages[2] = 'http://i288.photobucket.com/albums/ll17 ... istant.jpg'
theImages[3] = 'http://i288.photobucket.com/albums/ll17 ... nnerMH.jpg'

// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer = new Image()
preBuffer.src = theImages
}
var whichImage = Math.round(Math.random()*(p));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

// End -->
</script>

[McDuffies]

I sometimes wonder if it's better to have a foyer page rather than have the comic on the first page. That way you can have fancy banners and links to extra content all the BAM look at this stuff in one place and get it out of the way so that people can simply click a link to the first or the latest comic and get on with it.

It's been said that at average you have something like ten seconds to grab the reader before he moves on to the next site, so if he has to do an additional click to get the idea what kind of content he's looking at, the chance you'll lose him increases dramatically. It's a scary thought that people have that little attention span, but competition of all the sites for his attention is huge.

[Metal_Solstice]

I feel like colored and textured backgrounds call for colored comics.

I plan on coloring the comic. Just finally got the tools and the know-how to successfully do so. Thanks to LazyNezumi, a general purpose drawing stabilizer doohicky.

Unless you can do one of those cool things where they only appear when you hover your mouse there. That seems very "in" at the moment.

That's actually what I hope to do, if I can figure out how. I've seen scripts that change a picture to a different picture when you hover your mouse over it, so all I need to do is have a completely transparent picture (I think)

It's been said that at average you have something like ten seconds to grab the reader before he moves on to the next site, so if he has to do an additional click to get the idea what kind of content he's looking at, the chance you'll lose him increases dramatically. It's a scary thought that people have that little attention span, but competition of all the sites for his attention is huge.

That's good to know. Since some of the Banners I'm planning are going to be action-packed (however there will be no action for quite a while, as the mechs aren't even built yet) it should be attention grabbing.

Conventional wisdom would say that when a reader loads the page, he should first see your comic or at least a part of it... that he shouldn't have to scroll for it. Perhaps you should consider making the area above the comic shorter, like putting logo right from the cast image, or moving the menu to the side... this is not set in stone, of course, but pages for older comics should definitely be more minimalistic. It would be a bit bothersome if you read through archives and have to scroll for the comic every time.

That was one thing I was bugged with, too. With my resolution (1280x1024) I can see about a fourth of the comic or so. But my concern is those people with smaller resolutions. If I cropped the skull-looking fellow out of the banner It would give me a bit more room (it doesn't appear for a while anyway).

I'm also considering moving the button bar further up the page.




So, taking all these things into consideration, I've fiddled with the layout (graphics are still a WIP) and have cropped it to approximately what will be visible at resolutions smaller than my own (the page shown is Friday's page, the first page in color):

At a screen height of 600 (yuck!)


At a screen height of 768


At a screen height of 864


At a screen height of 1024


Yes, I had to lampshade the switch to color (however the color is already improving in upcoming strips). Why else would Bob be so pensive?

BTW: this is going to be fun to code

[IVstudios]

I sometimes wonder if it's better to have a foyer page rather than have the comic on the first page. That way you can have fancy banners and links to extra content all the BAM look at this stuff in one place and get it out of the way so that people can simply click a link to the first or the latest comic and get on with it.

It's been said that at average you have something like ten seconds to grab the reader before he moves on to the next site, so if he has to do an additional click to get the idea what kind of content he's looking at, the chance you'll lose him increases dramatically. It's a scary thought that people have that little attention span, but competition of all the sites for his attention is huge.

I'm guilty of this quite often myself. You're comic, or at the very least at prominent "click here to read the latest comic!" link, needs to be the first thing I see. I can't tell you how many times I've gone to a website and experienced:

1. Okay, let's see where's the comic? Store, Email, Main, Home, Archive… is it "Home?"
2. *Clicks Home*
3. No that's the page I was just on. How about "Main?"
4. *Clicks on Main*
5. No that's just like a blog or something. Let's try the "Archive."
6. *Clicks on Archive*
7. Okay, I see a bunch of chapter titles, but none of them are numbered so I have no idea which is the first and which is the last… I wonder if The Spoony )ne put up a new video yet.
8. Goes to spoonyexperiment.com.

[McDuffies]

Cropped head doesn't look that good... I wouldn't change the image too much, it seems striking and informative of what kind of site you're on, better to keep it as it is. Better idea is making logo smaller, there's a lot of space around "Metal Solstice" letters. Also possibly making menu vertical and moving it elsewhere, like left from the comic.
Of course as long as you're using javascript to rotate banners, you can also write a code snippet to check the resolution and then arrange elements depending on said resolution.

[Metal_Solstice]

Been a while. I've done some fiddling to a new color scheme that fits with that blue comic genesis banner on the top (I haven't updated the advertisement banner yet though )

Less ugly. Less is more, yes?


Created in GIMP. I haven't built it in dreamweaver yet... I probably should.

I also should start getting myself out of my hiatus of derp.

[LibertyCabbage]

I think this looks really good. The text in the buttons should be centered, though, obviously, and "current page" can fit on one line.

Also, don't forget your "hosted on Comic Genesis" footer, or the Webcomic Police might arrest you. You might also wanna consider adding that 150x300 "newsbox" ad somewhere.

[Metal_Solstice]

I think this looks really good. The text in the buttons should be centered, though, obviously, and "current page" can fit on one line.

Also, don't forget your "hosted on Comic Genesis" footer, or the Webcomic Police might arrest you. You might also wanna consider adding that 150x300 "newsbox" ad somewhere.

Thanks! Now I have to break out Dreamweaver :S