Help make a better website

[cybersphinx]

I don't have much to say about the look, I don't care as long as it's usable. But some thought about how to organize and present information so people actually find it might be useful.

[Olrox]

Hmm, I dunno why I didn't subscribe this topic before
I think that the header's screenshot could have motion blur and use grayscale instead, just a thought.

Thinking it over, I would make something completely different myself. xD

I'd invite everybody visiting the site to be a commander by making it look just like the command hud from the ingame GUI. By convenience, There are 6 tabs at the top of the screen - the same number of buttons at the ingame hud, without counitng the middle one, the project logo button. This one, at the middle, could be "home", resembling the game's function for that button, which is to close all opened windows. The remaining one on the outer ring could be used for screenshots. Actually, we could remove the FAQ button, as it's already referred under "help", and leave the remaining button to "Game features".

And, of course, it wouldn't be the same size as the ingame hud, it would be rescaled, with detailed pictures displaying the content under each button in intuitive ways, with titles so that "slower" people can still know where to find what.

This, and adding the game menu beep when you click a button, would incite people to play, I think :rolleyes:
Or at least would be a nice reference to the game

[XeRnOuS]

adapting the in-game GUI sounds interesting, though im not sure how effective that would be. Does anyone else have opinions on this?

Necron, i like both ideas for the background actually, i just wanted to make sure you kept that in mind and didn't focus entirely on the content area. It's been a common mistake with the graphic designers i've worked with so i just got in the habit of asking.

The standard resolution for websites is 1024x768 now, usually you design them just shy of that, like 950-1000px wide. 800x600 for the main design works just fine as well though. Great work so far

- Alex

[Zarel]

I'd prefer if the minimum width were something more like 780px or less (i.e. fits in 800x600) Also if it were fluid. As of now, I see no reason why the layout can't be fluid.

[Q-Necron]

Sorry, got side tracked with Battle for Wesnoth all weekend (editing + map making). I'll post that update after I get some sleep.

I'd prefer if the minimum width were something more like 780px or less (i.e. fits in 800x600) Also if it were fluid. As of now, I see no reason why the layout can't be fluid.

Yeah, I'm used to keeping it within the 800x600 realms still so I do it out of habit. But your right, theres no reason why it could be a fluid layout. Little tweaking here and there on the header and it would be good to go.

As for the website design fitting the game HUD, I can play with that if you all would like - I finally got around to installing WZ on my work laptop so I can switch to it with ease now. I dunno, we'll see how this week goes for me at work, if I'm busy I probably wouldn't get around to it until Friday. However if I'm not I should be able to play with it.

[Olrox]

I can help with art if you like - I'm not a pro yet but learning fast

[Q-Necron]

All and any help I'm sure would be welcomed, if you have GIMP or Adobe Photoshop make a mock up website and maybe we can go from there. Usually how I started my website designs , after that its downhill most of the times.

[Q-Necron]

Making the width scale % wise would be fairly easy however the top right underlying screen shot would need to be a decent width which is why I didn't plan for it to scale.

Here is what I had in mind with a canned design:


Basicly a simple, soft pin stripe background. Background image is very small, 11x11 and with the given border around the site its not to bad. As of now its 800x600 however we can grow shrink that to ~900 or ~750. I usually go for the 750 range however since this is a game its almost safe to bet most of the visitors are running better than 1024x768 resolution so a 900 px wide would work well. However this is all up to you guys, whatever is needed wanted can be done. I can have all the images ready for you guys in no time or I can just give the PSD files.

[Per]

Hmm, I dunno why I didn't subscribe this topic before

I second that. This is pretty amazing work!

Contrary to Zarel, I quite like the "weird stuff in the header background" But the last example is fine too.

I would prefer that the web site is not static sized, since 800x600 looks rather cramped on high res monitors.

[Zarel]

Meh. You can just make the inside scale to the edge. I see no reason for the dark "outside" part; it makes the site look far worse.

Can you code designs? If so, code that up. If not, send me the PSD and I'll code it up at some point.

[Q-Necron]

Can you code designs? If so, code that up. If not, send me the PSD and I'll code it up at some point.

http://necrons.game-server.cc/warzone/ Your wish is my command!

Granted it is a rough, tested in only Firefox as I do not have access to IE. Now that its there I will make a 3rd draft and make it scale to fit screen. Just take some tweaking to header and all should be just fine. Probably wont get to that until tomarrow -sorry O_O .

Playing with some HTML 5 elements on the above stuff... so yeah if you aren't using Firefox 3.5+ sorry haha. Once the design is final I'll make sure it works in all browsers (Opera, FF, IE, Chrome) like I normally have too.

PS: Sorry for the slow speed on site loading... only 512 up xD .

[Zarel]

Oooh, very nice. Very clean code; I like that.

The mouseover effects are a bit strong on the three large buttons... You may want to make them only a slight lightening. And maybe make the "Download" button a different color, so it stands out more?

And maybe have a different effect for hover tab than active tab. Something that integrates the line under the tab?

[Olrox]

I felt like the active tab isn't evident enough also - Integration with the rest of the page would be nice, I think

[Q-Necron]

Oooh, very nice. Very clean code; I like that.

How I roll , KISS method can apply to everything IMO. Also both validate with no errors.

The mouseover effects are a bit strong on the three large buttons... You may want to make them only a slight lightening. And maybe make the "Download" button a different color, so it stands out more?

And maybe have a different effect for hover tab than active tab. Something that integrates the line under the tab?

Think a blue would work well for the others and then tone down the green?

I felt like the active tab isn't evident enough also - Integration with the rest of the page would be nice, I think

Yeah, I need to make it a tad more blue (applies to base and hover colors). Hopefully it will start to stand out more.

[Zarel]

Think a blue would work well for the others and then tone down the green?

Yeah, that's what I was thinking of.

Yeah, I need to make it a tad more blue (applies to base and hover colors). Hopefully it will start to stand out more.

I don't think "more blue" will be enough. Consider the difference between current and hover tab on the Guide: http://guide.wz2100.net/ That's what I meant by "integrate the bar below it"