Testing ns website design

AndosAndos Join Date: 2003-10-17 Member: 21742Members Posts: 267 Advanced user
Was bored so I tried to merge together some infestation found in the media pack and this is what I came up with:
http://andos.stiaxies.net/ns/

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

Comments

  • slayerkl2slayerkl2 RUFCKINGKETAMINE?????? Join Date: 2004-10-17 Member: 32324Members Posts: 469
    I think its cool. A suggestion would be have a navi box off to the left too though.
  • NEX9NEX9 Join Date: 2005-03-08 Member: 44299Members Posts: 1,642
    na be diffrent have the navi box on the right
    Stop by see some of my latest works in maya, ill even evently host my WIP's and old old works.
    http://nex17.deviantart.com/
    search under digital art works
  • zone_Blackwolfzone_Blackwolf Join Date: 2004-06-20 Member: 29415Members Posts: 39
    like it,... but a nav is required smile-fix.gif
    *IMAGE BALEETED.* Sigs may not exceed 400x75 and/or 40KB in total. No exceptions. -Talesin
  • AndosAndos Join Date: 2003-10-17 Member: 21742Members Posts: 267 Advanced user
    Thanks 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.
  • FFSkyriderFFSkyrider Join Date: 2006-11-02 Member: 58211Members Posts: 88
    Looks cool to me. Nicely done, and as you already said, the top should be smaller indeed.
    IPB Image
    Want your Natural Selection File hosted at HL2Files.com? Private Message me! :D
  • Kouji_SanKouji_San Sr. Hινε Uρкεερεг - EUPT Deputy The Netherlands Join Date: 2003-05-13 Member: 16271Members, NS2 Playtester, Squad Five Blue Posts: 15,780 Advanced user
    edited December 2006
    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 smile-fix.gif

    Guardian of the "magic cookiejar" 

    Retired forum Admin, I mostly used a flamethrower tank for disputes... Mostly

    Retired EUPT Deputy | Moral Support | Squad 5 Blue | 102 1HP Skulk escapes and counting

  • AndosAndos Join Date: 2003-10-17 Member: 21742Members Posts: 267 Advanced user
    edited December 2006
    Kouji_San:
    Thanks for the criticism 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 wink-fix.gif

    I made the top image smaller and added a nav-bar: (same url)
    http://andos.stiaxies.net/ns/

    You can see the old design for reference here:
    http://andos.stiaxies.net/ns-old/

    Do you think it would look better if the page was centered in the browser?
  • Kouji_SanKouji_San Sr. Hινε Uρкεερεг - EUPT Deputy The Netherlands Join Date: 2003-05-13 Member: 16271Members, NS2 Playtester, Squad Five Blue Posts: 15,780 Advanced user
    edited December 2006
    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 biggrin-fix.gif

    Guardian of the "magic cookiejar" 

    Retired forum Admin, I mostly used a flamethrower tank for disputes... Mostly

    Retired EUPT Deputy | Moral Support | Squad 5 Blue | 102 1HP Skulk escapes and counting

  • SolitarioSolitario Join Date: 2006-10-29 Member: 58097Members Posts: 245
    very nice, I like it! smile-fix.gif
  • AndosAndos Join Date: 2003-10-17 Member: 21742Members Posts: 267 Advanced user
    edited January 2007
    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 smile-fix.gif

    New design:
    http://andos.stiaxies.net/ns/
    http://andos.stiaxies.net/ns/textutorials.php
    (Ctrl+F5 the page if it's still cached)

    Old for reference:
    http://andos.stiaxies.net/ns-old/
    First design for reference:
    http://andos.stiaxies.net/ns-old-old/
  • NEX9NEX9 Join Date: 2005-03-08 Member: 44299Members Posts: 1,642
    looks awsome
    Stop by see some of my latest works in maya, ill even evently host my WIP's and old old works.
    http://nex17.deviantart.com/
    search under digital art works
  • CoolCookieCooksCoolCookieCooks Pretty Girl Join Date: 2003-05-18 Member: 16446Members, NS1 Playtester, Contributor, Constellation Posts: 5,602
    It looks very interesting but not quite finished yet. The TSA logo texture doesn't look right there, try using different effects on it.
  • NEX9NEX9 Join Date: 2005-03-08 Member: 44299Members Posts: 1,642
    argh yep i see it now... sorry to pro alien to look at anything rine *hides that logo just means food to me
    Stop by see some of my latest works in maya, ill even evently host my WIP's and old old works.
    http://nex17.deviantart.com/
    search under digital art works
  • SteveRSteveR Join Date: 2006-12-25 Member: 59239Members, Constellation Posts: 96
    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!
    I am an experienced thread killer. It's like an unwanted talent.
  • AndosAndos Join Date: 2003-10-17 Member: 21742Members Posts: 267 Advanced user
    edited January 2007
    I tried making the infesting look more like it was attached to the wall but I don't know how well I succeeded 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 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: ( http://andos.stiaxies.net/ns/ ) but Ctrl+F5 if the page is still in your browser cache to see the changes.
  • Lt.RealnessLt.Realness Join Date: 2004-03-17 Member: 27379Members Posts: 740 Fully active user
    I think it's good but the infestation shouldn't cover the hive tounge.gif
    85.236.98.56:27015 #yo-clan | www.yoclan.com [Classic Only]
  • SteveRSteveR Join Date: 2006-12-25 Member: 59239Members, Constellation Posts: 96
    edited January 2007
    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.
    I am an experienced thread killer. It's like an unwanted talent.
  • NEX9NEX9 Join Date: 2005-03-08 Member: 44299Members Posts: 1,642
    Ooow webed text
    Stop by see some of my latest works in maya, ill even evently host my WIP's and old old works.
    http://nex17.deviantart.com/
    search under digital art works
  • Kouji_SanKouji_San Sr. Hινε Uρкεερεг - EUPT Deputy The Netherlands Join Date: 2003-05-13 Member: 16271Members, NS2 Playtester, Squad Five Blue Posts: 15,780 Advanced user
    edited January 2007
    QUOTE(SteveR @ Jan 10 2007, 12:43 PM) »

    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?

    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

    Guardian of the "magic cookiejar" 

    Retired forum Admin, I mostly used a flamethrower tank for disputes... Mostly

    Retired EUPT Deputy | Moral Support | Squad 5 Blue | 102 1HP Skulk escapes and counting

  • SteveRSteveR Join Date: 2006-12-25 Member: 59239Members, Constellation Posts: 96
    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 this for all them safaris and such. Why are web browser names weird?
    I am an experienced thread killer. It's like an unwanted talent.
  • Kouji_SanKouji_San Sr. Hινε Uρкεερεг - EUPT Deputy The Netherlands Join Date: 2003-05-13 Member: 16271Members, NS2 Playtester, Squad Five Blue Posts: 15,780 Advanced user
    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....

    Guardian of the "magic cookiejar" 

    Retired forum Admin, I mostly used a flamethrower tank for disputes... Mostly

    Retired EUPT Deputy | Moral Support | Squad 5 Blue | 102 1HP Skulk escapes and counting

  • AndosAndos Join Date: 2003-10-17 Member: 21742Members Posts: 267 Advanced user
    edited January 2007
    I'm currently writing some tutorials for the page but there is no updates yet.

    Tell me about it 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:
    CODE
    .page{
    width: 750px;
    margin-left: auto;
    margin-right: auto;
    }

    (you don't even have to do any math) 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.
Sign In or Register to comment.