Design Help

[Tyris]

Hi...
I'm not sure if this is the right forum for it... but I guess my questions are to do with graphics and templates... so its all good ^_^

basically I'm looking for feedback on the layout I'm doing for this new network site:
http://wip.square-cubed.com/nintengu/

I'm looking to change the black text to another more fitting colour (and ideas welcome!!)
The banner is also dodgy.. coz it was designed for another layout.. so it doesn't look to great.. so I'll change that too (again, any suggestions welcome)...
The link colours I'd also like some feedback on.

Basically gime feedback on things that are good and bad, and what I can change to make it better 

[charlottezweb]

You asked for it, so here it goes!  Just kidding...

Actually, overall I like it.  I don't think I'm a fan of the color scheme, though it might grow on me.  A few comments...

1.  I'm not really "feeling" the sliced off top left corners.  I think the white fade at the tops and bottoms conflicts with that.  Do one or the other maybe?  I don't know.

2.  I think if you use that color for those text boxes, you're going to have to stick with black (or white I guess).

3.  This is VERY picky, so ignore me if you want   The link is a drawn image whereas the others look comp-generated.  That's kinda weird to me, but I'm just being picky there.

Overall, I like the look and feel, I'd just play with the colors a bit more

Jason

[Tyris]

ok, cool thanx for the advice

With the Link's.... I think I'd keep the concept art version and change the computer model... but then he still confilcts with the rest... I dunno....

the sliced of corners... hmmm... I thought it looked a bit dull with the fade but nothing else... but the corners were really hard to make look good... that was the best I could come up with...

Black only for the text you think..? well I'll have a play around with text colour AND actual layout colours too and see what I can come up with.

Another mate who's an absolute god at web design gave me another few pointers... I'll try and implement them on the weekend and then see what people think...
again, thanx ^_^

[charlottezweb]

No probs!  As far as the text boxes...I didn't say it was bad necessarily, just maybe an overkill.  I think it may just but the purple that's bugging me

Oh, and when I said "The link" above, I meant "The Link" as in the character, but I guess you figured that out already. 

Jason

[Tyris]

heheh, there must be really something wrong with my monitor.. coz everyone reckons its purple... but to me it looks make bluish... I guess nearly purple... but not quite there... maybe I should work on a proper computer instead of my laptop... :\
And yeah, I know who you meant by Link

I'll try some different colours for like... well all of it tonight... thanx again for the input.
^I'd try earlier... but I got a DDR pad to finish repairing (stupid crappy import pad.. my home made ones were sooo much better) and a friend comin over too...

[[Unknown]]

I think the Link character looks good like that - as he appears in the game.  It also is good - imho - that you put it in the top right corner.

I also find that a short footer, even a copyright, helps to stablize a layout a bit... another thing I'd recommend, although it would take a LONG time, is to make the blue background with the logo in it a separate image, which is something more like 2048 pixels wide...

Then, you put it as the background for the table or div... whatever, and align the Samus/N64 Link on the left, and Mario/GC Link on the right... and center the logo.  You could still get the Mario-overlap effect in there even.

I say this because - although you probably won't do it because it's a whole load of work - the layout looks VERY empty at 1024, and would look increasingly empty on higher modes.... just because 800x600 is the most common doesn't mean that 1024 isn't a fairly close second.

-[Unknown]

[Tyris]

Thanx for the comments and input but they're both actually GC Links the "Adult" one is actually from Soul Calibur 2 (a graphic render, and the other is a concept shot for "Cel-da").

As for the big RES's... I almost ALWAYS design my layouts to be dynamic in terms of viewing... usually just have scrolling images etc.
However, for this one I thought I'd break my general rule for once... I'm viewing it on 1400X1050 so I can see what you mean...
However it all kinda fits in... and I find that on a big screen its kinda nice for it to be nice and tight in the center...
For sites with no border (like Square-Cubed, my other site... or this SMF site) I use dynamic... coz it all scrolls out and fits... but with layouts that have a border... like the one I'm doing now... it always looks a bit dodgy if there isn't a bit of buffering around the sides... perhaps a pattern or colour fade in the background would make it look better.

As for using div's... I've used em before... they're all nice and cool... but are they supported on most browsers...? I was always a little worried with using divs coz of that.. on the other hand I usually only dev for IE anyway... but if you tell me how much support there is I could do what you said pretty easily... (mainly coz the layout is a multilayered photoshop image... so I'd just have to split the layers up right).
I think I'd also make the background just a single repeating image... would be alot smaller than a 2048 pixel textured image
most of that could be done with tables tho couldn't it...? except the overlapping Mario I guess... (o.. notices you mentioned a table too)

Thanx a heap for all the input
I'm gonna try it all out this weekend

I'll also chuck in a copyright disclaimer... tho I'm at a loss for how to chuck one in (below or inside the border)...

finally... is the a center thing for divs...? to get it exactly centered... or does it have to be offset from left or right...? (I havn't used any div stuff for a looooong time)

[[Unknown]]

<div align="center">stuff</div> or <div style="text-align: center;">stuff</div>

http://www.w3schools.com/css/pr_text_text-align.asp

Both work in Netscape 4 and IE 3.... should be safe .

And, my bad on the Sould Calibur Link.. haven't tried that game yet.

-[Unknown]

[Tyris]

aaaa, so center does work... cool
I used mostly css to align it all last time I used it.
works in Netscape.. cool, what about Mac browsers...?

(come to think of it... I think I may have actually learnt some of my css from that site )

Soul Calibur 2 is great imo... like 120 moves per character very cool. And link is cool too... tho he has an incredibly dodgy throw (instant ring out). XBox version looks the best... but GC version has sold the most ^_^
I got the shot of Link of the SC2 site... but he is basically following in the OOT and Majora's Mask theme... and more specifically the short clip they showed at spaceworld 2001 (or was it 2002...) of adult Link vs Gannon (whaa! that clip still blows me away )

*edit*
also... the copyright.. where do you suggest I put it??
and seriously: Thanx a heap for the help!! I really respect your input and help!

*edit 2* I remember why I was worried about divs now... when I last used them I used layers... and I'm not really sure what borwsers layered divs are supported on (you know?)
Also... because you can't have transparent jpegs... I'll have to use gifs.. what do you reckon a total page size should be (in kb) and and what size should just the banner be?

[Tyris]

*updated*
ok... I decided against doing the dynamic page coz it was gonna be too damn impossible to get rid of the semi transperencies on all the images.... that being said I did it anyway and came up with a somewhat dodgy blending method that seemed to work pretty well ^_^
I changed the background of the image (still photoshoppy... but alot better imo). and made it all ... scrolling and stuff (didn't use divs... mainly coz I cant quite remember how ). How do you make divs overlap without using absolutes..? can it be done (and are absolutes commonly supported...?)

I think it looks a bit too stretched on my 1400X1050 screen... so is there any way to limit the size... I know how you can make a minimum (just a minimum width table inside)... but can you make a maximum...?
and is there any commonly supported way of displaying extra images in the banner if its beyond a certain width...? (I guess the div overflow line could be useful... but are most Netscape users on 6.0+?)

Still quite a bit of work left to do with it.. but I'd appreciate any extra pointers as I work on it
Thanx guys!

[[Unknown]]

The best way I can think of would have to be Javascript.  You can find the screen size and set the table width, as well as turn on/off images.

Well, I would use a table in this case, because you want stuff justified right/left.... but, you can do it with divs... it's just more annoying .

-[Unknown]

[Tyris]

mmm, yeah, I thought javascript would be the only way... I'm always a little hesitant to use it coz some people have it turned off. that and you need to write the script for like 3 different browsers coz they all use different code *grumble grumble*

Also.. now it doesn't fit on an 800X600 window coz I made the right image the same size as the left one so that the middle part can be centered... how would I do that using divs... (like have the outer images aligned left and right repsectively... and then the center one centered...?)

Thanx

*edit*
nm... I got it to do it with tables so its all cool now...
however, I got a friend complaining about graphic quality (he's a 56ker but still wants good quality graphics)... of course this is hard to achieve using gifs... I got em fully bloated at 256 colors atm... but I cant do it with jpegs coz they wont do transperencies... any other possibilities? (keeping in mind the right hand side needs to fits in with the rest of the scrolled image below it).

[[Unknown]]

<div style="background-image: texture.jpg; width: 90%;"><table style="width: 100%; background-image: logo.jpg; background-position: center center;"><tr>
  <td align="left">left-image</td><td align="right">right-image</td>
</tr></table></div>

All can be done with HTML .

http://www.w3schools.com/css/pr_background-position.asp

-[Unknown]

[Tyris]

aaa, sweet!! thanx man!!
now I can get some overlapping going

I'll try and get the whole design complete over the week...

any ideas for the quality problem with the gifs/jpegs...?