Testing ns website design
Andos
Join Date: 2003-10-17 Member: 21742Members
Join Date: 2003-10-17 Member: 21742Members
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?
<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?
Comments
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.
[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" />
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?
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" />
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>
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!
+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.
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.
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
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....
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.