Testing ns website design

Andos

Was bored so I tried to merge together some infestation found in the media pack and this is what I came up with:
<a href="http://andos.stiaxies.net/ns/" target="_blank">http://andos.stiaxies.net/ns/</a>

I might make the header smaller but wider. Also maybe the infestation looks a little flat/awkward.
But what do you think?

slayerkl2

I think its cool. A suggestion would be have a navi box off to the left too though.

NEX9

na be diffrent have the navi box on the right

zone_Blackwolf

like it,... but a nav is required <img src="style_emoticons/<#EMO_DIR#>/smile-fix.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile-fix.gif" />

Andos

Thanks <img src="style_emoticons/<#EMO_DIR#>/smile-fix.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile-fix.gif" />

Yeah hehe the design needs a menu/navbar. I think I would put it to the right for once, in all my other designs they are either at the top or at the left.

FFSkyrider

Looks cool to me. Nicely done, and as you already said, the top should be smaller indeed.

Kouji_San

Even though the top image looks awesome, people who use the 1024*768 resolution for their desktop could find this annoying. Ever worse, people who still use 800*600 would only see this image and have to scroll down every time when going to another subpage, plus the fact that they would have to scroll horizontally. Currently it takes up an huge space, perhaps try and integrate the site interface into it or something.

[edit]
You might even want to ignore this, since I was looking at it from a buisiness sitedesign angle. But since this is a game related website, people usually have 1280*1024 or greater resolutions anyway. Also when going over the 1280 boundry, smaller sites tend to look VERY small <img src="style_emoticons/<#EMO_DIR#>/smile-fix.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile-fix.gif" />

Andos

Kouji_San:
Thanks for the criticism <img src="style_emoticons/<#EMO_DIR#>/wink-fix.gif" style="vertical-align:middle" emoid=";)" border="0" alt="wink-fix.gif" /> I tried resizing the screen back to 1024x768 with web-developer toolbar for firefox but the design looked fine there. I know 800x600 users will find the design annoying but people with that resolution isn't really in my target group <img src="style_emoticons/<#EMO_DIR#>/wink-fix.gif" style="vertical-align:middle" emoid=";)" border="0" alt="wink-fix.gif" />

I made the top image smaller and added a nav-bar: (same url)
<a href="http://andos.stiaxies.net/ns/" target="_blank">http://andos.stiaxies.net/ns/</a>

You can see the old design for reference here:
<a href="http://andos.stiaxies.net/ns-old/" target="_blank">http://andos.stiaxies.net/ns-old/</a>

Do you think it would look better if the page was centered in the browser?

Kouji_San

Me personally, I like the new version better, the top image isn't a dominant anymore compared to the other one. About not supporting 800*600, I wholeheartedly agree ^^ My motto is "Stop living in the past and upgrade your monitor" Some people are just to stuborn if you ask me and need a wakeup call...

The centered "to be or not to be" is kind of personal preferance. I like sites which are able to have their contents fillout the sitespace to not leave any "blank" areas (like this forum for instance).

If a site isn't able to do this, usually sites using a static layout with a set width, I'm guessing it's what your site is going to use. It's better to center a site on the page, to balance things out.
It just doesn't look that good on 1280*1024 or above (even 1024*768 in very "thin/tall" sites) when a static layout site is cornered on the far left or right just to leave a large open space on the other side of the page. It could work for some site designs, but IMHO it looks bad most of the time.

However as I said, it's still personal prefereance though. The overall darkness of the site in combination of the black background could push this "wide open space" into the background. And that would make your site fall into the category of "some site designs" ^_^ You could even try and create a background image watermark or something break up the flatness of this open area (think TSA/Kaahra logo) Or as some sites do. a 1x2 pixel *.gif image, with 2 black colors (one a little bit edging towards grey). In effect creating vague scanlines

But now I'm meddling in your site design, so I'll stop here <img src="style_emoticons/<#EMO_DIR#>/biggrin-fix.gif" style="vertical-align:middle" emoid=":D" border="0" alt="biggrin-fix.gif" />

Solitario

very nice, I like it! <img src="style_emoticons/<#EMO_DIR#>/smile-fix.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile-fix.gif" />

Andos

Ok I centered the layout, changed widths, retouched some graphics, added some background images and some other stuff. I don't know about the planet at the bottom though, I think it looks all right but maybe it isn't the best place to put it.

I will be adding materials, a few tutorials and maybe some tools to ease the creation of Natural Selection 2 maps. More on that later though, I first want to have this look somewhat right <img src="style_emoticons/<#EMO_DIR#>/smile-fix.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile-fix.gif" />

New design:
<a href="http://andos.stiaxies.net/ns/" target="_blank">http://andos.stiaxies.net/ns/</a>
<a href="http://andos.stiaxies.net/ns/textutorials.php" target="_blank">http://andos.stiaxies.net/ns/textutorials.php</a>
(Ctrl+F5 the page if it's still cached)

Old for reference:
<a href="http://andos.stiaxies.net/ns-old/" target="_blank">http://andos.stiaxies.net/ns-old/</a>
First design for reference:
<a href="http://andos.stiaxies.net/ns-old-old/" target="_blank">http://andos.stiaxies.net/ns-old-old/</a>

NEX9

looks awsome

CoolCookieCooks

It looks very interesting but not quite finished yet. The TSA logo texture doesn't look right there, try using different effects on it.

NEX9

argh yep i see it now... sorry to pro alien to look at anything rine *hides that logo just means food to me

SteveR

First of all nice design! I like the planet at the bottom, could house legal mumbo jumbo & contact info?

Second, if you do tutorials of source texture creation I'll be at your site all the time. Especially if it's NS oriented. Oh the joys!

Thirds! criticisms. Photoshoppery first: C3 is right about the tsa logo. Doesn't work on that effect done. Looks blurry, weak, super imposed. Use overlay/ multiply / colour burn modes and obscene amounts of layering to get a more deep, worn and essentially real effect. The alien flesh on the header doesn't feel to me likes it's really stuck on the metal. It's just resting over with some soft low opacity erasing done around the edges. It wants blending. Try fusing the images together with the various overlays and even if used frugally the filters. And where's the site name in that large space!

Now for site design: I like it! Colours, layout, ease of use, visibility of information. All is clear.

Smaller fonts and clearer, more integrated page headings would be good. The navigation box is currently marked by two lines. Loose the horizontal one would make it cleaner. Just like a 2nd column over on the right. Would look nicer.

Good work!

Andos

I tried making the infesting look more like it was attached to the wall but I don't know how well I succeeded <img src="style_emoticons/<#EMO_DIR#>/wink-fix.gif" style="vertical-align:middle" emoid=";)" border="0" alt="wink-fix.gif" />
+Rounded the corners on the marine so he didn't have visible polygons.
+Changed some infesting.
+Added a temporary page title with some slime/web over it
+Smaller font than before
+Menu now has the line all the way down.
+A little favicon ;P
+Added a slight background graphic in the main content are.

I honnestly have no idea what to put on the empty gray wall <img src="style_emoticons/<#EMO_DIR#>/tounge.gif" style="vertical-align:middle" emoid=":p" border="0" alt="tounge.gif" /> I originally had the page title there, but that text i made looked best in the dark area. I don't know how the page title could look in order to fit there.

Edit: The link is the same: ( <a href="http://andos.stiaxies.net/ns/" target="_blank">http://andos.stiaxies.net/ns/</a> ) but Ctrl+F5 if the page is still in your browser cache to see the changes.

Lt.Realness

I think it's good but the infestation shouldn't cover the hive <img src="style_emoticons/<#EMO_DIR#>/tounge.gif" style="vertical-align:middle" emoid=":p" border="0" alt="tounge.gif" />

SteveR

Good changes! now add some contents!

I've been looking at the code and it's solid! Still don't know how you got the page centred so nicely, was it #container margin-left/right : auto?

plus I think you could use a more traditional serif font (such as the NS logo) for the title text (anders' NS tools) because the arial black or whatever you've chosen there doesn't really suit the imagery around it.

NEX9

Ooow webed text

Kouji_San

<!--quoteo(post=1597043:date=Jan 10 2007, 12:43 PM:name=SteveR)--><div class='quotetop'>QUOTE(SteveR @ Jan 10 2007, 12:43 PM) [snapback]1597043[/snapback]</div><div class='quotemain'><!--quotec-->
Good changes! now add some contents!

I've been looking at the code and it's solid! Still don't know how you got the page centred so nicely, was it #container margin-left/right : auto?
<!--QuoteEnd--></div><!--QuoteEEnd-->
Perfecly centering a site is quite easy using css. This is what I use:

A 740x560 site with a div container for the entire site with class "centered" using:

.centered {
position: absolute;
top: 50%;
left: 50%;
margin-left: -370px;
margin-top: -280px;
height: 560px;
width: 740px;
}// this will center a site of 740x560 precisely in the middle of the page (horizontal/vertical centered)

---------- or

.centered {
position: absolute;
top: 0px;
left: 50%;
margin-left: -370px;
width: 740px;
}// this will center a site of 740x560 perfecly horizontally

SteveR

I was under the assumption (being slightly out of touch with web design) that you needed a lot of fudge to get mozilla browsers (yes even our beloved firefox) to understand centring. Where you can div {text-align : center} for IE I thought you had to use something like <a href="http://www.thenoodleincident.com/tutorials/box_lesson/basic_centered.html" target="_blank">this</a> for all them safaris and such. Why are web browser names weird?

Kouji_San

This works both in mozilla, IE and also works on w98,w2k,wXP. For some reason my old center css screwed something up on other operating systems. But to get the best css compatibility is to use a browser detection and import the relevent css. Yet browser detection is also not 100% flawless...

It's just freakishly annoying to have all these browsers and OS (MS,mac,linux,more...) and both of them combined to keep in mind....

Andos

I'm currently writing some tutorials for the page but there is no updates yet.

Tell me about it <img src="style_emoticons/<#EMO_DIR#>/wink-fix.gif" style="vertical-align:middle" emoid=";)" border="0" alt="wink-fix.gif" /> IE6 is the most annoying browser to take care of but I don't think this design has any problems in it. If it was it is properly the CSS i added to make the planet position nicely at the bottom of the page when the site has scroll-bars (IE6 can't find out using min/max-width/height properly)


This centers the layout horizontally in the screen:
<!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->.page{
width: 750px;
margin-left: auto;
margin-right: auto;
}<!--c2--></div><!--ec2-->
(you don't even have to do any math) <img src="style_emoticons/<#EMO_DIR#>/wink-fix.gif" style="vertical-align:middle" emoid=";)" border="0" alt="wink-fix.gif" />
Just remember that in order to center a div properly in the screen you need to give it a width or else it will try to use as much space as possible and the automatic margins doesn't work.