Gorgeous!

I’m gaga for 10.1 or is that cocoa puffs? Perhaps, but definitely for 10.1.

Very nice.

brilliant! and i’m very glad the gemstone icon stuck.

That looks great. Can the code preview tag grow or shrink (based on css) without messing up the layout? If so, I think it would be cool if people could submit small code snippets and editors could approve them to be rotated per pageload. (even use ajax and dhtml animation to make the text fade in/out and the box animate-grow/-shrink.)

Comments:

I like the gradient in the top bar – it draws attention to the search box

I think the RAA should have a link of its own, independent of the top projects question (that is, there ought to be a link whose text is explicitly “Ruby Application Archive”)

oooh… I especially like the darker version, too. This is coming out very nice :) excellent design.

Both design variations are gorgeous, but I personally prefer the first one. Because, the first design stands out from the current (tired and diminishing) trend (the 3d outset with the slight drop shadows), giving it a bit more longevity.

Also, push the advertisement into the navigation hbox on the right. I didn’t immediately see the “Advertisement” text at the bototm and I assumed the post had to do with picaxe2. Also could clash with news uptates that have images.

Yay yay yay!

Nice done I really like how the site now is able to expand to the bottom, and no longer fixed like the first layouts. The logo and the other navigational elements are quite fine. (Though is it true that a ruby seems to be hollow if seen from this angle?) But I immediatly thought that the code-box seems a bit like a spot on an otherwise spotless design. It is too dark for my gusto. (Incidentially I use nearly the same colours for editing, but in the otherwise bright and happy side the code seems like a melancholic piece of lead thrown onto the site.)

I like ‘em both, sweet design.

One thing about the big ruby though. Does it look sort of hollow to anyone else?

YAY !

Oh my, that’s very (very) very nice. I give ‘em both 18/20.

What ? Not 20/20 ? Nope, 20/20 would have been possible with screenshots made on an OS capable of rendering fonts in a much superior way (ie, OSX ) :p

Yay! Love it! Commence replacement. The top one is easier to read in my browser, BTW .

yay, yay, yay

+1 on Tomas’ comment on shying away from trendy 3d outsets, and relying on v10.1 (the first version).

Fantastic!

excellent, I prefer the first version btw!

This is lovely. What’s the hold up now? All the demos I’ve seen have been a major improvement, when do we get to see one in use?

I agree with Brian, it looks great, the only thing that I get caught on is that spot in the middle. I think it’s too strong. I see the problem, you need to be able to read that text so it has to be dark and somebody probably wants it to look like it looks in their text editor when they code it, but … I might work that a bit more.

The background on the second design is more dramatic. I think visually I’m drawn to it a bit more. But I also think working with designs for content pages is a lot more of a pain in the butt when you have the sides closing you in, sometimes it gets down-right oppressive if you have a content that wants width. The first design is more flexible, you keep your options open. The dark shadowed background also feels a bit more bloggish.

And, probably not final copy, but to me the Ruby description seems missing something about being design based on how a programmer would want to write the code rather than how a computer would want it. Not sure how to put that into one word though. I liked the Rails site’s “with joy and less code”.

It looks great though. Fantastic job.

This is just so beautiful. Just to comments:

1. Yes, to me the ruby seems to be hollow, too.
2. I prefer the light colour layout. Im my opinion the darker colours just don’t fit to the lightness of Ruby as a language.

The darker colour would fit well to a ‘heavy’ Bordeaux red wine for example. But Ruby is, hmmm, “the bright side of life”, isn’t it?. So a simple, light and bright layout is just what I’d vote for.

I prefer the first version (the one without the dark blue side bars), it seems more natural.

I like how you’se have made the code sample stand out. The edging is great and good to see syntax highlighting used.

Overall 9/10, sweet!

SWEET Go Go Light Version

Love the code snippet.

They are both great and I can’t wait to see the them in action. I prefer the first one, it feels more open, less claustrophobic then the second comp. Either way I can’t wait. Nice work.

Round three (I should take some time and put these all together.)

The navigation bar gradient is a little distracting (when trying to read the links). I think visually, the very edges need to be dark-black and light-white, but the transition is too gradual over the text. The bezier could be weighted more to the edge (esp. on the black, top edge).

I like the creamy beige gradient on the second one, but otherwise prefer the first.

Visually pleasing. Great work!

But complete newcomers might say “It takes 10 lines of code for a simple ‘hello world’?!? I’ll stop reading now—click”.

We know they’d be wrong but that is because we already know ruby.

I think it would be wonderful to show how ruby can also be used for one-liners (practical) in addition to being more OO than other scripting languages (theory).

+1 for the top graphic. it’s perfect. roll it out now.

is it done yet? :)

Sensational!

I agree with the majority, the lighter version is where it’s at.

To go against the grain a little, I like the Ruby icon just fine. It’s obviously stylized and I like that about it.

I like the code snippet as well, though some have complained about it. I do think I agree with the person who suggested that it could do something a touch fancier though. I don’t want to see it get complicated, but perhaps an iterator in action would wow the masses a little.

Nice, but doesn’t the world have enought “cool gradient bars and boxes” sites? It’s attractive by virture of being routine, not because of any striking or crisp aethetics.

The earlier designs were much better, both for looks and ease of use. This one is clunky and lacks a natural flow.

I would also prefer to see real logo, rather than a detailed image of gem.

I love it!

I have to agree with JEGII on the code snippet. Blocks and iterators, as well as “everything is an object” is what blew me away into Ruby-land.

('a'..'z').select { |x| x =~ /[^aeiou]/ }

But it needs more relevance and fun than that example… :)

I like the multi-level sort example in Pickaxe2. I shudder to think of the same implementation in C++ or Java.

 
words = %w{ puma cat bass ant aardvark gnu fish }
sorted = words.sort_by { |w| [w.length, w] }
sorted -> ["ant", "cat", "gnu", "bass", "fish", "puma", "aardvark"]

I like the first (lighter) version better, but I like the gradient at the top of the second version.

Also, I think the background of the code sample is a bit dark and thus distracting. How would it look with a light colored background (like the background color of the sidebar links) and all of the white text changed to black?

Oh, and I weep with joy that you kept the nice 3D ruby emblem from the “Ruby Red” design, rather than any of the flat/corporate/sterile logos from the “Clean” design. :-)

I’m not artistically inclined so I’ll keep my comments brief: The new design looks great and I appreciate the work that the redesign team is doing. I agree with some others that the screenshot for first version (the “light” one) looks a little sharper on the Windows box that I’m currently sitting in front of; but I’d be happy with either, I think.

Schveet.

Super. Keep in mind that I had to shrink the second design a bit to provide a screenshot that would fit in the blog width. That might be why it looks a bit squished and not as crisp as the first.

You guys know to click on the images for a full view of each comp, right?

Wouldn’t it be better if the code sample actually did something?

World == “World”.capitalize why not pass “world” to the Class.

Other then that, I had to spend 5 mins looking for my socks after that preview knocked them off.

Magnifique! Do not touch a bit…

Absolutely gorgeous. Both images had me drooling on my keyboard. My only complaint is that by writing Hello World like this, it makes Ruby code look bloated. It almost seems de rigeur to make Hello World as short a possible. Perhaps code doing something else (as James and Bheeshmar suggested) would be a better way to show off Ruby’s expressiveness.

Good stuff, option number one takes the prize, though. No general complaints.

Gem looks good (much better in this setting than originally). One little gripe, though. Can we make it “Programmers’ Best Friend”?

The code, I am sure, is for illustrative purposes; I do not think it does justice to ruby to have a ten-line ‘hello world’.

C++ for Bheeshmar:

bool compare_group_by_length(string a, string b)
{
  if (a.length() == b.length())
    return a < b;
  else
    return a.length() < b.length();
}

main()
{
  vector<string> names;
  names << "puma" << "cat" << "bass" << "ant" << "aardvark" << "gnu" << "fish";
  sort(names.begin(), names.end(), compare_group_by_length);
}

It wasn’t that bad, was it?

We’d talked about an OpenURI or Net::HTTP example. I’ll make sure that code fragment gets swapped before the next exhibit.

Oh, and instead of ‘Ruby from other languages’, could we look into ‘How Do I Do [x] In Ruby?’ I think I posted something about this on the ML.

Excellent, preview is broken. Let’s try that again…

bool compare_group_by_length(string a, string b)
{
  if (a.length() == b.length())
    return a < b;
  else
    return a.length() < b.length();
}

main()
{
  vector<string> names;
  names << "puma" << "cat" << "bass" << "ant" << "aardvark" << "gnu" << "fish";
  sort(names.begin(), names.end(), compare_group_by_length);
}

Writing ampersand, ‘l’, ‘t’, semi-colon in the comment box gives the less-than symbol in the preview but the original four characters in the finished comment.

Writing less-than, ‘string’, greater-than in the comment box gives nothing in the preview but the original text in the finished comment.

lovely. I prefer the first one (maybe with a lighter blue). Thanks to all the people working on this

I like it, I like it a lot.

Someone mentioned having a nice DHTML smooth fade to show of multiple code snippets. While this doesn’t show on a comp and it can be slightly hard to implement, I’m strongly for it, if it can be done.

Both look great, though I prefer the second one to the first.

I agree with the comments made earlier about replacing the code snippet with something slicker. In any case, these are both pretty slick.

Oh. My. God. It’s blue! That were my first thoughs, but after 10 seconds it started to look cool :-) Now I think the design rocks, I have only a minor problem with it: I think it does looks a bit inconsistent, because the text boxes on the right do not use a color gradient like the rest of the page does. Also, there are really a lot of different colors, I think it has too much different shades of blue; this makes the page a bit uneasy.

I really like the first one.

yum.

Both are an orgasm of joy.

Awesome! Make it so (number one). I like the tan gradient from number two, but not the black, vertical bars.

Really, very beautiful.

I’m going to rain on the parade a bit, but someone’s gotta be the jerk right? (that’s rhetorical!)

First let me say I like clean and minimal, and don’t think ‘corporate[professional]-looking’ is an insult when it comes to a site for a programming language. It’s rarely the programmers who need a nice and friendly feeling from a site, it’s the “suits” who need to be assured it’s a safe choice.

Anyhow… some thoughts:

1. I’d think the gem itself should be a bit more abstracted, that’s gonna be tough to reproduce in a lot of places
2. ”...best friend” sounds a bit cheesy to me… I always assumed it was just a result of literal translation from Japanese or something
3. I don’t understand why the code block (which is a great idea) is shaped as it is, and especially why it breaks out below the blue bg. it looks like the browser rendered the page wrong and pushed it down.
4. why does the blue gradient extend into the sidebar? generally a color field like that organizes the info, but that contradicts/runs over the sidebar (indicated by the shadow) and its tan color – which clearly shows a different grouping of info

overall it’s a great improvement – though I suspect when the centered|floating|liquid|fixed unveiling appears there will be more screams from the peanut gallery!

I’ll be the bad fish and say that I pretty much don’t like this design.

1. First, the logo is not that great. It looks nice, and John did a good job on it, but it doesn’t fit in my opinion. It’s too “Photoshop’d”, so it would be difficult to use it on anything other than a computer screen. And as James pointed out, its just the obvious pic of a gemstone… I personally like the simpler logo designs.

2. The gradients are overdone. There are gradients in the header, in the navigation, in the body, in the sidebar… It’s just too much.

3. Too much blue! Light blue background with slightly less light blue text makes for sore eyes.

4. I think the content focus should be on the information that’s currently in the sidebar. That’s the stuff that people are seeking in the first place, probably what brought them to the page to begin with, so make that the stuff that is most obvious. These designs all seem to be well designed for people using Ruby already, but what you’d want is to design for those not yet using Ruby, to make it easy for them to get immersed.

5. Shrink the header. Unless I’m running at a huge resolution, then two-thirds of my page is wasted on headers and navigation and “Ruby is…” cruft, with very little content visible.

These are just my humble opinions. Please feel free to disagree.

Stunning! +1 to 10.1

+1 on going with the simpler, abstract logo.

It would be cool to have a random code example on the front page. You just can’t compress all cool Ruby features on one page.

Imagine all the people hitting Ctrl-R again and again to see more chunky Ruby ;)

I think it’s excellent. I like the first one, but they are both beautiful. Great work! It’s awesome seeing the progress from one design to the next.

I like these designs, but I do agree there is room for improvement and ToddG and Jason’s comments should be taken into consideration.

But there is no doubt these are great improvement over the current site.

Also regarding the code block, I would like to see simple << and >> links used to navigate between code snippets, rather than requiring a page reload. Though the starting fragment should be random. It would be best if it was a “Tip of the Day” sort of thing, with useful Ruby code that fits in that small space, instead of “Hello World!” style examples. In fact, that would be a damn good selling point for the language (“oh cool, look how easy it is to do X in Ruby.”) I could certainly come up with a couple nice snippets, and I know I’m not alone in that.

Also while a “magically resizing” code box has a cool factor, in reality I think it would be distracting and I think it best if the code box remained the same basic size and all code fragments had to fit in there (even if there was a lot of dead space for smaller fragments.)

Also agree with Jason re: the gradientitis. Much of the web has caught a case of the Mozilla.org/37signals-itis; in tiny doses it’s workable but it’s kind of like highlighting every line in a book when over-used.

And re: code samples, while a good idea, I’d plead to leave out some of the “tricky”, perl-like snippets which could be submitted to the obfuscated contest. Ruby’s syntax is likely to be a bit awkward-feeling to those new to it; no need to bash them over the head with one-liners. They’ll discover them eventually… (and it might scare away some good coders peeking in from python-land).

• Make a smallish browser window (640×480). How does it look? Can you still make sense of it?
• Make a largish browser window (1280×1024) Are you wasting the users screen estate with large areas of blank? You should let it expand to fill his desired browser size.
• View it in a text only browser like links or lynx. Can you still understand it?
• Set your browser font larger or smaller. Does it still work, or does it start spilling out of background boxes everywhere? Remember programmers are a fairly bookish bunch with bad eyesight, so we set our browser fonts large.
• Do you have a when created and last updated timestamp on every page?
• Validate the XHTML at w3.org

That theme looks fantastic. The sooner you get it on the main page, the better.

I wonder what it would look like if the code snippet were in a doggy-eared div (think “document” icon from the desktop metaphor)

Great stuff, guys!

ToddG: So, Ruby is a grassroots effort. We encompass hobbyists, enthusiasts, young learners, freelance coders as well as corporations. Which end of this spectrum do we cater to? Well, anyone we like. I would think our biggest interest is in attracting talented individuals, hoping to capture their attention. At least, that’s the slant I’d aim for.

Yes, we’ve worked on some abstract versions of the logo. We’ll make this a bigger priority. And we welcome any contributions.

The ”...best friend” line does feel translated from Japanese and I kind of dig that. It’s my prerogative to keep this slogan, but I’m hearing the talk on Ruby-Talk and in the comments here, so this sounds like something that warrants a vote.

I’ll defer to John, if he wants to answer other questions related to his design decisions.

Jason: Great comments. #4 esp. I think would could satisfy this by enlarging the Getting Started box and by replacing all the “READ MORE ” and “MORE” links with better indications of where they go to.

I’m surprised that more people like the version without the dark background. I must be a color junkie. Can we have starry Van Gogh strokes tiling in back?

Wow! That’s amazing! Great work!

I vote for the light colored version. The black on either side of the main page draws the eye away from the central content and vies with the code sample for attention.

Definitely, it’s a grassroots effort and a great one—my point was merely that the likely targets you mention are more flexible and open-minded than corporations – in the general sense. And i wasn’t even really reacting to any specific attributes of the site, just a comment or two putting down a “corporate” or similar look. In reality, a project like this has a bit of an impossible mission, in catering to both. I just put a bit more faith in the hobbyists, enthusiasts, young learners, freelance coders and figure the corporatists are the harder sell. As I said before, this comp is a vast improvement over the current scenario, and I’m just playin’ devil’s advocate trying to help fine-tune.

I think that either version would benefit from a 800×600 (640×480 is dead and they can horizontally scroll if they have to), but with a liquid layout that can scale up to use more horizontal space in the main section. I think as long as the dark background is kept minimal on the sides it doesn’t detract, but if it’s taking up significant amount of screen real estate cause the design is fixed for 800×600 then it could detract. 10.0 may work better for a liquid layout, so if that is the case then I would prefer that, but if 10.1 can be pulled off well in liquid form I think it would be much better visually

I guess maybe tone down the navigation gradient if the logo is changed. Personally I’d like to see a simplified version of this one created for print/whatever and leave this one (maybe tweaked a little) for screen. Seriously where are we going to see the logo in print? On a book cover probably which is capable of capturing this logo. I don’t think I’ll be adding a Ruby logo to my letterhead or business cards.

I think a well designed site will appeal to corporate suits just as much as hobbyists, the suits may not have design skills but that doesn’t mean they don’t appreciate a well designed website.

Looking good! I especially like that the ‘expensive’ logo is still there :)

“I think a well designed site will appeal to corporate suits just as much as hobbyists, the suits may not have design skills but that doesn’t mean they don’t appreciate a well designed website.”

I’m just sayin’ the groups often have different tastes and ideas of just what a “well-designed” site looks like. As long as this comes out with decent production values, and well put-together (as it appears it will) I think it’ll cover all bases. I was originally just trying to defend against insults to “the corporate look” but I’ve taken us far off track… sorry for that.

ToddG: Both the code block and blue gradients are stylistic choices.

I made the blue gradient bar span both columns because I liked the horizontal stacked feel that it created. In addition to that, it looks really sharp next to the red navigation. Also, I like the fact that it is a little unusual.

The rounded corners on the code block help offset it from the surrounding elements and draw attention to it. I kept two of the corners sharp because that continues the horizontal stacked impression that the bars help create.

Ah… well as long as you had a reason for your choices I can’t really bicker over subjective style points; I was just curious. Thanks for the clarification.

Pretty brochure for newbies, but do you guys just want a pretty brochure?

Why not, re-integrate the right hand column from Ruby Red 3.0?

Current info from the community should be given some priority in the layout. Yes, it’s important to be friendly to newcomers, but it’s also important to become a resource – and that means exposing the community on the home page as much as possible (give people a reason to come back over and over for updates – eg. slashdot, etc).

nice work. when I discover a new language and I get the impression that a hello world program requires more than a line or two of code (esp a scripting or agile language) I pass it by.

awesome design!

nice work. when I discover a new language and I get the impression that a hello world program requires more than a line or two of code (esp a scripting or agile language) I pass it by.

awesome design!

btw, the above accolades were not meant to be taken as sarcastic… I really think you guys are doing an amazing job. I just hope that the code sample is replaced with something more substantial…

great job guys.

Now instead of describing what I would like to have fixed, here’s how I think it could be improved:

http://www.intertech.com.uy/rubyhome/ruby-home.png

My main focus is keeping down the number of different font types that were used. Also simplifying the layout and making it a little bit less colourful whilst staying true to the intent of making it less reddish.

cheers

These are really nice and I especially like the vruz version. I was getting a bit of a blue overdose from the other ones but the lighter horizontal boxes saved me. I prefer the right bar from the others.

Suggestions: (1) make the code sample text instead of an image (vruz might have done?). The antialiased text looks a little weird amidst all the regular text, and besides, we all want to be able to cut-n-paste that code, right? (2) lose the “it’s easy”, “a new world”, etc. Just “Get Started”, “Explore”, “Participate” are fine. “Explore a new world” sounds like an ad for a theme park.

1. I really like the fancy logo, though I admit the ruby looks a little hollow. For what current or expected need will this logo be inappropriate/unreproducable? Can we just create a slightly simpler version for those instances?
2. I’d prefer more white and less blue, like the Ruby Red 3.0 design (I really like that design also).
3. I like the idea of some dynamic content on the page, like the top rubyforge downloads, or latest news.
4. I dislike the idea of one piece of code always on the front page (especially a 10 line hello world!). If code appeals to experienced programmers, it will freak out beginners, and if it appeals to newbies, others will get sick of it. If it was a random choice from a few snippets, and new or topical code snippets were put in, for instance when new features were added to ruby or the stdlib, then it might be cool. Otherwise, leave it out. Also, whilst I started programming with light text on a dark background, a lot of newer programmers might be more familiar with dark text on a light background.

Looks quite good! I like the lighter version better simply because I don’t see much function for the black side margins of the second version. A light (i.e. non-heavy) design without nonnecessary and possibly distracting elements is usually better usability-wise too.

If and when you still refine the design, concentrate on usability. For example, it would be great if all the pages would look good when printed too.

I think that the title/logo/seacrh bar at the top might take a bit too much space. The red ruby sure looks cute and sexy, but I wonder if you could use a bit smaller size of it? The same with the title. Although it could be ok on a front page, still remember that you will quite probably want to have lots of stuff right on the front page, and it sucks if you’ll have to roll the page down too much to find the information.

IMHO , the darker version is better. Adding contrast around the page helps keep the users eyes focus where we want them…

Other than that, I think it’s a nicely laid-out site … make it happen already!

1. How about displaying the current version of ruby prominently on the main page? It would make it nice and easy for people who come to the website once a month or so (like me) to tell whether they’re up to date.

2. “Twenty minutes” in that context should have a space, not a hyphen.

Hello? Phhhhh phhhhh is this thing on?

anyone?

analysis paralysis?

Hot. I do agree with whomsoever disagreed with the current hello world code sample. Lettuce show the language off, not turn the warmup into the pedant.

Regarding the header: it’s a careful balancing act between branding and low-res content display. Sweeping generalization, yes, but most developers use reasonable resolutions. (Also, a ‘skip to content’ link, while mildly asinine, does work. Even better, a cookied collapsing button that returns a vertically abbreviated version of the header.)

I love it the way it is. The ‘other-people’ eye just sees those two things. The gradients bother me not, and I preffer the dark backgrounded version.

Keep up the fantastic work.

Hi! Some news from anyone? John W. Long was optimistic here: http://rubyforge.org/pipermail/vit-discuss/2005-August/000202.html and one knows no news is good news, but… Need some help? :)

Like it!!

Oops, I meant to post this here earlier today, and attached it to “Round One” instead. Not that it’s any more likely to be read here, but this is the thread it belongs in…

I know I’m a latecomer, but here are some code samples:

# Prompt user for her name
print "What's your name? " 
name = gets.chomp

# Greet the user
3.times do
  puts "Hello, #{name}!" 
end

Shamelessly stolen from Io’s example code:

def bottle(n)
  case n
    when 0
      "no more bottles" 
    when 1
      "1 bottle" 
    else
  "#{n} bottles" 
  end
end

99.downto(1) do |i|
  puts "#{bottle(i)} of beer on the wall, #{bottle(i)} of beer." 
  puts "Take one down, pass it around, #{bottle(i-1)} of beer on the wall." 
end

I particularly like this one, it shows off a lot (everything is an object, open classes, inject loops, ranges). OTOH , the inject could make it too hard to read for an introduction to ruby>

class Integer
  def factorial
    (2..self).inject(1) do |fact, i|
      fact * i
    end
  end
end

# output 120
puts 5.factorial

I don’t know how that link got introduced into my previous comment. It wasn’t in the preview. Don’t bother clicking it, there’s nothing there.

Is this abandoned? What’s happening? I want the redesign now! :)

Any reason this just popped up in my RSS reader again?

People are commenting on it again.

It’s so quiet here. So, so quiet…

It’s now 2006. I want a new ruby-lang.org! I’ll be organizing a band of strong men with pitchforks if nothing happens soon…

John is posting shots of the new admin area.

I think the admin-interface shots above deserves a new blog post—the most recent post is from MAY 2005 ! :)

People! It will be done before Perl 6 is…what more do you want?!!