Gentoo Foundation Web Site Redesign Contest

[reisio]

[SVG: http://programmer-art.org/?page=gentoo

Yes, I've seen that. It is very nice, but still a reproduction.

[barrywardell]

I'm not sure, if there's another, more elegant way to solve this (XML / CSS maybe?). If not, well, maybe enhancing menus with Javascript is not really that bad at all

Have a look at this. It's an elegant, standards compliant way of doing a menu and it fails gracefully (even in text browsers the full menu is available). It uses pure HTML/CSS, and although it requires a small bit of Javascript, that is only as a workaround for Internet Explorer.

[dgt84]

Well, I thought I'd post my design here as well so that people can comment on it. It is actually similar to zeasy's design, which suprised me since this is the first time I've seen his/hers. I also used a slightly modified version of the simplification of the menus posted earlier in this thread. The menus can still of course be edited, so view it as an example of how they would look visually. The entire layout (including icons and all) was done in Inkscape 0.39-cvs and took a couple of days. Two public domain images are used (from the Open Clip Art Library). Hope somebody likes it and that I can get some feedback on it before I make the second page and submit it for the contest.

http://programmer-art.org/images/gentoo/new-gentoo.jpg

I've tried to make the page a bit more "user friendly" as can be seen in the image. I hope it's not too eye-candy-ish. Most of the colors and things can easily be done with CSS (and the rounded stuff can be done with CSS3, but sadly we need the spec to be completed and browsers to code support for the border-radius property before we can use that...)
As you'll notice the four links across the top are there because when I first came to the site, it took me a while to find more about Gentoo, how to download it, and how to install it. With those links, you can't miss it.

Let me know what you think

[zubauza]

Entrants should submit two images in PNG format. The first image should show a full mockup of the front page of www.gentoo.org. The second image should show a full mockup of the first page of the Gentoo Handbook.

does that mean we should submit two images with the complete content of these two pages (about 1204x2000 px) or just the first look at the design (about 1024x768 px)?

[zeasier]

How do you plan on doing the drop shadows for each layer? Doing them in tables makes for cludgy HTML. Doing them in layers is damned near impossible. Doing them as fixed size (with/height) drop shadows is god awful design.

I hope to submit a screen shot of a functioning html layout instead of just an image. This is because sometimes certain subtile compromises must be made to fit a layout to code. For now though, I don't see a point in rendering a html layout until people like it.

It sounds like there are already decent html/css people here in Gentoo. They'll choose the best 5 layouts keeping in mind that they may have to implement one of them. It seems it's only the graphic design work they are interested in. (Although, I'd prefer to write my own layout.)

It is actually similar to zeasy's design, which suprised me since this is the first time I've seen his/hers.

That doesn't suprise me, seeing how I planned on using your Lila icons, and how we discussed the navigation format earlier. Heh, I've even been pokeing around openclipart.org, but there's no way for me to prove that. The Lila icons are excelent, and a natural fit to the Gentoo web page. I was worried that some one else would post a Lila layout so I decided to share my own as soon as possible. Not that I want credit for the idea, but why take chances. Hopefully no else will be discoraged from making a Lila themed design. I don't beleive orginiality is a good enough reason to ignore a good idea. If there are any good ideas my work, I hope they will be imatated and improved by the other designers.

Speaking of which, where can one find the font you used on the site title next to the Gentoo logo?

As you'll notice the four links across the top are there because when I first came to the site, it took me a while to find more about Gentoo, how to download it, and how to install it. With those links, you can't miss it.

I like these links you have up there. The link text in the form of a question is a great idea. Perhaps the page is not considerate enough to people who don't know what Gentoo is. You can't depend on newbies to do anything, even click on a link. The front page must have some kind of introduction at the top of it. Also are you sure those links will fit nicely on a 800 px wide screen?

Your navigation menu to the left is nice but the links are cluttered, give them some space so they apear as separate items instead of one big string of text.

Finnaly be careful with the Gentoo logo. Good branding is consistent. It may not be such a good idea to use an alternate graphic for the logo.

The design overall is very good. It doesn't feel harsh and has a generous use of space. I would like to see how you would handle the other pages of the site.

[mjg]

I might as well post what i've thrown together.

http://www.csh.rit.edu/~neo/gentoo/gentoo-1.png

I went for minimalistic, not too flashy, and geared towards using the space provided to be productive more than elegant.

The menu system works as such:

the top bar are general categories (obviously, up for change with enough room to add more in the future). When mouse'd over, the lower bar changes to reflect the sub-categories that a user can choose from, again, keeping space for future additions. It aims towards keeping things grouped, not taking up too much of the page (obviously, content requires a lot of space, especially in other areas of the site). It would also stay out of the way of the handbook and the forum, making new pages easy to include into the new design.

The rest of the page is broken down into two spots...the content that everyone is concerned about, and the ads. The add area can be as small/large as is required by the number of ads at the time. The stories are broken down as usual, but stand out a little bit more so you can really focus on the content of the story than what's around it. At the bottom, is a larger version of the "Old News" that is currently cluttered on the side of the site. This will make it easier to find old news, or recently old news.

There is a general search on the top left, which allows the user to choose which section of the site they are searching, and what to search for. It looks a little small in the image, at least for me (resolution is high).

Any/all suggestions would be rocking. I do like though, that the public submissions thus far are all geared towards the same stuff. That's really good to see that we're all heading towards common goals.

--Mike

[reisio]

Any/all suggestions would be rocking.

You might want to include the purple 'g' logo at least once...probably by the 'gentoo linux' at top right, I guess.

I think a difference in background color between the main content area and the news boxes would be nice, too - even if it's just a matter of rgb 255 -> 250.

Also looks like you could afford to lose some of the padding around the news boxes.

[dg]

Here's my contribution:
http://home.myuw.net/dgerstma/weblog/index.php?p=27

And a screenshot:
http://home.myuw.net/dgerstma/designs/g ... design.png


Explanation from my blog entry:

This is simply a rough sketch for the main page. Other areas would probably benefit from a side-bar menu interface. This page was tested in Firefox v0.9.1 and IE 6.0, although IE doesn’t center the footer correctly for some odd reason.

The layout is table-less CSS, designed to be professional, attractive and somewhat clean. With the exception of the banner and some icons, all content was derived from the original site, and graphics were modified from existing logos and icons.

[Maedhros]

Here's my contribution:
http://home.myuw.net/dgerstma/weblog/index.php?p=27

And a screenshot:
http://home.myuw.net/dgerstma/designs/g ... design.png

Blimey, I'm very impressed! If only I could do web design like that!

A few points though:

• Having most of the page fixed width, except the top bar makes for a slightly odd effect - I think it should all be fixed width personally. You also might want to add some padding around the main content for those with small browser windows.
• The :hover link colour really doesn't work on white IMHO! It's great for the top menu, but not in the links on the rest of the page...

[charlieg]

Here's my contribution:
http://home.myuw.net/dgerstma/weblog/index.php?p=27

And a screenshot:
http://home.myuw.net/dgerstma/designs/g ... design.png

That is ffkking nice! Yowzas! That really sets the bar high.

Two big, big points though:

1. The ads are out-of-sight. That makes them useless, literally. Even in 1280x1024, I had to scroll down to see the ads.
2. "Purchase" combined with the corporate look makes it feel a bit non-free. You should either rename that "shop" or somehow emphasise that Gentoo is Free Software.

[dg]

Thanks for the comments and suggestions!

I made some minor revisions to my initial design, as seen here:
http://home.myuw.net/dgerstma/designs/g ... -rev2.html

Ads are now placed on the far right, the PURCHASE caption got changed to SHOP, and the contrast was increased on hover font color to make it stand out against the white background.

This design allows the ads to be visible immediately, however, it breaks down when the browser width drops below 800px whereupon the ads disappear behind the banner, before dominating the row.

[Given M. Sur]

Looks nice dg, I especially like the phrases "Extreme power comes from total configurability" and "And the support of a strong community".

[CharlieS]

VERY BADASS

Thanks for the comments and suggestions!

I made some minor revisions to my initial design, as seen here:
http://home.myuw.net/dgerstma/designs/g ... -rev2.html

Ads are now placed on the far right, the PURCHASE caption got changed to SHOP, and the contrast was increased on hover font color to make it stand out against the white background.

This design allows the ads to be visible immediately, however, it breaks down when the browser width drops below 800px whereupon the ads disappear behind the banner, before dominating the row.

[andyjeffries]

Layout 7

Alright, here's my first layout ready for public critique.

I like it...I like it a lot!!!!

However, I'd still say drop the logos by the side of the news items. Or develop more meaningful ones. I'm not slating Layout 7 because I know you got them from www.gentoo.org, what I mean to say is a Penguin and a G logo on concentric circles doesn't mean anything.

[andyjeffries]

Well, I thought I'd post my design here as well so that people can comment on it.

While I prefer the Layout 7 (Zeasy's?) design I think this is also better than the current site. The things I like about your design:

• The side menus

• The icons for news items (much more meaningful)

The things I don't like:

• The top banner, it seems to big and cartoony, it reduces the professionalism of the rest of the design

• Not a great fan of the dark purple wrapping round the right for the adverts, it makes it look too dark

But another design that's better than the current, so that's gotta be good!

[andyjeffries]

Thanks for the comments and suggestions!

I made some minor revisions to my initial design, as seen here:
http://home.myuw.net/dgerstma/designs/g ... -rev2.html

This now takes the biscuit as my favoute design!!! (In fact, let me know your postal address and I'll gladly send you a biscuit!!!)

Great work (shame about 800x600 viewers... That's really something that needs fixing. How about reducing the width of the intro image (with a slight jiggle) to be about 600px, have a column on the right for adverts the whole length of the page and reducing the number of columns below the intro image to (or going to a vertical layout instead of horizontal columns).

[mjg]

Thanks for the comments and suggestions!

I made some minor revisions to my initial design, as seen here:
http://home.myuw.net/dgerstma/designs/g ... -rev2.html

This now takes the biscuit as my favoute design!!! (In fact, let me know your postal address and I'll gladly send you a biscuit!!!)

Great work (shame about 800x600 viewers... That's really something that needs fixing. How about reducing the width of the intro image (with a slight jiggle) to be about 600px, have a column on the right for adverts the whole length of the page and reducing the number of columns below the intro image to (or going to a vertical layout instead of horizontal columns).

Agreed. That is an absolutely beautiful page, but at the same time keeping everything minimal. A few suggestions:

The large gentoo image in the center could be a lot smaller. Don't get me wrong, I love the image, but for loading time, and for usage of space...I think the space it takes up could be better used with the beautiful column layout you have created.

The menu system is tight, exactly what I was thinking about (as far as grouping goes). Do you have any plans to increase functionality with that? (drop downs, etc to expand the sub-categories). I think that would put the icing on the cake for that design. Do you have anything worked up for the handbook?

I absolutely LOVE the fact that it is tableless. CSS positioning is crucial (in my opinion). The only problem with it is that the ads scroll behind the rest of the page in IE when you shrink the browser, and do the same in Mozilla except that the entire page goes blank if you shrink it too far.

A little picky thing, but the "About" button on the right of the menu doesn't have an ending point.

And by the way...slick move with the navbar being done through CSS

--Mike

[nadamsieee]

This design allows the ads to be visible immediately, however, it breaks down when the browser width drops below 800px whereupon the ads disappear behind the banner, before dominating the row.

Most of the offending image is text... So why not just make that element out of... TEXT!

Other than that, the page looks great.

By the way, where is the online package database??

[reisio]

By the way, where is the online package database??

We are announcing a public contest to redesign our various web sites, including www.gentoo.org, forums.gentoo.org, packages.gentoo.org and other public sites.

[dg]

Ok, here's another revision with a CSS drop down menu:
http://home.myuw.net/dgerstma/designs/g ... -rev3.html

The content of the menus can easily be adjusted, I just chose links from the current Gentoo main page.

The menu is all CSS, however browsers which do not permit arbitrary hover tags (IE) need a bit of javascript to modify the DOM. It's not necessary for Gecko. Since no rendering is being done, the JS is pretty lite and is just a single function that's executed on load.

The background will not change on non-conforming browsers (again due to the hover tag), and thus the background of the menus must be the same as the main bar.

I'll post more revisions and other pages (handbook, etc) when I get a chance.

Cheers.
-dg

[andyjeffries]

Ok, here's another revision with a CSS drop down menu:
http://home.myuw.net/dgerstma/designs/g ... -rev3.html

The content of the menus can easily be adjusted, I just chose links from the current Gentoo main page.

The menu is all CSS, however browsers which do not permit arbitrary hover tags (IE) need a bit of javascript to modify the DOM. It's not necessary for Gecko. Since no rendering is being done, the JS is pretty lite and is just a single function that's executed on load.

The background will not change on non-conforming browsers (again due to the hover tag), and thus the background of the menus must be the same as the main bar.

While I'm all for pure CSS menus, that one is a bit unintuitive. I use Firefox 0.9.1 and when I hover over one of the menu items the colour changes (suggesting it's active to click) but you have to actually hover over the text to click it.

I'm sure you can do this, it just depends what element you wrap the <a> tags round. To be honest, it's been a while since I've played with CSS to that extent (but I do remember getting round it previously).

[nadamsieee]

By the way, where is the online package database??

We are announcing a public contest to redesign our various web sites, including www.gentoo.org, forums.gentoo.org, packages.gentoo.org and other public sites.

I was refering to the menu on the dg's design. The rev2 version seems entirely geared towards new users (not good); the real Gentoo site has to accomodate all users, and experienced Gentoo'ers often want to use the website to search for packages.

His new revision (with CCS drop down menus) takes care of that, although he still needs to do something with the obnoxiously large image.

It would also be nice if the rest of the page would shrink and grow to fit various monitor/resolution combinations.

[barrywardell]

I'm sure you can do this, it just depends what element you wrap the <a> tags round.

This can be acheived very easily by setting the <a> tags to be block elements

Code: Select all

display:block;

. Of course, this doesn't work in IE. You have to use a hack:

Code: Select all

/* Fix IE. Hide from IE Mac \*/
* html ul#nav li a { height: 1%; }
/* End */

Also, the background colour hover effect can be achieved in IE using the following CSS:

Code: Select all

#nav li.over
{ 
	background: url("navbar-hover.gif") repeat-x 20px; 
}

[zeroK]

Just some basic ideas. Nothing really worth submitting
http://zerokspot.com/designs/gentoo-02/

[NitroPye]

A bad example for using Javascript is an expandable menu structure. This would lead to a site where it's not possible anymore to navigate the site if Javascript is disabled.

A good example of a properly failing expandable menu structure, it only uses javascript to help ie6:win thru some of the tough spots .

http://www.alistapart.com/articles/dropdowns
http://www.alistapart.com/articles/horizdropdowns/