Site Redesign

mojomonk · May 31, 2008, 5:08pm

As you can see the front page is now revamped and in place. Here is the place to tell me where I screwed up.

So far:

Text colors need to be adjusted slightly for better contrast reading.
Forum theme needs to be set to look the same as the site, so it doesn't feel like different sites.
Wiki needs to be revamped in the same way (possibly using different software).

unfair · May 31, 2008, 6:31pm

To me, the yellow tab (link) strip looks fine when the rest of the page is white as well - but looks out of place on a page with a big colored block below it, like the demos page (like it's being squeezed between two large volumes).

Solutions would be to make the bottom area seem less weighty, or to give the linktab a full bar attached to the header, not just the tabs themselves - so they look like part of the header. That's just personal opinion though, overall I think the new site looks fantastic, and it performs properly in FF3 b5.

(I was pleasantly surprised that the tabs were not using js )

theprism · May 31, 2008, 8:17pm

Big improovement.

What I would change is to have the Screenshots as the first item in the Yellow Menu bar at the top left before the Download menu item. This I feel is important to capture new users and is most likely what they would look for first.

Mindgamer · June 1, 2008, 9:15am

Some thoughts from me:

'jME in action' did not did not realy jump out to me. I think it would get more attention by being just 'Demos'
'jME' is repeated ALOT I do not know if it was intentional, but it stands out
The 'Getting started' section really looks like a banner and I completely overlooked it in the beginning. If it is intended as a starting point for new members, it might be better if a 'getting started' link is just added to top menu that takes you to a page which will take you step by step through the process.
on the front page it now says that jMonkeyEngine is a game-engine. I know there has been some debate on this… but I think the last shared opinion was that its more like a scene-graph engine or… something in that spirit.
There are generally quite a lot of images visible at once. And very colorful and contrasted ones. They are all nice individually, but all together it felt heavy. Perhaps an introductory article of 2-3 paragraphs with smaller images in it would be more informative and less intense for the visitor than the image below the top menu?
The forum posts section could be wider and/or the different posts could be separated somehow - either each line of a slightly different tone or by separator. Currently as some posts break across several lines, things get aligned vertically a bit funny and it does not look as neat as it could.
The Login block with the welcome message takes up quite a lot of space for no real goal. I'd slim it up quite a bit.

All in all great work

Core_Dump · June 1, 2008, 9:47am

under the support menu, a link to point to the irc channel #jme on freenode.net would be nice

Gentleman_Hal · June 1, 2008, 7:24pm

First off great work, it looks a lot better than the old site

Now for my thoughts, some of which are really minor I just think it's best to mention everything I thought of while looking around.

I really don't like the font used (in the header etc).

The main header Monkey logo should be clickable and return you to the home page.

The screenshot page should have some sort of 'submit yours' link.

Seems to be too much white/blank space on the home page.

The brown banner thing on the right hand side would probably get more attention if it was on the left.

The news page seems very bland compared to the rest of the site.

The jME in action page is overly colourful (all the orange buttons combined with the screenshots themselves)

All the links that open completely different sites (i.e. Wiki, Java.net) open in the same window (this makes it difficult to follow the 'steps' in the banner for example as have to navigate back to the site yourself).

The site is fixed width but uses a 'non standard' width, I like to keep my browser windowed so I either have to make the window bigger or scroll.

I'm viewing the site using Firefox 3 RC1 for reference.

mojomonk · June 1, 2008, 9:12pm

Hevee:

changed a few of the images to png

agreed the news site is a bit bland, that'll be something that is worked on later after the forums get integrated.

theprism:

added a screenshots link to the menu

Mindgamer:

jME in action vs. demos, was trying to be "catchy", demos is kind of non-descript and generic (everybody has a 'demos' link), yes it's to the point but it's not very "marketing-ish".

jME being repeated a lot was intentional, it's meant to keep 'jME' in the new user's mind.

the image on the front was something that was discussed, was felt that the front page should be more like a business card, elevator speech, quick and to the point and leave the lengthy descriptions to the wiki site. the intention of the front page is to grab the reader's attention.

forums are a separate issue, a new theme is being worked on to try to "match/integrate" the new style of the site.

login block, agreed. the block takes up a lot of space. removed that block and just appended it to the "news" block.

gentleman hal:

the font being used in the images/header etc was chosen to go along with the "jungle-ish" theme.

the header image being a link, that was just an oversight. that's been fixed, thanks for bringing that up.

we'll add some sort of link (more than likely an e-mail link) for users to send in screenshots

have "tightened" up the front page a bit, less white space.

fixed some of the links so they open in new windows

960px is actually a standard fixed width now. a lot of sites are now using a 960px width layout now as most users' minimum screen resolution is 1024x768 whereas it used to be 800x600 (which is why sites were built with an 800px width layout).

Gentleman_Hal · June 2, 2008, 8:08am

mojomonk said:

jME being repeated a lot was intentional, it's meant to keep 'jME' in the new user's mind.

The 'problem' with this is doing a Google search on "jme" returns jMonkey Engine as the last result on the front page, and none of the other links have anything to do with jME at all (Ok maybe not a problem but figured I'd mention it anyways).

mojomonk said:

the font being used in the images/header etc was chosen to go along with the "jungle-ish" theme.
the header image being a link, that was just an oversight. that's been fixed, thanks for bringing that up.

The thing that really throws me for a loop with the font is the dot above the j and i. The way it's off to one side just doesn't look right (obviously in my humble opinion :) ).

Header still isn't clickable on the news page, seems fine on the others though.

mojomonk said:

960px is actually a standard fixed width now. a lot of sites are now using a 960px width layout now as most users' minimum screen resolution is 1024x768 whereas it used to be 800x600 (which is why sites were built with an 800px width layout).

Ah sorry, that's why I put non-standard in quotes as I didn't really know what the standard was (all I knew was I had to increase my window size compared to most other sites I view).

theprism · June 2, 2008, 8:40am

Do you intend to support the nightly build anymore ??, couldnt see an option for it.

hevee · June 2, 2008, 8:44am

The site looks great now, I really like the duller colors better. But… }:-@ … the monkey logo in the header graphics is dulled out too, I don’t think that is such a good idea. It makes the monkey look even sadder :’(

And about that shifted i and j dot, GentlemanHal: I really hope the designer of that font never reads this forum, they are probably really proud of their creativeness in shifting that dot a bit

(Wow, 1 smiley per line! What has become of me? Now all I need is a super flashy 600x200 sig banner an I’ll be unstoppable :D)

mcbeth · June 2, 2008, 11:12am

sad…the monkey never seemed sad to me, I think it has "attitude" a "what u lookin at" or "you talkin to me" sort of way adds character to the whole "serious engine" thing, to me anyways.

mojomonk · June 2, 2008, 1:28pm

Yes, nightly builds will continue to be supported, need to figure out what is needed going forward (with 2.0 moving to google code and SVN, etc). They will reappear before too long. (Also will update the download links to point to 2.0 once that's sorted (wiki article, possibly move 1.0 download there to keep it centralized, etc)).

We can revisit the font after a bit if it is driving many people crazy (I like it quite a bit, to me it fits the overall theme/feel).

Sad monkey? SAD Monkey? What you see is a monkey who persevered to leave the jungle, rise above his station and lord over a development project. The look is grim determination to prove to the world that primates have a place in modern society as well. Or perhaps, that's just the way I drew 'em. We'll see what we can do to bring back the vibrant colors of the head.

mojomonk · June 2, 2008, 2:54pm

Fixed link on news page.

Removing jme from buttons now.

Changed jME in Action to Movies and Demos

duenez · June 2, 2008, 6:11pm

I like the new site a lot… Kudos for that!

I have some suggestions

The menu bar is too simple. No rounded buttons, no interesting button separation, no interesting font.

The menu movies & demos should include links to the different project videos and/or demo reels that jME has... let's exploit its achievements!

This is partially unrelated to the site, but the first link to the Wiki page includes a rather ugly image of the monkey logo.

The page would probably benefir from having some more images around... screen shots of impressive scenes and what-not thrown around would be nice... Not full size, of course

My 2 cents.

Gentleman_Hal · June 2, 2008, 6:48pm

What might be cool is breaking down the image on the front page into four bits, the two orange text boxes, the code window and the screen shot. Then randomly replacing the screen shot with one from the screen shots page every time the home page is loaded.

Also you might want to change the alt text for that image to be the same as the information in the orange boxes for people using screen readers/text only browsers.

Also for images to display tooltip text in Firefox you need to set the title attribute (and not the alt attribute).

duenez · June 3, 2008, 3:17pm

I like the footer, the menu bar and the more stylized monkey head… Unfortunately I still think that head is "too shiny". I really don't like the 'j' in the title it just doesn't stand up enough. As for the colors, these seem more tropical, which might be a better approach.

I definitely like the idea of not just flat rectangles for everything (even if they are with rounded vertexes they seem too plain).

pjmlp · June 2, 2008, 7:00pm

Hi,

the site looks great to me.

Small note, the downloads link goes to the java.net downloads site.

The latest available package seems a bit too old. It would be nice to new users to see a package

more recent than October 2007.

I will be writing about the site redesign on my blog

Congrats for the redesign,

Paulo

Gentleman_Hal · June 3, 2008, 12:06pm

I have the Html Validator plugin for Firefox at work and viewing the source of the home page gives 58 errors and 2 warnings.

I realise a lot of these won't impact the site in any meaningful way, but it's probably best to fix them anyway; especially since a few seem quite easy to correct.

Result: 58 errors / 2 warnings line 4 column 6 - Error: document type does not allow element "title" here; assuming missing "head" start-tag line 5 column 5 - Error: document type does not allow element "head" here line 14 column 6 - Error: end tag for "head" which is not finished line 15 column 6 - Error: document type does not allow element "body" here line 18 column 130 - Error: end tag for "img" omitted, but OMITTAG NO was specified line 18 column 63 - Info: start tag was here line 22 column 84 - Warning: cannot generate system identifier for general entity "expandFolder" line 22 column 84 - Error: general entity "expandFolder" not defined and no default entity line 22 column 96 - Error: reference to entity "expandFolder" for which no system identifier could be generated line 22 column 83 - Info: entity was defined here line 22 column 101 - Warning: cannot generate system identifier for general entity "folderID" line 22 column 101 - Error: general entity "folderID" not defined and no default entity line 22 column 109 - Error: reference to entity "folderID" for which no system identifier could be generated line 22 column 100 - Info: entity was defined here line 37 column 47 - Error: required attribute "alt" not specified line 37 column 48 - Error: end tag for "img" omitted, but OMITTAG NO was specified line 37 column 5 - Info: start tag was here line 37 column 52 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 37 column 48 - Info: start tag was here line 37 column 140 - Error: reference to entity "expandFolder" for which no system identifier could be generated line 22 column 83 - Info: entity was defined here line 37 column 153 - Error: reference to entity "folderID" for which no system identifier could be generated line 22 column 100 - Info: entity was defined here line 37 column 273 - Error: end tag for "img" omitted, but OMITTAG NO was specified line 37 column 173 - Info: start tag was here line 37 column 278 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 37 column 274 - Info: start tag was here line 37 column 333 - Error: required attribute "alt" not specified line 37 column 334 - Error: end tag for "img" omitted, but OMITTAG NO was specified line 37 column 278 - Info: start tag was here line 37 column 338 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 37 column 334 - Info: start tag was here line 37 column 522 - Error: end tag for "img" omitted, but OMITTAG NO was specified line 37 column 423 - Info: start tag was here line 37 column 527 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 37 column 523 - Info: start tag was here line 37 column 582 - Error: required attribute "alt" not specified line 37 column 583 - Error: end tag for "img" omitted, but OMITTAG NO was specified line 37 column 527 - Info: start tag was here line 37 column 587 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 37 column 583 - Info: start tag was here line 37 column 761 - Error: end tag for "img" omitted, but OMITTAG NO was specified line 37 column 652 - Info: start tag was here line 37 column 766 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 37 column 762 - Info: start tag was here line 40 column 116 - Error: end tag for "img" omitted, but OMITTAG NO was specified line 40 column 5 - Info: start tag was here line 40 column 120 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 40 column 116 - Info: start tag was here line 41 column 158 - Error: end tag for "input" omitted, but OMITTAG NO was specified line 41 column 108 - Info: start tag was here line 41 column 216 - Error: there is no attribute "border" line 41 column 334 - Error: end tag for "input" omitted, but OMITTAG NO was specified line 41 column 158 - Info: start tag was here line 41 column 2852 - Error: end tag for "input" omitted, but OMITTAG NO was specified line 41 column 334 - Info: start tag was here line 41 column 3047 - Error: end tag for "img" omitted, but OMITTAG NO was specified line 41 column 2931 - Info: start tag was here line 45 column 76 - Error: end tag for "img" omitted, but OMITTAG NO was specified line 45 column 18 - Info: start tag was here line 56 column 54 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 56 column 50 - Info: start tag was here line 79 column 68 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 79 column 64 - Info: start tag was here line 232 column 93 - Error: required attribute "alt" not specified line 232 column 97 - Error: end tag for "img" omitted, but OMITTAG NO was specified line 232 column 57 - Info: start tag was here line 233 column 66 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 233 column 62 - Info: start tag was here line 254 column 55 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 254 column 51 - Info: start tag was here line 255 column 37 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 255 column 33 - Info: start tag was here line 256 column 88 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 256 column 84 - Info: start tag was here line 257 column 93 - Error: reference to entity "expandFolder" for which no system identifier could be generated line 22 column 83 - Info: entity was defined here line 257 column 106 - Error: reference to entity "folderID" for which no system identifier could be generated line 22 column 100 - Info: entity was defined here line 257 column 130 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 257 column 126 - Info: start tag was here line 258 column 71 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 258 column 67 - Info: start tag was here line 259 column 63 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 259 column 59 - Info: start tag was here line 279 column 50 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 279 column 46 - Info: start tag was here line 280 column 56 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 280 column 52 - Info: start tag was here line 281 column 50 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 281 column 46 - Info: start tag was here line 301 column 52 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 301 column 48 - Info: start tag was here line 302 column 67 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 302 column 63 - Info: start tag was here line 303 column 65 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 303 column 61 - Info: start tag was here line 304 column 64 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 304 column 60 - Info: start tag was here line 305 column 73 - Error: end tag for "br" omitted, but OMITTAG NO was specified line 305 column 69 - Info: start tag was here line 318 column 10 - Error: end tag for "div" omitted, but OMITTAG NO was specified line 17 column 2 - Info: start tag was here line 320 column 6 - Error: end tag for "head" omitted, but OMITTAG NO was specified line 4 - Info: start tag was here line 320 column 6 - Error: end tag for "html" which is not finished

erlend_sh · June 3, 2008, 2:33pm

Big kudos on a lovely new design! I can’t even begin to express how much I love to see that you’ve integrated your website with the forum more. A very wise decision, I must say.

First thoughts:

Are you using a CMS, in which case, what? Just curious

Why oh why is the “download” nav-bar to the far left?.. If you ask me, ‘home’ should always be on the far left on any website, as I always automatically click there when I when I want to start over, and I’d guess it might just be the most clicked nav-bar on the majority of websites out there. The download link won’t be clicked more or seen more easily just because you put it there. You’re already drawing a lot of attention to ‘download’ with your “gest started using jME”, which replaces the typical big “DOWNLOAD!”-kind of “sticker” that many sites use.

As for other comments on the front-page, I think the other members have covered the most of it already and it seems most of the necessary edits were done even before I saw the re-design for the first time.

Gallery

A cool-looking flash-gallery like this looks very appealing at first (even for the slower computers once they get past the slow start…), but in my opinion it quickly looses it’s purpose as a gallery-software.

Seeing galleries like these, with no “date submitted” or any other details, I can’t help but feel like this gallery has and never will be updated (of course it will be, but I still don’t think this would be a frequent event). This is also largely due to the feature missed by Gentleman Hal, a “submit your own picture” link. You could have two categories, one being the “Sser-Submitted Pictures” (for this you might even have a “latest pictures added” on your front page) the other being “Showcase Screenshots” or something to that effect.

I read about ‘Postcardviewer’ that by righ-clicking I was supposed to be able to open an image in a new window, e.g. if I want to link someone to this perticular picture. I can’t however seem to figure out how to actually do this. This is an option that would be perticularly important in the case of a “User-Submitted Pictures” category.

mojomonk wrote:

we'll add some sort of link (more than likely an e-mail link) for users to send in screenshots

Okay, that might work, but it sounds like you're leaving most of the work up to whoever received that e-mail, instead of letting the user and a gallery-software handle it all without you needing to care more about it, besides adding the pictures you really like over to the showcase-category.

Seeing as I don't really know how you're managing your gallery and how well it is working out for you, I don't have high expectations for any changes on this area, but I'd still like to make some quick recommendations:

ZenPhoto was for me a real eye-opener in gallery-software. I thought Coppermine or Gallery2 was the only way to go if you wanted a somewhat feature-filled gallery (easy mass-uploads for instance), but ZenPhoto just proved how utterly mistaken I've been. I could tell you more about my experience with it so far and they way we've chosen to manage it upon request.

Lightwindow 2.0 - As it says on the website, it's just yet another "light-whatever", but it works. It just works. There are many other similar options out there however. In any case, I always choose JS over Flash.

Forum

I'm surprised you haven't just installed a temporary theme already. There's a plethora of themes on the SMF site, many of which already match your main site to an acceptable degree. Of course, a unique theme for the forum made to perfectly match the front page would be the ideal solution, but considering the user-suggestions still left to take into account, and the other necessary adjustments you're already aware of (wiki-design probably being the most important one) I imagine creating a unique jME-theme for the forum could end up a long way down on the list.
You could always ask the users to find their favorites on the SMF database, then you just install the most popular one(s).

Also, maybe before starting the new forum-design, you should consider moving from SMF 1.1.x to 2.0, seeing as the theme would need some minor alterations after you do that. If you're planning on doing this, I'd suggest waiting for Beta4 at least though.

Global Menu

In the end, I would also like, no I would love to see a global menu for your entire website. Meaning, regardless of whether I'm browsing through the front-page, the forum or the wiki, the top-navigation and banner will still be there to offer quick navigation throughout the entire domain.

Now, this is slightly off-topic, but I actually think there's something to this "sad monkey". It does look sad; shouldn't it rather look really clever and pleased with itself; happy?

darkfrog · June 3, 2008, 2:59pm

I was going to refrain from posting this publicly, but since the other developers don’t seem to care much I will post a very quick mock-up I did. I’m not necessarily suggesting changing the whole look and feel, but thought it might be beneficial as a counter-point from which to draw ideas to change the existing site:

I really didn’t spend but a few minutes on this, but there are some points I felt could only be conveyed by actually creating something, so hopefully some benefit can be derived from it.