New Spring site design, I need your feedback.

[clericvash]

However, it does need to look less busy and less 'bright and bubbly'.

IMO it doesn't look very bright right now... there is too much gray.
I also don't really like the diagonal lines between the boxes.
Nice flash and screenshot support though :)

However it looks like you're using straight HTML.. or not? The html looks so organised. Are you going to connect the content to a database with something like php? Otherwise it will be very hard to keep it updated.

I think it is just a mockup so if it gets approved it can easily be edited to use php. I could do it quite easily if no one else wanted to.

[Tobi]

I was thinking a bit about this dynamic content management. My conclusion is that the current way is very good and should be kept in place. This means the dynamic sections are just read from hardcoded forums in the phpbb database (like News now is linked to the News forum) and rendered with a BBcode renderer. (This renderer can be improved upon a lot though, I recently noticed the current one on this site doesn't even support list tags...)

It is the best way to do it because it saves maintainance work: only one admin interface for forum and e.g. news section, so all permissions can be set on one location. (As opposed to one admin interface for the forum and another one for the website content. Admin lists may get out of sync then, admins have to be added to two systems, you need to login more times, etc.)

[Tim Blokdijk]

Quite al lot of really good comments, thanks, thanks..
I have to let it sink in a bit, have to think about what the exact purpose of the page is and what should get more or less emphasise (news, participate top banner).

I will give a detailed reply to all remarks when I have the time.

Jelmer is special of course:
I'm going to look at the colour usage, I used the colours of the current site more or less so I could "just" ad my work in.
The diagonal lines got my attention to when reading the remarks.
I'm planning on a hybrid of static html with php (php generating static html) as it should be the most efficient caching method, but I might drop static altogether. Performance could well be comparable with cached php if that's the case the more practical solution takes preference. I would just hate it if cpu cycles or memory would run out before bandwidth. Anyway database back end is a given. EDIT: In the way Tobi describes in the post above this one.

[jcnossen]

Don't spend too much time on optimizing though.. if you need moar cpu just ask cup
Is fnordia's server even close to being cpu limited?

[clericvash]

If you want something to display posts from a forum and do it well i can actually recommend my own phpbb mod Topic Extraction - http://www.phpbbhacks.com/download/3859

That should answer what tobi said.

[Neuralize]

Ugh, this is a little frustrating because there are three threads on this exact same topic currently active.

Tim, I think you should try slimming up your layout or ad side bars that slim up the main content section. There is no to little hierarchy in your layout, nothing immediately commands my attention upon first glance.

If I look at the current Spring web page layout, my eye first travels to "The Spring Project." then it goes to "Community News" and then finally "Latest Developer News" which is exactly what it should do.

There are also too many things going on your front page, you really shouldn't have anymore than 3 or 4 sections.

[Tim Blokdijk]

Don't spend too much time on optimizing though.. if you need moar cpu just ask cup
Is fnordia's server even close to being cpu limited?

I won't spend to much time on it, you where asking about it and as AF already hammered me about the static thing on Smoth's forum.. anyway I don't think I would hit any limits, it's just that I write Intranet web applications at work where I have only a few users that just need to work with simple data. The effect is that I don't ever have to optimize anything, Springs site seemed a challenge as it has several aspects I never really have to deal with. (Optimizing for high volume traffic and a lot of client side cross-browser scripting.)

[Dragon45]

There is one FEATURE REQUEST i must insist on VORACIOUSLY

PLEASE make all navigation links text, so i can browse them from the keyboard (firefox shortcuts ftw) without having to click on the fucking mouse.

[Tim Blokdijk]

Thanks again for all the great feedback, I let it all settle in the past day's and I have been working on the idea's past weekend. That way all the remarks that don't require any more discussion are out of the way and only relevant things remain a topic.
I'm going to try addressing every remark made so I guess this is going to be a long post.. lot of work but I think it is useful to answer all the remarks.
But let me first give you people a general run-down on the things more people made a remark about. That way I can just refer to these.

Colours:
I decided to remove a lot of grey and play with lighter and darker colours, I settled on a more dark top and a light bottom, the sections now have a dark/light colour that matches their importance.

Banner:
I added a "banner" above the menu with two images in each corner, the only problem with it is that it needs to scale, making them larger would mean they overlap at 800x600.
Still I can try a few more tricks to allow a bigger banner.
The Spring logo and the new slogan are moved up into this new banner as they gave a poorly organized impression in the sections below.

Participate:
I like to keep it on the entry page.. I think it should be clear to every user that:

We (the developers) are normal and nice people, fun to hang out with.
Open Source
We have content and code developers, both are equal.
The entry barrier to participation is low.
Lot's of interesting things to do work on (mapping, AI, network, translation, etc.)
And if interested check out the development page for more information.

It makes clear that we are not some shady commercial entity that has some Web2.0 idea about how to make money from a "free" game.
We are not a mod like counter-strike.
Or some open source hippy's that like to bitch about Nvidia's closed drivers model and expect Stallman to save us from it.
And not affiliated with Atari, GPG or any other organisation or community (at this point) but that we are an independent project.

It's important to have most of the Springs gamers aware of these things as otherwise you end up with a mayor rift between the Spring players and the Spring developers. Can't have that.
So imho it's best to hammer this down the throat of every "new user". Once this is common knowledge getting into the details of for example that it's _not_ ok to use gpl content inside your closed mod is far more easy when everybody is already aware of the open source background of the project.

Anyway's I removed the content and code section below "Participate" and made the development link at the top link to a dedicated "development" page (still need to make that page) instead of just the Spring development site.

News:
News is not the main feature of the entry page, I think the news sub-forum, a dedicated news page and/or rss feed are better in those cases.
I added a news button to the menu to make access to a dedicated news page more easy.

Usefulness:
I do not expect us (the existing users) to "use" the entry page for much. (Except to impress your friends) The entry page should link to a few interesting pages for more regular visitors but that is about it. Just to compare do you "use" http://supremecommander.com/ for anything lately? Last time I pointed my browser to that url was to see if I could run the demo on Linux but that's like 4 months ago. And that's a complete site, all I'm talking about is the 1st page.

Heres a critique on the website so far:


Colours -


Very limited range of colours. Its all very plain. The entire page is mainly bland shades of blue/grey, the only parts that arnt blue are the screenshots and the download banner bit.

See, colours.

I dislike the shading in the top left corner of every section, it makes the heading text harder to read - Blue on blue on blue text is just not a good idea. It also makes it hard to differenciate between different sections - they all look identical colour wise.This is bad for remembering/ familiarising/ describing the website - colours/shapes = good for brain. e.g. I ask the question "where is the user guide" I want to hear the answer "the big red box at the top", not "uhhh, i'll look - sec" followed by him looking aimlessly aswell.

The shading itself gives it a little extra, see colours for the rest.

Layout -


There seems to be too much on one page, although it's good that the website scales quite well depending on your resolution, all the boxes are different sizes, and its not very neat at all
see banner, and it scales well with resolution _because_ the boxes can change size. I tryed to look into some JavaScript to fix the sections to the same size in a row but it's a lot of work and moving the logo and slogan to the banner made it all more organised.

The "participate" bit is too far down and should probably have its own page. Its really not going to be noticed there, a big button on a menu would be better.
see participate.

The "news bit" should also probably get its own page too for the same reasons, it's too far down. I shouldnt have to scroll down everytime to check if a new version of spring/a mod is out - just give it a button on a menu.
See news, I like to keep the menu as button clean as possible but I added a news button just for you . Lesser buttons scale well with 800x600 and it looks more simple and "clean". The Download and Highlight sections should be there to keep you posted on new mayor releases of the Spring engine and the mods.


- screenshots


I really dislike that clicking on a screenshot sticks a screenshot at the top left of the page, alphas the webpage and makes browsing on the page impossible until you realise theres some blue writing below the screenshot, now its obvious to me now, but at first it blends in with the blueness of the rest of the page and it takes a few seconds to realise you have to click the big picture and not the small one. This is terrible. Even once you've gotten used to the system, you have to click two times for each screenshot, clicking at opposite ends of the screen!
Alright I could make it so that clicking anywhere would make the screenshot disappear and also make the text stand out more. (still have to do this)


- features bit


I like the idea of flash videos showing off features, but it really isnt obvious that those links lead to a video inbedded in the page. The small bit of writing above helps, but my eyes simply do not look at it first. they dart straight to the bulletpoint type list, which doesnt look very clickable.
I tried to make it somewhat more "clickable" and I made the writing stand out more.

Thumbnails for the videos inside an obvious flash player would be good, maybe get rid of the screenshots bit at the side use this player for screenshots aswell.
No, people without flash need to have access to the screens and the possible benefit of recoding the hole lot like you suggest would be relatively small.

The actual videos - had potential, but they were far too long, had too much commander dgunning scenes, were pretty boring and barely showed off the supposed features they were talking about: short but sweet videos would be better. Using the "normal" view in most of the videos would be good too
e.g. for terrain deformation watch a nuke hit the ground and deform the ground, for showing the drawing/los system, watch a peeper discover a large army, marking it, then brawlers being sent in, etc, etc.
The video's are just what came up with a search for "spring rts" and "ta spring" on google video. Cabbage is looking into a new video but it's a lot of work to make them, if you have the skill please help out (see this topic)

Navigation-


Big button for downloading is good, colour is good. Im not sure what the "highlight" bit is for, but it could be interesting
Highlight is for highlighting the cool new stuff.
navigation at the top isnt obvious enough- its at the very top, in small/thin writing with few/badly named options.
I made some new graphics for the buttons.

Logo-

What have you done to the logo! it looks horrible!
Weeks of work, thanks.. What would you like to see improved about it? (Note that I removed the old Spring text in it.)

The blue gradients alright but it shouldnt fade all the way to white as the white looks ugly.
It fades to light blue now and I added a few extra lines in the gradient to spice it up a bit.

Theres no progress bar ro tiem index on videos
I'm very limited in my options here, it's Google video I can't control that much about it, I can add the slider but it comes with a Google logo then.

The videos dont appear to show what they say they do.
No they don't I just picked a few existing video's from Google video.

The top right images are slideshows they change out the corner of my eye, it was uncomfortable, 'did that change just then?=s'
Maybe I should try to fade them in and out?

The pulldown draws being open when loaded looks like a bug, and they dont seem very responsive either which is somewhat frustrating.
They start open as otherwise people with JavaScript disabled can't use them, I could try to make them slide in and out?

Youc ant tell the movies are actually videos untill you read and see 'flash videos'. Users wont read the frontpage they want to know what spring is what it can do and where to get it as quickly as possible. They arent expecting much information from a frontpage save the basics.
Even more "clickable" video's, check.

Your tryign to sell spring to a potential user, most companies stick all the details on the back of a product and use the front like a poster advert, websies will have feature pages and galleries etc.

Your image thumbnail javascript popups could do with some work. a basic lightbox script is easy to find and provides a little user interface and polish.
I think I should take a look at that, there is a technical problem in that the code is mixed with the enlarge video function..

Also what exactly are you design specs? Do you have a design document or a set of aims and goals?
I don't really have any design doc, (that's a first for me) I just picked up where I left half a year ago, it's quite simple actually I like to fix all the little things that need to be fixed in the current site and make a new entry page for new users.
Then I will probably make sure that there are some working procedures in place to keep the site maintained, after that I'm going to do other things and I will be available for questions about the site but I won't code a lot of new stuff.

The long term plan is something along the lines of set up a site "framework" where the spring community is "split"* into gamers and developers and then gamers in the "new casual gamers" that drop by and like to see the screenshots and the "hardcore RTS gamers" that like to have a league, clan support etc. And the developers in "code dev's" and "content dev's".

* Split as in one overall site that is heavily interlinked betweens the sections but still with distinct parts so that an UpSpring coder won't have to read about who is the new KoAA in the league. And non-developers won't disrupt technical discussions between developers with uninformed opinions and feature requests.

The gray color scheme and the large text size and the big download and highlight boxes make it look like a website for free software, in a bad way, until you look at the screenshots.
I don't think the text is that large, but I have large screens so that might be a factor?

Make it more like http://www.wesnoth.org/
Quite a nice site indeed, it's easier on the eyes, I will try to find some things I can copy from it.

edit: except maybe with fancy drop down bars and randomized screenshots and embedded flash movies

This is a very very good beta site IMHO. n eeds some polish (see above comments), but definitely what I would want to see if I'm going to a game's site for the first time.
Thanks

I find the design is a little "bright and happy" for what is effectively a wargame. People who come to the site should immediately feel like we're serious about giving them a serious game experience, not some quirky game like bubble bobble.
Depends a bit on the mod, see colours, big mod specific changes in the look and feel can best be done with a theme, the current theme I made is designed specifically to be light on Fnordia's connection and to fit in with the site that we already have here. That way I only have to make the entry page and a few sub pages and then I can just add it in instead of completely rewriting the whole site from top to bottom. (Although I might end up rewriting most of it.)

I think you definitely need a big sexy banner up the top, with the Spring Logo, and a really sexy screenshot from Spring.



Similar to that, but bigger, and with the battle more clearly visible. (I'm talking like, >1/4 the screen)

You could even slowly fade the background of the splash banner in and out to show different shots.
Fading banner.. I'm going to skip that now but I will try to make it possible for theme's.

While the new site definitely has the potential for a lot more functionality then the current site, I think the current site is visually more succesful, because it is very simple, and thus doesn't try too hard to look professional. Because you have so many things going on on the one page, you have to try a lot harder to make it come off succesfully, communicating that wealth of information, without ruining the initial 'wow' factor that the site needs to communicate.

For this reason, I think the big banner showing some awesome battles on awesome maps through a couple of different mods is far better then the little screenshots down the side. A new person visiting this site should really think 'woah, this looks like a sweet game. I want to find out more about it'. The important information is only secondary, and if the initial sexy design/flashpage catches their attention, they will have no difficulty looking on the page for the secondary information, such as news, forum, wiki, etc.
I think you're right so I made the banner and it gives a better impression then the little screenshots on the right.

Feel:
Borders are too thick, and it looks bad when there is an area like that under "spring features". Colors need more contrast. I like the icons for each section except for "spring features" because it is animated. Language and theme should start closed. Nothing should change or be animated once the page loads. Randomized screenshots are fine, but only on reload. I hate the logo.
I removed the "borders" I did not intend it as a border. see colours. I removed the "spring features" icon (a day of work to make..), see AF's post on language and theme, I like to do some animation when the page is loaded so screenshots will keep changing, I hate you to, I mean don't "hate" my work, give constructive feedback.

Accessibility:
needs to scale well with both window resize and font resize. resizing font either way breaks this page (i know its hard!). Theoretically should degrade well with both loss of javascript and css, but this is less important with gamers, who obviously use a GUI and a modern computer.
Yhea, font resizing is a real bitch to get right and it requires JavaScript to fix as far as I know, I'm not going to touch that field, the rest (window resize, disabling css and JavaScript) should all work correctly in all circumstances. Took me quite a lot of work actually.

Layout:
Too many boxes, in a non uniform arrangement. Each row has a different number of boxes. Stick with either 1 or two boxes per row, plus any side navigation.
I moved to logo and slogan, see banner, it's what Warlord Zsinj suggested.

Navigation:
Haphazard. Have a single navbar, top or side, plus a direct download link pointing directly to an installer, not the dl page (needs to detect OS when linux and mac versions are stable). Its fine to point to stuff in other sections, but it should all be accessible from 1 navbar. Everyone seems to shy away from TA based mods as far as publicity, I assume for legal reasons. However, they are still the most popular and playable so the installer should be the XTA one, not the gpl version (I've never seen a nanoblobs game online).
I think that the download page should auto detect and provide a download dialogue once the page loads. And I'm "uneasy" about the mods that use copyrighted material or use the IP from others, non open source mods are also not on my favourites. NB, KP and X/M are here next year in the same or better state, for all other mods it's with an "unless 'x' happens". I'm not going to block anything (unless I have to by law) but I would really like to build Spring on content with a solid foundation where it's clear what happens when the mods lead dev gets.. for example hired by Chris Taylor. How popular something is now is not that important in the long run.

*Content*
You have way too much on the front page.

Perhaps you really value developers, but most people will just want to play, and will definitely want to try the game before helping with making it better. Therefore, but the contribute content on its own page, and put it on the navbar.
I dropped "content" and "code" see Participate above.

This:"SPRING Enjoy taking RTS gaming to the highest possible level!" is useless and takes up space. remove it.
No way man, everything but the slogan! Anyway's it's in the new top banner now.

somewhere, there should be a note about the latest version and a link to the readme / changelog / forum post. this can either be in project news, or with the dl link.
In the download link and on the download page.

Perhaps leave features to another page, with a link from the introduction, or a single video.
No.

Screenshots should be randomized and from all the most popular and current mods, about 1/2 TA (popularity and heritage) and 1/2 non-ta (promotion). The mod they come from should be identified on the page you click thru to. Perhaps to solve the layout issue, perhaps only a single screenshot would be displayed?
I like the linear slide, random is more difficult as you have to check if the picture is already displayed and stuff. The screenshots won't be exclusive to open source mods, for this theme the amount of screenshots will be limited thou.

As much content as possible should be from the wiki, so that everyone can help maintain the site.
I totally agree here, I had a chat with KingRaptor about his "Quickstart Guide" and if it could be integrated with the site, we came to the conclusion that moving it into the wiki is the most practical way to do that.

As far as code: standards compliant, no flash (-vids), no javascript, fully separate content and presentation, and use xhtml standards.
Sure? About half of it is JavaScript? Anyway, I try to write it as much as possible in clean code.

edit: try this layout:
mjbs.net/Untitled.txt
see banner and news and participate

Colors need to be darker, and I'd rather not have things like "very steep learning curve", they can drive away new people.It's not that easy to come up with good text for me, I might start with Dutch and translate that to English. At that point the text should be more like required.

Honestly i love it, don't make it darker, dark is booring, modern design is all about being brighter.
see colours.

I think it would be better if the spring features table got reduced to a button that directs to a page with the movies on it and "playing spring" reduced to just the 1st three links.
I assume the actual introduction will also take up less space so you might be able to see the news, this stuff is all well and good for new people but I'd like to see the news on the first screen(unless it gets updated as often as it is now, then I guess it doesn't really matter ).
I think the download table could also save some space if the word download was just the link, it's pretty obvious you mean spring anyway and you could explain that its free on the downloads page.
See news.

Some small things, the font on the spring logo looks a bit hacky and so does the little heart. The background would probably look a bit better if it was just one colour.
Changed the font in the spring logo, what's wrong with the heart? I tried the solid background colour - it's not as nice as a fading one.

Overall it looks good, just a lot of stuff you'll glance at once but turns into a waste of space once you've downloaded spring.
See usefulness.

Doesn't have to be darker, as the current spring site shows. It's actually harder to make a dark site look professional compared to a light site. However, it does need to look less busy and less 'bright and bubbly'.
See colours and banner.

There are many good comments in the posts before so I will add just a few (and repeat some of the suggestions).

- I find very frustrating the uneven size of the boxes
Moved some to banner to make it more organized, more then this takes some heavy scripting.
- the border of the boxes is too big
Gave it an aqua "border".
- the menu bar should contain the things that are not visible on the front page (like participate, content and code)
Development?
- maybe the videos should be replaced with news (news show a project is active) - and of course put a link in the menu bar
see news
- maybe make everything a bit smaller so that more things fit (like the download and highlight stuff)
text smaller?
- a top banner would be nice..
done
- the language and theme should not be expanded on first load
If I close it from the start people without JavaScript can't use it.. I will look into sliding it.

But it really feels good as a general idea, keep up the good work :).
Thanks!

Edit:

Gah, forget, my criticism sucked.
???

If you want something to display posts from a forum and do it well i can actually recommend my own phpbb mod Topic Extraction - http://www.phpbbhacks.com/download/3859

That should answer what tobi said.
I will look into it.

Ugh, this is a little frustrating because there are three threads on this exact same topic currently active.
I know, I needed to know what people like to have fixed on the current site before I would post my new entry page, the other topic is about AF's Joomla installation.
Tim, I think you should try slimming up your layout or ad side bars that slim up the main content section. There is no to little hierarchy in your layout, nothing immediately commands my attention upon first glance.
I did the "slimming up" thing and it looks better indeed.

If I look at the current Spring web page layout, my eye first travels to "The Spring Project." then it goes to "Community News" and then finally "Latest Developer News" which is exactly what it should do.
I gave the more important sections a bright colour, lesser important a darker one.

There are also too many things going on your front page, you really shouldn't have anymore than 3 or 4 sections.
I don't think I would like to drop anything more then "content" and "code" at this point.

There is one FEATURE REQUEST i must insist on VORACIOUSLY

PLEASE make all navigation links text, so i can browse them from the keyboard (firefox shortcuts ftw) without having to click on the fucking mouse.
They were text and still are, also makes translations a snap.

Pffffff, done..

[Tim Blokdijk]

Biggest post ever and I totally forgot to link the new version of the entry page...
http://89.98.140.58/index.php

Note that I broke IE and Opera support again. (not mayor)
And you have to put index.php behind it otherwise you hit the static (and at this moment dysfunctional pages)
There is a lot of server side code now, Dutch has a bit translated and there is a index.php?debug=true get function for example.

Anyway feedback anyone?

EDIT: For the previous version see http://www.timblokdijk.nl/spring/spring ... ex.en.html

[Neddie]

Font: Generic, and not space-effective. Generic is perfect, but space effective is also something we should seek.
Community News/Project News: Three for each should work well.
Translation: Needs work, but I like the progress I'm seeing.

Mayhaps it needs to be a little more impressive in some way, but I'm not sure how to achieve the effect. More later, sir, good work.

[Foxomaniac]

I iz willing to translate to Arabic, I'll do it if I'm feeling like doing something productive after the site is done .

[caldera]

I like it, looks very good.
maybe one note: the screenshots make it look like a fantasy game (bigger trees than units, all the nanoblob units etc..) I, and i think many TA fans too, like the more "non-fantasy" SciFi Style (hope you know what i mean), perhaps this could be shown by other/additional screenshots.

keep up the good work!!

[Lippy]

Nice!
Instead of having to click the up arrows in drop down menus in the top right hand corner, maybe make them disappear when you move the mouse away? Maybe it's just me..

As for the logo; I personally like the Metallic look it has now.. Kind of fits with the current major mods being robot/tank based...

Yay a proper wiki page!

[SwiftSpear]

It's WAY too busy in terms of colors... which results in ascetic hideousness.

The trick is knowing where and when to use gradients, and the correct answer is not "as much as possible"

Also, for the love of god don't mix vertical diagonal and horizontal gradients like that.

[j5mello]

my random $.02:

I like the new setup alot. One question is the spring logo and the spring slogan suppose to cover the screenshots? Because in when i look at em (firefox 1.5.XYZ, 1280x1024 res) they show up on top of the shots???

however i still don't like the screenshots section's position. honestly i would prefer if it was between the intro and the news section (obviously running horizontally) as to help break up the site but thats probably a giant pain to reorganize...

EDIT: new intro + more random stuff

new intro

Code: Select all

Hello and welcome to the world of Spring gaming. Spring is a open source RTS engine that features many different game universes to fight in. You need the latest Spring release which contains the core engine components and some content to play with. Later you can check out the many other universes that are available from http://spring.unknown-files.com. As a new player you should read the getting started guide below.

If you would like to involve yourself in the ongoing development process (code and/or content) then click on the development link in the menu. With spring you can work on the engine code iteself, the tools, this site, artificial intelligence, or the universes in which people play.

honestly in the playing Spring section get rid of "Once you like to get more involved in the Spring community you can check out the following links." It gives off a feeling of talking down to the person checking out the site like they aren't ready to handle stuff.

[Dragon45]

as of time of this writing, CSS link is broken.

on a technical note, might want to make it degrade more nicely - try putting the titles of main sections (post title, headers in general) in h2 or something?

[sanderbakkes]

Like the concept, well done!

Biggest change to be done, if you ask me, is a banner that blends in better with the blue colour scheme. So, get rid of the green grass, perhaps stretch it till the far right, and for sure get ride of the White fonts on the right part. You really want some more uniformity in the design here.

Well done and good effort for the rest!

[sanderbakkes]

oh, for the screenshots: are you aware of Lightbox 2 (http://www.huddletogether.com/projects/lightbox2/). might respond a bit too slow though.

[Tim Blokdijk]

I need a few large (width) screenshots to try a new banner do you guy's know any?