Webpage Redesign (I want opinions please)

For discussions, announcements, non-technical questions and anything else comics-related or otherwise that doesn't fit in any of the other categories.

Webpage Redesign (I want opinions please)

Postby Metal_Solstice on Sun Apr 01, 2012 5:25 pm

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.

Image

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).

Image

Well, time to work on Wednesday's page. So excited as Monday is the 10th page! 10% of the way to 100 pages! Yay :roll:
Image
User avatar
Metal_Solstice
Newbie
 
Posts: 16
Joined: Tue Feb 14, 2012 8:00 pm
Location: Under a rock-shaped chameleon

Re: Webpage Redesign (I want opinions please)

Postby Metal_Solstice on Mon Apr 02, 2012 5:31 am

Someone spammed this thread with 5 advertisements about I phones, so I reported them and they are gone now :)
Last edited by Metal_Solstice on Mon Apr 02, 2012 2:16 pm, edited 1 time in total.
Image
User avatar
Metal_Solstice
Newbie
 
Posts: 16
Joined: Tue Feb 14, 2012 8:00 pm
Location: Under a rock-shaped chameleon

Re: Webpage Redesign (I want opinions please)

Postby LibertyCabbage on Mon Apr 02, 2012 1:57 pm

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.
ImageImage
"Seems like the only comics that would be good to this person are super action crazy lines, mega poses!"
User avatar
LibertyCabbage
Cartoon Hero
 
Posts: 4580
Joined: Tue Jan 25, 2005 4:08 pm
Location: bat country

Re: Webpage Redesign (I want opinions please)

Postby McDuffies on Tue Apr 03, 2012 3:37 am

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.
User avatar
McDuffies
Bob was here (Moderator)
Bob was here (Moderator)
 
Posts: 29937
Joined: Fri Jan 01, 1999 4:00 pm
Location: Serbia

Re: Webpage Redesign (I want opinions please)

Postby robotthepirate on Tue Apr 03, 2012 7:03 am

Metal_Solstice wrote:- 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!

McDuffies wrote: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.
Image Image Image Image
User avatar
robotthepirate
Regular Poster
 
Posts: 563
Joined: Wed Mar 02, 2011 11:02 am
Location: Staffordshire, UK

Re: Webpage Redesign (I want opinions please)

Postby Bustertheclown on Tue Apr 03, 2012 9:47 am

I feel like colored and textured backgrounds call for colored comics.
"Just because we're amateurs, doesn't mean our comics have to be amateurish." -McDuffies

http://hastilyscribbled.comicgenesis.com
User avatar
Bustertheclown
Cartoon Hero
 
Posts: 2365
Joined: Tue Oct 05, 2004 9:17 pm
Location: ATOMIC!

Re: Webpage Redesign (I want opinions please)

Postby Phact0rri on Tue Apr 03, 2012 9:52 am

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.
Image
<KittyKatBlack> You look deranged. But I mean that in the nicest way possible. ^_^;
User avatar
Phact0rri
The Establishment (Moderator)
The Establishment (Moderator)
 
Posts: 5775
Joined: Mon Feb 16, 2004 12:04 pm
Location: ????

Re: Webpage Redesign (I want opinions please)

Postby robotthepirate on Tue Apr 03, 2012 10:21 am

Phact0rri wrote: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.
Image Image Image Image
User avatar
robotthepirate
Regular Poster
 
Posts: 563
Joined: Wed Mar 02, 2011 11:02 am
Location: Staffordshire, UK

Re: Webpage Redesign (I want opinions please)

Postby LibertyCabbage on Tue Apr 03, 2012 11:59 am

robotthepirate wrote:
Metal_Solstice wrote:- 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/ll178/LunisIsland/Gloomversebanner.jpg'
theImages[1] = 'http://i288.photobucket.com/albums/ll178/LunisIsland/GloomversebannerWallis.jpg'
theImages[2] = 'http://i288.photobucket.com/albums/ll178/LunisIsland/GloomversebannerAssistant.jpg'
theImages[3] = 'http://i288.photobucket.com/albums/ll178/LunisIsland/GloomversebannerMH.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[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

// End -->
</script>
ImageImage
"Seems like the only comics that would be good to this person are super action crazy lines, mega poses!"
User avatar
LibertyCabbage
Cartoon Hero
 
Posts: 4580
Joined: Tue Jan 25, 2005 4:08 pm
Location: bat country

Re: Webpage Redesign (I want opinions please)

Postby McDuffies on Tue Apr 03, 2012 1:10 pm

robotthepirate wrote: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.
User avatar
McDuffies
Bob was here (Moderator)
Bob was here (Moderator)
 
Posts: 29937
Joined: Fri Jan 01, 1999 4:00 pm
Location: Serbia

Re: Webpage Redesign (I want opinions please)

Postby Metal_Solstice on Tue Apr 03, 2012 2:59 pm

Bustertheclown wrote: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.

robotthepirate wrote: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)

McDuffies wrote: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.

McDuffies wrote: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!)
Image

At a screen height of 768
Image

At a screen height of 864
Image

At a screen height of 1024
Image

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 :o
Image
User avatar
Metal_Solstice
Newbie
 
Posts: 16
Joined: Tue Feb 14, 2012 8:00 pm
Location: Under a rock-shaped chameleon

Re: Webpage Redesign (I want opinions please)

Postby IVstudios on Tue Apr 03, 2012 3:12 pm

McDuffies wrote:
robotthepirate wrote: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.
Image
User avatar
IVstudios
Cartoon Hero
 
Posts: 3608
Joined: Sun Dec 14, 2003 11:52 am
Location: My little office

Re: Webpage Redesign (I want opinions please)

Postby McDuffies on Tue Apr 03, 2012 4:34 pm

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.
User avatar
McDuffies
Bob was here (Moderator)
Bob was here (Moderator)
 
Posts: 29937
Joined: Fri Jan 01, 1999 4:00 pm
Location: Serbia

Re: Webpage Redesign (I want opinions please)

Postby Metal_Solstice on Fri May 11, 2012 6:49 pm

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 XD)

Less ugly. Less is more, yes?
Image

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.
Image
User avatar
Metal_Solstice
Newbie
 
Posts: 16
Joined: Tue Feb 14, 2012 8:00 pm
Location: Under a rock-shaped chameleon

Re: Webpage Redesign (I want opinions please)

Postby LibertyCabbage on Fri May 11, 2012 7:12 pm

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.
ImageImage
"Seems like the only comics that would be good to this person are super action crazy lines, mega poses!"
User avatar
LibertyCabbage
Cartoon Hero
 
Posts: 4580
Joined: Tue Jan 25, 2005 4:08 pm
Location: bat country

Re: Webpage Redesign (I want opinions please)

Postby Metal_Solstice on Sat May 12, 2012 6:28 am

LibertyCabbage wrote: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
Image
User avatar
Metal_Solstice
Newbie
 
Posts: 16
Joined: Tue Feb 14, 2012 8:00 pm
Location: Under a rock-shaped chameleon


 

Return to General Discussion



Who is online

Users browsing this forum: No registered users and 1 guest